/* PINGCHECK - NETCORE⚡MEDIA · app.css */
:root{
  color-scheme: dark;
  --bg:#05080f; --bg-2:#0a1020;
  --surface: rgba(14,20,36,.62); --surface-solid:#0e1424; --surface-2: rgba(255,255,255,.04);
  --line: rgba(160,190,255,.12); --line-2: rgba(160,190,255,.22);
  --ink:#eef3ff; --ink-2:#aab6cf; --ink-3:#6f7c97;
  --accent:#5ef0ff; --accent-2:#3987e5; --accent-ink:#031018;
  --good:#3ccf7a; --warn:#e8a53a; --bad:#ff5d5d;
  /* phase palette (validated dark categorical steps) */
  --ph-dns:#3987e5; --ph-tcp:#d95926; --ph-tls:#199e70; --ph-ttfb:#c98500; --ph-dl:#d55181;
  --radius:18px; --radius-sm:12px;
  --font: "Inter", "Segoe UI Variable", "SF Pro Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{min-height:100vh;min-height:100dvh;overflow-x:hidden}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)} .small{font-size:12px}
b{font-weight:650;color:var(--ink)}
button,select,input{font:inherit;color:inherit}
[hidden]{display:none!important}
.bolt{color:#ffd23f}

/* ---------- Ambient ---------- */
.ambient{position:fixed;inset:0;z-index:0;overflow:hidden;background:radial-gradient(1200px 700px at 30% 30%,#0d2350 0,transparent 60%),var(--bg)}
.ambient__video{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(10px) saturate(1.35) brightness(1.05);transform:scale(1.04);transition:filter 1.2s var(--ease),opacity 1.2s var(--ease)}
body:not(.phase-hero) .ambient__video{filter:blur(34px) saturate(1.1) brightness(.45);opacity:.85}
.ambient__tint{position:absolute;inset:0;background:
  radial-gradient(900px 500px at 50% 45%,rgba(5,8,15,.05),rgba(5,8,15,.65) 75%),
  linear-gradient(180deg,rgba(5,8,15,.55),rgba(5,8,15,.2) 35%,rgba(5,8,15,.9))}
.ambient__grid{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 40%,#000 0,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 0,transparent 70%)}
.ambient__grain{position:absolute;inset:-50%;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}

/* ---------- Topbar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(16px + var(--safe-t)) clamp(16px,4vw,40px) 16px}
body:not(.phase-hero) .topbar{background:linear-gradient(180deg,rgba(5,8,15,.85),rgba(5,8,15,0));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand__name{font-weight:800;letter-spacing:.14em;font-size:15px}
.brand__by{font-size:12px;color:var(--ink-3);letter-spacing:.04em;padding-left:10px;border-left:1px solid var(--line-2)}
.topbar__right{display:flex;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;border:1px solid var(--line-2);background:rgba(10,16,32,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:12px;color:var(--ink-2);white-space:nowrap}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.pill.is-on .dot{background:var(--good);box-shadow:0 0 0 3px rgba(60,207,122,.18)}
.pill.is-off .dot{background:var(--bad);box-shadow:0 0 0 3px rgba(255,93,93,.18)}
.pill.is-ready .dot{background:var(--accent)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:10px 16px;border:1px solid var(--line-2);background:var(--surface-2);cursor:pointer;font-weight:600;font-size:14px;transition:background .2s,border-color .2s,transform .15s}
.btn:hover{background:rgba(255,255,255,.08);border-color:rgba(160,190,255,.35)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.seg__btn:focus-visible,.pingbtn:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn--sm{padding:6px 11px;font-size:12px;border-radius:10px}
.btn--ghost{background:rgba(10,16,32,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn--primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);border-color:transparent}
.btn--primary:hover{filter:brightness(1.08);background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.btn--danger{background:rgba(255,93,93,.12);border-color:rgba(255,93,93,.45);color:#ffd6d6}
.btn--danger:hover{background:rgba(255,93,93,.22);border-color:rgba(255,93,93,.7)}
kbd{font-family:var(--mono);font-size:11px;padding:1px 6px;border-radius:5px;border:1px solid currentColor;opacity:.85}

/* ---------- Views & transitions ---------- */
main{position:relative;z-index:1}
.view{transition:opacity .9s var(--ease),filter .9s var(--ease),transform .9s var(--ease)}
.view.is-leaving{opacity:0;filter:blur(22px);transform:translateY(-10vh) scale(1.03);pointer-events:none}
.view.is-entering{opacity:0;filter:blur(22px);transform:translateY(10vh) scale(.98)}
@media (prefers-reduced-motion:reduce){.view{transition:opacity .3s}.view.is-leaving,.view.is-entering{transform:none;filter:none}.ambient__grain{animation:none}}

/* ---------- Hero ---------- */
.hero{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:calc(96px + var(--safe-t)) 16px calc(56px + var(--safe-b));position:relative}
.hero__inner{width:min(1040px,100%);text-align:center;display:flex;flex-direction:column;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 22px;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);font-weight:600}
.eyebrow__line{width:36px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
.hero__title{margin:0;font-size:clamp(42px,8.2vw,104px);line-height:.98;letter-spacing:-.045em;font-weight:800}
.grad{background:linear-gradient(100deg,#fff 0%,#bdf8ff 30%,var(--accent) 55%,var(--accent-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__lead{max-width:720px;margin:26px auto 0;font-size:clamp(15px,1.6vw,18px);line-height:1.65;color:var(--ink-2)}
.launch{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
.seg{display:inline-flex;padding:4px;border-radius:14px;border:1px solid var(--line-2);background:rgba(10,16,32,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.seg__btn{border:0;background:transparent;padding:9px 18px;border-radius:10px;cursor:pointer;color:var(--ink-2);font-weight:600;font-size:14px;transition:background .25s,color .25s}
.seg__btn.is-active{background:rgba(94,240,255,.14);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(94,240,255,.35)}
.inf{font-size:17px;line-height:0;margin-right:2px}
.launch__param{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)}
select,input[type=number],input[type=url]{background:rgba(10,16,32,.7);border:1px solid var(--line-2);border-radius:10px;padding:8px 12px;min-height:38px}
input[type=number]{width:96px}
select option{background:var(--surface-solid)}
.unit{color:var(--ink-3)}

.pingbtn{position:relative;margin:10px 0 2px;width:260px;height:260px;border-radius:50%;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ink);
  background:radial-gradient(circle at 50% 35%,rgba(94,240,255,.28),rgba(57,135,229,.16) 45%,rgba(8,14,30,.85) 72%);
  box-shadow:0 0 0 1px rgba(94,240,255,.45) inset,0 0 0 10px rgba(94,240,255,.05),0 30px 80px -20px rgba(57,135,229,.6),0 0 120px -10px rgba(94,240,255,.35);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pingbtn:hover{transform:scale(1.035);box-shadow:0 0 0 1px rgba(94,240,255,.8) inset,0 0 0 12px rgba(94,240,255,.08),0 30px 90px -20px rgba(57,135,229,.8),0 0 160px -10px rgba(94,240,255,.5)}
.pingbtn:active{transform:scale(.98)}
.pingbtn__label{font-size:26px;font-weight:800;letter-spacing:.16em;padding-left:.16em}
.pingbtn__sub{font-size:11px;color:var(--ink-2);letter-spacing:.04em;max-width:170px;line-height:1.4}
.pingbtn__ring{position:absolute;inset:-2px;border-radius:50%;border:1px solid rgba(94,240,255,.55);animation:ring 2.8s var(--ease) infinite;pointer-events:none}
.pingbtn__ring.r2{animation-delay:1.4s}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55);opacity:0}}
@media (prefers-reduced-motion:reduce){.pingbtn__ring{animation:none;opacity:.3}}

.opts{width:min(760px,100%);text-align:left;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(10,16,32,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.opts summary{cursor:pointer;padding:12px 16px;font-size:13px;color:var(--ink-2);list-style:none;display:flex;justify-content:center;gap:8px}
.opts summary::-webkit-details-marker{display:none}
.opts summary::after{content:"＋";color:var(--accent)} .opts[open] summary::after{content:"－"}
.opts__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;padding:4px 16px 16px}
.opts__grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.opts__grid select,.opts__grid input{text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink);width:100%}

.features{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;width:min(900px,100%);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--line)}
.features li{background:rgba(8,12,24,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:16px 14px;display:flex;flex-direction:column;gap:4px}
.features b{font-size:15px;letter-spacing:-.01em} .features span{font-size:12px;color:var(--ink-3)}
.scrollcue{position:absolute;bottom:calc(18px + var(--safe-b));left:50%;transform:translateX(-50%);width:22px;height:34px;border:1px solid var(--line-2);border-radius:12px;opacity:.6}
.scrollcue span{position:absolute;left:50%;top:7px;width:2px;height:7px;margin-left:-1px;background:var(--accent);border-radius:2px;animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ---------- Shared cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);min-width:0}
.card__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.card__h h3{margin:0;font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- Live ---------- */
.live,.report{width:min(1440px,100%);margin:0 auto;padding:calc(88px + var(--safe-t)) clamp(16px,3vw,36px) 40px}
.live__head,.report__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.live__title{display:flex;align-items:center;gap:14px;min-width:0}
.live__title h2{margin:0;font-size:clamp(20px,2.6vw,30px);letter-spacing:-.02em;word-break:break-all}
.live__title p{margin:4px 0 0;font-size:12px}
.badge-live{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;background:rgba(255,93,93,.14);border:1px solid rgba(255,93,93,.45);font-size:11px;font-weight:800;letter-spacing:.18em;color:#ffd6d6}
.badge-live i{width:8px;height:8px;border-radius:50%;background:var(--bad);animation:blink 1s infinite}
.badge-live.is-done{background:rgba(60,207,122,.12);border-color:rgba(60,207,122,.45);color:#d4ffe5}.badge-live.is-done i{background:var(--good);animation:none}
@keyframes blink{50%{opacity:.25}}
.live__ctrl{display:flex;align-items:center;gap:16px}
.timer{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:130px}
.timer__label{font-size:11px;color:var(--ink-3);letter-spacing:.12em;text-transform:uppercase}
.timer__val{font-size:22px;font-weight:600}
.timer__bar{width:130px;height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.timer__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .2s linear}

.kpis{display:grid;grid-template-columns:1.6fr repeat(6,1fr);gap:10px;margin-bottom:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;display:flex;flex-direction:column;gap:6px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);min-width:0}
.kpi__l{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em}
.kpi__v{font-size:22px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi__v small{font-size:12px;color:var(--ink-3);font-weight:500;margin-left:3px}
.kpi--hero{background:linear-gradient(135deg,rgba(94,240,255,.12),rgba(57,135,229,.08));border-color:rgba(94,240,255,.3)}
.kpi--hero .kpi__v{font-size:34px}
.kpi__s{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.q{display:inline-flex;align-items:center;gap:6px}
.q::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor}
.q--good{color:var(--good)} .q--warn{color:var(--warn)} .q--bad{color:var(--bad)}
.q span{color:var(--ink-2)}

.live__grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:14px}
.col{display:flex;flex-direction:column;gap:14px;min-width:0}
.chart{position:relative;height:220px;width:100%}
.chart--tall{height:280px}
.chart svg{display:block;width:100%;height:100%;overflow:visible}
.ax text{fill:var(--ink-3);font-size:10px;font-family:var(--mono)}
.ax line{stroke:var(--line);stroke-width:1}
.ln{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ar{fill:url(#areaGrad)}
.lossmark{fill:var(--bad)}
.xh{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:3 3}
.xh-dot{fill:var(--accent);stroke:var(--surface-solid);stroke-width:2}
.tip{position:absolute;pointer-events:none;z-index:5;background:rgba(6,10,20,.94);border:1px solid var(--line-2);border-radius:10px;padding:8px 10px;font-size:12px;font-family:var(--mono);color:var(--ink);white-space:nowrap;transform:translate(-50%,calc(-100% - 12px));opacity:0;transition:opacity .12s}
.tip.is-on{opacity:1}
.tip .t-l{color:var(--ink-3)}

.card--term{display:flex;flex-direction:column}
.term{height:340px;overflow:auto;font-size:12.5px;line-height:1.7;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.term div{white-space:pre;cursor:pointer;border-radius:4px;padding:0 4px;margin:0 -4px}
.term div:hover{background:rgba(255,255,255,.05)}
.term div.is-sel{background:rgba(94,240,255,.1)}
.term .t-ok{color:var(--ink)} .t-ok .n{color:var(--accent)} .t-dim{color:var(--ink-3)} .t-err{color:#ff9b9b} .t-head{color:var(--ink-2)} .t-warn{color:#ffd18a}
.toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);cursor:pointer}
.toggle input{accent-color:var(--accent)}

.path{width:100%;height:auto;display:block}
.path__wire{stroke:var(--line-2);stroke-width:2}
.path__wire--dash{stroke:var(--accent);stroke-dasharray:4 10;opacity:.5;animation:dash 1.2s linear infinite}
body:not(.is-running) .path__wire--dash{animation:none;opacity:.15}
@keyframes dash{to{stroke-dashoffset:-28}}
.path__node circle{fill:var(--surface-solid);stroke:var(--accent-2);stroke-width:2}
.path__node text{fill:var(--ink-2);font-size:8px;font-weight:700;letter-spacing:.08em;text-anchor:middle;font-family:var(--font)}
.path__lbl{fill:var(--ink-3);font-size:10px;text-anchor:middle;font-family:var(--mono)}
.path__pkt{fill:var(--accent);filter:drop-shadow(0 0 6px var(--accent))}
.path__pkt--down{fill:#fff}

.wf{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.wf__row{display:grid;grid-template-columns:62px 1fr 64px;align-items:center;gap:10px;font-size:12px}
.wf__name{color:var(--ink-2);font-family:var(--mono)}
.wf__track{position:relative;height:12px;background:rgba(255,255,255,.03);border-radius:4px}
.wf__bar{position:absolute;top:0;height:100%;border-radius:4px;min-width:2px;transition:left .35s var(--ease),width .35s var(--ease)}
.wf__val{text-align:right;font-family:var(--mono);color:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink-2);margin:4px 0 12px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:12px}
.kv dt{color:var(--ink-3)} .kv dd{margin:0;color:var(--ink);text-align:right;word-break:break-all}
.kv .sep{grid-column:1/-1;height:1px;background:var(--line);margin:4px 0}
.kv .grp{grid-column:1/-1;color:var(--accent);font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-top:4px}
.tag{display:inline-block;padding:1px 7px;border-radius:6px;font-size:11px;border:1px solid var(--line-2);color:var(--ink)}
.tag--tcp{border-color:rgba(217,89,38,.6);background:rgba(217,89,38,.14)}
.tag--udp{border-color:rgba(25,158,112,.6);background:rgba(25,158,112,.14)}
.tag--ipc{border-color:rgba(94,240,255,.5);background:rgba(94,240,255,.1)}

/* ---------- Report ---------- */
.report h2{margin:0;font-size:clamp(28px,4vw,48px);letter-spacing:-.035em}
.report__head .eyebrow{margin-bottom:10px}
.report__head p.muted{margin:6px 0 0;font-size:12px}
.report__actions{display:flex;gap:8px;flex-wrap:wrap}
.rep-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:14px;margin-bottom:14px}
.grade{display:flex;align-items:center;gap:22px}
.grade h3{margin:0 0 6px;font-size:22px;letter-spacing:-.02em}
.grade p{margin:0 0 6px;font-size:14px;line-height:1.5}
.grade__ring{--p:0;--c:var(--accent);flex:none;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.06) 0);position:relative}
.grade__ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--surface-solid)}
.grade__ring span{position:relative;font-size:40px;font-weight:800;letter-spacing:-.04em}
.cli pre{margin:0;font-size:12.5px;line-height:1.7;color:var(--ink);background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;overflow:auto;white-space:pre}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.tile__l{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em}
.tile__v{font-family:var(--mono);font-size:22px;font-weight:600;margin-top:6px;letter-spacing:-.02em}
.tile__v small{font-size:12px;color:var(--ink-3);margin-left:3px;font-weight:500}
.tile__s{font-size:11px;color:var(--ink-3);margin-top:3px}
.rep-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.span2{grid-column:span 2}
.bar{fill:var(--accent-2)} .bar:hover,.bar.is-hl{fill:var(--accent)}
.stackbar{display:flex;height:22px;border-radius:6px;overflow:hidden;gap:2px;margin:6px 0 14px}
.stackbar i{display:block;height:100%;min-width:2px}
.stackbar i:first-child{border-radius:6px 0 0 6px}.stackbar i:last-child{border-radius:0 6px 6px 0}
.phtable{width:100%;border-collapse:collapse;font-size:12px;font-family:var(--mono)}
.phtable td{padding:6px 0;border-top:1px solid var(--line)}
.phtable td:not(:first-child){text-align:right}
.phtable .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:-1px}
.tablewrap{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-sm)}
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{position:sticky;top:0;background:var(--surface-solid);text-align:right;font-weight:600;color:var(--ink-3);padding:9px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap;font-size:11px;letter-spacing:.04em}
.tbl td{padding:7px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th:first-child,.tbl td:first-child,.tbl th:nth-child(2),.tbl td:nth-child(2){text-align:left}
.tbl tr.lost td{color:#ff9b9b}
.tbl tbody tr:hover td{background:rgba(255,255,255,.03)}

.foot{position:relative;z-index:1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:20px clamp(16px,3vw,36px) calc(24px + var(--safe-b));font-size:12px;color:var(--ink-3)}
body.phase-hero .foot{display:none}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translate(-50%,20px);z-index:50;background:rgba(6,10,20,.95);border:1px solid var(--line-2);border-radius:12px;padding:10px 16px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .kpis{grid-template-columns:repeat(4,1fr)} .kpi--hero{grid-column:span 2}
  .live__grid,.rep-top{grid-template-columns:1fr}
}
@media (max-width:760px){
  .brand__by{display:none} #pwaPill{display:none}
  .eyebrow{letter-spacing:.2em;font-size:11px} .hero .eyebrow__line{display:none}
  .features{grid-template-columns:repeat(2,1fr)}
  .pingbtn{width:210px;height:210px} .pingbtn__label{font-size:22px}
  .kpis{grid-template-columns:repeat(2,1fr)} .kpi--hero{grid-column:span 2}
  .rep-grid{grid-template-columns:1fr} .span2{grid-column:auto}
  .live__ctrl{width:100%;justify-content:space-between}
  .timer{align-items:flex-start}
  .grade{flex-direction:column;align-items:flex-start}
  .term{height:280px;font-size:11.5px}
  .chart{height:190px}
  .seg__btn{padding:8px 13px}
}
@media (max-height:760px) and (min-width:761px){
  .hero__title{font-size:clamp(40px,6.4vw,80px)} .launch{margin-top:26px} .features{margin-top:28px}
  .pingbtn{width:210px;height:210px}
}