.viz-root{color-scheme:light;--bg:#f4f4f2;--surface-1:#fcfcfb;--surface-2:#f0efec;--line:#e2e1dc;
  --text-primary:#0b0b0b;--text-secondary:#52514e;--text-muted:#7a7974;--accent:#2a78d6;
  --series-1:#2a78d6;--series-2:#eb6834;--series-3:#1baf7a;--series-4:#eda100;
  --seq-1:#cde2fb;--seq-2:#9ec5f4;--seq-3:#6da7ec;--seq-4:#3987e5;--seq-5:#256abf;--seq-6:#184f95;--seq-7:#0d366b;
  --good:#0ca30c;--warning:#fab219;--serious:#ec835a;--critical:#d03b3b;--grid:#e9e8e3}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .viz-root{color-scheme:dark;--bg:#121211;
  --surface-1:#1a1a19;--surface-2:#242422;--line:#33332f;--text-primary:#f0efec;--text-secondary:#c3c2b7;--text-muted:#8f8e86;
  --accent:#3987e5;--series-1:#3987e5;--series-2:#d95926;--series-3:#199e70;--series-4:#c98500;--grid:#2c2c29;
  --seq-1:#104281;--seq-2:#184f95;--seq-3:#1c5cab;--seq-4:#2a78d6;--seq-5:#5598e7;--seq-6:#86b6ef;--seq-7:#b7d3f6}}
:root[data-theme="dark"] .viz-root{color-scheme:dark;--bg:#121211;--surface-1:#1a1a19;--surface-2:#242422;--line:#33332f;
  --text-primary:#f0efec;--text-secondary:#c3c2b7;--text-muted:#8f8e86;--accent:#3987e5;--series-1:#3987e5;
  --series-2:#d95926;--series-3:#199e70;--series-4:#c98500;--grid:#2c2c29;
  --seq-1:#104281;--seq-2:#184f95;--seq-3:#1c5cab;--seq-4:#2a78d6;--seq-5:#5598e7;--seq-6:#86b6ef;--seq-7:#b7d3f6}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text-primary)}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.muted{color:var(--text-muted);font-size:12px}
.top{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:10px 18px;background:var(--surface-1);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand a{font-weight:700;font-size:16px;color:var(--text-primary)}
nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
nav a{padding:6px 10px;border-radius:8px;color:var(--text-secondary)} nav a.on{background:var(--surface-2);color:var(--text-primary);font-weight:600}
nav a:hover{text-decoration:none;background:var(--surface-2)}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--surface-1);color:var(--text-primary);border-radius:8px;padding:5px 10px}
button.ghost{background:transparent} button.on{background:var(--surface-2);font-weight:600}
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:10px 18px;background:var(--surface-1);border-bottom:1px solid var(--line);font-size:13px;color:var(--text-secondary)}
select,input{font:inherit;color:var(--text-primary);background:var(--surface-1);border:1px solid var(--line);border-radius:7px;padding:4px 6px}
main{max-width:1320px;margin:0 auto;padding:16px 18px 60px}
h1{font-size:22px;margin:4px 0 2px} h2{font-size:16px;margin:26px 0 10px} h3{font-size:14px;margin:0 0 8px;color:var(--text-secondary);font-weight:600}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:14px 0}
.tile{background:var(--surface-1);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.tile .l{font-size:12px;color:var(--text-secondary)} .tile .v{font-size:24px;font-weight:650;font-variant-numeric:tabular-nums}
.tile .s{font-size:12px;color:var(--text-muted)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:14px}
.card{background:var(--surface-1);border:1px solid var(--line);border-radius:12px;padding:14px;min-width:0}
.card .note{font-size:12px;color:var(--text-muted);margin-top:6px}
.wrap{overflow-x:auto;background:var(--surface-1);border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse}
th,td{padding:6px 9px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;color:var(--text-secondary);background:var(--surface-2);white-space:nowrap;cursor:pointer;user-select:none;position:sticky;top:0}
th.n,td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th[data-dir="asc"]::after{content:" ▲"} th[data-dir="desc"]::after{content:" ▼"}
tr:hover td{background:var(--surface-2)}
td .sub{display:block;font-size:12px;color:var(--text-muted)}
.tag{display:inline-block;font-size:11px;padding:1px 6px;border-radius:9px;background:var(--surface-2);color:var(--text-secondary);border:1px solid var(--line);white-space:nowrap}
.tag.legacy{border-style:dashed}
.st{display:inline-flex;gap:4px;align-items:center;font-size:12px}
.st i{width:8px;height:8px;border-radius:50%;display:inline-block}
.bar{height:8px;border-radius:0 4px 4px 0;background:var(--series-1);min-width:2px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0}
.toolbar input[type=search]{min-width:240px}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin:8px 0;font-size:13px}
svg{display:block;max-width:100%;overflow:visible} svg text{fill:var(--text-secondary);font-size:11px}
svg .grid line{stroke:var(--grid)} svg .axis{stroke:var(--line)}
#tip{position:fixed;z-index:20;pointer-events:none;background:var(--surface-1);color:var(--text-primary);border:1px solid var(--line);
  border-radius:8px;padding:6px 9px;font-size:12px;box-shadow:0 4px 14px #0002;max-width:320px}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--text-secondary);margin-bottom:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.comment{border-bottom:1px solid var(--line);padding:8px 0} .comment .meta{font-size:12px;color:var(--text-muted)}
.comment.reply{margin-left:28px}
.head{display:flex;gap:14px;align-items:center} .head img{width:56px;height:56px;border-radius:50%}
.vhead{display:grid;grid-template-columns:200px 1fr;gap:18px} .vhead img{width:200px;border-radius:12px}
.empty{padding:20px;text-align:center;color:var(--text-muted)}
dl.defs{display:grid;grid-template-columns:220px 1fr;gap:6px 14px} dl.defs dt{font-weight:600}
@media (max-width:700px){.grid2{grid-template-columns:1fr}.vhead{grid-template-columns:1fr}.top{gap:8px}
  nav{order:3;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto} nav a{white-space:nowrap}
  .filters{gap:8px} .filters label{flex:1 1 45%}}