/* ==========================================================================
   DEVIL'S INK — CONSOLE DESIGN SYSTEM
   The single stylesheet for the redesigned panel. It REPLACES the five
   stacked layers in control.html (base, skin2, skin3, combofix, mobile3),
   which is why the redesign ships as its own page rather than an sixth
   layer on top of them — b90 established that cascade order there is
   load-bearing, and the only safe way to change it is not to.

   THREE RULES FOR ANYONE EDITING THIS FILE
   1. Never write a colour literal outside the :root token block. Every
      accent, glow, wash and hairline derives from --acc with color-mix.
      b112 cost a whole build because literal hexes survived theme
      switches and quietly painted the wrong palette.
   2. Shape comes from .plate. The clipped corner and lit top bevel are
      defined once; anything that needs the panel look wears the class
      rather than redeclaring clip-path.
   3. State is a class, never an inline style. .on, .off, .live, .done —
      so the JS that drives it never has to know a colour.

   LAYER ORDER BELOW
     1 tokens        2 primitives (.plate .lbl .inp .seg .knob)
     3 chrome        4 console     5 workspace     6 admin window
     7 responsive    8 reduced motion
   ========================================================================== */

/* ==========================================================
   DEVIL'S INK — CONSOLE  (b183: Carbon Ice)
   Black carbon and ice. Cold graphite plates with a woven
   carbon texture, frost-blue energy edges. The score is a lit
   reactor at the centre of the desk; everything else is dark
   plate around it. The weave itself lives in console-bridge
   (b183 block) so this file stays literal-free outside :root.
   ========================================================== */
:root{
  --void:#05070A;
  --ink1:#0B0F14;
  --ink2:#10161D;
  --plate:rgba(16,22,29,.82);
  --plate2:rgba(9,13,18,.92);
  --well:#060809;
  /* derived from the accent, never hardcoded — b112's lesson was that literal
     hexes survive theme switches and quietly paint the wrong palette */
  --line:color-mix(in srgb,var(--acc) 16%,transparent);
  --line2:color-mix(in srgb,var(--acc) 34%,transparent);
  --glow:color-mix(in srgb,var(--acc) 22%,transparent);
  --glow2:color-mix(in srgb,var(--acc) 45%,transparent);
  --wash:color-mix(in srgb,var(--acc) 18%,transparent);
  --txt:#EDF2F8;
  --dim:#8B99A9;
  --dimmer:#5C6875;
  --acc:#6FB1FF;          /* room accent — drives every energy edge */
  --acc2:#A5CDFF;
  --p1:#A5CDFF;
  --p2:#5C9EFF;
  --live:#3DDC84;
  --cut:12px;             /* corner bevel — the panel language      */
  /* fixed brand colours — not theme-driven, but still authored here only */
  --gold:#E0A11C;        /* winner crown  */
  --gold2:#FFD76B;
  --goldink:#2A1A02;
  --keyink:#071019;      /* text on a lit key */
  --bg2:#0A0E13;         /* page gradient top */
  --orb1:#C9E0FF; --orb2:#1C3F6E; --orb3:#0A1A2E;
  --cut1:#C42B4A; --cut2:#710F24; --cutedge:#FF5F7F;   /* hide overlay — always crimson, never themed:
                                                          the one destructive action must not change
                                                          colour when someone switches theme */
  --chrome1:rgba(18,25,33,.97);   /* header plate */
  --chrome2:rgba(8,11,15,.97);

  --disp:"Chakra Petch","Saira",sans-serif;
  --body:"Saira",-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--body);font-size:14px;color:var(--txt);padding-bottom:66px;
  background:
    radial-gradient(1100px 460px at 50% -6%, var(--glow), transparent 68%),
    radial-gradient(700px 400px at 8% 30%, color-mix(in srgb,var(--acc2) 10%,transparent), transparent 65%),
    radial-gradient(700px 400px at 92% 35%, color-mix(in srgb,var(--acc) 11%,transparent), transparent 65%),
    linear-gradient(180deg,var(--bg2),var(--void));
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
/* ink grain — keeps flat areas from reading dead */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
body > *{position:relative;z-index:2}

.lbl{font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim)}   /* tighter tracking reads faster */

/* angular cut plate — the signature shape, used everywhere */
.plate{
  background:linear-gradient(158deg,var(--plate),var(--plate2));
  border:1px solid var(--line);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  position:relative;
}
/* energy edge along the top bevel */
.plate::before{
  content:"";position:absolute;left:var(--cut);right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line2) 22%,var(--line2) 78%,transparent);
}

/* ---------- header ---------- */
.head{display:flex;align-items:center;gap:16px;padding:0 22px;height:62px;
  background:linear-gradient(180deg,var(--chrome1),var(--chrome2));
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--acc),var(--acc2),transparent);opacity:.55}
.orb{width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 34% 28%,var(--orb1),var(--acc) 48%,var(--orb2) 78%,var(--orb3));
  box-shadow:0 0 20px color-mix(in srgb,var(--acc) 55%,transparent),inset 0 -3px 8px rgba(0,0,0,.6)}
.wordmark{font-family:var(--disp);font-size:20px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;
  background:linear-gradient(96deg,#fff,var(--acc) 62%,var(--acc2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.chip{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--well);
  border:1px solid var(--line);border-radius:3px}
.chip b{font-family:var(--disp);font-size:12.5px;letter-spacing:.1em;color:var(--txt)}
.sp{flex:1}
.gh{font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);background:rgba(255,255,255,.02);
  border:1px solid var(--line);border-radius:3px;padding:8px 14px;cursor:pointer;transition:color .18s,border-color .18s,background-color .18s,box-shadow .18s,opacity .18s,transform .18s}
.gh:hover{color:var(--txt);border-color:var(--line2);
  box-shadow:0 0 14px var(--glow)}

/* ---------- tally: the one honest signal ---------- */
.tally{display:flex;align-items:center;gap:13px;padding:10px 22px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--live) 11%,transparent),transparent 85%)}
.tally .lamp{width:8px;height:8px;border-radius:50%;background:var(--live);
  box-shadow:0 0 10px var(--live),0 0 22px color-mix(in srgb,var(--live) 60%,transparent);
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.tally .st{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--live)}
.tally .dt{color:var(--dim);font-size:12.5px}

.desk{max-width:1320px;margin:0 auto;padding:16px}

/* ---------- console row ---------- */
.console{display:grid;grid-template-columns:1fr minmax(440px,1.1fr) 1fr;gap:16px;margin-bottom:16px}
.side{padding:17px 19px}
.side .bar{position:absolute;left:0;top:var(--cut);bottom:0;width:3px;
  background:linear-gradient(180deg,var(--sc),transparent);
  box-shadow:0 0 16px var(--sc)}
.side.a{--sc:var(--p1)} .side.b{--sc:var(--p2)}
.who{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.who .tag{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sc);text-shadow:0 0 14px var(--sc)}
.who .sd{font-family:var(--disp);font-size:11px;color:var(--dimmer);letter-spacing:.1em}
.f{margin-bottom:11px}
.f .lbl{display:block;margin-bottom:6px}
.inp{width:100%;background:var(--well);border:1px solid var(--line);border-radius:3px;
  color:var(--txt);font-family:var(--body);font-size:15px;font-weight:500;padding:11px 13px;
  outline:none;transition:color .18s,border-color .18s,background-color .18s,box-shadow .18s,opacity .18s,transform .18s;box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}
.inp::placeholder{color:var(--dimmer)}
.inp:focus{border-color:var(--sc);box-shadow:inset 0 2px 8px rgba(0,0,0,.6),0 0 18px color-mix(in srgb,var(--sc) 30%,transparent)}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* SIGNATURE — the reactor */
.reactor{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:22px 26px;
  background:
    radial-gradient(420px 190px at 50% 50%, var(--glow), transparent 72%),
    linear-gradient(158deg,rgba(26,10,22,.95),rgba(12,5,11,.97));
  border:1px solid var(--line2);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  position:relative;box-shadow:0 0 46px var(--glow),inset 0 0 60px rgba(0,0,0,.55)}
.reactor::before{content:"";position:absolute;left:var(--cut);right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--acc),var(--acc2),transparent);opacity:.75}
.stk{display:flex;flex-direction:column;align-items:center;gap:13px}
.stk.a{--sc:var(--p1)} .stk.b{--sc:var(--p2)}
.num{font-family:var(--disp);font-size:96px;font-weight:700;line-height:.84;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;min-width:1.1ch;text-align:center;
  background:linear-gradient(180deg,#fff 8%,var(--sc) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px color-mix(in srgb,var(--sc) 45%,transparent))}
.keys{display:flex;gap:8px}
.key{width:56px;height:44px;border:1px solid var(--line);border-radius:3px;cursor:pointer;
  background:linear-gradient(180deg,rgba(60,26,48,.9),rgba(24,10,20,.95));
  color:var(--txt);font-family:var(--disp);font-size:20px;font-weight:700;
  transition:transform .07s,box-shadow .18s,border-color .18s}
.key:hover{border-color:var(--sc);box-shadow:0 0 18px color-mix(in srgb,var(--sc) 32%,transparent)}
.key:active{transform:translateY(2px)}
.key.pl{background:linear-gradient(180deg,var(--sc),color-mix(in srgb,var(--sc) 55%,#000));
  border-color:transparent;color:var(--keyink);
  box-shadow:0 0 22px color-mix(in srgb,var(--sc) 50%,transparent)}
.mid{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 14px}
.mid .fmt{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--dim);white-space:nowrap}
.dia{width:52px;height:52px;transform:rotate(45deg);border:1px solid var(--line2);
  background:linear-gradient(145deg,var(--wash),rgba(10,4,9,.7));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 26px var(--glow2),inset 0 0 18px rgba(0,0,0,.5)}
.dia b{transform:rotate(-45deg);font-family:var(--disp);font-size:15px;font-weight:700;
  letter-spacing:.06em;color:var(--txt)}
.pips{display:flex;gap:6px}
.pip{width:9px;height:9px;transform:rotate(45deg);background:rgba(255,255,255,.05);
  border:1px solid var(--line)}
.pip.on{background:var(--acc);border-color:var(--acc);box-shadow:0 0 11px var(--acc)}
.mp{font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acc2);text-shadow:0 0 14px var(--acc2)}

/* hotkey chip — printed on the control it drives, the way a desk is engraved */
.hk{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  padding:0 4px;margin-left:7px;border:1px solid var(--line);border-radius:2px;
  font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.06em;
  color:var(--dimmer);background:rgba(0,0,0,.35);vertical-align:middle}
/* on the score keys a corner badge read as clutter — a quiet caption under the
   pair teaches the same thing without decorating the control */
.keyhint{display:flex;justify-content:center;gap:15px;margin-top:-4px}
.keyhint span{font-family:var(--disp);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  color:var(--dimmer)}

/* ---------- workspace ---------- */
.sw{display:flex;gap:8px;margin-bottom:16px}
.sw button{flex:1;background:linear-gradient(180deg,rgba(30,14,27,.7),rgba(14,6,13,.8));
  border:1px solid var(--line);color:var(--dim);font-family:var(--disp);font-size:12px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:13px 8px;cursor:pointer;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:color .18s,border-color .18s,background-color .18s,box-shadow .18s,opacity .18s,transform .18s;position:relative}
.sw button:hover{color:var(--txt);border-color:var(--line2)}
.sw button.on{color:var(--txt);
  background:linear-gradient(180deg,var(--wash),rgba(20,8,17,.9));
  border-color:var(--acc);box-shadow:0 0 22px var(--glow)}

.work{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px;
  align-items:start}   /* size to content — stretching left dead air under short modules */
.mod{padding:17px 19px}
.mod > .lbl{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:15px;
  border-bottom:1px solid var(--line);color:var(--txt);font-size:12px}
.mod > .lbl::before{content:"";width:8px;height:8px;transform:rotate(45deg);
  background:var(--acc);box-shadow:0 0 12px var(--acc)}
.hint{color:var(--dimmer);font-size:12.5px;line-height:1.55;margin:-3px 0 14px}
.seg{display:flex;gap:7px}
.seg button{flex:1;background:linear-gradient(180deg,rgba(40,18,34,.6),rgba(14,6,13,.75));
  border:1px solid var(--line);color:var(--dim);font-family:var(--disp);font-size:12px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:11px 6px;cursor:pointer;
  border-radius:3px;transition:color .18s,border-color .18s,background-color .18s,box-shadow .18s,opacity .18s,transform .18s}
.seg button:hover{color:var(--txt);border-color:var(--line2)}
.seg button.on{color:var(--txt);border-color:var(--acc);
  background:linear-gradient(180deg,var(--wash),rgba(18,7,15,.9));
  box-shadow:0 0 18px var(--glow)}
.seg small{display:block;font-family:var(--body);font-size:10px;letter-spacing:0;
  text-transform:none;color:var(--dimmer);margin-top:3px}
.tog{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid color-mix(in srgb,var(--acc) 8%,transparent)}
.tog:last-child{border-bottom:0}
.tog span{font-size:13.5px}
.knob{width:44px;height:24px;border-radius:13px;background:var(--well);border:1px solid var(--line);
  position:relative;cursor:pointer;transition:color .2s,border-color .2s,background-color .2s,box-shadow .2s,opacity .2s,transform .2s;flex:0 0 auto}
.knob::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--dimmer);transition:color .2s,border-color .2s,background-color .2s,box-shadow .2s,opacity .2s,transform .2s}
.knob.on{border-color:var(--acc);background:linear-gradient(90deg,var(--wash),color-mix(in srgb,var(--acc2) 20%,transparent))}
.knob.on::after{left:22px;background:linear-gradient(180deg,#fff,var(--acc));
  box-shadow:0 0 12px var(--acc)}

/* brawlhalla side extras */
.prline{display:flex;align-items:center;gap:8px;margin:-4px 0 11px}
.prtag{font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sc);border:1px solid var(--line);border-radius:2px;
  padding:3px 7px;background:rgba(255,255,255,.02)}
.artlink{font-size:12px;color:var(--dim);text-decoration:none;border-bottom:1px dotted var(--dimmer)}
.artlink:hover{color:var(--acc);border-color:var(--acc)}
.portrow{display:grid;grid-template-columns:56px 1fr 1fr;gap:9px;align-items:stretch;margin-bottom:11px}
.port{background:var(--well);border:1px solid var(--line);border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-size:9.5px;color:var(--dimmer);
  text-align:center;min-height:44px}
.mini{background:linear-gradient(180deg,rgba(40,18,34,.6),rgba(14,6,13,.75));border:1px solid var(--line);
  border-radius:3px;color:var(--dim);font-family:var(--disp);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .18s,border-color .18s,background-color .18s,box-shadow .18s,opacity .18s,transform .18s}
.mini:hover{color:var(--txt);border-color:var(--line2)}
.crown{width:100%;padding:11px;margin-bottom:11px;cursor:pointer;
  font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--goldink);border:0;border-radius:3px;
  background:linear-gradient(180deg,var(--gold2),var(--gold));
  box-shadow:0 0 24px color-mix(in srgb,var(--gold) 36%,transparent)}
  /* pressed once a match: shares a row with bracket side rather than a slab */
  .endrow{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;margin-top:2px}
  .endrow .seg button{padding:9px 5px;font-size:10.5px}
.crown.off{background:linear-gradient(180deg,rgba(40,18,34,.6),rgba(14,6,13,.75));
  border:1px solid var(--line);color:var(--dim);box-shadow:none}
.sel{width:100%;background:var(--well);border:1px solid var(--line);border-radius:3px;color:var(--txt);
  font-family:var(--body);font-size:14.5px;padding:11px 13px;outline:none;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}

/* ---------- transport ---------- */
.tp{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:9px;padding:11px 16px;
  background:linear-gradient(180deg,rgba(24,10,21,.97),rgba(8,4,10,.99));
  border-top:1px solid var(--line)}
.tp::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--acc),var(--acc2),transparent);opacity:.5}
.tp .t{flex:1;background:linear-gradient(180deg,rgba(46,20,38,.85),rgba(16,7,14,.9));
  border:1px solid var(--line);color:var(--txt);font-family:var(--disp);font-size:12px;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:13px 10px;cursor:pointer;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:color .18s,border-color .18s,background-color .18s,box-shadow .18s,opacity .18s,transform .18s}
.tp .t:hover{border-color:var(--line2);box-shadow:0 0 20px var(--glow)}
.tp .t.cut{background:linear-gradient(180deg,var(--cut1),var(--cut2));border-color:var(--cutedge);
  box-shadow:0 0 26px color-mix(in srgb,var(--cut1) 48%,transparent)}
.tp .t.wide{flex:1.5}

@media (max-width:900px){
  .console{grid-template-columns:1fr}
  .reactor{order:-1;padding:16px}
  .num{font-size:64px}
  .sw{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- ADMIN WINDOW ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(6,2,7,.72);
  display:flex;align-items:center;justify-content:center;padding:26px}
.win{width:min(1180px,100%);height:min(760px,100%);display:grid;grid-template-columns:224px 1fr;
  background:linear-gradient(158deg,rgba(28,13,25,.97),rgba(12,5,12,.98));
  border:1px solid var(--line2);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  box-shadow:0 0 90px var(--glow);position:relative;overflow:hidden}
.win::before{content:"";position:absolute;left:18px;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--acc),var(--acc2),transparent);opacity:.8}
.rail{border-right:1px solid var(--line);padding:20px 0 14px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
.rail .cap{padding:0 20px 14px;display:flex;align-items:center;gap:10px}
.rail .cap .orb{width:22px;height:22px}
.rail .cap b{font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--txt)}
.rail a{display:flex;align-items:center;gap:11px;padding:12px 20px;text-decoration:none;
  color:var(--dim);font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;border-left:2px solid transparent;transition:color .18s,border-color .18s,background-color .18s,box-shadow .18s,opacity .18s,transform .18s}
.rail a:hover{color:var(--txt);background:rgba(255,255,255,.03)}
.rail a.on{color:var(--txt);border-left-color:var(--acc);
  background:linear-gradient(90deg,var(--wash),transparent);
  text-shadow:0 0 16px var(--glow2)}
.rail a i{width:7px;height:7px;transform:rotate(45deg);background:currentColor;opacity:.55;flex:0 0 auto}
.rail .foot{margin-top:auto;padding:14px 20px 0;border-top:1px solid var(--line)}
.wbody{padding:22px 26px;overflow:auto}
.wtop{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.wtop h2{margin:0;font-family:var(--disp);font-size:20px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt)}
.wtop .x{margin-left:auto;background:none;border:1px solid var(--line);color:var(--dim);
  width:34px;height:34px;border-radius:3px;cursor:pointer;font-size:16px;transition:color .18s,border-color .18s,background-color .18s,box-shadow .18s,opacity .18s,transform .18s}
.wtop .x:hover{color:var(--txt);border-color:var(--acc);box-shadow:0 0 16px var(--glow2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stat{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--well);
  border:1px solid var(--line);border-radius:3px}
.stat .dot{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live)}
.stat .dot.bad{background:var(--acc2);box-shadow:0 0 10px var(--acc2)}
.stat .k{font-family:var(--disp);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.stat .v{margin-left:auto;font-family:var(--disp);font-size:12.5px;color:var(--txt)}
.rowbtns{display:flex;gap:8px;margin-top:11px}
.rowbtns .mini{flex:1;padding:11px 8px}
.mini.go{border-color:var(--acc);color:var(--txt);
  background:linear-gradient(180deg,var(--wash),rgba(18,7,15,.9));
  box-shadow:0 0 18px var(--glow)}
.note{font-size:12.5px;color:var(--live);margin-top:11px}
.log{border:1px solid var(--line);border-radius:3px;background:var(--well);overflow:hidden}
.log div{display:flex;gap:12px;padding:9px 13px;border-bottom:1px solid color-mix(in srgb,var(--acc) 8%,transparent);font-size:12.5px}
.log div:last-child{border-bottom:0}
.log time{font-family:var(--disp);font-size:11px;color:var(--dimmer);letter-spacing:.1em;min-width:64px}
.log b{color:var(--acc);font-weight:600}

/* ==========================================================================
   ROOMS — the landing.
   The old landing spent two of three columns on a theme picker and onboarding
   text you read once, while the room list (the reason anyone opens this page)
   sat empty in the middle. Here the rooms ARE the page: a grid of plates that
   show live state at a glance, with creation as one tile among them.
   ========================================================================== */
.roomgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(298px,1fr));gap:16px}
.room{padding:17px 17px 16px;text-decoration:none;color:inherit;display:block;transition:color .2s,border-color .2s,background-color .2s,box-shadow .2s,opacity .2s,transform .2s;
  cursor:pointer}
.room:hover{border-color:var(--line2);box-shadow:0 0 30px var(--glow)}
.room .rbar{position:absolute;left:0;top:var(--cut);bottom:0;width:3px;
  background:linear-gradient(180deg,var(--rc,var(--acc)),transparent);
  box-shadow:0 0 16px var(--rc,var(--acc))}
.room .rtop{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.room .rname{font-family:var(--disp);font-size:17px;font-weight:700;letter-spacing:.04em;
  color:var(--txt);line-height:1.25;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room .rlive{display:flex;align-items:center;gap:6px;flex:0 0 auto;
  font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dimmer)}
.room .rlive i{width:7px;height:7px;border-radius:50%;background:var(--dimmer)}
.room.live .rlive{color:var(--live)}
.room.live .rlive i{background:var(--live);box-shadow:0 0 10px var(--live);
  animation:pulse 2.4s ease-in-out infinite}
.room .rcode{font-family:var(--disp);font-size:13px;letter-spacing:.18em;color:var(--dim);
  background:var(--well);border:1px solid var(--line);border-radius:3px;
  padding:6px 10px;display:inline-block;margin-bottom:12px}
.room .rmeta{display:flex;gap:14px;font-size:12px;color:var(--dimmer);margin-bottom:13px}
.room .rmeta b{color:var(--dim);font-weight:600}
.room .racts{display:flex;gap:7px}
.room .racts button{flex:1;white-space:nowrap;background:linear-gradient(180deg,rgba(40,18,34,.55),rgba(14,6,13,.7));
  border:1px solid var(--line);border-radius:3px;color:var(--dim);
  font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:9px 6px;cursor:pointer;transition:color .18s,border-color .18s,background-color .18s,box-shadow .18s,opacity .18s,transform .18s}
.room .racts button:hover{color:var(--txt);border-color:var(--line2)}
.room .racts button.go{flex:1.55;color:var(--txt);border-color:var(--acc);
  background:linear-gradient(180deg,var(--wash),rgba(18,7,15,.9))}

/* create tile — a room that does not exist yet, so it reads as an outline */
.room.new{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;min-height:200px;border-style:dashed;background:none}
.room.new:hover{background:linear-gradient(158deg,var(--plate),var(--plate2))}
.room.new .plus{width:34px;height:34px;transform:rotate(45deg);border:1px solid var(--acc);
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px var(--glow)}
.room.new .plus b{transform:rotate(-45deg);font-size:20px;color:var(--acc);line-height:1}
.room.new span{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}

/* section heading used by the landing */
.shead{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.shead h2{margin:0;font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--txt)}
.shead h2::before{content:"";display:inline-block;width:8px;height:8px;transform:rotate(45deg);
  background:var(--acc);box-shadow:0 0 12px var(--acc);margin-right:11px;vertical-align:middle}
.shead .count{font-family:var(--disp);font-size:11px;letter-spacing:.18em;color:var(--dimmer)}
.shead .sp{flex:1}
.empty{padding:34px 20px;text-align:center;color:var(--dimmer);font-size:13.5px;line-height:1.6}
.empty b{display:block;font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin-bottom:7px}

/* join by code — it was crammed into a section heading; give it its own object */
.joinbar{display:flex;align-items:center;gap:10px;padding:13px 16px;margin-bottom:16px}
.joinbar .lbl{flex:0 0 auto}
.joinbar .inp{flex:1;padding:10px 13px;font-size:14px}
.joinbar .gh{flex:0 0 auto;padding:11px 20px}

/* theme picker, shrunk: it is a once-per-room choice, not the page */
.themerow{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
.sw9{padding:8px;cursor:pointer;border:1px solid var(--line);border-radius:3px;
  background:var(--well);transition:color .18s,border-color .18s,background-color .18s,box-shadow .18s,opacity .18s,transform .18s;text-align:center}
.sw9:hover{border-color:var(--line2)}
.sw9.on{border-color:var(--acc);box-shadow:0 0 18px var(--glow)}
.sw9 .bars{display:flex;gap:3px;align-items:center;justify-content:center;margin-bottom:6px}
.sw9 .bars i{height:8px;flex:1;border-radius:1px}
.sw9 .bars u{width:8px;height:8px;transform:rotate(45deg);flex:0 0 auto}
.sw9 small{font-family:var(--disp);font-size:9.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.sw9.on small{color:var(--txt)}

/* ==========================================================================
   PREVIEW / PROGRAM
   A vision-mixer split. PROGRAM is what viewers see and it is never edited
   directly. PREVIEW is a scratch copy you build at your own pace and push
   with one button.

   THE SCORE IS DELIBERATELY EXEMPT. Nobody wants to stage a point mid-rally,
   so the score keys live in PROGRAM and go straight to air exactly as they do
   today. Only the fields that embarrass you when half-typed are staged.
   ========================================================================== */
.pgm{border-color:var(--cutedge);
  background:
    radial-gradient(500px 200px at 50% 0%, color-mix(in srgb,var(--cut1) 16%,transparent), transparent 70%),
    linear-gradient(158deg,rgba(30,14,27,.85),rgba(14,6,13,.94));
  box-shadow:0 0 34px color-mix(in srgb,var(--cut1) 22%,transparent)}
.pgm::before{background:linear-gradient(90deg,transparent,var(--cutedge),transparent);opacity:.85}
.stripe{display:flex;align-items:center;gap:11px;padding:8px 16px;
  font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase}
.stripe.air{color:var(--cutedge)}
.stripe.air i{width:8px;height:8px;border-radius:50%;background:var(--cutedge);
  box-shadow:0 0 12px var(--cutedge);animation:pulse 2.2s ease-in-out infinite}
.stripe.stg{color:var(--dim)}
.stripe.stg i{width:8px;height:8px;border-radius:50%;background:var(--dimmer)}
.stripe .sp{flex:1}
.stripe .meta{font-family:var(--body);font-size:12px;letter-spacing:0;
  text-transform:none;color:var(--dim);font-weight:400}

/* the on-air mirror — reads like the overlay, not like a form */
.mirror{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;
  padding:16px 20px 20px;max-width:900px;margin:0 auto}
.mirror .mname{font-family:var(--disp);font-size:24px;font-weight:700;letter-spacing:.03em;
  color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mirror .a{text-align:right} .mirror .b{text-align:left}
.mirror .sub{display:block;font-family:var(--disp);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:3px}
.mirror .a .mname{color:var(--p1)} .mirror .b .mname{color:var(--p2)}
.livescore{display:flex;align-items:center;gap:12px}
.livescore .n{font-family:var(--disp);font-size:52px;font-weight:700;line-height:.9;
  font-variant-numeric:tabular-nums;min-width:1.05ch;text-align:center;color:var(--txt)}
.livescore .kk{display:flex;flex-direction:column;gap:5px}
.livescore .kk button{width:38px;height:26px;border:1px solid var(--line);border-radius:3px;
  background:linear-gradient(180deg,rgba(60,26,48,.9),rgba(24,10,20,.95));color:var(--txt);
  font-family:var(--disp);font-size:14px;font-weight:700;cursor:pointer;transition:color .15s,border-color .15s,background-color .15s,box-shadow .15s,opacity .15s,transform .15s}
.livescore .kk button:hover{border-color:var(--acc);box-shadow:0 0 14px var(--glow)}
.livescore .dv{font-family:var(--disp);font-size:12px;letter-spacing:.2em;color:var(--dim)}

/* staged fields that differ from air get a marker, so you can see what will change */
.chg{position:relative}
.chg::after{content:"";position:absolute;right:7px;bottom:15px;width:7px;height:7px;
  transform:rotate(45deg);background:var(--acc);box-shadow:0 0 10px var(--acc);
  pointer-events:none}
.takebar{display:grid;grid-template-columns:1fr auto auto;gap:11px;align-items:center;
  padding:13px 16px;border-top:1px solid var(--line)}
.takebar .pending{font-size:12.5px;color:var(--dim)}
.takebar .pending b{color:var(--acc);font-weight:600}
.takebar .mini{padding:13px 20px;white-space:nowrap}
.take{padding:14px 30px;border:0;border-radius:3px;cursor:pointer;
  font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--keyink);
  background:linear-gradient(180deg,var(--cutedge),var(--cut1));
  box-shadow:0 0 30px color-mix(in srgb,var(--cut1) 45%,transparent);transition:color .15s,border-color .15s,background-color .15s,box-shadow .15s,opacity .15s,transform .15s}
.take:hover{box-shadow:0 0 40px color-mix(in srgb,var(--cut1) 60%,transparent)}
.take:disabled{background:linear-gradient(180deg,rgba(46,20,38,.6),rgba(16,7,14,.8));
  color:var(--dimmer);box-shadow:none;cursor:default;border:1px solid var(--line)}