.viz-root {
    color-scheme: light;
    --surface-1:#fcfcfb; --page:#f9f9f7;
    --ink-1:#0b0b0b; --ink-2:#52514e; --ink-3:#898781;
    --grid:#e1e0d9; --axis:#c3c2b7; --ring:rgba(11,11,11,.10);
    --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300;
    --s7:#4a3aa7; --s8:#e34948;
    --rag-red:#d03b3b; --rag-orange:#ec835a; --rag-amber:#fab219; --rag-amber2:#c98500;
    --rag-green:#0ca30c; --rag-grey:#898781; --rag-new:#2a78d6;
    --seq450:#2a78d6;
  }
  @media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) .viz-root {
      color-scheme: dark;
      --surface-1:#1a1a19; --page:#0d0d0d;
      --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-3:#898781;
      --grid:#2c2c2a; --axis:#383835; --ring:rgba(255,255,255,.10);
      --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300;
      --s7:#9085e9; --s8:#e66767;
      --rag-red:#d03b3b; --rag-orange:#ec835a; --rag-amber:#fab219; --rag-amber2:#c98500;
      --rag-green:#0ca30c; --rag-grey:#898781; --rag-new:#3987e5;
      --seq450:#3987e5;
    }
  }
  * { box-sizing: border-box; margin: 0; }
  body.viz-root {
    background: var(--page); color: var(--ink-1);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    padding: 24px; font-size: 14px;
  }
  header.top { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:4px; }
  .brand-logo { height:28px; width:auto; display:block; }
  h1 { font-size: 20px; font-weight: 650; }
  .asof { color: var(--ink-3); font-size: 13px; }
  .refresh { margin-left:auto; font:inherit; font-size:12.5px; padding:4px 14px; border-radius:999px; cursor:pointer;
    background:transparent; color:var(--ink-2); border:1px solid var(--ring); }
  .refresh:hover { border-color: var(--s1); color: var(--s1); }
  #btn-export { margin-left:8px; }
  .refresh:disabled { opacity:.6; cursor:default; }
  #state { padding:48px 0; text-align:center; color:var(--ink-2); font-size:15px; }
  #state.err { color: var(--critical, #d03b3b); }
  .grid { display:grid; gap:16px; grid-template-columns: repeat(12, 1fr); margin-top:16px; }
  .card { background: var(--surface-1); border:1px solid var(--ring); border-radius:10px; padding:16px 18px; min-width:0; }
  .card h2 { font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:10px; }
  .tiles { grid-column: span 12; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
  .tile .lbl { font-size:12.5px; color:var(--ink-2); }
  .tile .val { font-size:34px; font-weight:600; margin-top:2px; }
  .tile .sub { font-size:12px; color:var(--ink-3); margin-top:2px; }
  .hero .val { font-size:48px; }
  .span6 { grid-column: span 6; } .span12 { grid-column: span 12; }
  @media (max-width: 900px){ .span6{ grid-column: span 12; } }
  svg text { font-family: inherit; }
  .legend { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:8px; font-size:12.5px; color:var(--ink-2); align-items:center; }
  .legend .key { display:inline-flex; align-items:center; gap:6px; }
  .sw { width:12px; height:12px; border-radius:3px; display:inline-block; }
  .lk { width:14px; height:2px; display:inline-block; }
  #tooltip { position:fixed; pointer-events:none; z-index:10; display:none;
    background:var(--surface-1); border:1px solid var(--ring); border-radius:8px;
    box-shadow:0 4px 16px rgba(0,0,0,.12); padding:8px 11px; font-size:12.5px; max-width:340px; }
  #tooltip .t-title { color:var(--ink-3); font-size:11.5px; margin-bottom:3px; }
  #tooltip .row { display:flex; align-items:center; gap:7px; margin-top:2px; }
  #tooltip .row b { font-size:13px; }
  #tooltip .row span { color:var(--ink-2); }
  table { width:100%; border-collapse:collapse; font-size:13px; }
  th { text-align:left; color:var(--ink-3); font-weight:600; font-size:12px; padding:6px 8px; border-bottom:1px solid var(--grid); }
  td { padding:6px 8px; border-bottom:1px solid var(--grid); vertical-align:top; }
  td.num, th.num { font-variant-numeric: tabular-nums; }
  .pill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:11.5px; border:1px solid var(--ring); color:var(--ink-2); white-space:nowrap; }
  .filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
  .filters button { font:inherit; font-size:12.5px; padding:4px 12px; border-radius:999px; cursor:pointer;
    background:transparent; color:var(--ink-2); border:1px solid var(--ring); }
  .filters button[aria-pressed="true"] { background:var(--s1); color:#fff; border-color:var(--s1); }
  .src { grid-column: span 12; color:var(--ink-3); font-size:12px; }