:root {
  color-scheme: dark;
  --bg: #0c1013;
  --surface: #12181c;
  --surface-2: #182126;
  --surface-3: #1d2930;
  --border: #28363d;
  --border-soft: #1e292f;
  --text: #edf3f4;
  --muted: #91a2aa;
  --muted-2: #64757e;
  --green: #52d49c;
  --green-bg: #12382d;
  --red: #ff7777;
  --red-bg: #3c2024;
  --amber: #e7b95b;
  --amber-bg: #3b301a;
  --cyan: #59c1d9;
  --cyan-bg: #12323b;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--text); background: var(--bg); font: 14px/1.45 var(--font); letter-spacing: 0; }
button, input { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
.hidden { display: none !important; }

.topbar { position: sticky; top: 0; z-index: 10; min-height: 68px; padding: 12px clamp(16px, 3vw, 42px); border-bottom: 1px solid var(--border); background: rgba(12, 16, 19, .97); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand-block, .topbar-actions, .live-state, .stream-state { display: flex; align-items: center; }
.brand-block { gap: 12px; }
.brand-block h1, .brand-block p, .section-heading h2, .section-heading p, footer { margin: 0; }
.brand-block h1 { font-size: 18px; line-height: 1.2; }
.brand-block p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.brand-mark { width: 34px; height: 34px; border: 1px solid #2d5a63; border-radius: 7px; background: #10262b; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px; }
.brand-mark span { border-radius: 2px; background: var(--cyan); }
.brand-mark span:last-child { background: var(--green); transform: translateY(5px); }
.topbar-actions { gap: 12px; color: var(--muted); white-space: nowrap; }
.live-state { gap: 7px; }
.stream-state { gap: 7px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(231, 185, 91, .13); }
.live-state.online .status-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(82, 212, 156, .13); }
.live-state.error .status-dot { background: var(--red); box-shadow: 0 0 0 3px rgba(255, 119, 119, .13); }
.stream-state.online .status-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(82, 212, 156, .13); }
.stream-state.error .status-dot { background: var(--amber); box-shadow: 0 0 0 3px rgba(231, 185, 91, .13); }
.last-updated, .result-meta { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.icon-button, .outline-button, .primary-button { border: 1px solid var(--border); border-radius: 6px; color: var(--text); background: var(--surface-2); }
.icon-button { width: 36px; height: 36px; font-size: 21px; line-height: 1; }
.outline-button { height: 36px; padding: 0 11px; }
.icon-button:hover, .outline-button:hover { border-color: var(--cyan); background: var(--surface-3); }
.icon-button.loading { animation: spin .8s linear infinite; }

main { width: 100%; }
.summary-band { padding: 22px clamp(16px, 3vw, 42px); border-bottom: 1px solid var(--border-soft); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.summary-metric { padding: 0 24px; border-left: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 4px; }
.summary-metric:first-child { padding-left: 0; border-left: 0; }
.summary-metric span, .metric-grid span, .risk-line span { color: var(--muted); font-size: 12px; }
.summary-metric strong { font-size: 23px; font-variant-numeric: tabular-nums; }
.tone-green { color: var(--green); }.tone-amber { color: var(--amber); }.tone-cyan { color: var(--cyan); }
.summary-band { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.discovery-band { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(330px, .8fr); border-bottom: 1px solid var(--border-soft); }
.discovery-pane { min-width: 0; border-right: 1px solid var(--border-soft); }
.discovery-list { min-height: 58px; padding: 0 clamp(16px, 2.5vw, 32px) 16px; display: flex; gap: 7px; align-items: flex-start; overflow-x: auto; }
.discovery-list button { flex: 0 0 auto; min-width: 158px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 5px; color: var(--text); background: var(--surface); display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; }
.discovery-list button:hover { border-color: var(--cyan); }.discovery-list button span { color: var(--muted); font-size: 11px; }.discovery-list button .positive { color: var(--green); }.discovery-list button .negative { color: var(--red); }
.calibration-values { padding: 0 22px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.calibration-values div { display: flex; justify-content: space-between; gap: 8px; }.calibration-values span { color: var(--muted); font-size: 11px; }.calibration-values strong { font-size: 12px; font-variant-numeric: tabular-nums; }

.toolbar { min-height: 64px; padding: 14px clamp(16px, 3vw, 42px); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 16px; }
.tabs { display: flex; gap: 4px; }
.tab { border: 1px solid transparent; border-radius: 5px; padding: 7px 12px; color: var(--muted); background: transparent; }
.tab:hover, .tab.active { border-color: var(--border); color: var(--text); background: var(--surface-2); }
.tab.active { box-shadow: inset 0 -2px 0 var(--cyan); }
.search-box { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.search-box input { width: 160px; height: 34px; padding: 0 9px; border: 1px solid var(--border); border-radius: 5px; color: var(--text); background: var(--surface); outline: none; }
.search-box input:focus { border-color: var(--cyan); }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); border-bottom: 1px solid var(--border-soft); }
.table-section, .detail-section, .alerts-section, .outcomes-section { min-width: 0; }
.table-section { border-right: 1px solid var(--border-soft); }
.section-heading { min-height: 64px; padding: 16px clamp(16px, 2.5vw, 32px); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading h2 { font-size: 15px; }.section-heading p { margin-top: 2px; color: var(--muted); font-size: 12px; }
.section-badge { padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); background: var(--surface); font-size: 11px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 850px; }
th, td { padding: 11px 12px; border-top: 1px solid var(--border-soft); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
th { color: var(--muted-2); font-size: 11px; font-weight: 500; }
th:first-child, td:first-child { padding-left: clamp(16px, 2.5vw, 32px); text-align: left; }
th:last-child, td:last-child { padding-right: clamp(16px, 2.5vw, 32px); }
tbody tr { cursor: pointer; }.candidate-row:hover, .candidate-row.selected { background: #152127; }
.symbol-cell { display: flex; align-items: center; gap: 8px; }.symbol-cell strong { font-size: 13px; }.symbol-cell small { color: var(--muted-2); font-size: 10px; }
.level-badge { display: inline-block; min-width: 38px; padding: 3px 6px; border-radius: 4px; text-align: center; font-size: 11px; }
.level-trigger { color: var(--green); background: var(--green-bg); }.level-setup { color: var(--amber); background: var(--amber-bg); }.level-watch { color: var(--cyan); background: var(--cyan-bg); }.level-neutral { color: var(--muted); background: var(--surface-3); }
.event-badge { display: inline-block; min-width: 58px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px; color: var(--cyan); background: var(--cyan-bg); text-align: center; font-size: 11px; white-space: nowrap; }
.score { font-weight: 700; }.positive { color: var(--green); }.negative { color: var(--red); }.muted { color: var(--muted); }
.empty-row { padding: 36px 16px; color: var(--muted-2); text-align: center !important; }

.detail-section { min-height: 620px; background: var(--surface); }
.detail-empty { min-height: 620px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--muted); }
.detail-empty strong { color: var(--text); font-size: 14px; }.detail-empty span:last-child { font-size: 12px; }.empty-mark { color: var(--cyan); font-size: 28px; font-weight: 300; }
#detailContent { padding: 20px 22px 28px; }.detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.detail-heading h2 { margin: 9px 0 0; font-size: 24px; letter-spacing: .02em; }.detail-score { color: var(--green); font-size: 23px; font-variant-numeric: tabular-nums; }
.tag-list { min-height: 28px; margin: 14px 0 16px; display: flex; flex-wrap: wrap; gap: 5px; }.tag { padding: 4px 7px; border: 1px solid #28505b; border-radius: 4px; color: var(--cyan); background: var(--cyan-bg); font-size: 11px; }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border-soft); }.metric-grid div { min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 2px; }.metric-grid div:nth-child(odd) { padding-right: 10px; }.metric-grid strong { overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-variant-numeric: tabular-nums; }
.chart-block { margin-top: 20px; }.chart-label { margin-bottom: 7px; display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }.chart-label span:last-child { color: var(--muted-2); font-variant-numeric: tabular-nums; }
canvas { display: block; width: 100%; height: 150px; border: 1px solid var(--border-soft); background: #0e1518; }
.risk-line { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 4px; }.risk-line strong { color: var(--red); font-size: 12px; font-weight: 500; }

.outcomes-section { border-bottom: 1px solid var(--border-soft); }.outcome-table { min-width: 880px; }.outcome-table td { text-align: left; }.outcome-table td:first-child { width: 130px; }.outcome-table small { margin-top: 2px; color: var(--muted-2); display: block; font-size: 10px; }
.alerts-section { padding-bottom: 8px; }.alert-list { padding: 0 clamp(16px, 2.5vw, 32px) 18px; }.alert-row { padding: 12px 0; border-top: 1px solid var(--border-soft); display: grid; grid-template-columns: 100px 90px 1fr; gap: 12px; align-items: center; }.alert-row time { color: var(--muted-2); font-size: 12px; font-variant-numeric: tabular-nums; }.alert-row p { margin: 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
footer { padding: 16px clamp(16px, 3vw, 42px); display: flex; justify-content: space-between; color: var(--muted-2); font-size: 11px; }

.login-layer { position: fixed; inset: 0; z-index: 100; background: #0c1013; display: grid; place-items: center; }.login-form { width: min(360px, calc(100% - 32px)); padding: 28px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }.login-form .brand-mark { margin-bottom: 8px; }.login-form h1 { margin: 0 0 12px; font-size: 19px; }.login-form label { color: var(--muted); font-size: 12px; }.login-form input { height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 5px; color: var(--text); background: var(--bg); outline: none; }.login-form input:focus { border-color: var(--cyan); }.primary-button { height: 40px; margin-top: 4px; border-color: #34777c; color: #dff9f1; background: #17504b; }.primary-button:hover { background: #1d645d; }.form-error { min-height: 18px; margin: 0; color: var(--red); font-size: 12px; }

@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1100px) { .workspace { grid-template-columns: minmax(0, 1fr) 360px; }.summary-band { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 0; }.summary-metric:nth-child(4) { padding-left: 0; border-left: 0; } }
@media (max-width: 820px) { .topbar { align-items: flex-start; }.topbar-actions { flex-wrap: wrap; justify-content: flex-end; gap: 7px; }.last-updated { display: none; }.workspace { display: block; }.table-section { border-right: 0; border-bottom: 1px solid var(--border-soft); }.detail-section { min-height: 0; }.detail-empty { min-height: 300px; }.discovery-band { display: block; }.discovery-pane { border-right: 0; border-bottom: 1px solid var(--border-soft); }.summary-band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }.summary-metric:nth-child(odd) { padding-left: 0; border-left: 0; }.toolbar { flex-wrap: wrap; }.search-box { margin-left: 0; }.result-meta { margin-left: auto; } }
@media (max-width: 520px) { .brand-block p { display: none; }.outline-button { padding: 0 8px; font-size: 12px; }.summary-band { padding-top: 17px; padding-bottom: 17px; }.summary-metric strong { font-size: 20px; }.toolbar { gap: 9px; }.tabs { width: 100%; }.tab { flex: 1; padding-left: 5px; padding-right: 5px; }.search-box { width: 100%; }.search-box input { flex: 1; width: auto; }.result-meta { display: none; }#detailContent { padding-left: 16px; padding-right: 16px; }.alert-row { grid-template-columns: 80px 58px 1fr; gap: 7px; }.alert-row p { white-space: normal; }footer { flex-direction: column; gap: 5px; } }