/* Trench Sniper Deck - generated from the approved mockup.
   Single-theme by design: a targeting deck reads as one lit surface. */
/* ══ Trench Sniper Deck ══════════════════════════════════════════════
   One state object drives every widget. Tokens surface inside the radar,
   are judged there, and are killed or taken there.                      */
:root{
  color-scheme:dark;
  --void:#04080b; --deep:#070d12; --panel:#0b131a; --panel2:#0f1c24;
  --line:#16262f; --line2:#20404e;
  --text:#dceaf0; --mid:#8aa5b1; --dim:#5a7481;
  --accent:#00e5c7; --adv:#52e08b; --rej:#ff4d6d; --hold:#ffb020; --gold:#ffd24a;
  --f-disp:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;
  --f-body:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  --r:12px;
}
*{box-sizing:border-box}

/* ── neon scrollbars ─────────────────────────────────────────────── */
*{scrollbar-width:thin;scrollbar-color:rgba(0,229,199,.5) rgba(255,255,255,.04)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:rgba(6,14,19,.55);border-radius:11px;
  box-shadow:inset 0 0 6px rgba(0,0,0,.55)}
::-webkit-scrollbar-thumb{border-radius:11px;border:3px solid transparent;background-clip:padding-box;
  background-color:rgba(0,229,199,.55);
  box-shadow:0 0 9px rgba(0,229,199,.55), inset 0 0 5px rgba(255,255,255,.35);
  transition:background-color .2s}
::-webkit-scrollbar-thumb:hover{background-color:rgba(0,229,199,.9);
  box-shadow:0 0 16px rgba(0,229,199,.95), inset 0 0 6px rgba(255,255,255,.5)}
::-webkit-scrollbar-thumb:active{background-color:var(--accent)}
::-webkit-scrollbar-corner{background:transparent}
body{margin:0;background:var(--void);color:var(--text);font-family:var(--f-body);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(52% 36% at 12% 6%, rgba(0,229,199,.13), transparent 62%),
    radial-gradient(46% 32% at 88% 18%, rgba(47,150,255,.11), transparent 62%),
    radial-gradient(60% 40% at 50% 96%, rgba(120,60,255,.09), transparent 64%),
    radial-gradient(90% 50% at 50% -10%, rgba(0,229,199,.07), transparent 60%);
  background-attachment:fixed}
.wrap{max-width:1300px;margin:0 auto;padding:0 14px;padding-block:0 40px;overflow:visible}
html,body{overflow-x:clip}
h2{font-family:var(--f-disp);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mid);margin:0;font-weight:600}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.up{color:var(--adv)} .down{color:var(--rej)} .warn{color:var(--hold)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.card{background:linear-gradient(180deg,rgba(17,32,41,.60),rgba(9,17,23,.48));
  backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);
  border:1px solid rgba(255,255,255,.085);border-radius:var(--r);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 24px 54px -30px #000}
.stage{position:relative}
.card>header{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line)}
.card>header .sub{margin-left:auto;font-family:var(--f-mono);font-size:10.5px;color:var(--dim)}
.sec{margin-top:13px}
.sh{display:flex;align-items:center;gap:9px;margin-bottom:6px;flex-wrap:wrap}
.sh .sub{font-size:12px;color:var(--dim)}
.note{font-size:11px;color:var(--dim);padding:9px 14px;border-top:1px solid var(--line);line-height:1.45}


/* ── status glyph: the bar's own state light ─────────────────────── */
.nowic{flex:none;width:19px;height:19px;display:block}
.nowic .dish{stroke:var(--accent);opacity:.32}
.nowic .swp{transform-origin:12px 12px;animation:nowspin 2.6s linear infinite}
.nowic .blip{fill:var(--accent);opacity:0;animation:nowblip 2.6s linear infinite}
@keyframes nowspin{to{transform:rotate(360deg)}}
@keyframes nowblip{0%,58%{opacity:0}66%{opacity:1}100%{opacity:0}}
.now.bad~.nowic .dish,.nowic.bad .dish{stroke:var(--rej)}
.nowic.bad .swp *{stroke:var(--rej)!important}
.nowic.bad .blip{fill:var(--rej)}
.nowic.good .swp *{stroke:var(--adv)!important}
.nowic.good .dish{stroke:var(--adv)}
.nowic.good .blip{fill:var(--adv)}
@media (prefers-reduced-motion:reduce){
  .nowic .swp,.nowic .blip{animation:none}
}

/* ── sign-in console ─────────────────────────────────────────────── */
.mask{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:18px;
  /* the stage floor's own ground, so this reads as part of the site */
  background:radial-gradient(120% 100% at 50% 106%,#0e2430 0%,var(--deep) 60%);
  animation:maskin .2s ease}
.mask::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(62% 58% at 50% 50%,#000,transparent);
  mask-image:radial-gradient(62% 58% at 50% 50%,#000,transparent)}
@keyframes maskin{from{opacity:0}}
.mask[hidden]{display:none}
/* the deck goes into lockdown behind it: falling glyphs, kept quiet at 30%
   and faded away from the middle so the console still reads */
/* the footer's tape: decorative, and deliberately unreadable as data -
   no prices, no symbols, no axis */
#lgChart{display:block;width:100%;height:58px;border-radius:9px;
  background:linear-gradient(180deg,rgba(6,16,22,.9),rgba(6,16,22,.35));
  border:1px solid rgba(255,255,255,.07)}
.sheet .tape{margin-top:14px;position:relative}
.sheet .tape .lbl{position:absolute;left:9px;top:7px;font-family:var(--f-mono);
  font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  pointer-events:none}

/* close, where people look for it */
.sheet .x{position:absolute;right:10px;top:9px;width:28px;height:28px;z-index:3;
  display:grid;place-items:center;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid transparent;color:var(--dim);
  transition:.15s}
.sheet .x:hover{color:var(--rej);border-color:rgba(255,77,109,.4);
  background:rgba(255,77,109,.09)}
.sheet .x:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sheet .x svg{width:14px;height:14px;display:block}

.sheetw{position:relative;width:100%;max-width:392px}
.sheet{position:relative;width:100%;border-radius:14px;padding:0 0 18px;
  background:linear-gradient(180deg,#0a1620,#070f15);
  border:1px solid rgba(0,229,199,.28);overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 40px 90px -30px #000,
    0 0 80px -34px var(--accent),0 1px 0 rgba(255,255,255,.07) inset;
  animation:sheetin .24s cubic-bezier(.2,.9,.3,1)}
@keyframes sheetin{from{opacity:0;transform:translateY(16px) scale(.975)}}
/* corner brackets: the panel is mounted, not floating */
.sheet .br{position:absolute;width:13px;height:13px;border:1.5px solid var(--accent);
  opacity:.75;pointer-events:none}
.sheet .br.tl{left:8px;top:8px;border-right:0;border-bottom:0}
.sheet .br.tr{right:8px;top:8px;border-left:0;border-bottom:0}
.sheet .br.bl{left:8px;bottom:8px;border-right:0;border-top:0}
.sheet .br.br2{right:8px;bottom:8px;border-left:0;border-top:0}

/* the rail across the top: what this panel is, and that the channel is closed */
/* the right padding keeps the channel status clear of the close control */
.sheet .rail{display:flex;align-items:center;gap:9px;padding:11px 46px 11px 16px;
  border-bottom:1px solid rgba(0,229,199,.16);background:rgba(0,229,199,.05)}
.sheet .rail .seal{display:grid;place-items:center;width:26px;height:26px;flex:none;
  border-radius:7px;color:var(--accent);background:rgba(0,229,199,.1);
  border:1px solid rgba(0,229,199,.28)}
.sheet .rail .seal svg{width:14px;height:14px;display:block}
.sheet .rail .seal .shackle{transform-origin:12px 11px;animation:sealshut 4.2s ease-in-out infinite}
@keyframes sealshut{0%,10%{transform:translateY(-2.4px) scaleY(1.2)}24%,100%{transform:none}}
.sheet .rail h2{font-size:11px;letter-spacing:.19em;color:var(--accent)}
.sheet .rail .stat{margin-left:auto;font-family:var(--f-mono);font-size:8.5px;
  letter-spacing:.11em;color:var(--dim);display:flex;align-items:center;gap:5px}
.sheet .rail .stat i{width:5px;height:5px;border-radius:50%;background:var(--accent);
  animation:sysbreathe 2.6s ease-in-out infinite}

.sheet .bd{padding:16px 16px 0}
.sheet .lede{font-size:11.5px;color:var(--dim);margin:0 0 15px;line-height:1.5}
.sheet label{display:block;font-family:var(--f-disp);font-size:9px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--dim);margin:0 0 6px}
/* a console field: flat surface, lit bar down the left edge on focus */
.sheet .row{position:relative;margin-bottom:13px}
.sheet input{width:100%;padding:11px 12px 11px 14px;border-radius:8px;font-size:13px;
  font-family:var(--f-mono);color:var(--text);background:#050d12;
  border:1px solid rgba(255,255,255,.09);transition:.16s}
.sheet .row::before{content:"";position:absolute;left:0;bottom:0;width:2px;height:38px;
  border-radius:2px 0 0 2px;background:var(--accent);opacity:0;transform:scaleY(.3);
  transform-origin:center;transition:.18s;pointer-events:none}
.sheet .row:focus-within::before{opacity:1;transform:scaleY(1)}
.sheet input:focus{outline:none;border-color:rgba(0,229,199,.55);background:#06131a}
.sheet input::placeholder{color:#38505c}

/* a refusal turns the fields red and shakes the panel once */
.sheet.bad input{border-color:rgba(255,77,109,.65);background:#150a0e;
  box-shadow:0 0 18px -10px var(--rej)}
.sheet.bad .row::before{background:var(--rej);opacity:1;transform:scaleY(1)}
.sheet.bad{animation:sheetno .34s cubic-bezier(.36,.07,.19,.97)}
@keyframes sheetno{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}
  50%{transform:translateX(-4px)}}

.sheet .go{position:relative;width:100%;margin-top:4px;padding:12px 16px;
  display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  overflow:hidden;
  font-family:var(--f-disp);font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);
  background:rgba(0,229,199,.1);border:1px solid var(--accent);border-radius:8px;
  transition:background .16s,box-shadow .16s,color .16s,transform .08s}
.sheet .go svg{width:14px;height:14px;flex:none}
.sheet .go:hover{background:rgba(0,229,199,.2);color:#d9fff9;
  box-shadow:0 0 28px -10px var(--accent)}
/* the press: the button dips and a ring leaves it */
.sheet .go:active{transform:translateY(1px) scale(.988);background:rgba(0,229,199,.32)}
.sheet .go.tap::after{content:"";position:absolute;inset:0;border-radius:8px;
  border:1.5px solid var(--accent);animation:gotap .42s ease-out}
@keyframes gotap{0%{opacity:.9;transform:scale(.97)}100%{opacity:0;transform:scale(1.06)}}
.sheet .go::before{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left}
.sheet .go:disabled{cursor:not-allowed;color:var(--mid);border-color:var(--line2);
  background:rgba(14,28,36,.5)}
.sheet .go.busy::before{animation:gorail 1.1s linear infinite}
@keyframes gorail{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.sheet .go:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.sheet .msg{font-family:var(--f-mono);font-size:11px;color:var(--rej);margin-top:11px;
  min-height:15px;display:flex;gap:6px;align-items:baseline;line-height:1.45}
.sheet .msg .c{animation:syscaret 1.1s steps(1) infinite}
.sheet .tries{margin-left:auto;color:var(--dim);flex:none;font-size:10px}
.sheet .bye{margin-top:13px;text-align:center}
.sheet .bye button{background:none;border:0;color:var(--dim);font-size:11.5px;cursor:pointer;
  font-family:inherit}
.sheet .bye button:hover{color:var(--accent)}

/* the agent sits on the console's top edge */
.sheetbot{position:absolute;left:50%;top:-40px;width:78px;margin-left:-39px;z-index:2;
  filter:drop-shadow(0 8px 24px rgba(0,229,199,.4));
  transform:rotate(var(--lrt,0deg));transition:transform .5s cubic-bezier(.3,1.2,.4,1);
  animation:lgfloat 4s ease-in-out infinite}
@keyframes lgfloat{50%{translate:0 -5px}}
.sheetbot svg{display:block;width:100%;height:auto;overflow:visible}
.sheetbot .eyes{transform:translate(var(--lex,0px),var(--ley,0px));
  transition:transform .18s cubic-bezier(.3,1.5,.5,1)}
.sheetbot .ring{transform-origin:42px 42px;animation:lgspin 7s linear infinite}
@keyframes lgspin{to{transform:rotate(360deg)}}
.mask.locked .sheetbot{filter:drop-shadow(0 8px 24px rgba(255,77,109,.45))}
.mask.locked .sheetbot .visorx{fill:var(--rej)}
@media (prefers-reduced-motion:reduce){
  .sheetbot,.mask::after,.sheet .rail .stat i,.sheet.bad{animation:none}
}
@media (max-width:420px){
  .sheetbot{top:-32px;width:64px;margin-left:-32px}
  .sheet .rail h2{font-size:10px;letter-spacing:.14em}
  .sheet .rail .stat{display:none}
}

/* ── command bar ─────────────────────────────────────────────────── */
.cmd{position:-webkit-sticky;position:sticky;top:calc(env(safe-area-inset-top,0px) + 10px);
  z-index:60;margin:14px 0 0;padding:10px 14px;
  background:rgba(6,12,17,.92);backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(255,255,255,.09);border-radius:var(--r);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 20px 40px -28px #000;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.modesel{display:flex;border:1px solid var(--line2);border-radius:7px;overflow:hidden;flex:none}
.modesel button{font-family:var(--f-disp);font-weight:700;font-size:10.5px;letter-spacing:.14em;
  padding:7px 11px;background:transparent;border:0;color:var(--dim);cursor:pointer;transition:.18s}
.modesel button[aria-pressed="true"]{background:#07211f;color:var(--accent)}
.modesel button.live[aria-pressed="true"]{background:var(--rej);color:#08080a;
  animation:livep 1.5s ease-in-out infinite}
@keyframes livep{50%{opacity:.62}}
.now{font-family:var(--f-mono);font-size:11.5px;color:var(--dim);min-width:0;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.now b{color:var(--accent);font-weight:600}
.now.bad b{color:var(--rej)} .now.good b{color:var(--gold)}

/* the four numbers that matter, given room to breathe */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:9px}
.kpi{background:linear-gradient(180deg,rgba(17,32,41,.58),rgba(9,17,23,.46));
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);
  border:1px solid rgba(255,255,255,.085);border-radius:var(--r);padding:11px 15px 0;
  position:relative;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 20px 44px -30px #000}
.kpi::before{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,199,.5),transparent)}
.kpi{display:flex;flex-direction:column;gap:1px}
.kh{display:flex;align-items:center;gap:8px;min-width:0}
.kh .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kh .trend{margin-left:auto;flex:none}
.spark{display:block;width:calc(100% + 30px);margin:7px -15px -1px;height:30px}
.spark .ln{fill:none;stroke-width:1.8;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round}
.spark .dot{r:2.6}
.trend{font-family:var(--f-mono);font-size:10px;font-variant-numeric:tabular-nums;
  padding:2px 7px;border-radius:20px;border:1px solid;white-space:nowrap;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.trend.up{color:var(--adv);border-color:rgba(82,224,139,.35);background:rgba(82,224,139,.1)}
.trend.down{color:var(--rej);border-color:rgba(255,77,109,.35);background:rgba(255,77,109,.1)}
.trend.flat{color:var(--dim);border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
.kpi .t{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.kpi .v{font-family:var(--f-mono);font-size:clamp(21px,2.5vw,28px);font-weight:600;line-height:1.08;
  margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;transition:color .3s;
  white-space:nowrap}
.kpi .s{font-size:11px;color:var(--mid);margin-top:2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.capw{margin:9px -15px 0;padding:0 15px 11px}
.capbar{height:6px;border-radius:3px;background:#101e26;border:1px solid var(--line);
  overflow:hidden}
.capbar i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--adv),var(--hold));transition:width .5s ease}
.capbar.hot i{background:linear-gradient(90deg,var(--hold),var(--rej))}
.snd{flex:none;width:36px;height:34px;border-radius:8px;cursor:pointer;font-size:14px;
  color:var(--dim);background:rgba(14,28,36,.5);border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:.18s}
.snd:hover{color:var(--accent);border-color:rgba(0,229,199,.4)}
.snd[aria-pressed="true"]{color:var(--gold);border-color:rgba(255,210,74,.45);
  background:rgba(255,210,74,.1);box-shadow:0 0 16px -6px var(--gold)}
.loginb{margin-left:auto;flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:34px;border-radius:8px;color:var(--dim);text-decoration:none;
  background:rgba(14,28,36,.5);border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:.18s}
.loginb:hover{color:var(--accent);border-color:rgba(0,229,199,.4);
  box-shadow:0 0 18px -8px var(--accent)}
.loginb svg{width:16px;height:16px;display:block}
.kill{margin-left:auto;font-family:var(--f-disp);font-weight:700;font-size:11px;letter-spacing:.14em;
  color:var(--rej);background:#1a0c11;border:1px solid #4a1d28;border-radius:7px;padding:9px 14px;
  cursor:pointer;transition:.15s;flex:none}
.kill:hover{background:#2a1119;border-color:var(--rej)}
.flash{animation:fl .5s ease}
@keyframes fl{0%{background:rgba(82,224,139,.18)}100%{background:transparent}}

/* ── pipeline rail ───────────────────────────────────────────────── */
.railw{overflow-x:auto;margin:0 -14px;padding:9px 14px 7px}
.railw::-webkit-scrollbar{height:7px}
.glist::-webkit-scrollbar{width:8px}
.rail{display:flex;gap:7px;min-width:700px}
.sg{flex:1;position:relative;background:rgba(14,28,36,.5);font-size:0;
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.075);border-radius:10px;padding:8px 11px 9px;
  transition:flex .4s cubic-bezier(.3,.9,.3,1),background .3s,border-color .3s;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
.sg .ico{position:absolute;right:10px;top:9px;display:grid;place-items:center;
  width:26px;height:26px;border-radius:8px;color:var(--dim);
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  transition:color .3s,border-color .3s,background .3s,box-shadow .3s}
.sg .ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;display:block;overflow:visible}
.sg .ico svg *{transform-box:view-box;transform-origin:10px 10px}
.sg.past .ico{color:var(--adv);border-color:rgba(82,224,139,.3)}
.sg.on .ico{color:var(--accent);border-color:rgba(0,229,199,.45);
  background:rgba(0,229,199,.08);box-shadow:0 0 18px -6px var(--accent)}

/* each glyph moves the way its stage behaves */
.sg.on .a-spin{animation:icoSpin 2.2s linear infinite}
@keyframes icoSpin{to{transform:rotate(360deg)}}
.sg.on .a-rip{animation:icoRip 2.2s ease-out infinite}
@keyframes icoRip{0%{opacity:.9;transform:scale(.45)}70%,100%{opacity:0;transform:scale(2.4)}}
.sg.on .a-lock{animation:icoLock 1.5s ease-in-out infinite}
@keyframes icoLock{0%,100%{transform:scale(1)}50%{transform:scale(.72)}}
.sg.on .a-tick{animation:icoTick 1.5s ease-in-out infinite}
@keyframes icoTick{0%,100%{opacity:.45}50%{opacity:1}}
.sg.on .a-draw{stroke-dasharray:11;stroke-dashoffset:11;animation:icoDraw 1.9s ease-in-out infinite}
@keyframes icoDraw{0%{stroke-dashoffset:11}45%,75%{stroke-dashoffset:0}100%{stroke-dashoffset:-11}}
.sg.on .a-tip{transform-origin:10px 6.5px;animation:icoTip 2.1s ease-in-out infinite}
@keyframes icoTip{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.sg.on .a-bolt{animation:icoBolt 1.2s ease-in-out infinite}
@keyframes icoBolt{0%,100%{opacity:.4;filter:none}
  45%{opacity:1;filter:drop-shadow(0 0 5px var(--accent))}}
.sg.on .a-wave{transform-origin:5.5px 7px;animation:icoWave 1.8s ease-in-out infinite}
@keyframes icoWave{0%,100%{transform:skewX(0) scaleX(1)}50%{transform:skewX(-9deg) scaleX(.92)}}

/* segmented block loader under each tile */
.load{display:flex;gap:2px;height:3px;margin-top:7px}
.load i{flex:1;border-radius:1px;background:rgba(255,255,255,.07)}
.sg.past .load i{background:rgba(82,224,139,.3)}
.sg.on .load i{animation:seg 1.5s linear infinite}
@keyframes seg{0%,100%{background:rgba(255,255,255,.07);box-shadow:none}
  10%{background:var(--accent);box-shadow:0 0 7px var(--accent)}
  38%{background:rgba(0,229,199,.32);box-shadow:none}}
.railnow{display:none}
.sg .k{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;color:var(--dim)}
.sg .nm{font-family:var(--f-disp);font-weight:600;font-size:12.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mid);margin-top:2px}
.sg .ct{font-family:var(--f-mono);font-size:11px;color:var(--dim);margin-top:3px;
  font-variant-numeric:tabular-nums}
.sg{padding-bottom:9px}
.sg.on{flex:1.9;background:rgba(20,44,56,.6);border-color:rgba(0,229,199,.32)}
.sg.on .nm{color:var(--accent)} .sg.on .ct{color:var(--text)}

.sg .drop{position:absolute;right:9px;top:8px;font-family:var(--f-mono);font-size:9px;
  color:var(--rej);opacity:0}
.sg .drop.show{animation:drop 1s ease}
@keyframes drop{0%{opacity:0;transform:translateY(-3px)}25%{opacity:1}100%{opacity:0;transform:translateY(7px)}}

/* ══ THE FLOOR — full width ══════════════════════════════════════ */
.floor{position:relative;height:384px;overflow:hidden;border-radius:0 0 var(--r) var(--r);
  background:radial-gradient(120% 100% at 50% 106%,#0e2430 0%,var(--deep) 60%)}
.gridbg{position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(60% 60% at 42% 52%,#000,transparent);
          mask-image:radial-gradient(60% 60% at 42% 52%,#000,transparent)}

/* radar: the arena. Everything happens inside it. */
.radar{position:absolute;left:45%;top:49%;width:360px;height:360px;margin:-180px 0 0 -180px}
.radar .ring{position:absolute;inset:0;border:1px solid var(--line2);border-radius:50%;opacity:.55}
.radar .ring:nth-child(2){inset:60px;opacity:.4}
.radar .ring:nth-child(3){inset:120px;opacity:.3}
/* the rotating wedge stays, but faint - the ping is the signal */
.sweep{position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity .4s;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(0,229,199,.11) 30deg,transparent 60deg)}
.floor.scanning .sweep{opacity:1;animation:spin 4.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* HEARTBEAT PING: lub-dub, then rest. Beams out from the bot to the rim. */
.ping{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;
  border:1.5px solid rgba(0,229,199,.85);
  box-shadow:0 0 22px -4px rgba(0,229,199,.6), inset 0 0 22px -6px rgba(0,229,199,.5);
  transition:border-color .4s,box-shadow .4s}
/* closing in: the signal gets harder and brighter */
.radar.urgent .ping{border-width:2px;border-color:rgba(120,245,225,.95);
  box-shadow:0 0 30px -2px rgba(0,229,199,.85), inset 0 0 26px -6px rgba(0,229,199,.6)}
.radar.urgent .ring{border-color:rgba(0,229,199,.28)}
.ring{transition:border-color .5s}
/* fired from JS so the ring, the bot pulse and every coin flash share one clock */
.ping.go{animation-name:ping;animation-timing-function:linear}
.ping.dub{border-color:rgba(0,229,199,.42)}
@keyframes ping{
  0%  {transform:scale(.07);opacity:0}
  7%  {opacity:.92}
  62% {opacity:.3}
  100%{transform:scale(1);opacity:0}
}
/* the bot thumps on the beat it emits */
.bot.beat .visor{animation:thump .42s ease-out}
@keyframes thump{0%{opacity:1;transform:scale(1)}35%{opacity:.5;transform:scale(1.14)}
  100%{opacity:1;transform:scale(1)}}
.bot.beat::after{animation:beatGlow .5s ease-out}
@keyframes beatGlow{0%,100%{opacity:1}40%{opacity:.5}}

/* a coin lights up at the instant the wavefront reaches it */
.coin.lit img{animation:lit .55s ease-out}
@keyframes lit{0%{box-shadow:0 0 0 0 rgba(0,229,199,.55);border-color:var(--accent)}
  45%{box-shadow:0 0 20px 3px rgba(0,229,199,.5);border-color:var(--accent)}
  100%{box-shadow:0 0 0 0 rgba(0,229,199,0)}}

/* ── a token on the radar ────────────────────────────────────────── */
.ctip{position:absolute;z-index:20;min-width:196px;max-width:250px;padding:10px 12px;
  border-radius:11px;pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity .16s ease,transform .16s ease;
  background:rgba(10,24,32,.93);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 18px 44px -18px #000, 0 1px 0 rgba(255,255,255,.07) inset}
.ctip.on{opacity:1;transform:none}
.ctip .h{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.ctip .h img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;
  background:#16262e;border:1px solid var(--line2)}
.ctip .h b{font-family:var(--f-disp);font-size:13px;line-height:1.15;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctip .h span{font-family:var(--f-mono);font-size:9px;color:var(--dim);display:block}
.ctip dl{display:grid;grid-template-columns:auto auto;gap:3px 10px;margin:0;
  font-family:var(--f-mono);font-size:10.5px}
.ctip dt{color:var(--dim)}
.ctip dd{margin:0;text-align:right;color:var(--mid);font-variant-numeric:tabular-nums}
.ctip dd.no{color:var(--rej)} .ctip dd.ok{color:var(--adv)}
.ctip .ft{margin-top:8px;padding-top:7px;border-top:1px solid rgba(255,255,255,.08);
  font-size:10px;line-height:1.4;color:var(--dim)}
.ctip .ft b{color:var(--rej);font-weight:600}
.ctip .ft b.pass{color:var(--adv)}

.coin{position:absolute;width:52px;height:52px;margin:-26px 0 0 -26px;cursor:help;
  display:grid;place-items:center;will-change:transform,opacity}
.coin img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#16262e;
  border:1px solid var(--line2);display:block}
.coin .nm{position:absolute;top:52px;left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:9.5px;color:var(--mid);white-space:nowrap;
  background:rgba(6,14,19,.8);padding:1px 6px;border-radius:4px;opacity:0;transition:opacity .3s}
.coin.live .nm{opacity:1}
.coin.in{animation:coinIn .55s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes coinIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
.coin.idle img{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.coin.out{animation:coinOut .5s ease forwards}
@keyframes coinOut{to{opacity:0;transform:scale(.55)}}

/* examining: targeting reticle closes on the subject */
.coin.examining{z-index:4}
.coin.examining img{border-color:var(--accent);box-shadow:0 0 22px -4px var(--accent)}
.retic{position:absolute;width:88px;height:88px;border-radius:50%;
  border:1.5px dashed var(--accent);opacity:0}
.coin.examining .retic{animation:reticIn .5s ease forwards,reticSpin 4s linear .5s infinite}
@keyframes reticIn{from{opacity:0;transform:scale(1.9)}to{opacity:.85;transform:scale(1)}}
@keyframes reticSpin{to{transform:rotate(360deg)}}
.retic::before,.retic::after{content:"";position:absolute;background:var(--accent)}
.retic::before{left:50%;top:-6px;width:1px;height:12px;margin-left:-.5px}
.retic::after{left:50%;bottom:-6px;width:1px;height:12px;margin-left:-.5px}

/* KILLED — reticle snaps red, coin cracks, shards fly, puff of smoke */
.coin.killed img{animation:killShake .3s ease, killImplode .55s .3s ease forwards;
  border-color:var(--rej)}
@keyframes killShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px) rotate(-7deg)}
  75%{transform:translateX(5px) rotate(7deg)}}
@keyframes killImplode{to{opacity:0;transform:scale(.15) rotate(38deg)}}
.coin.killed .retic{border-color:var(--rej);border-style:solid;
  animation:killRing .5s ease forwards}
@keyframes killRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(.55)}}
.slash{position:absolute;width:70px;height:2px;background:var(--rej);opacity:0;
  box-shadow:0 0 12px var(--rej)}
.coin.killed .slash{animation:slash .4s .22s ease forwards}
.coin.killed .slash:nth-of-type(2){animation-delay:.3s}
@keyframes slash{0%{opacity:0;transform:rotate(var(--rot,45deg)) scaleX(0)}
  40%{opacity:1;transform:rotate(var(--rot,45deg)) scaleX(1)}
  100%{opacity:0;transform:rotate(var(--rot,45deg)) scaleX(1)}}
.shard{position:absolute;width:5px;height:5px;background:var(--rej);border-radius:1px;opacity:0}
.coin.killed .shard{animation:shard .7s .3s ease-out forwards}
@keyframes shard{0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
/* a chip, not floating words: on a small radar this lands across the coin
   next door, and bare letters over a photo are unreadable either way */
.killtag{position:absolute;top:-26px;left:50%;transform:translateX(-50%);z-index:9;
  font-family:var(--f-disp);font-weight:700;font-size:10px;letter-spacing:.16em;
  color:var(--rej);white-space:nowrap;opacity:0;pointer-events:none;
  max-width:96px;overflow:hidden;text-overflow:ellipsis;
  padding:1px 6px;border-radius:5px;
  background:rgba(26,8,13,.92);border:1px solid rgba(255,77,109,.45)}
.coin.killed .killtag{animation:tagUp 1.1s .3s ease forwards}
@keyframes tagUp{0%{opacity:0;transform:translate(-50%,6px)}
  25%{opacity:1;transform:translate(-50%,-2px)}100%{opacity:0;transform:translate(-50%,-20px)}}

/* TAKEN — gold shockwaves, coin blooms, rays, then it drops to the bot */
.coin.taken{z-index:5}
.coin.taken img{border-color:var(--gold);animation:bloom 1.5s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes bloom{0%{transform:scale(1)}22%{transform:scale(1.55);
  box-shadow:0 0 52px 6px rgba(255,210,74,.65)}55%{transform:scale(1.3)}
  100%{transform:scale(.5) translateY(var(--drop,120px));opacity:0}}
.coin.taken .retic{border-color:var(--gold);animation:none;opacity:0}
.wave{position:absolute;width:56px;height:56px;border-radius:50%;border:2px solid var(--gold);opacity:0}
.coin.taken .wave{animation:wave 1.1s ease-out forwards}
.coin.taken .wave:nth-of-type(2){animation-delay:.16s}
.coin.taken .wave:nth-of-type(3){animation-delay:.32s}
@keyframes wave{0%{opacity:.85;transform:scale(.6)}100%{opacity:0;transform:scale(3.4)}}
.gray{position:absolute;width:2px;height:60px;margin-top:-30px;
  background:linear-gradient(var(--gold),transparent);opacity:0;transform-origin:50% 100%}
.coin.taken .gray{animation:grayOut .9s .1s ease-out forwards}
@keyframes grayOut{0%{opacity:0;transform:rotate(var(--rot)) scaleY(.2)}
  35%{opacity:.9;transform:rotate(var(--rot)) scaleY(1)}
  100%{opacity:0;transform:rotate(var(--rot)) scaleY(1.25)}}
.wintag{position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  font-family:var(--f-disp);font-weight:700;font-size:11px;letter-spacing:.2em;
  color:var(--gold);white-space:nowrap;opacity:0;text-shadow:0 0 16px var(--gold)}
.coin.taken .wintag{animation:tagUp 1.4s .15s ease forwards}

/* ── gate checklist, bottom-left of the floor ────────────────────── */
.checks{position:absolute;left:18px;top:18px;width:min(252px,32%);display:flex;
  flex-direction:column;gap:2px;z-index:6;padding:11px 12px;border-radius:11px;
  /* it may never reach the scores below it */
  max-height:calc(100% - 36px - 80px);overflow:hidden;
  background:rgba(9,22,29,.66);border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.checks:empty{display:none!important}
/* the checks belong to a token; show which one */
.checks .who{display:flex;align-items:center;gap:7px;min-width:0;margin:-1px 0 7px;
  padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.07)}
.checks .who img{width:22px;height:22px;border-radius:50%;flex:none;
  object-fit:cover;background:#16262e;border:1px solid rgba(255,255,255,.1)}
.checks .who .n{font-family:var(--f-disp);font-weight:700;font-size:12.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.checks .who .a{font-family:var(--f-mono);font-size:8.5px;color:var(--dim);margin-left:auto;
  flex:none}
/* a header so the panel says what it is, with a live count */
.ckh{display:flex;align-items:center;gap:7px;font-family:var(--f-disp);font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--dim);font-weight:600;
  padding-bottom:7px;margin-bottom:5px;border-bottom:1px solid rgba(255,255,255,.07)}
.ckh b{margin-left:auto;font-family:var(--f-mono);letter-spacing:0;color:var(--accent);
  font-variant-numeric:tabular-nums}
.ckh.done b{color:var(--adv)} .ckh.failed b{color:var(--rej)}

/* each row lands exactly once: slide in, stamp the mark, then reveal the value */
.ck{display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10.5px;
  color:var(--dim);position:relative;padding:1.5px 0;min-height:17px;
  animation:ckIn .36s cubic-bezier(.2,1,.3,1) both}
.ck .lb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck .v{max-width:52%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:right}
@keyframes ckIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
/* waiting its turn: the name is already there, the verdict is not */
.ck.pend{opacity:.34;animation:none}
.ck.pend .d{border-style:dashed;background:transparent;color:transparent;animation:none}
.ck.pend .v::after{content:"· · ·";color:var(--dim);letter-spacing:.1em}
.ck .d{transform:scale(0);animation:dPop .34s cubic-bezier(.25,1.9,.45,1) .1s forwards}
@keyframes dPop{to{transform:scale(1)}}
.ck .v{opacity:0;animation:vIn .3s ease .22s forwards}
@keyframes vIn{to{opacity:1}}
/* a failing gate is the whole story - let it announce itself */
.ck.no{animation:ckIn .36s cubic-bezier(.2,1,.3,1) forwards, ckFail .7s .14s ease}
@keyframes ckFail{0%,100%{background:transparent;box-shadow:none}
  22%{background:rgba(255,77,109,.16);box-shadow:0 0 0 1px rgba(255,77,109,.3)}}
.ck.no .d{animation:dPop .34s cubic-bezier(.25,1.9,.45,1) .1s forwards,
  dShake .4s .3s ease}
@keyframes dShake{0%,100%{margin-left:0}25%{margin-left:-3px}75%{margin-left:3px}}

/* scan line travelling down the panel while gates are being evaluated */
.checks::after{content:"";position:absolute;left:0;right:0;top:-3px;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  box-shadow:0 0 14px var(--accent);pointer-events:none}
.checks.scanning::after{opacity:1;animation:scanLine 1.15s linear infinite}
@keyframes scanLine{0%{top:-3px}100%{top:100%}}
.ck .d{width:13px;height:13px;border-radius:50%;border:1px solid var(--line2);flex:none;
  display:grid;place-items:center;font-size:8px}
.ck.ok{color:var(--mid)} .ck.ok .d{border-color:#1d5c40;background:#0c2a1d;color:var(--adv)}
.ck.no{color:var(--rej)} .ck.no .d{border-color:#5c1d2b;background:#2a0c14;color:var(--rej)}
.ck .v{margin-left:auto;color:var(--dim)} .ck.no .v{color:var(--rej)}

/* score HUD */
/* locked to the checks panel's column above, and split exactly in half, so
   a long score cannot push its neighbour off the floor */
.scores{position:absolute;left:18px;bottom:18px;z-index:6;
  width:min(252px,32%);display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sc{background:rgba(14,30,39,.58);border:1px solid rgba(255,255,255,.08);border-radius:10px;
  padding:7px 10px;min-width:0;min-height:62px;overflow:hidden;
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
.sc .t{font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc .v,.sc .g{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc{transition:border-color .3s,box-shadow .3s}
.sc.hit{animation:scHit .7s ease}
@keyframes scHit{0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
  30%{box-shadow:0 0 22px -4px currentColor, 0 1px 0 rgba(255,255,255,.05) inset}}
.sc .v{font-family:var(--f-mono);font-size:18px;font-weight:600;line-height:1.1;
  font-variant-numeric:tabular-nums;transition:color .3s}
.sc .bar i{transition:width .6s cubic-bezier(.2,.9,.3,1),background .3s}
.sc .g{font-family:var(--f-mono);font-size:9px;color:var(--dim)}
.sc .bar{height:3px;background:#14242c;border-radius:2px;margin-top:5px;overflow:hidden}
.sc .bar i{display:block;height:100%;width:0;transition:width .5s ease}

/* robot */
.bot{position:absolute;left:45%;top:49%;width:116px;margin:-63px 0 0 -58px;z-index:3;
  transition:transform .5s cubic-bezier(.3,.9,.3,1)}
/* a soft floor-glow so the bot reads as standing at the centre, not floating over it */
.bot::after{content:"";position:absolute;left:50%;bottom:-6px;width:112px;height:22px;
  margin-left:-56px;border-radius:50%;background:radial-gradient(closest-side,
  rgba(0,229,199,.28),transparent);filter:blur(3px);z-index:-1;transition:background .3s}
.bot.dance::after{background:radial-gradient(closest-side,rgba(255,210,74,.38),transparent)}
.bot svg{display:block;width:100%;height:auto;overflow:visible}
/* the bot wanders its own patch of the radar; the eyes lead the body */
.bot{transform:translate(var(--bx,0px),var(--by,0px)) rotate(var(--bt,0deg));
  transition:transform 1.6s cubic-bezier(.33,0,.2,1)}
.bot .eyes{transform:translate(var(--ex,0px),var(--ey,0px));
  transition:transform .32s cubic-bezier(.3,1.4,.5,1)}
.bot .hov{transform-box:fill-box}
.bot.blinkx .eyes{animation:eyeblink .16s steps(1)}
@keyframes eyeblink{0%,100%{transform:translate(var(--ex,0px),var(--ey,0px)) scaleY(1)}
  50%{transform:translate(var(--ex,0px),var(--ey,0px)) scaleY(.12)}}
@media (prefers-reduced-motion:reduce){
  .bot,.bot .eyes{transition:none}
}
.bot .hov{animation:hov 3s ease-in-out infinite;transform-origin:50% 100%}
@keyframes hov{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.visor{fill:var(--accent);transition:fill .25s}
.bot.reject .visor,.bot.rug .visor{fill:var(--rej)}
.bot.approve .visor,.bot.win .visor{fill:var(--gold)}
.bot.reject{animation:flinch .42s ease}
.bot.approve,.bot.win{animation:pop .55s cubic-bezier(.3,1.7,.5,1)}
.bot.rug{animation:slump .8s ease}
/* celebration: a proper little routine - bounce, twist, spin, jump */
.bot.dance{animation:dance 2.8s cubic-bezier(.4,0,.55,1)}
.bot.dance .visor{fill:var(--gold)}
.bot.dance .glow{filter:drop-shadow(0 0 22px rgba(255,210,74,.8))}
@keyframes dance{
  0%  {transform:translateY(0) rotate(0deg) scale(1)}
  7%  {transform:translateY(-18px) rotate(-11deg) scale(1.04)}
  14% {transform:translateY(0) rotate(9deg)}
  21% {transform:translateY(-15px) rotate(11deg) scale(1.04)}
  28% {transform:translateY(0) rotate(-9deg)}
  35% {transform:translateY(-22px) rotate(0deg) scale(1.09)}
  42% {transform:translateY(0) rotate(0deg)}
  50% {transform:translateY(-10px) rotate(360deg)}
  58% {transform:translateY(0) rotate(360deg)}
  65% {transform:translateY(-14px) rotate(346deg) scale(1.05)}
  72% {transform:translateY(0) rotate(374deg)}
  79% {transform:translateY(-16px) rotate(346deg) scale(1.05)}
  86% {transform:translateY(0) rotate(360deg)}
  93% {transform:translateY(-24px) rotate(360deg) scale(1.1)}
  100%{transform:translateY(0) rotate(360deg) scale(1)}
}
.bot.dance .arm-l{animation:armL .42s ease-in-out infinite alternate}
.bot.dance .arm-r{animation:armR .42s ease-in-out infinite alternate}
@keyframes armL{from{transform:rotate(-20deg)}to{transform:rotate(-72deg) translateY(-8px)}}
@keyframes armR{from{transform:rotate(72deg) translateY(-8px)}to{transform:rotate(20deg)}}
/* the floor lights up with it */
.floor.party .gridbg{animation:party 1.4s steps(1) infinite}
@keyframes party{0%{opacity:.35}50%{opacity:.62}}
.floor.party .radar .ring{border-color:rgba(255,210,74,.35);
  animation:ringParty .7s ease-in-out infinite alternate}
@keyframes ringParty{to{border-color:rgba(0,229,199,.4)}}
@keyframes flinch{30%{transform:translateX(-8px) rotate(-5deg)}62%{transform:translateX(5px) rotate(3deg)}}
@keyframes pop{42%{transform:translateY(-18px) scale(1.08)}}
@keyframes slump{40%,70%{transform:translateY(9px) scale(.94)}}
.glow{filter:drop-shadow(0 0 10px rgba(0,229,199,.5))}
.bot.reject .glow,.bot.rug .glow{filter:drop-shadow(0 0 11px rgba(255,77,109,.6))}
.bot.approve .glow,.bot.win .glow{filter:drop-shadow(0 0 20px rgba(255,210,74,.7))}
.ant{animation:blink 1.5s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.arm{transform-origin:center;transition:transform .4s}
.bot.work .arm-l{transform:rotate(-26deg) translateY(-3px)}
.bot.work .arm-r{transform:rotate(26deg) translateY(-3px)}
.bot.approve .arm-l,.bot.win .arm-l{transform:rotate(-64deg) translateY(-9px)}
.bot.approve .arm-r,.bot.win .arm-r{transform:rotate(64deg) translateY(-9px)}


/* ── DECISIONS: floating glass over the floor ────────────────────── */
/* ── systems strip ───────────────────────────────────────────────── */
/* The strip sits between a title and a count, so a chip that resizes drags
   the whole header with it. Fixed boxes; only the characters change. */
.sysbar{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;margin:0 auto;
  min-width:0;justify-content:center}
.sysbar:empty{display:none}
.sysc{display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:7px;
  font-family:var(--f-mono);font-size:9.5px;
  background:rgba(14,28,36,.5);border:1px solid rgba(255,255,255,.07);
  color:var(--mid);transition:border-color .3s,background .3s;
  width:156px;flex:none;overflow:hidden;white-space:nowrap}
.sysc .led{width:6px;height:6px;border-radius:50%;flex:none;position:relative;
  background:var(--dim)}
/* each component's own mark - only shown where there is no room for words */
.sysc .ic{display:none;width:15px;height:15px;flex:none;color:var(--dim)}
.sysc.ok .ic{color:var(--adv);filter:drop-shadow(0 0 5px rgba(82,224,139,.55))}
.sysc.warn .ic{color:var(--gold);filter:drop-shadow(0 0 5px rgba(255,210,74,.55))}
.sysc.down .ic{color:var(--rej);filter:drop-shadow(0 0 6px rgba(255,77,109,.6));
  animation:sysalarm .9s steps(1) infinite}
.sysc.unknown .ic{color:#39505c;opacity:.85}
/* the live ones move; a dark mark sits still, which is the point */
.sysc.ok .ic .spin{transform-origin:12px 12px;animation:nowspin 3.4s linear infinite}
.sysc.ok .ic .wave{animation:icwave 2.2s ease-in-out infinite}
.sysc.ok .ic .wave:nth-of-type(2){animation-delay:.28s}
.sysc.ok .ic .blip{animation:icblip 2.2s ease-in-out infinite}
.sysc.ok .ic .clapper{transform-origin:12px 5px;animation:icring 3.6s ease-in-out infinite}
@keyframes icwave{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes icblip{0%,100%{opacity:.35}55%{opacity:1}}
@keyframes icring{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(9deg)}
  95%{transform:rotate(-9deg)}}
.sysc .led::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px solid currentColor;opacity:0}
.sysc .lb{letter-spacing:.1em;text-transform:uppercase;font-size:8.5px;color:var(--mid);
  white-space:nowrap}
.sysc .dt{color:var(--dim);font-size:9px;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;text-align:right}

.sysc.ok .led{background:var(--adv);color:var(--adv);box-shadow:0 0 8px -1px var(--adv);
  animation:sysbreathe 3.4s ease-in-out infinite}
@keyframes sysbreathe{50%{opacity:.45}}
.sysc.warn{border-color:rgba(255,210,74,.4);background:rgba(58,44,12,.4)}
.sysc.warn .led{background:var(--gold);color:var(--gold);box-shadow:0 0 9px -1px var(--gold)}
.sysc.warn .led::after{animation:syspulse 1.8s ease-out infinite}
.sysc.warn .lb,.sysc.warn .dt{color:var(--gold)}
.sysc.down{border-color:rgba(255,77,109,.45);background:rgba(58,14,24,.42)}
.sysc.down .led{background:var(--rej);color:var(--rej);box-shadow:0 0 11px -1px var(--rej);
  animation:sysalarm .9s steps(1) infinite}
.sysc.down .led::after{animation:syspulse 1.1s ease-out infinite}
.sysc.down .lb,.sysc.down .dt{color:var(--rej)}
@keyframes sysalarm{50%{opacity:.25}}
@keyframes syspulse{0%{opacity:.8;transform:scale(.7)}70%,100%{opacity:0;transform:scale(1.9)}}
.sysc.unknown{opacity:.6}
.sysc.unknown .led{background:transparent;border:1px solid var(--dim)}

/* an incident gets a line of its own, and only exists when there is one */
.sysnote{display:flex;gap:7px;align-items:baseline;padding:7px 14px;
  font-family:var(--f-mono);font-size:10px;line-height:1.45;
  border-bottom:1px solid var(--line);background:rgba(58,14,24,.3);color:var(--rej)}
.sysnote[hidden]{display:none}
.sysnote.warn{background:rgba(58,44,12,.3);color:var(--gold)}
.sysnote b{font-weight:500;letter-spacing:.08em;text-transform:uppercase;flex:none}
.sysnote .c{animation:syscaret 1.1s steps(1) infinite;flex:none}
@keyframes syscaret{50%{opacity:0}}

/* Narrow: the words go, the lights stay. A dot still says "look at me", and
   the line underneath says what - which is the part that has to survive. */
/* the header's own three zones, so the strip cannot push the title or the
   count around either */
.card>header>h2{flex:none;min-width:86px}
.card>header>.sub{flex:none;min-width:118px;text-align:right}
@media (max-width:1320px){ .sysc{width:112px} .sysc .dt{display:none} }
@media (max-width:900px){
  /* the header reads left to right: what this is, what it is doing, how it
     is. The marks ride here rather than taking a row of their own. */
  .card>header{flex-wrap:nowrap;gap:0;align-items:center}
  /* the title owns only its own width here - any reserved space leaves the
     sub-line floating away from the rule that is supposed to tie it on */
  .card>header>h2{order:1;flex:none;width:auto;min-width:0}
  .card>header>.sub{order:2;flex:1 1 auto;min-width:0;align-self:center;
    margin:0 0 0 9px;padding-left:9px;border-left:1px solid var(--line2);
    line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .card>header>.sub:empty{border-left:0;margin:0;padding:0}
  .sysbar{order:3;gap:6px;width:auto;flex:none;flex-wrap:nowrap;align-items:center;
    margin:0 0 0 9px;padding-top:0;border-top:0}
  /* the words go and the marks take over: equal tiles */
  .sysc{width:29px;height:26px;padding:0;gap:0;justify-content:center}
  .sysc .lb,.sysc .dt,.sysc .led{display:none}
  .sysc .ic{display:block;width:14px;height:14px}
}
@media (max-width:560px){
  .card>header{gap:7px;padding:9px 12px}
  .card>header>.sub{font-size:9.5px}
  .sysbar{gap:4px}
  .sysc{width:25px;height:23px}
  .sysc .ic{width:13px;height:13px}
}
@media (prefers-reduced-motion:reduce){
  .sysc .led,.sysc .led::after,.sysnote .c{animation:none}
}

.glass{position:absolute;right:18px;top:18px;bottom:18px;width:min(360px,33%);z-index:8;
  background:linear-gradient(180deg,rgba(14,32,42,.62),rgba(8,17,23,.55));
  backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);
  border:1px solid rgba(255,255,255,.09);border-radius:14px;overflow:hidden;
  box-shadow:0 22px 58px -26px #000, 0 1px 0 rgba(255,255,255,.07) inset;
  display:flex;flex-direction:column}
.glass .gh{display:flex;align-items:center;gap:8px;padding:11px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);flex:none}
.glass .gh h2{font-size:11px}
.glass .gh .n{margin-left:auto;font-family:var(--f-mono);font-size:10px;color:var(--dim)}
.glist{overflow-y:auto;overflow-x:hidden;flex:1;padding:6px 0;position:relative}
.gr{display:flex;align-items:center;gap:9px;padding:8px 13px;width:100%;text-align:left;
  background:transparent;border:0;border-left:2px solid transparent;font:inherit;color:inherit;
  cursor:pointer;transition:background .18s}
.gr:hover{background:rgba(255,255,255,.04)}
.gr.new{animation:grIn .45s cubic-bezier(.2,1,.3,1)}
@keyframes grIn{from{opacity:0;transform:translateX(26px) scale(.96);filter:blur(3px)}
  to{opacity:1;transform:none;filter:blur(0)}}
.gr.buy{border-left-color:var(--gold);background:rgba(255,210,74,.07)}
.gr.win{border-left-color:var(--adv);background:rgba(82,224,139,.07)}
.gr.rug{border-left-color:var(--rej);background:rgba(255,77,109,.07)}
.gr img{width:22px;height:22px;border-radius:50%;flex:none;object-fit:cover;background:#16262e}
.gr .who{min-width:0;flex:1}
.gr .sym{font-family:var(--f-disp);font-weight:600;font-size:12.5px;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr .why{font-family:var(--f-mono);font-size:10px;color:var(--dim);display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr .rt{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.gr .clk{font-family:var(--f-mono);font-size:9px;color:var(--dim);font-variant-numeric:tabular-nums}
.gr .age{color:var(--mid)}
.tag{font-family:var(--f-mono);font-size:9px;letter-spacing:.09em;padding:2px 6px;border-radius:3px;
  flex:none;border:1px solid}
.tag.rej{color:var(--rej);border-color:rgba(255,77,109,.35);background:rgba(255,77,109,.1)}
.tag.buy{color:var(--gold);border-color:rgba(255,210,74,.35);background:rgba(255,210,74,.1)}
.tag.win{color:var(--adv);border-color:rgba(82,224,139,.35);background:rgba(82,224,139,.1)}
.glist::after{content:"";position:absolute;left:0;right:0;bottom:0;height:54px;pointer-events:none;
  background:linear-gradient(transparent,rgba(8,17,23,.85))}

/* ── open positions ──────────────────────────────────────────────── */
.pos{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:9px;padding:10px}
.pc{background:linear-gradient(180deg,rgba(14,28,36,.52),rgba(8,16,21,.4));
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.075);border-radius:11px;padding:12px 13px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;animation:grIn .4s ease}
.pc .top{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.pc img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#16262e;flex:none}
.pc .s{font-family:var(--f-disp);font-weight:700;font-size:14px;line-height:1.1}
.pc .a{font-family:var(--f-mono);font-size:9px;color:var(--dim)}
.pc .pl{margin-left:auto;text-align:right}
.pc .pl b{font-family:var(--f-mono);font-size:17px;font-weight:600;display:block;line-height:1.1;
  font-variant-numeric:tabular-nums}
.pc .pl span{font-family:var(--f-mono);font-size:10px;color:var(--dim)}
.track{position:relative;height:26px;border-radius:6px;background:#0a1620;border:1px solid var(--line);
  overflow:hidden;margin-bottom:7px}
.track .fill{position:absolute;top:0;bottom:0;background:rgba(82,224,139,.22);
  border-right:2px solid var(--adv);transition:width .5s ease,left .5s ease}
.track .fill.neg{background:rgba(255,77,109,.2);border-right:0;border-left:2px solid var(--rej)}
.track .mk{position:absolute;top:0;bottom:0;width:1px;background:var(--line2)}
.track .mk.tp{background:#1d5c40} .track .mk.rug{background:#5c1d2b}
.track .mk b{position:absolute;top:50%;left:3px;transform:translateY(-50%);
  font-family:var(--f-mono);font-size:8px;color:var(--dim);font-weight:400;white-space:nowrap}
.pc .chart{position:relative;height:72px;margin:2px 0 10px;border-radius:9px;
  background:linear-gradient(180deg,rgba(6,14,19,.6),rgba(6,14,19,.25));
  border:1px solid rgba(255,255,255,.055);overflow:hidden}
.pc .chart svg{display:block;width:100%;height:100%}
.pc .chart .pathline{stroke-width:1.8;fill:none;stroke-linejoin:round;stroke-linecap:round}
.pc .chart .zone{opacity:.16}
.pc .chart .base{stroke:var(--mid);stroke-width:1;stroke-dasharray:3 4;opacity:.5}
.pc .chart .tp{stroke:var(--gold);stroke-width:1;stroke-dasharray:2 5;opacity:.5}
.pc .chart .trail{stroke:var(--rej);stroke-width:1;stroke-dasharray:4 4;opacity:.6}
.pc .chart .head{filter:drop-shadow(0 0 6px currentColor)}
.pc .chart .head circle{r:2.6}
.pc .chart .lab{font-family:var(--f-mono);font-size:7.5px;fill:var(--dim)}
.pc .chart .wait{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:9.5px;color:var(--dim)}
.pc .meta{display:flex;gap:10px;font-family:var(--f-mono);font-size:9.5px;color:var(--dim);flex-wrap:wrap}
.pc .meta b{color:var(--mid);font-weight:500}
.rungs{display:flex;gap:3px;margin-left:auto}
.rungs i{width:16px;height:4px;border-radius:2px;background:#16262e}
.rungs i.hit{background:var(--adv)}
.empty{padding:18px 14px;text-align:center;color:var(--dim);font-size:12px}

/* ── control deck ────────────────────────────────────────────────── */
.ctrl{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:9px;padding:10px}
.knob{background:linear-gradient(180deg,rgba(14,28,36,.5),rgba(8,16,21,.38));
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.075);border-radius:11px;padding:10px 12px 11px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
/* derived, not set: what the two settings above actually produce */
.knob.derived{background:linear-gradient(180deg,rgba(10,22,29,.55),rgba(7,14,19,.4));
  display:flex;flex-direction:column;justify-content:center;gap:3px}
.knob.derived .big{font-family:var(--f-mono);font-size:25px;font-weight:600;line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums}
.knob.derived .sub{font-size:11px;color:var(--dim);line-height:1.4}
.knob .lab{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.knob .lab h3{margin:0;font-family:var(--f-disp);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mid);font-weight:600}
.knob .val{margin-left:auto;font-family:var(--f-mono);font-size:18px;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1}
.knob .val.over{color:var(--hold)}
.slot{position:relative}
.slot .tick{position:absolute;top:2px;bottom:10px;width:1px;background:var(--hold);
  opacity:.75;pointer-events:none;left:var(--cap,100%)}
.slot .tick::after{content:"";position:absolute;left:-2px;top:-1px;width:5px;height:5px;
  border-radius:50%;background:var(--hold)}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;
  height:20px;cursor:pointer;margin:0;display:block}
input[type=range]::-webkit-slider-runnable-track{height:7px;border-radius:4px;
  border:1px solid var(--line);background:
    linear-gradient(90deg,transparent 0 var(--cap,100%),rgba(255,176,32,.16) var(--cap,100%) 100%),
    linear-gradient(90deg,var(--accent) 0 var(--p,20%),#12222b var(--p,20%) 100%)}
input[type=range]::-moz-range-track{height:7px;border-radius:4px;
  border:1px solid var(--line);background:
    linear-gradient(90deg,transparent 0 var(--cap,100%),rgba(255,176,32,.16) var(--cap,100%) 100%),
    linear-gradient(90deg,var(--accent) 0 var(--p,20%),#12222b var(--p,20%) 100%)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--accent);border:3px solid #061016;margin-top:-6px;box-shadow:0 0 14px -2px var(--accent)}
input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--accent);
  border:3px solid #061016;box-shadow:0 0 14px -2px var(--accent)}
.knob .hint{font-size:10.5px;color:var(--dim);margin-top:5px;line-height:1.4;min-height:2.8em}
.knob .hint b{color:var(--hold)}
.ticks{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:8.5px;
  color:var(--dim);margin-top:1px}
.locked{display:flex;flex-wrap:wrap;gap:5px;padding:0 10px 10px}
.lk{font-family:var(--f-mono);font-size:10px;color:var(--mid);
  background:rgba(14,28,36,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:5px 8px}
.lk b{color:var(--text);font-weight:600} .lk i{color:var(--dim);font-style:normal}

/* ── ledger ──────────────────────────────────────────────────────── */
/* the same card the KPI row uses, so the ledger's figures carry the same
   weight as the deck's - centred, because there is nothing to align to */
.hstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:9px;
  padding:12px 14px;border-bottom:1px solid var(--line)}
.hs{position:relative;overflow:hidden;text-align:center;
  display:flex;flex-direction:column;justify-content:center;gap:1px;
  padding:11px 12px;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(17,32,41,.58),rgba(9,17,23,.46));
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);
  border:1px solid rgba(255,255,255,.085);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 20px 44px -30px #000}
.hs::before{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,199,.45),transparent)}
.hs .v{font-family:var(--f-mono);font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;
  line-height:1.15}
.hs .t{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-top:3px}
.hs .n2{font-size:10.5px;color:var(--mid);margin-top:2px}

/* On desktop this wrapper is not wanted at all: the five stats are five
   grid cells. It only becomes a strip where the grid runs out of room. */
.hs.mini{display:contents}

/* every completed trade, one bar, in order, with the running total over it */
.ribbon{position:relative;padding:12px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(8,17,23,.55),rgba(8,17,23,.2))}
.ribbon svg{display:block;width:100%;height:68px;overflow:visible}
.ribbon .zero{stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:2 4}
.ribbon .run{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:.9;
  stroke-linejoin:round;stroke-linecap:round}
.ribbon .runfill{fill:var(--accent);opacity:.07}
.ribbon .tag{font-family:var(--f-mono);font-size:8.5px;fill:var(--dim)}
.ribbon .tag.on{fill:var(--accent)}

@media (max-width:640px){
  /* the headline and the top-3-removed figure are one thought: keep them
     together and large, and demote the rest to a strip */
  /* the headline pair leads, the three supporting figures share a row */
  .hstats{grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px}
  .hs{padding:9px 10px}
  .hs .v{font-size:17px}
  .hs .n2{font-size:9.5px}
  .hs.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;grid-column:span 2;
    padding:0;background:none;border:0;box-shadow:none;overflow:visible}
  .hs.mini::before{display:none}
  .hs.mini .cell{padding:8px 6px}
  .hs.mini .v{font-size:14px}
  .hs.mini .t{font-size:7.5px;letter-spacing:.08em}
  .hs.mini .n2{font-size:8.5px}
  .ribbon{padding:10px 12px}
  .ribbon svg{height:54px}
}
.tw{overflow-x:auto;scrollbar-width:thin}
table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:600px}
td.when{font-family:var(--f-mono);font-size:11px;color:var(--dim);white-space:nowrap}
th{text-align:left;font-family:var(--f-disp);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);font-weight:600;padding:8px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
th.s{cursor:pointer;user-select:none;transition:color .15s}
th.s:hover{color:var(--mid)}
th.s .ar{display:inline-block;width:8px;margin-left:5px;opacity:.35;font-size:8px;
  transition:opacity .15s,transform .15s}
th.s[aria-sort]{color:var(--accent)}
th.s[aria-sort] .ar{opacity:1}
th.s[aria-sort="ascending"] .ar{transform:rotate(180deg)}
th.s:focus-visible{outline:1px solid var(--accent);outline-offset:-2px}
td{padding:7px 14px;border-bottom:1px solid #101c23;white-space:nowrap}
tr:last-child td{border-bottom:0}
td.n{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
/* no edge bar: the P&L and return columns already carry the colour, and on a
   phone the bar collided with the pinned token column */
.tk{display:flex;align-items:center;gap:9px}
.tk img{width:22px;height:22px;border-radius:50%;object-fit:cover;background:#16262e;flex:none}
.flag{font-family:var(--f-mono);font-size:9px;color:var(--hold);border:1px solid #5c4713;
  background:#1a1406;border-radius:3px;padding:1px 5px;margin-left:6px}
/* the buttons sit under the middle of the table; the count keeps the edge */
.pager{position:relative;display:flex;align-items:center;justify-content:center;
  gap:6px;padding:9px 14px;flex-wrap:wrap;border-top:1px solid var(--line)}
.pager button{font-family:var(--f-mono);font-size:11px;color:var(--mid);
  background:rgba(14,28,36,.5);border:1px solid rgba(255,255,255,.08);border-radius:6px;
  padding:5px 10px;cursor:pointer;transition:.15s;min-width:30px}
.pager button:hover:not(:disabled){color:var(--accent);border-color:rgba(0,229,199,.4)}
.pager button[aria-current="true"]{color:var(--accent);border-color:var(--accent);
  background:rgba(0,229,199,.1)}
.pager button:disabled{opacity:.35;cursor:default}
.pager .of{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-family:var(--f-mono);font-size:10.5px;color:var(--dim)}

/* ── operator console ─────────────────────────────────────────────
   The admin pages share the deck's shell: same wrap, same command bar, and
   the stage rail doubles as the tab bar. Only forms and tables need anything
   the deck did not already have. */
.adbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.adbrand{font-family:var(--f-disp);font-weight:700;letter-spacing:.14em;
  font-size:12px;color:var(--accent);text-decoration:none;flex:none}
.adbrand span{color:var(--text)}
.adwho{font-family:var(--f-mono);font-size:10.5px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.adwho b{color:var(--mid);font-weight:500}
/* the chips at the right of the bar: same shape as the deck's sound toggle */
.adchip{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;
  padding:0 11px;border-radius:8px;cursor:pointer;text-decoration:none;
  font-family:var(--f-disp);font-weight:700;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mid);background:rgba(14,28,36,.5);
  border:1px solid rgba(255,255,255,.08);transition:.18s}
.adchip:hover{color:var(--accent);border-color:rgba(0,229,199,.4)}
.adchip.go{color:var(--accent);border-color:rgba(0,229,199,.35);
  background:rgba(0,229,199,.1)}
.adchip svg{width:13px;height:13px;flex:none}

/* the rail as a tab bar: anchors wearing .sg, so tabs and stages cannot drift */
a.sg{display:block;text-decoration:none;color:inherit}
a.sg:hover{border-color:rgba(255,255,255,.16)}
a.sg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.adbody{padding-bottom:40px}
.adbody h1{font-family:var(--f-disp);font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text);margin:16px 0 4px}
.adbody h2{font-family:var(--f-disp);font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mid);margin:0 0 4px}
.adbody h3{font-family:var(--f-disp);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mid);margin:18px 0 8px}
.adbody .lede{font-size:12px;color:var(--dim);line-height:1.55;margin:0 0 14px}
.adbody .card{padding:16px 16px 18px;margin-bottom:12px}
.adbody .muted{font-size:11.5px;color:var(--dim);line-height:1.55}

/* forms */
.adrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.adfield{margin-bottom:12px;min-width:0}
.adfield label{display:block;font-family:var(--f-disp);font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 6px}
.adbody input,.adbody select{width:100%;padding:10px 12px;border-radius:9px;
  font-size:13px;font-family:var(--f-mono);color:var(--text);
  background:rgba(14,28,36,.5);border:1px solid rgba(255,255,255,.075);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;transition:.16s}
.adbody select{font-family:var(--f-body)}
.adbody input::placeholder{color:#38505c}
.adbody input:hover,.adbody select:hover{border-color:rgba(255,255,255,.15)}
.adbody input:focus,.adbody select:focus{outline:none;border-color:var(--accent);
  background:rgba(0,229,199,.06)}
.adbody input:-webkit-autofill{-webkit-text-fill-color:var(--text)!important;
  -webkit-box-shadow:0 0 0 1000px #0b1a21 inset!important;caret-color:var(--text);
  transition:background-color 9999s ease-out}

/* buttons: the sign-in console's chip, reusable */
.adbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;cursor:pointer;font-family:var(--f-disp);font-weight:700;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);background:rgba(0,229,199,.1);border:1px solid var(--accent);
  border-radius:8px;transition:.16s}
.adbtn:hover{background:rgba(0,229,199,.2);color:#d9fff9;
  box-shadow:0 0 24px -10px var(--accent)}
.adbtn:active{transform:translateY(1px)}
.adbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.adbtn.ghost{color:var(--mid);background:rgba(14,28,36,.5);
  border-color:rgba(255,255,255,.1)}
.adbtn.ghost:hover{color:var(--accent);border-color:rgba(0,229,199,.4);box-shadow:none}
.adbtn.danger{color:var(--rej);background:rgba(255,77,109,.08);
  border-color:rgba(255,77,109,.45)}
.adbtn.danger:hover{background:rgba(255,77,109,.18);color:#ffd9e0;box-shadow:none}
.adbtn.sm{padding:7px 12px;font-size:9.5px;letter-spacing:.14em}

/* post-mortem prose: the LLM's briefs, rendered from shared tokens */
.pmli{position:relative;padding:5px 0 5px 19px;font-size:12.5px;line-height:1.65;color:var(--text)}
.pmli:before{content:"b8";position:absolute;left:2px;color:var(--accent);font-weight:700}
.pmp{padding:4px 0;font-size:12.5px;line-height:1.65;color:var(--text)}
.pmbox{background:rgba(14,28,36,.5);border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:11px 13px;margin:0 0 6px}
.mono{font-family:var(--f-mono)}

/* a second row of tabs inside a section */
.adsubs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.adsub{font-family:var(--f-mono);font-size:11px;color:var(--mid);text-decoration:none;
  background:rgba(14,28,36,.5);border:1px solid rgba(255,255,255,.08);
  border-radius:7px;padding:6px 12px;transition:.15s}
.adsub:hover{color:var(--accent);border-color:rgba(0,229,199,.4)}
.adsub.on{color:var(--accent);border-color:var(--accent);background:rgba(0,229,199,.1)}

/* notices */
.adnote{display:flex;gap:8px;align-items:baseline;padding:10px 13px;
  border-radius:9px;font-size:12px;line-height:1.5;margin:0 0 13px}
.adnote.ok{background:rgba(82,224,139,.1);border:1px solid rgba(82,224,139,.3);
  color:var(--adv)}
.adnote.warn{background:rgba(255,210,74,.09);border:1px solid rgba(255,210,74,.3);
  color:var(--gold)}
.adnote.bad{background:rgba(255,77,109,.1);border:1px solid rgba(255,77,109,.35);
  color:var(--rej)}
.adnote b{font-weight:600}

/* a status pill, for 2FA state and the like */
.adpill{display:inline-block;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.1em;padding:2px 8px;border-radius:20px;
  border:1px solid rgba(255,255,255,.12);color:var(--dim)}
.adpill.on{color:var(--adv);border-color:rgba(82,224,139,.4);
  background:rgba(82,224,139,.1)}
.adpill.off{color:var(--rej);border-color:rgba(255,77,109,.4);
  background:rgba(255,77,109,.1)}

/* The deck collapses its rail into a progress bar on a phone, because a stage
   is a position in a pipeline and an icon says it. A console tab is a place
   you are going, so it keeps its name and scrolls instead. */
@media (max-width:780px){
  .railw:has(a.sg){overflow-x:auto;padding:9px 14px 7px}
  .rail:has(a.sg){min-width:540px;gap:7px;justify-content:flex-start}
  .rail:has(a.sg)::before,.rail:has(a.sg)::after{display:none}
  a.sg{flex:1;display:block;padding:8px 11px 9px;background:rgba(14,28,36,.5);
    border:1px solid rgba(255,255,255,.075);border-radius:10px;
    backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
  a.sg .k,a.sg .nm,a.sg .ct{display:block}
  a.sg.on{flex:1.6;background:rgba(20,44,56,.6);border-color:rgba(0,229,199,.32)}
}

@media (max-width:760px){
  .adrow{grid-template-columns:1fr}
  .adbody .card{padding:13px 13px 15px}
  .adwho{flex-basis:100%;order:5}
}

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width:1040px){
  .floor{height:430px}
  .radar{left:41%;width:340px;height:340px;margin:-170px 0 0 -170px}
  .radar .ring:nth-child(2){inset:57px} .radar .ring:nth-child(3){inset:114px}
  .bot{left:41%;width:104px;margin:-57px 0 0 -52px}
  .bot::after{width:100px;margin-left:-50px}
  .glass{width:min(300px,36%)}
  .checks{width:min(228px,33%)}
}
@media (max-width:860px){
  .stats{grid-template-columns:repeat(2,1fr);gap:8px}
  .kpi{padding:10px 12px 0}
  .kpi .v{font-size:clamp(19px,4.6vw,24px)}
  .kpi .t{font-size:9px;letter-spacing:.1em}
  .kpi .s{font-size:10px;white-space:normal;overflow:visible;line-height:1.4}
  .spark{width:calc(100% + 24px);margin:6px -12px -1px;height:26px}
  .capw{margin:7px -12px 0;padding:0 12px 9px}
  .trend{font-size:9px;padding:1px 6px}
  .rail{min-width:560px}
  .sg{padding:8px 10px 10px}
}
@media (max-width:900px){
  .ctrl{grid-template-columns:repeat(2,1fr);gap:8px;padding:9px}
  .knob{padding:9px 11px 10px}
  .knob .hint{min-height:2.6em;font-size:10px}
  .knob.derived .big{font-size:21px}
}
@media (max-width:780px){
  /* the glass leaves the floor entirely and becomes its own panel below it */
  .floor{height:360px;border-radius:0}
  .radar{left:50%;top:46%;width:296px;height:296px;margin:-148px 0 0 -148px}
  .radar .ring:nth-child(2){inset:49px} .radar .ring:nth-child(3){inset:98px}
  .bot{left:50%;width:92px;margin:-50px 0 0 -46px}
  .bot::after{width:88px;margin-left:-44px}
  /* no inner scroller on touch: a swipe that lands here must move the page */
  .glass{position:static;width:auto;height:auto;inset:auto;
    border:0;border-top:1px solid rgba(255,255,255,.08);border-radius:0 0 var(--r) var(--r);
    box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent}
  .glist{overflow:visible;max-height:none;flex:none}
  .glist::after{display:none}
  .glist .gr:nth-child(n+9){display:none}   /* 8 is plenty on a phone */
  /* the rail becomes a six-dot pipeline: no words, no scrolling */
  .railw{overflow:visible;padding:14px 16px 0}
  .railw::-webkit-scrollbar{display:none}
  .rail{min-width:0;gap:0;position:relative;justify-content:space-between}
  .rail::before,.rail::after{content:"";position:absolute;top:19px;height:2px;border-radius:2px}
  .rail::before{left:16px;right:16px;background:rgba(255,255,255,.09)}
  .rail::after{left:16px;width:calc((100% - 32px) * var(--prog,0));
    background:linear-gradient(90deg,var(--accent),var(--gold));
    box-shadow:0 0 12px var(--accent);transition:width .5s cubic-bezier(.3,.9,.3,1)}
  .sg{flex:0 0 auto;background:none;border:0;padding:0;box-shadow:none;backdrop-filter:none;
    -webkit-backdrop-filter:none;display:flex;justify-content:center;z-index:1}
  .sg .k,.sg .nm,.sg .ct,.sg .drop,.sg .load{display:none}
  .sg::after{display:none}
  .sg .ico{position:static;display:grid;place-items:center;width:38px;height:38px;
    border-radius:50%;color:var(--dim);background:rgba(10,22,29,.92);
    border:1px solid rgba(255,255,255,.1);
    transition:color .3s,border-color .3s,box-shadow .3s,transform .3s}
  .sg .ico svg{width:19px;height:19px}
  .sg.past .ico{color:var(--adv);border-color:rgba(82,224,139,.45)}
  .sg.on .ico{color:var(--accent);border-color:var(--accent);transform:scale(1.14);
    box-shadow:0 0 18px -2px var(--accent), 0 0 0 4px rgba(0,229,199,.12)}

  .railnow{display:flex;align-items:baseline;gap:9px;padding:9px 16px 0}
  .railnow b{font-family:var(--f-disp);font-size:11.5px;letter-spacing:.14em;color:var(--accent)}
  .railnow span{font-family:var(--f-mono);font-size:12px;color:var(--mid);
    font-variant-numeric:tabular-nums}

  /* fixed-size panels: the page must not move when data arrives */
  .checks{min-height:190px}
  .scores{min-height:74px}

  /* nothing may sit on top of the bot on a small screen */
  .scores{position:static;display:flex;gap:9px;padding:12px 14px 0}
  .scores .sc{flex:1;min-width:0}
  .checks{position:static;width:auto;margin:12px 14px 0;padding:12px 13px;
    max-height:none;background:rgba(14,30,39,.5)}
  /* the pair keeps the desktop's narrow column otherwise, and sits squeezed
     against the left with the row empty beside it */
  .scores{width:auto;display:grid;grid-template-columns:1fr 1fr}
  .scores .sc{min-width:0}

  /* the table scrolls sideways here, and a row of numbers belonging to no
     token is worse than no table: pin the token column */
  .tw table td:first-child,.tw table th:first-child{position:sticky;left:0;z-index:2;
    background:#0a151b}
  .tw table th:first-child{background:#0a151b}
  .tw table td:first-child::after{content:"";position:absolute;right:0;top:0;bottom:0;
    width:10px;transform:translateX(100%);pointer-events:none;
    background:linear-gradient(90deg,rgba(4,10,14,.55),transparent)}

  /* the pager belongs under the middle of the table, not hard left */
  .pager{justify-content:center;gap:5px;padding-bottom:7px}
  /* no room to pin it on a phone: it goes under, centred */
  .pager .of{position:static;transform:none;margin:7px 0 0;width:100%;text-align:center}
  .ck{font-size:11px}
  .cmd{gap:8px;padding:8px 12px;margin-top:10px}
  /* stay on the bar's own row: the text takes what is left between the
     glyph and the lock, so it truncates at the end and nowhere else */
  .now{flex:1 1 0;min-width:0;order:0;font-size:10.5px;line-height:1.35;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .modesel button{padding:6px 9px;font-size:9.5px;letter-spacing:.1em}
  .snd{width:32px;height:30px;font-size:13px}
  .kill{padding:7px 11px;font-size:10px}
  .ctrl{grid-template-columns:repeat(2,1fr);gap:7px;padding:8px}
  .knob{padding:8px 10px 9px}
  .knob .lab h3{font-size:10px;letter-spacing:.1em}
  .knob .val{font-size:16px}
  .knob .hint{font-size:9.5px;min-height:2.6em;margin-top:4px}
  .ticks{font-size:8px}
  .knob.derived .big{font-size:19px}
  .knob.derived .sub{font-size:10px}
  .pos{grid-template-columns:1fr;padding:9px;gap:8px}
  .locked{gap:4px;padding:0 9px 9px}
  .lk{font-size:9.5px;padding:4px 7px}
  .note{font-size:10.5px;padding:8px 12px}
  .sec{margin-top:11px}
  .wrap{padding:0 12px;padding-block:0 calc(40px + env(safe-area-inset-bottom,0px))}
  .railw{margin:0 -12px;padding:8px 12px 6px}
}
@media (max-width:430px){
  .stats{gap:8px}
  .kpi{border-radius:10px}
  .kpi .v{font-size:20px}
  .spark{height:22px}
  .kpi .t{font-size:9px;letter-spacing:.12em}
  .kpi .v{font-size:23px}
  /* the sub-line carries the part worth reading; let it wrap instead of
     cutting mid-number */
  .kpi .s{font-size:10.5px;white-space:normal;overflow:visible;line-height:1.4}
}
@media (max-width:430px){
  /* "$0.00 / $30.00" is 14 characters in a 138px box: at the wider floor the
     cap was being cut mid-number, which changes what the card says */
  .kpi .v{font-size:clamp(13px,4vw,19px)}
  .kpi .t{font-size:8.5px;letter-spacing:.08em}
  .floor{height:310px}
  .radar{width:250px;height:250px;margin:-125px 0 0 -125px}
  .radar .ring:nth-child(2){inset:42px} .radar .ring:nth-child(3){inset:84px}
  .coin{width:42px;height:42px;margin:-21px 0 0 -21px}
  .coin img{width:34px;height:34px}
  .coin .nm{top:42px;font-size:8.5px}
  /* the coins sit closer together here, so the tag has to be smaller still */
  .killtag{top:-20px;font-size:8.5px;letter-spacing:.1em;max-width:72px;padding:1px 5px}
  .wintag{font-size:9px}
  .retic{width:70px;height:70px}
  .bot{width:76px;margin:-41px 0 0 -38px}
  .bot::after{width:72px;margin-left:-36px;height:16px}
  .checks{padding:11px 12px;gap:2px}
  .ck{font-size:10.5px} .ck .d{width:12px;height:12px;font-size:7.5px}
  .scores{padding:11px 13px 0;gap:7px}
  .sc{padding:7px 9px} .sc .v{font-size:16px}
  .glist .gr:nth-child(n+7){display:none}
  .modesel button{padding:7px 9px;font-size:10px}
  .kill{padding:8px 11px;font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}