/* noidstats — tokens borrowed from prlstats (validated in both modes). */
:root {
  color-scheme: light;
  --bg:#f5f5f3; --surface:#fcfcfb; --surface-2:#f0f0ed; --border:#e0e0dc;
  --text:#0b0b0b; --text-2:#52514e; --text-3:#6b6963;
  --accent:#d4322c;
  --series-1:#d4322c; --series-2:#2a78d6; --series-4:#eb6834;
  --grid:#e8e8e4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#0a0a0b; --surface:#141416; --surface-2:#1b1b1e; --border:#28282d;
    --text:#f4f4f2; --text-2:#a5a49e; --text-3:#8a8984;
    --accent:#ef4a45;
    --series-1:#ef4a45; --series-2:#3987e5; --series-4:#d95926;
    --grid:#232327;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0a0a0b; --surface:#141416; --surface-2:#1b1b1e; --border:#28282d;
  --text:#f4f4f2; --text-2:#a5a49e; --text-3:#8a8984;
  --accent:#ef4a45;
  --series-1:#ef4a45; --series-2:#3987e5; --series-4:#d95926;
  --grid:#232327;
}

* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.55 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.mono, code, td.mono { font-family:ui-monospace,"JetBrains Mono",Menlo,monospace; font-size:.86em; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
header.top {
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  max-width:1200px; margin:0 auto; padding:20px 16px 4px;
}
header.top h1 { margin:0; font-size:20px; letter-spacing:-.01em; }
header.top .sub { color:var(--text-3); font-size:13px; }
header.top button {
  margin-left:auto; background:none; border:1px solid var(--border); color:var(--text-2);
  border-radius:6px; padding:3px 10px; cursor:pointer; font:inherit; font-size:13px;
}
main { max-width:1200px; margin:0 auto; padding:8px 16px 48px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; margin:12px 0 20px; }
.tile { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
.tile .k { color:var(--text-3); font-size:12px; }
.tile .v { font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.tile .n { color:var(--text-3); font-size:12px; }
section.card {
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:16px 16px 10px; margin:0 0 16px; min-width:0;
}
section.card h2 { margin:0; font-size:15px; }
section.card p.note { margin:2px 0 8px; color:var(--text-2); font-size:13px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid2 > section.card { margin:0 0 16px; }
@media (max-width: 860px) { .grid2 { grid-template-columns:1fr; } }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--text-2); margin:4px 0; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.chart { width:100%; position:relative; }
.chart svg { display:block; width:100%; height:auto; overflow:visible; }
.chart text { fill:var(--text-3); font-size:11px; font-variant-numeric:tabular-nums; }
.chart .grid line { stroke:var(--grid); }
.chart .domain { display:none; }
.chart .tick line { stroke:var(--grid); }
.chart .xhair { stroke:var(--text-3); stroke-width:1; stroke-dasharray:3 3; }
.empty { color:var(--text-3); font-size:13px; padding:24px 0; text-align:center; }
.tip {
  position:fixed; pointer-events:none; z-index:10; display:none;
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:8px 10px; font-size:12px; color:var(--text); box-shadow:0 4px 16px rgba(0,0,0,.12);
  font-variant-numeric:tabular-nums; max-width:320px;
}
.tip .t { color:var(--text-3); margin-bottom:3px; }
.tip i { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; }
.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
th { text-align:left; color:var(--text-3); font-weight:500; font-size:12px; padding:6px 8px; border-bottom:1px solid var(--border); white-space:nowrap; }
td { padding:5px 8px; border-bottom:1px solid var(--grid); white-space:nowrap; }
td.r, th.r { text-align:right; }
tr.tx { cursor:pointer; }
tr.tx:hover td { background:var(--surface-2); }
tr.raw td { white-space:pre-wrap; word-break:break-all; background:var(--surface-2); font-size:11.5px; }
.pill { display:inline-block; padding:0 7px; border-radius:9px; font-size:11.5px; background:var(--surface-2); color:var(--text-2); border:1px solid var(--border); }
.controls { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--text-2); margin:6px 0; flex-wrap:wrap; }
.controls button {
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-2);
  border-radius:6px; padding:2px 10px; cursor:pointer; font:inherit;
}
.controls button[aria-pressed="true"] { color:var(--text); border-color:var(--text-3); }
details summary { cursor:pointer; color:var(--text-2); font-size:13px; margin:6px 0; }
.muted { color:var(--text-3); }