/* webfonts (v8.38, self-hosted subsets) — the font stack law:
   Chakra Petch = DISPLAY ONLY (verdict headline, score digits, tier word)
   · Inter = body/UI · system mono = data/logs/HUD micro-labels.
   font-display:swap — text never waits on the webfont. */
@font-face{font-family:'Chakra Petch'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/chakrapetch-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chakra Petch'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/chakrapetch-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chakra Petch'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/chakrapetch-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chakra Petch'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/chakrapetch-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/inter-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/inter-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --bg:#04060c; --panel:rgba(15,23,42,.55); --panel-border:rgba(56,189,248,.14);
  /* theme tokens (v8.38): --accent drives BRAND CHROME (links, buttons, pills,
     logo, active nav); the pre-paint head script overrides the trio from
     lg_accent. --cyan stays as the legacy alias — every var(--cyan) follows.
     SACRED, never themed: tier metals (TIERS in JS) + the severity palette. */
  --accent:#22d3ee; --accent-hi:#67e8f9; --accent-rgb:34,211,238;
  --cyan:var(--accent);
  --green:#34d399; --amber:#fbbf24; --orange:#fb923c; --red:#f87171;
  --text:#e2e8f0; --dim:#64748b; --dimmer:#64748b;   /* v8.38: dimmer lifted from #64748b (sunlight legibility) */
  --mono:ui-monospace,'Cascadia Code','JetBrains Mono',SFMono-Regular,Consolas,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --display:'Chakra Petch','Inter',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:dark}
::selection{background:rgba(var(--accent-rgb),.35); color:#f0f9ff}
/* thin themed scrollbar — cyan thumb on hover */
*{scrollbar-width:thin; scrollbar-color:rgba(100,116,139,.5) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(100,116,139,.45); border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--cyan)}
/* accessibility: visible focus ring in theme color */
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px}
body{
  background:var(--bg); color:var(--text); font-family:var(--sans);
  min-height:100vh; overflow-x:hidden;
}
/* font stack law (v8.38): Inter is the body/UI default; mono is RESERVED for
   data, logs and HUD micro-labels; Chakra Petch is the display layer. */
.hdr-meta,.card .value,.card .unit,.card .label,.panel h2,.vchip,.state-token,
table,.empty,.ev-card,.session-strip,.conf-label,.chart-tip,#proofUrl,.stress-nums,
#stressStatus,.game-chips,.logo .sub,.sheet-head span,.share-label,.badge-title,
.soon-chip,.auto-hint,.set label,.set select,.set input[type=text]{font-family:var(--mono)}
/* the slashed zero ("9Ø" at phone sizes) stays OFF on the big digits */
.card .value,.grade-badge,.verdict{font-feature-settings:"zero" 0}
/* static grid background (v8.20: no drift — nothing on this page blinks) */
.bg-grid{position:fixed; inset:0; z-index:-2;
  background-image:linear-gradient(rgba(var(--accent-rgb),.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(var(--accent-rgb),.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 100%);
}
.bg-glow{position:fixed; z-index:-1; width:900px; height:500px; left:50%; top:-180px;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(var(--accent-rgb),.13),transparent 65%);
}
.wrap{max-width:1180px; margin:0 auto; padding:26px 20px 60px}

/* header */
header{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px}
.tagline{text-align:center; font-size:11px; color:var(--dim); letter-spacing:.05em;
  line-height:1.8; margin:-8px 0 16px}
.tagline b{color:var(--text); font-weight:600}
.logo{display:flex; align-items:center; gap:14px}
.logo .mark{width:28px; height:28px; display:block}
.logo h1{font-size:26px; letter-spacing:.35em; font-weight:800;
  background:linear-gradient(90deg,var(--accent-hi),var(--accent) 40%,#34d399);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 34px rgba(var(--accent-rgb),.35);}
.logo .sub{display:block; font-size:10px; letter-spacing:.28em; color:var(--dim); -webkit-text-fill-color:var(--dim);
  text-transform:uppercase; font-weight:400; text-shadow:none}
.live-dot{width:10px;height:10px;border-radius:50%;background:var(--green);
  box-shadow:0 0 12px var(--green)}
.live-dot.bad{background:var(--red); box-shadow:0 0 12px var(--red)}
.hdr-meta{text-align:right; font-size:11px; color:var(--dim); line-height:1.7;
  font-variant-numeric:tabular-nums}
.hdr-meta b{color:var(--cyan); font-weight:600}
.hdr-meta .who{color:var(--dimmer); font-size:10px; letter-spacing:.04em;
  max-width:420px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hdr-nav{display:flex; gap:6px; justify-content:flex-end; align-items:center; margin-bottom:7px}
.mode-sw{display:flex; gap:6px; justify-content:flex-end}
.mode-sw .fbtn{padding:4px 12px}
.nav-link{padding:4px 12px; text-decoration:none; margin-left:4px}
.nav-link:hover{color:var(--cyan)}
/* locale switcher (v8.37): compact EN | PT text toggle, active locale cyan */
.lang-sw{display:inline-flex; align-items:center; margin-left:8px;
  font-size:9.5px; letter-spacing:.12em}
.lang-sw a{color:var(--dim); text-decoration:none; padding:4px 7px}
.lang-sw a:hover{color:var(--text)}
.lang-sw a.on{color:var(--cyan)}
.lang-sw .sep{color:var(--dimmer)}
/* header path visualizer (v8.14): You · ISP ──•── node (auto) — the probe
   packet sits statically centered on the wire (v8.20: no travel animation);
   measured time + samples live in the line's tooltip */
.path{display:flex; align-items:center; gap:9px; justify-content:flex-end; max-width:480px}
.path .endpoint{color:var(--dim); max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.path .wire{position:relative; flex:0 0 auto; width:64px; height:1px;
  background:linear-gradient(90deg,rgba(100,116,139,.5),rgba(var(--accent-rgb),.8),rgba(100,116,139,.5))}
.path .pkt{position:absolute; top:-2px; left:30px; width:5px; height:5px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 6px var(--cyan); opacity:.7}
@media(max-width:680px){.path .wire{display:none}}

/* unified toast pill — the ONLY transient notification channel, reserved for
   moments that matter: share prompts (severe-spike evidence, flex). Infra
   events (RTC fallback/reconnect, throttle, tab-hidden pause) are NEVER
   toasts — quiet inline states only (v8.15.1).
   Fixed top-center, one at a time, ~8 s. */
#shareToast{position:fixed; left:50%; top:14px; transform:translate(-50%,-160%); z-index:60;
  display:flex; align-items:center; gap:12px; max-width:min(520px,94vw);
  background:rgba(8,14,26,.96); border:1px solid rgba(var(--accent-rgb),.35); border-radius:12px;
  padding:12px 14px; box-shadow:0 8px 40px rgba(0,0,0,.6);
  transition:transform .3s ease-out}
#shareToast.show{transform:translate(-50%,0)}
#shareToast .t-text{flex:1; font-size:11.5px; line-height:1.5; color:var(--text)}
#shareToast .t-text b{display:block; color:var(--cyan); letter-spacing:.04em}
#shareToast .t-sub{color:var(--dim)}
#toastAction{white-space:nowrap}
#toastClose{background:none; border:none; color:var(--dimmer); cursor:pointer; font-size:13px; padding:4px}
#toastClose:hover{color:var(--text)}

/* challenge banner (v8.18) — slim fixed overlay slot, top-center BELOW the
   toast slot (toast z-index 60 takes precedence). Never layout-pushing;
   the amber accent separates the dare from the cyan toast. */
#challengeBar{position:fixed; left:50%; top:64px; transform:translate(-50%,calc(-100% - 80px)); z-index:50;
  display:flex; align-items:center; gap:10px; max-width:min(520px,94vw);
  background:rgba(8,14,26,.96); border:1px solid rgba(251,191,36,.45); border-radius:12px;
  padding:9px 14px; box-shadow:0 8px 40px rgba(0,0,0,.6);
  transition:transform .3s ease-out}
#challengeBar.show{transform:translate(-50%,0)}
#challengeBar .cb-text{flex:1; font-size:11.5px; line-height:1.5; color:var(--text);
  letter-spacing:.04em; transition:opacity .2s}
#challengeBar .cb-text b{color:var(--amber); font-weight:700}
#chBarAction{white-space:nowrap}
#chBarClose{background:none; border:none; color:var(--dimmer); cursor:pointer; font-size:13px; padding:4px}
#chBarClose:hover{color:var(--text)}

/* share peek (v8.33) — non-blocking corner card that surfaces the share
   sheet at the emotional moment (tier stabilized / exit intent), never on a
   clock, never over the live graph (hero-left; this owns bottom-right).
   One-shot slide-in only — no pulse/blink (DESIGN.md). */
#sharePeek{position:fixed; right:14px; bottom:14px; width:280px; z-index:55;
  background:rgba(8,14,26,.96); border:1px solid var(--panel-border); border-radius:12px;
  padding:24px 12px 12px; box-shadow:0 8px 40px rgba(0,0,0,.6);
  transform:translateY(16px); opacity:0; visibility:hidden;
  transition:transform .25s ease-out, opacity .25s ease-out, visibility 0s .25s}
#sharePeek.show{transform:none; opacity:1; visibility:visible;
  transition:transform .25s ease-out, opacity .25s ease-out}
@media (prefers-reduced-motion: reduce){#sharePeek,#sharePeek.show{transition:none}}
#peekHook{font-size:11.5px; line-height:1.45; font-weight:700; letter-spacing:.02em;
  margin:0 14px 8px 0; min-height:16px}
#peekCard{width:100%; height:auto; display:block; border-radius:8px; cursor:pointer;
  border:1px solid rgba(56,189,248,.2)}
#peekCard:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
#peekClose{position:absolute; top:4px; right:6px; background:none; border:none;
  color:var(--dimmer); cursor:pointer; font-size:13px; padding:4px}
#peekClose:hover{color:var(--text)}

/* status banner */
.banner{position:relative; border-radius:14px; padding:1px; margin-bottom:16px;
  background:linear-gradient(90deg,rgba(52,211,153,.6),rgba(34,211,238,.25),rgba(52,211,153,.6));}
.banner.warn{background:linear-gradient(90deg,rgba(251,191,36,.6),rgba(251,146,60,.3),rgba(251,191,36,.6))}
.banner.bad{background:linear-gradient(90deg,rgba(248,113,113,.7),rgba(251,146,60,.35),rgba(248,113,113,.7))}
.banner-inner{border-radius:13px; background:rgba(4,8,16,.88); padding:26px 22px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
/* hero verdict block — every line is a fixed slot: text changes crossfade
   (200 ms opacity), they never reflow the panel. v8.14 (DESIGN v2): the
   sentence and subline slots reserve TWO lines each and the state chip has
   its own slot, so the hero height is identical in every state
   (LIVE / GOOD / SPIKING / RECOVERING) */
.verdict-block{display:flex; flex-direction:column; gap:8px; flex:1; min-width:260px;
  font-variant-numeric:tabular-nums}
.vchip-slot{min-height:22px; display:flex; align-items:center}
.vchip{display:inline-flex; align-items:center; font-size:10px; font-weight:700; letter-spacing:.18em;
  padding:3px 11px; border-radius:999px; border:1px solid transparent;
  transition:opacity .2s, color .3s, border-color .3s}
.vchip.live{color:var(--cyan); border-color:rgba(var(--accent-rgb),.45); background:rgba(var(--accent-rgb),.07)}
.vchip.bad{color:var(--red); border-color:rgba(248,113,113,.5); background:rgba(248,113,113,.08)}
.vchip.warn{color:var(--amber); border-color:rgba(251,191,36,.45); background:rgba(251,191,36,.07)}
.verdict{font-family:var(--display); font-size:26px; font-weight:700; letter-spacing:.02em; line-height:1.25; min-height:65px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:opacity .2s, color .3s}
.verdict-sub{font-size:13.5px; font-weight:500; color:var(--dim); letter-spacing:.03em; line-height:1.4; min-height:34px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:opacity .2s}
.conf{display:flex; align-items:center; gap:10px; margin-top:2px}
.conf-track{flex:1; max-width:340px; height:4px; border-radius:2px; background:rgba(100,116,139,.25); overflow:hidden}
.conf-fill{height:100%; width:0; background:var(--cyan); border-radius:2px; transition:width .6s, background .4s}
.conf-label{font-size:9.5px}
#verdictConf{font-size:11px; color:var(--dim)}
.conf-label{font-size:9.5px; color:var(--dimmer); letter-spacing:.05em; white-space:nowrap; text-align:right}

/* metric cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px; margin-bottom:8px}
.card{background:var(--panel); border:1px solid var(--panel-border); border-radius:12px;
  padding:14px 16px; backdrop-filter:blur(8px); position:relative; overflow:hidden;
  transition:border-color .3s; font-variant-numeric:tabular-nums}
.card:hover{border-color:rgba(56,189,248,.4)}
.card .label{font-size:9.5px; letter-spacing:.22em; color:var(--dim); text-transform:uppercase; margin-bottom:8px}
.card .value{font-size:26px; font-weight:700; letter-spacing:.02em; line-height:1;
  text-shadow:0 0 22px currentColor; transition:color .3s, text-shadow .4s}
#mRtt.glow-down{text-shadow:0 0 16px rgba(52,211,153,.95),0 0 46px rgba(52,211,153,.65)}
#mRtt.glow-up{text-shadow:0 0 16px rgba(248,113,113,.95),0 0 46px rgba(248,113,113,.65)}
.card .unit{font-size:12px; color:var(--dim); font-weight:400; margin-left:3px; text-shadow:none}
.card .hint{font-size:10px; color:var(--dimmer); margin-top:8px; min-height:13px; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.card.hero .value{font-size:40px}
/* session strip: baseline / link / uptime / outages folded out of the cards */
.session-strip{font-size:10.5px; color:var(--dimmer); letter-spacing:.05em; min-height:14px;
  margin:0 2px 16px; font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* panels */
.panel{background:var(--panel); border:1px solid var(--panel-border); border-radius:14px;
  padding:16px 18px; backdrop-filter:blur(8px); margin-bottom:16px}
.panel h2{font-size:10.5px; letter-spacing:.26em; color:var(--dim); text-transform:uppercase; margin-bottom:12px;
  display:flex; justify-content:space-between; align-items:center}
.panel h2 .legend{display:flex; gap:14px; font-size:9.5px; letter-spacing:.08em; text-transform:none}
.legend span{display:flex; align-items:center; gap:5px}
.sw{width:14px;height:3px;border-radius:2px;display:inline-block}
.swgap{height:8px;border-radius:1px;background:repeating-linear-gradient(45deg,rgba(148,163,184,.55) 0 2px,transparent 2px 5px);border:1px solid rgba(148,163,184,.35)}
canvas.chart{width:100%; display:block}
/* explicit CSS heights: without them a width:100% canvas scales by its
   intrinsic ratio until prepCanvas runs — a big first-paint layout shift */
#rttChart{height:260px}
#spkChart,#lossChart,#hoursChart{height:150px}
.chart-tip{position:fixed; z-index:60; display:none; pointer-events:none;
  background:rgba(2,6,16,.94); border:1px solid rgba(56,189,248,.3); border-radius:8px;
  padding:6px 10px; font-size:11px; line-height:1.6; color:var(--text); white-space:nowrap;
  box-shadow:0 4px 18px rgba(0,0,0,.5)}
.split{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px}
@media(max-width:1000px){.split{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.split{grid-template-columns:1fr}}
/* chart window pills live OUTSIDE the legend (v8.35) so mobile can give each
   its own row; on desktop margin-left:auto keeps the pills+legend group
   hugging the right, same as before */
#winBtns{margin-left:auto}
/* narrow screens: panel headers stack — title line, one compact pill row,
   then the legend as a single horizontal scroll row (never a 3-row wrap);
   log tables scroll horizontally like the game chips */
@media(max-width:680px){
  .panel h2{flex-direction:column; align-items:stretch; row-gap:8px}
  #winBtns{display:flex; gap:6px; margin-left:0}
  #winBtns .fbtn{flex:1}
  .panel h2 .legend{flex-wrap:nowrap; overflow-x:auto; gap:14px; padding-bottom:2px}
  .panel h2 .legend>span{flex:0 0 auto; white-space:nowrap}
}
.log-scroll{overflow-x:auto}

/* event log */
table{width:100%; border-collapse:collapse; font-size:12px}
th{font-size:9.5px; letter-spacing:.2em; color:var(--dim); text-transform:uppercase;
  text-align:left; padding:6px 10px; border-bottom:1px solid rgba(56,189,248,.12)}
td{padding:7px 10px; border-bottom:1px solid rgba(100,116,139,.08); color:#cbd5e1}
tr:hover td{background:rgba(var(--accent-rgb),.04)}
.sev{display:inline-block; padding:2px 9px; border-radius:20px; font-size:10px; font-weight:700; letter-spacing:.08em}
.sev.minor{background:rgba(251,191,36,.14); color:var(--amber); border:1px solid rgba(251,191,36,.35)}
.sev.major{background:rgba(251,146,60,.14); color:var(--orange); border:1px solid rgba(251,146,60,.35)}
.sev.severe{background:rgba(248,113,113,.14); color:var(--red); border:1px solid rgba(248,113,113,.4)}
.empty{color:var(--dimmer); font-size:12px; padding:14px 10px}
tr.outage td:first-child{border-left:3px solid var(--red)}
.fbtn{background:transparent; border:1px solid rgba(100,116,139,.35); color:var(--dim);
  border-radius:6px; padding:3px 10px; font-size:9.5px;
  letter-spacing:.12em; cursor:pointer; text-transform:uppercase; transition:all .2s}
.fbtn:hover{color:var(--text)}
.fbtn.on{border-color:var(--cyan); color:var(--cyan); background:rgba(var(--accent-rgb),.08)}
.log-tools{display:flex; gap:6px; align-items:center}

/* spike & outage log — event cards (v8.14): severity chip, "+N ms above
   normal", duration, timestamp. Cards are the shareable evidence atom. */
.ev-card{display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:8px;
  border:1px solid rgba(100,116,139,.15); border-radius:10px; background:rgba(4,6,12,.4)}
.ev-card.outage{border-left:3px solid var(--red)}
.ev-what{flex:1; font-size:12px; color:#cbd5e1; min-width:0}
.ev-sub{font-size:10px; color:var(--dimmer); margin-top:3px}
.ev-when{font-size:11px; color:var(--dim); flex:0 0 auto; font-variant-numeric:tabular-nums}

/* "Do something with it" — the verbs column (v8.14, sits beside the log) */
.duo{display:grid; grid-template-columns:1.5fr 1fr; gap:16px}
@media(max-width:900px){.duo{grid-template-columns:1fr}}
.verb{display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:rgba(4,6,12,.4); border:1px solid rgba(100,116,139,.15); border-radius:10px;
  padding:11px 13px; margin-bottom:8px; color:var(--text);
  transition:border-color .2s}
.verb:hover{border-color:rgba(56,189,248,.45)}
a.verb{text-decoration:none}
.verb .v-ico{color:var(--cyan); flex:0 0 16px; text-align:center}
.verb .v-ico svg{width:15px; height:15px; fill:currentColor; vertical-align:-2px}
.verb .v-txt{flex:1; min-width:0}
.verb .v-t{display:block; font-size:12px; font-weight:700; letter-spacing:.03em}
.verb .v-s{display:block; font-size:10px; color:var(--dimmer); margin-top:3px; line-height:1.45}
.verb .v-go{color:var(--dimmer); flex:0 0 auto}
.verb.soon{opacity:.55; cursor:default}
.verb.soon:hover{border-color:rgba(100,116,139,.15)}
.soon-chip{font-size:8.5px; letter-spacing:.14em; color:var(--dim); text-transform:uppercase;
  border:1px solid rgba(100,116,139,.35); border-radius:4px; padding:1px 6px; margin-left:8px}

/* chart window "auto" hint (shown until the user picks a window manually) */
.auto-hint{font-size:8.5px; color:var(--dimmer); letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(100,116,139,.3); border-radius:4px; padding:1px 6px; margin-left:8px;
  vertical-align:1px; white-space:nowrap}   /* v8.35: never split the chip mid-wrap */

.panel .purpose{font-size:10.5px; color:var(--dimmer); margin-top:8px}
.panel .purpose .info{cursor:help; color:var(--dim)}

/* READY FOR — per-game chips */
.game-chips{display:flex; flex-wrap:wrap; gap:8px; min-height:29px}
.chip{display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px;
  border:1px solid var(--panel-border); background:rgba(4,6,12,.5);
  font-size:11px; letter-spacing:.03em; white-space:nowrap; cursor:default;
  transition:border-color .3s, color .3s}
.chip .glyph{font-weight:700}
.chip.good{border-color:rgba(52,211,153,.55); color:var(--green); box-shadow:0 0 10px rgba(52,211,153,.22)}
.chip.ok{border-color:rgba(52,211,153,.3); color:var(--green)}
.chip.borderline{border-color:rgba(251,191,36,.45); color:var(--amber)}
.chip.bad{border-color:rgba(248,113,113,.5); color:var(--red)}
.chip.na{color:var(--dim)}
@media(max-width:680px){.game-chips{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px}}

/* settings */
details.panel summary{cursor:pointer; font-size:10.5px; letter-spacing:.26em; color:var(--dim);
  text-transform:uppercase; list-style:none; user-select:none}
details.panel summary::before{content:'▸ '; color:var(--cyan)}
details.panel[open] summary::before{content:'▾ '}
details.panel summary:hover{color:var(--cyan)}
.set-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:14px}
.set label{display:block; font-size:10px; letter-spacing:.14em; color:var(--dim); text-transform:uppercase; margin-bottom:6px}
.set select,.set input[type=text]{width:100%; background:rgba(2,6,16,.8); border:1px solid rgba(56,189,248,.2);
  color:var(--text); border-radius:8px; padding:8px 10px; font-family:var(--mono); font-size:12px; outline:none}
.set select:focus,.set input:focus{border-color:var(--cyan)}
.set .note{font-size:10px; color:var(--dimmer); margin-top:5px}
.btn{background:rgba(var(--accent-rgb),.1); border:1px solid rgba(var(--accent-rgb),.4); color:var(--cyan);
  border-radius:8px; padding:8px 18px; font-size:11px; letter-spacing:.14em;
  cursor:pointer; text-transform:uppercase; transition:all .2s}
.btn:hover{background:rgba(var(--accent-rgb),.22); box-shadow:0 0 18px rgba(var(--accent-rgb),.25)}
.btn.danger{border-color:rgba(248,113,113,.4); color:var(--red); background:rgba(248,113,113,.08)}
.btn.danger:hover{background:rgba(248,113,113,.18); box-shadow:0 0 18px rgba(248,113,113,.2)}
.toggle{display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text); cursor:pointer}
.toggle input{accent-color:var(--cyan); width:16px; height:16px; cursor:pointer}

/* score + share module (v8.14, DESIGN v2 viral core): 128 px verdict-colored
   ring with the score inside, grade word beneath, SHARE attached directly
   under it — the page's primary accent CTA. Ring click opens the share
   center. Fixed slot in every state, stacks under the verdict on mobile. */
.score-mod{display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto;
  padding:10px 16px; border-radius:14px}
.score-mod canvas{display:block; cursor:pointer; border-radius:50%}
.score-mod canvas:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}
.score-grade{font-family:var(--display); font-size:9.5px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  min-height:13px; transition:color .3s}
.score-grade svg{width:10px; height:10px; vertical-align:-1px; margin-right:5px}
/* state token (v8.24): the NOW voice of the score module — a status-effect
   pill under the quality grade word (CLEAN/SPIKING/LOSS/WOBBLE/BLOATED/DOWN/
   RECOVERING). Fixed slot: min-width fits '⚠ RECOVERING', min-height reserved,
   so no state change ever shifts layout. */
.state-token{font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.22em;
  min-width:118px; min-height:15px; line-height:15px; text-align:center; white-space:nowrap;
  padding:2px 10px; border-radius:999px; border:1px solid currentColor;
  background:rgba(2,6,16,.5); transition:opacity .2s, color .3s, border-color .3s}
/* one-time coral glow when new shareable evidence lands (severe spike
   captured / 10 min of visible data) — pulse once, never bounce */
.score-mod.evpulse{animation:evPulse 1.4s ease-out 1}
@keyframes evPulse{0%{box-shadow:0 0 0 0 rgba(248,113,113,0)}
  30%{box-shadow:0 0 36px 6px rgba(248,113,113,.5)}100%{box-shadow:0 0 0 0 rgba(248,113,113,0)}}
@media (prefers-reduced-motion:reduce){.score-mod.evpulse{animation:none}}

/* buttons row + small panels */
.btn-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.panel p.desc{font-size:12px; color:#94a3b8; line-height:1.8; margin-bottom:12px; max-width:760px}
.panel p.desc b{color:var(--text)}

/* stress test */
#stressStatus{font-size:11px; color:var(--dim); margin-top:10px; min-height:15px}
.stress-result{margin-top:14px; display:flex; gap:20px; flex-wrap:wrap; align-items:center}
.grade-badge{font-family:var(--display); font-size:32px; font-weight:700; width:66px; height:66px; border-radius:14px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; border:1px solid currentColor;
  text-shadow:0 0 20px currentColor; background:rgba(2,6,16,.6)}
.stress-nums{font-size:12px; color:#cbd5e1; line-height:2}
.stress-nums b{font-size:15px}
.stress-note{font-size:10.5px; color:var(--dimmer); margin-top:10px; max-width:640px; line-height:1.7}

/* content sections */
.content h3{font-size:12.5px; color:var(--cyan); margin:16px 0 6px; letter-spacing:.04em}
.content h3:first-of-type{margin-top:4px}
.content p{font-size:12.5px; line-height:1.9; color:#94a3b8; margin-bottom:10px; max-width:860px}
.content b{color:var(--text)}
.content ul{font-size:12.5px; line-height:1.9; color:#94a3b8; margin:0 0 10px 18px; max-width:860px}

/* explainer */
.expl{font-size:12px; line-height:2; color:#94a3b8; columns:2; column-gap:36px}
@media(max-width:760px){.expl{columns:1}}
.expl b{color:var(--cyan)}
/* theme picker (v8.38): accent swatches + AMOLED flip — footer row (+ a twin
   in the share sheet). 44 px tap targets; the dot wears the swatch color. */
.theme-row{display:flex; align-items:center; justify-content:center; gap:2px; margin-top:30px}
.theme-row .tlabel{font-size:9px; letter-spacing:.3em; color:var(--dimmer); margin-right:10px}
.theme-row .tsep{color:var(--dimmer); margin:0 6px; font-size:9px}
.tsw{width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; padding:0}
.tsw::before{content:''; width:16px; height:16px; border-radius:50%; background:var(--sw);
  transition:transform .15s, box-shadow .15s}
.tsw:hover::before{transform:scale(1.15)}
.tsw.on::before{box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--sw), 0 0 14px var(--sw)}
.tsw.amoled::before{background:#000; border:1.5px solid rgba(100,116,139,.7)}
footer{text-align:center; font-size:10px; color:var(--dimmer); letter-spacing:.2em; margin-top:14px}
footer a{color:var(--dim); text-decoration:none}
footer a:hover{color:var(--cyan)}
footer.legal-nav{margin-top:8px; font-size:9px; letter-spacing:.16em; color:var(--dimmer)}
footer.legal-nav a{color:var(--dimmer)}
footer.legal-nav a:hover{color:var(--cyan)}
.mode-sw a.fbtn{text-decoration:none}
.content a{color:var(--cyan)}

/* share center — bottom sheet (mobile-first) */
#shareModal{display:none; position:fixed; inset:0; z-index:50; background:rgba(2,4,10,.85);
  backdrop-filter:blur(6px); align-items:flex-end; justify-content:center}
#shareModal.show{display:flex}
.share-sheet{background:var(--panel); border:1px solid var(--panel-border); border-bottom:none;
  border-radius:16px 16px 0 0; padding:14px 16px calc(16px + env(safe-area-inset-bottom));
  width:100%; max-width:640px; max-height:92vh; overflow-y:auto; text-align:center;
  animation:sheetUp .22s ease-out}
@keyframes sheetUp{from{transform:translateY(28px); opacity:0}to{transform:none; opacity:1}}
@media(min-width:700px){
  #shareModal{align-items:center; padding:20px}
  .share-sheet{border-radius:14px; border-bottom:1px solid var(--panel-border)}
}
.sheet-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.sheet-head span{font-size:10.5px; letter-spacing:.26em; color:var(--dim); text-transform:uppercase}
.sheet-head button{background:none; border:none; color:var(--dim); font-size:15px; cursor:pointer; padding:4px 8px}
.sheet-head button:hover{color:var(--text)}
.share-sheet canvas{width:100%; height:auto; display:block; border-radius:10px;
  border:1px solid rgba(56,189,248,.2); margin-bottom:12px}
/* card actions (v8.19): these act on the CARD itself (image/file/link) —
   visually distinct from the channel logo row below */
.share-btns{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.share-btns .btn{flex:1 1 30%; min-width:130px}
/* Copy image: inline feedback label ("copied — paste with Ctrl+V" / fallback
   note) is longer than the default label — reserve the width so the quiet
   label swap never re-wraps the button row */
#btnShareImg{min-width:230px; white-space:nowrap}
/* channel row (v8.19): one brand-logo icon per channel, one click each.
   Inline SVG (CC0 simple-icons-style paths) in currentColor — quiet dim at
   rest, brand color on hover; tiny labels stay under the icons, tooltips on
   title. No external assets/fonts. Holds at 320 px (5 × 56 px + gaps). */
.share-label{font-size:9px; letter-spacing:.3em; color:var(--dimmer); text-transform:uppercase; margin:14px 0 8px}
.share-channels{display:flex; flex-wrap:wrap; justify-content:center; gap:4px}
.chan{display:flex; flex-direction:column; align-items:center; gap:4px; width:52px; padding:8px 0 6px;
  background:none; border:1px solid transparent; border-radius:10px; color:var(--dim);
  font-size:8.5px; letter-spacing:.04em; cursor:pointer; transition:all .15s}
.chan svg{width:22px; height:22px; fill:currentColor}
.chan:hover{border-color:var(--panel-border); background:rgba(148,163,184,.06)}
#btnShareX:hover{color:#e7e9ea}
#btnShareDiscord:hover{color:#5865f2}
#btnShareWhatsApp:hover{color:#25d366}
#btnShareRedditPost:hover{color:#ff4500}
#btnShareTelegram:hover{color:#26a5e4}
/* Challenge a friend (v8.19): the viral loop-closer, not a channel — its own
   amber accent moment matching the challenge bar's palette */
#btnShareChallenge{width:100%; margin-top:12px; border-color:rgba(251,191,36,.5);
  color:var(--amber); background:rgba(251,191,36,.07); font-weight:700}
#btnShareChallenge:hover{background:rgba(251,191,36,.14)}
/* Discord server invite (never-expire) — full-width link, blurple accent like
   the challenge button's amber; opens discord.gg/C28Kq3qm7e in a new tab */
#btnShareDiscordJoin{display:block; box-sizing:border-box; width:100%; margin-top:10px;
  text-align:center; text-decoration:none; border-color:rgba(88,101,242,.5);
  color:#9aa5f8; background:rgba(88,101,242,.08)}
#btnShareDiscordJoin:hover{background:rgba(88,101,242,.16); box-shadow:0 0 18px rgba(88,101,242,.22)}
#shareCallout{margin-top:10px}
#shareCallout .btn{width:100%; border-color:rgba(248,113,113,.45); color:var(--red)}
#shareCallout .btn:hover{background:rgba(248,113,113,.12)}
.share-sheet .note{font-size:10px; color:var(--dimmer); margin-top:10px; min-height:13px}

/* forum signature badge (v8.15) — live PNG card + copy codes, inside the sheet */
#badgeSection{margin-top:14px; padding-top:12px; border-top:1px solid var(--panel-border)}
.badge-title{font-size:10.5px; letter-spacing:.26em; color:var(--dim); text-transform:uppercase; margin-bottom:10px}
#badgeCreate .btn{width:100%}
#badgeLive img{width:100%; max-width:460px; height:auto; display:block; margin:0 auto 10px;
  border-radius:8px; border:1px solid rgba(56,189,248,.2); background:#04060c}
.badge-btns{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.badge-btns .btn{flex:1 1 30%; min-width:130px}
#btnBadgeReset{background:none; border:none; color:var(--dimmer);
  font-size:10px; letter-spacing:.08em; cursor:pointer; padding:4px 8px; flex:0 0 100%}
#btnBadgeReset:hover{color:var(--text)}
.badge-note{font-size:10px; color:var(--dimmer); margin-top:8px; line-height:1.6}

/* SHARE button — primary accent CTA attached under the score ring.
   min-width fits the longest contextual label (SHARE THE EVIDENCE) so the
   label swap never resizes the module */
#btnShare{cursor:pointer; margin-top:2px; min-width:172px; text-align:center; white-space:nowrap;
  background:var(--cyan); border:1px solid var(--cyan); color:#04222b;
  border-radius:8px; padding:9px 18px; font-size:12px; font-weight:700;
  letter-spacing:.18em; background:linear-gradient(180deg, var(--accent-hi), var(--cyan));
  box-shadow:0 0 16px rgba(var(--accent-rgb),.3); transition:all .2s}
#btnShare:hover{background:var(--accent-hi); box-shadow:0 0 18px rgba(var(--accent-rgb),.4)}

/* public proof link output */
#proofUrl{flex:1; min-width:240px; background:rgba(2,6,16,.8); border:1px solid rgba(56,189,248,.2);
  color:var(--cyan); border-radius:8px; padding:8px 10px; font-family:var(--mono); font-size:12px; outline:none}

/* ============ mobile pass (v8.35) — phones are the X-ads landing surface ============
   Owner screenshot-driven: the verdict sentence NEVER truncates (it wraps in
   full; the font clamps down so 2 lines still cover most states — the slot
   min-heights stay, so short states don't shrink the hero). Hero fits above
   the fold: tighter padding, bigger ring (drawScore scales it to 176 px ≤430
   px). Every tap target ≥44 px. dvh + safe-area so iOS chrome / home bar
   never eat the SHARE button or the sheet. */
@media(max-width:680px){
  .wrap{padding:16px 12px 40px}
  header{margin-bottom:10px}
  .logo h1{font-size:20px}
  .tagline{margin:-4px 0 12px; line-height:1.6}
  .banner{margin-bottom:12px}
  .banner-inner{padding:16px 14px 14px; justify-content:center}
  .verdict-block{min-width:0; flex:1 1 100%; gap:6px}
  .verdict{font-size:clamp(17px,5.6vw,22px); min-height:55px;
    display:block; overflow:visible; -webkit-line-clamp:unset}
  .verdict-sub{display:block; overflow:visible; -webkit-line-clamp:unset}
  .score-mod{padding:4px 8px 2px; gap:6px}

  /* tap targets ≥44 px */
  .fbtn{display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; padding:6px 12px}
  .lang-sw a{display:inline-flex; align-items:center; min-height:44px; padding:6px 10px}
  .btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px}
  #btnShare{display:inline-flex; align-items:center; justify-content:center;
    min-height:48px; padding:12px 18px; font-size:11px}
  .sheet-head button, #toastClose, #chBarClose, #btnBadgeReset{min-width:44px; min-height:44px; padding:10px}
  #peekClose{min-width:44px; min-height:44px; padding:10px; top:0; right:0}
  .chan{width:56px; min-height:56px; justify-content:center}

  /* share peek docks bottom-sheet style on phones — centered, full-width
     capped, safe-area aware, never near the hero ring at the top */
  #sharePeek{left:14px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom));
    width:auto; max-width:320px; margin:0 auto}

  /* share sheet: one-column actions, internal scroll that can't chain
     to the page, real dynamic viewport height */
  .share-btns{flex-direction:column}
  .share-btns .btn{flex:1 1 auto; width:100%; min-width:0}
  #btnShareImg{min-width:0}
  .badge-btns .btn{flex:1 1 100%; min-width:0}
  footer{line-height:2.1}
}
/* sheet viewport cap: dvh on phones (iOS chrome-aware), keep 92vh on desktop */
.share-sheet{max-height:100dvh; overscroll-behavior:contain}
@media(min-width:700px){.share-sheet{max-height:92vh}}