/* prlstats — red/black. Dark is the primary mode; light is a selected
   counterpart, not an automatic flip. Chart hues validated in both. */
:root {
  color-scheme: dark;
  --bg:#0a0a0b; --surface:#141416; --surface-2:#1b1b1e; --border:#28282d;
  --text:#f4f4f2; --text-2:#a5a49e; --text-3:#6f6e6a;
  --accent:#ef4a45; --accent-dim:#b0302c; --accent-wash:rgba(239,74,69,.10);
  --series-1:#ef4a45; --series-2:#3987e5; --series-3:#199e70;
  --good:#3fb950; --bad:#ef4a45; --grid:#232327;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#f5f5f3; --surface:#fcfcfb; --surface-2:#f0f0ed; --border:#e0e0dc;
  --text:#0b0b0b; --text-2:#52514e; --text-3:#85837c;
  --accent:#d4322c; --accent-dim:#a8241f; --accent-wash:rgba(212,50,44,.08);
  --series-1:#d4322c; --series-2:#2a78d6; --series-3:#1baf7a;
  --good:#008300; --bad:#d4322c; --grid:#e8e8e4;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.55 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ------------------------------------------------------------------- nav */
.nav {
  border-bottom:1px solid var(--border); background:var(--surface);
  position:sticky; top:0; z-index:40;
}
.nav-in {
  max-width:1180px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; gap:22px; height:52px;
}
.brand {
  font-weight:700; font-size:15.5px; letter-spacing:-0.02em; color:var(--text);
  display:flex; align-items:center; gap:8px; margin-right:4px; white-space:nowrap;
}
.brand:hover { text-decoration:none; }
.brand .dot { width:8px; height:8px; border-radius:50%; background:var(--accent);
              box-shadow:0 0 0 3px var(--accent-wash); flex:none; }
.nav a.link {
  color:var(--text-2); font-size:13.5px; padding:4px 0; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-2px;
}
.nav a.link:hover { color:var(--text); text-decoration:none; }
.nav a.link[aria-current="page"] { color:var(--text); border-bottom-color:var(--accent); }
.nav .spacer { flex:1; }
.nav .live {
  font-size:11.5px; color:var(--text-2); display:flex; align-items:center; gap:6px;
  white-space:nowrap;
}
.nav .live b { color:var(--text); font-variant-numeric:tabular-nums; font-weight:600; }
.pulse { width:7px; height:7px; border-radius:50%; background:var(--good); flex:none;
         animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.theme-btn {
  background:none; border:1px solid var(--border); color:var(--text-2);
  border-radius:6px; padding:3px 8px; font:inherit; font-size:12px; cursor:pointer;
}
.theme-btn:hover { color:var(--text); border-color:var(--text-3); }

/* ----------------------------------------------------------------- layout */
.wrap { max-width:1180px; margin:0 auto; padding:26px 16px 40px; }
.page-h { margin:0 0 4px; font-size:22px; letter-spacing:-0.025em; }
.page-p { margin:0 0 22px; color:var(--text-2); font-size:13px; max-width:70ch; }
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:16px; margin-bottom:16px;
}
h2 { font-size:14px; margin:0 0 3px; letter-spacing:-0.01em; }
.sub { font-size:12px; color:var(--text-3); margin:0 0 14px; max-width:78ch; }

.tiles { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); margin-bottom:16px; }
.tile { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:13px 15px; }
.tile.hero { border-color:var(--accent-dim); background:
  linear-gradient(var(--accent-wash),var(--accent-wash)), var(--surface); }
.tile .k { font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); }
.tile .v { font-size:24px; font-weight:650; letter-spacing:-0.025em; margin-top:3px;
           font-variant-numeric:tabular-nums; }
.tile .n { font-size:11.5px; color:var(--text-2); margin-top:2px; }
.good { color:var(--good); } .bad { color:var(--bad); }

.controls { display:grid; gap:12px 16px; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); }
label { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
        color:var(--text-3); margin-bottom:4px; }
select, input {
  width:100%; padding:7px 9px; border-radius:7px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font:inherit; font-size:13px;
}
select:focus, input:focus { outline:2px solid var(--accent); outline-offset:1px; }

.legend { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:8px; font-size:12px; }
.legend span { display:flex; align-items:center; gap:6px; color:var(--text-2); }
.sw { width:11px; height:3px; border-radius:2px; flex:none; }
svg { display:block; width:100%; height:auto; overflow:visible; }
.axis { font-size:10.5px; fill:var(--text-3); font-variant-numeric:tabular-nums; }
.glabel { font-size:11px; font-weight:600; }

table { width:100%; border-collapse:collapse; font-size:12.5px; }
th { text-align:left; font-weight:600; color:var(--text-3); font-size:10.5px;
     text-transform:uppercase; letter-spacing:.06em; padding:6px 8px;
     border-bottom:1px solid var(--border); white-space:nowrap; }
td { padding:6px 8px; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; }
tr:last-child td { border-bottom:none; }
td.r, th.r { text-align:right; }
.pill { display:inline-block; padding:1px 7px; border-radius:20px; font-size:10.5px;
        border:1px solid var(--border); color:var(--text-2); }
.pill.on { border-color:var(--accent-dim); color:var(--accent); background:var(--accent-wash); }
.tbl-wrap { overflow-x:auto; }
.note { font-size:12px; color:var(--text-2); margin-top:12px; line-height:1.6; }

.tip { position:fixed; pointer-events:none; opacity:0; transition:opacity .08s;
       background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
       padding:8px 10px; font-size:12px; box-shadow:0 8px 26px rgba(0,0,0,.45);
       z-index:60; font-variant-numeric:tabular-nums; }
.tip b { display:block; margin-bottom:4px; font-size:10.5px; color:var(--text-3);
         font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.tip i { display:inline-block; width:9px; height:3px; border-radius:2px; margin-right:6px;
         vertical-align:middle; font-style:normal; }
.err { color:var(--bad); font-size:13px; }

footer {
  border-top:1px solid var(--border); margin-top:32px; padding:20px 16px 40px;
  color:var(--text-3); font-size:12.5px;
}
footer .in { max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap;
             gap:8px 18px; align-items:center; }
footer .in .spacer { flex:1; }
@media (max-width:640px){
  .tile .v{font-size:20px;} .wrap{padding:18px 16px 32px;}
  .nav-in{gap:14px;} .nav .live{display:none;}
}