.thi-visual-suite {
  margin: 4px 0 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}

.thi-visual-suite-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}

.thi-visual-suite-head h2 { margin: 3px 0 6px; font-size: 21px; }
.thi-visual-suite-head p { max-width: 760px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.thi-visual-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.thi-visual-tab {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--surface);
  color: var(--muted);
  font: 700 10px/1 var(--mono);
  letter-spacing: .45px;
  text-transform: uppercase;
  cursor: pointer;
}
.thi-visual-tab.active { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.thi-visual-panel { padding: 18px; }
.thi-visual-controls { display: grid; grid-template-columns: minmax(230px, 1.6fr) minmax(150px, .8fr) minmax(150px, .8fr); gap: 10px; margin-bottom: 14px; }
.thi-visual-control { display: grid; gap: 6px; }
.thi-visual-control label { color: var(--muted); font: 700 9px/1.3 var(--mono); letter-spacing: .65px; text-transform: uppercase; }
.thi-visual-control select {
  width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 11px; background: var(--surface); color: var(--text); font: 700 11px/1.2 var(--mono);
}
.thi-explorer-frame { position: relative; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); overflow: hidden; }
.thi-explorer-svg { display: block; width: 100%; height: auto; min-height: 420px; }
.thi-explorer-grid { stroke: var(--border); stroke-width: 1; opacity: .8; }
.thi-explorer-median { stroke: var(--muted-light); stroke-width: 1.4; stroke-dasharray: 7 6; }
.thi-explorer-axis { fill: var(--muted); font: 700 11px var(--mono); }
.thi-explorer-axis-title { fill: var(--text); font: 800 12px var(--mono); letter-spacing: .35px; }
.thi-explorer-quadrant { fill: var(--muted-light); font: 800 11px var(--mono); letter-spacing: 1.2px; opacity: .62; }
.thi-explorer-point { cursor: pointer; outline: none; }
.thi-explorer-point circle { fill: var(--surface); stroke: var(--border-strong, var(--muted-light)); stroke-width: 1.5; }
.thi-explorer-point image { pointer-events: none; }
.thi-explorer-point text { pointer-events: none; fill: var(--text); font: 800 8px var(--mono); }
.thi-explorer-point:hover circle,
.thi-explorer-point:focus-visible circle,
.thi-explorer-point.selected circle { stroke: var(--green); stroke-width: 3; fill: var(--green-soft); }
.thi-chart-tooltip {
  position: absolute; z-index: 8; width: min(290px, calc(100% - 20px)); padding: 12px 13px;
  transform: translate(-50%, calc(-100% - 14px)); pointer-events: none;
  border: 1px solid var(--border-strong, var(--border)); border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, transparent); color: var(--text);
  box-shadow: 0 14px 34px rgba(0,0,0,.24); backdrop-filter: blur(8px);
}
.thi-chart-tooltip[hidden] { display: none; }
.thi-chart-tooltip.is-below { transform: translate(-50%, 14px); }
.thi-chart-tooltip-title { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.thi-chart-tooltip-title strong { font-size:13px; }
.thi-chart-tooltip-title span { color:var(--green); font:800 10px var(--mono); white-space:nowrap; }
.thi-chart-tooltip small { display:block; margin-top:4px; color:var(--muted); font:600 9px/1.4 var(--mono); }
.thi-chart-tooltip dl { display:grid; gap:6px; margin:9px 0 7px; }
.thi-chart-tooltip dl div { display:flex; justify-content:space-between; gap:14px; }
.thi-chart-tooltip dt { color:var(--muted); font:700 9px/1.3 var(--mono); }
.thi-chart-tooltip dd { margin:0; text-align:right; font:800 10px/1.3 var(--mono); }
.thi-explorer-detail {
  display: grid; grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(110px, .6fr));
  border-top: 1px solid var(--border); background: var(--surface);
}
.thi-explorer-detail > div { min-width: 0; padding: 13px 14px; border-right: 1px solid var(--border); }
.thi-explorer-detail > div:last-child { border-right: 0; }
.thi-explorer-detail span { display: block; color: var(--muted); font: 700 9px/1.3 var(--mono); letter-spacing: .55px; text-transform: uppercase; }
.thi-explorer-detail strong { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; color: var(--text); font: 800 14px/1.25 var(--mono); }
.thi-explorer-method { margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.thi-history-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; }
.thi-history-chart { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); overflow: hidden; }
.thi-history-svg { display: block; width: 100%; height: auto; min-height: 330px; }
.thi-history-line { fill: none; stroke: var(--green); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.thi-history-dot { fill: var(--surface); stroke: var(--green); stroke-width: 3; }
.thi-history-rank { fill: var(--text); font: 800 10px var(--mono); }
.thi-history-side { display: grid; gap: 10px; align-content: start; }
.thi-history-card { border: 1px solid var(--border); border-radius: 10px; padding: 13px; background: var(--surface); }
.thi-history-card span { color: var(--muted); font: 700 9px/1.3 var(--mono); letter-spacing: .55px; text-transform: uppercase; }
.thi-history-card strong { display: block; margin-top: 7px; color: var(--text); font: 800 18px/1 var(--mono); }
.thi-history-card small { display: block; margin-top: 6px; color: var(--muted); font: 600 10px/1.4 var(--mono); }
.thi-visual-empty { padding: 36px 18px; text-align: center; color: var(--muted); font-size: 12px; }

@media (max-width: 760px) {
  .thi-visual-suite-head { display: grid; }
  .thi-visual-tabs { width: 100%; }
  .thi-visual-tab { flex: 1 1 0; }
  .thi-visual-panel { padding: 12px; }
  .thi-visual-controls { grid-template-columns: 1fr; }
  .thi-explorer-svg { min-height: 360px; }
  .thi-explorer-axis { font-size: 18px; }
  .thi-explorer-axis-title { font-size: 18px; }
  .thi-explorer-quadrant { font-size: 15px; }
  .thi-explorer-point circle { r: 14px; }
  .thi-explorer-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thi-explorer-detail > div:nth-child(2) { border-right: 0; }
  .thi-explorer-detail > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .thi-history-layout { grid-template-columns: 1fr; }
  .thi-history-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .thi-visual-suite-head { padding: 14px; }
  .thi-visual-tab { padding: 8px 7px; font-size: 9px; }
  .thi-explorer-svg { min-height: 330px; }
  .thi-history-side { grid-template-columns: 1fr; }
}