:root { color-scheme: dark; --bg:#07111f; --panel:#0d1b2d; --line:#20324a; --text:#edf4ff; --muted:#91a4bd; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 20% 0,#132842 0,var(--bg) 42%); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { width:min(1500px,100%); margin:auto; padding:clamp(20px,4vw,56px); }
header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.eyebrow { margin:0 0 7px; color:#5de1b1; font-size:12px; font-weight:800; letter-spacing:.18em; }
h1 { margin:0; font-size:clamp(28px,4vw,48px); letter-spacing:-.035em; }
#subtitle { margin:8px 0 0; color:var(--muted); }
.live { flex:none; color:#b9c9dc; font-size:13px; }
.live span { display:inline-block; width:9px; height:9px; margin-right:7px; border-radius:50%; background:#38d996; box-shadow:0 0 0 6px rgb(56 217 150 / 12%); }
.panel { background:linear-gradient(180deg,rgb(17 34 55 / 96%),rgb(10 24 41 / 96%)); border:1px solid #223853; border-radius:18px; box-shadow:0 24px 80px rgb(0 0 0 / 28%); overflow:hidden; }
.legend { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; border-bottom:1px solid var(--line); background:var(--line); }
.legend-item { min-width:0; padding:15px 16px; border:0; border-radius:0; background:#0d1b2d; color:inherit; font:inherit; text-align:left; cursor:pointer; transition:background .16s ease,box-shadow .16s ease,opacity .16s ease; -webkit-tap-highlight-color:transparent; }
.legend-item:hover { background:#12243a; }
.legend-item:focus-visible { position:relative; z-index:1; outline:2px solid #8fbaff; outline-offset:-3px; }
.legend-item.is-selected { background:#142a43; box-shadow:inset 0 -3px 0 var(--series-color); }
.legend-item.is-muted { opacity:.48; }
.legend-name { display:flex; align-items:center; gap:8px; color:#b7c7da; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.swatch { width:17px; height:3px; flex:none; border-radius:3px; }
.legend-value { display:flex; align-items:baseline; gap:7px; margin-top:5px; font-size:22px; font-weight:750; font-variant-numeric:tabular-nums; }
.legend-roi { font-size:11px; font-weight:650; color:inherit; }
.legend-detail { color:#71869f; font-size:11px; }
.chart-wrap { position:relative; height:min(68vh,700px); min-height:420px; padding:14px 14px 4px; }
canvas { width:100%; height:100%; display:block; }
.tooltip { position:absolute; pointer-events:none; padding:8px 10px; border:1px solid #38506d; border-radius:8px; background:#07111feF; color:#eaf2fc; font-size:12px; box-shadow:0 8px 28px #0008; white-space:nowrap; transform:translate(10px,-50%); }
.footer-row { display:flex; justify-content:space-between; gap:16px; padding:12px 18px 15px; color:#71869f; font-size:11px; border-top:1px solid var(--line); }
.error { color:#ff9d9d; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(100%,420px); padding:32px; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:0 24px 70px rgb(0 0 0 / 28%); }
.login-card h1 { margin:6px 0 4px; font-size:clamp(26px,5vw,36px); }
.login-subtitle { margin:0 0 24px; color:var(--muted); }
.login-card form { display:grid; gap:16px; }
.login-card label:not(.remember) { display:grid; gap:7px; color:var(--muted); font-size:14px; }
.login-card input:not([type="checkbox"]) { width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--text); font:inherit; }
.login-card input:focus { outline:2px solid #5de1b1; outline-offset:2px; }
.remember { display:flex; align-items:center; gap:9px; color:var(--muted); user-select:none; }
.remember input { accent-color:#5de1b1; }
.login-card button { padding:12px 16px; border:0; border-radius:9px; background:#2563eb; color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.login-error { padding:10px 12px; border-radius:8px; background:rgb(220 38 38 / 14%); color:#fca5a5; }
@media (max-width:980px) {
  .legend { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px) {
  main { padding:18px 10px; }
  header { align-items:flex-start; flex-direction:column; gap:12px; padding:0 7px; }
  .legend { grid-template-columns:repeat(2,1fr); }
  .chart-wrap { min-height:460px; padding:8px 2px 2px; }
  .footer-row { flex-direction:column; gap:5px; }
}

/* Compact cross-system navigation. External CSS required by CSP. */
.system-switcher{display:flex;align-items:center;gap:5px;overflow-x:auto;max-width:100%;padding:0 0 8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;}
.system-switcher a{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:32px;padding:4px 11px;border:1px solid var(--border,var(--line,#20324a));border-radius:8px;color:var(--muted,#91a4bd);background:transparent;font:600 12px/1.2 inherit;font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;}
.system-switcher a:hover{color:var(--accent,#6aa9ff);border-color:var(--accent,#6aa9ff);}
.system-switcher a[aria-current="page"]{color:var(--accent,#6aa9ff);border-color:var(--accent,#6aa9ff);background:color-mix(in srgb,var(--accent,#6aa9ff) 12%,transparent);}
.system-switcher a:focus-visible{outline:2px solid var(--accent,#6aa9ff);outline-offset:2px;}
.system-switcher-wrap{min-width:0;}
@media(max-width:480px){.system-switcher{gap:4px;}.system-switcher a{padding:4px 8px;}}