/* MISSION CONTROL — ops-center theme, AAA pass. Self-contained, no external assets. */
:root{
  --blue:#0B3D91; --blue-lit:#2f6bd8; --red:#FC3D21; --go:#3ddc84; --amber:#ffb300;
  --cyan:#5ad8ff; --phos:#7cff9b;
  --black:#04070d; --panel:#0c1322; --panel2:#0f1830; --bezel:#161f33; --edge:#233250;
  --text:#d7e2f5; --muted:#7688a8; --grid:rgba(47,107,216,.06);
  --mono:"SF Mono",ui-monospace,"Cascadia Code",Consolas,Menlo,monospace;
  --sans:"Helvetica Neue",Arial,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
::selection{background:rgba(90,216,255,.25);color:#fff}
/* thin dark scrollbars everywhere */
*{scrollbar-width:thin;scrollbar-color:#24334f #070b14}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:#070b14;border-radius:5px}
*::-webkit-scrollbar-thumb{background:linear-gradient(#2a3a5c,#1c2946);border-radius:5px;border:2px solid #070b14}
*::-webkit-scrollbar-thumb:hover{background:#3a4f7d}

body{
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(47,107,216,.11), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(90,216,255,.05), transparent 55%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--black);
  background-size:auto,auto,44px 44px,44px 44px,auto;
  color:var(--text); font-family:var(--sans); font-size:14px; overflow-x:hidden;
}
/* room atmosphere: scanlines + vignette over everything */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9000;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9001;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.52) 100%);}
.hidden{display:none!important}
.mono{font-family:var(--mono)}
.spacer{flex:1}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* alarm edge-glow when server down */
#alarm-glow{display:none;position:fixed;inset:0;pointer-events:none;z-index:8990;
  box-shadow:inset 0 0 160px rgba(252,61,33,.28);animation:alarmpulse 1.4s ease-in-out infinite}
#alarm-glow.on{display:block}
@keyframes alarmpulse{50%{box-shadow:inset 0 0 90px rgba(252,61,33,.12)}}

/* ───────────── header — master console strip ───────────── */
header{
  display:flex;align-items:center;gap:14px;padding:10px 18px;position:sticky;top:0;z-index:100;
  background:linear-gradient(#101a30,#0a1120 70%,#080e1a);
  border-bottom:1px solid var(--edge);
  box-shadow:0 6px 24px rgba(0,0,0,.6), inset 0 -1px 0 rgba(90,216,255,.08);
}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(90,216,255,.5),transparent)}
.badge{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;font-weight:800;
  font-family:var(--mono);letter-spacing:1px;color:#fff;
  background:linear-gradient(160deg,var(--blue-lit),var(--blue) 70%);
  box-shadow:0 0 14px rgba(47,107,216,.5), inset 0 1px 0 rgba(255,255,255,.25);}
.title{font-weight:800;letter-spacing:3px;font-size:15px;line-height:1.1;
  text-shadow:0 0 18px rgba(90,216,255,.25)}
.title small{display:block;color:var(--muted);letter-spacing:2px;font-size:9.5px;font-weight:500;text-shadow:none}
.stat{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--muted);
  letter-spacing:1px;white-space:nowrap}
.stat b{color:var(--cyan);text-shadow:0 0 8px rgba(90,216,255,.4)}
.hsep{width:1px;height:26px;background:linear-gradient(transparent,var(--edge),transparent)}
.clock{font-size:19px;letter-spacing:2px;color:var(--cyan);text-shadow:0 0 12px rgba(90,216,255,.45);
  font-variant-numeric:tabular-nums;line-height:1}
.clock small{display:block;font-size:9px;color:var(--muted);letter-spacing:1.5px;text-align:right;text-shadow:none}
.linkbtn{background:none;border:1px solid var(--edge);border-radius:6px;color:var(--muted);
  font-family:var(--mono);font-size:10.5px;letter-spacing:1px;padding:6px 10px;cursor:pointer;
  transition:color .15s,border-color .15s,box-shadow .15s}
.linkbtn:hover{color:var(--cyan);border-color:rgba(90,216,255,.6);box-shadow:0 0 10px rgba(90,216,255,.25)}
.linkbtn:disabled{opacity:.4;cursor:wait}

/* lamps */
.dot{width:10px;height:10px;border-radius:50%;background:var(--go);flex:none;
  box-shadow:0 0 9px var(--go), inset 0 -1px 2px rgba(0,0,0,.5)}
.dot.warn{background:var(--amber);box-shadow:0 0 9px var(--amber);animation:blink 1.1s steps(2) infinite}
.dot.crit{background:var(--red);box-shadow:0 0 11px var(--red);animation:blink .55s steps(2) infinite}
.dot.off{background:#33415e;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
@keyframes blink{50%{opacity:.25}}

/* klaxon strip */
#klaxon{display:none;position:sticky;top:58px;z-index:99;padding:8px 18px;text-align:center;
  font-family:var(--mono);font-weight:700;letter-spacing:4px;color:#fff;
  background:repeating-linear-gradient(-45deg,#b3170a 0 26px,#7e0f05 26px 52px);
  border-bottom:1px solid #ff5a44;text-shadow:0 1px 2px #000;animation:klax 1s steps(2) infinite}
#klaxon.on{display:block}
@keyframes klax{50%{filter:brightness(1.55)}}
#klaxon-live{display:none;position:sticky;top:58px;z-index:98;padding:9px 18px;text-align:center;
  font-family:var(--mono);font-weight:800;letter-spacing:5px;color:#fff;font-size:14px;
  background:linear-gradient(#d31b0b,#8e1206);border-bottom:2px solid #ff5a44;
  text-shadow:0 1px 2px #000;animation:klax .7s steps(2) infinite;
  box-shadow:0 8px 30px rgba(252,61,33,.35)}
#klaxon-live.on{display:block}

/* ───────────── login ───────────── */
#login{min-height:100vh;display:grid;place-items:center}
#login .card{width:min(380px,92vw);text-align:center;padding:38px 34px;border-radius:14px;position:relative;overflow:hidden;
  background:linear-gradient(#0e1628,#0a101d);border:1px solid var(--edge);
  box-shadow:0 0 0 1px rgba(47,107,216,.15), 0 30px 80px rgba(0,0,0,.7), inset 0 0 60px rgba(0,0,0,.45)}
#login .card::before{content:"";position:absolute;left:0;right:0;height:70px;top:-80px;pointer-events:none;
  background:linear-gradient(transparent,rgba(90,216,255,.07),transparent);animation:cardscan 5s linear infinite}
@keyframes cardscan{to{top:110%}}
#login .badge{margin:0 auto 14px;width:52px;height:52px;font-size:18px}
#login h1{font-size:19px;letter-spacing:6px;margin-bottom:4px}
#login p{color:var(--muted);font-family:var(--mono);font-size:10.5px;letter-spacing:2px;margin-bottom:22px}
#login input{width:100%;margin:6px 0;padding:11px 13px;border-radius:7px;border:1px solid var(--edge);
  background:#070c16;color:var(--text);font-family:var(--mono);letter-spacing:1px}
#login input:focus{outline:none;border-color:var(--blue-lit);box-shadow:0 0 12px rgba(47,107,216,.35)}
#login .btn{width:100%;margin-top:12px}
#login .err{color:var(--red);font-family:var(--mono);font-size:11.5px;min-height:16px;margin-top:10px}

/* ───────────── layout — 4 columns on 1440p+, degrades cleanly ───────────── */
main{display:grid;grid-template-columns:minmax(600px,1.45fr) repeat(3,minmax(360px,1fr));
  gap:16px;padding:16px 18px;max-width:2560px;margin:0 auto;align-items:start}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
#logdeck{grid-column:1/-1}

/* ── viewport-locked flight deck (wide screens): the PAGE never scrolls.
   main is pinned to the viewport; the promote console's file list, the event
   feed and the log deck flex to absorb the slack; anything longer scrolls
   INSIDE its own panel. Columns get internal scroll as a fallback. ── */
@media (min-width:1750px) and (min-height:760px){
  body{overflow:hidden}
  main{height:calc(100vh - 60px);overflow:hidden;align-items:stretch;
    padding:12px 18px;gap:12px;
    grid-template-rows:minmax(0,1fr) minmax(110px,180px)}
  .col{min-height:0;overflow-y:auto;overflow-x:hidden;gap:12px}
  #promote-panel{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  #promote-panel .pbody{flex:1;display:flex;flex-direction:column;min-height:0}
  #promote-panel .list{flex:1;max-height:none;min-height:110px}
  #event-panel{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  #event-panel .pbody{flex:1;display:flex;flex-direction:column;min-height:0}
  #event-panel .feed{flex:1;max-height:none;min-height:56px}
  #logdeck{grid-row:2;display:flex;flex-direction:column;min-height:0}
  #logdeck .pbody{flex:1;display:flex;flex-direction:column;min-height:0}
  #logdeck .logwrap{flex:1;height:auto;min-height:0}
}
@media(max-width:1749px){main{grid-template-columns:minmax(540px,1.3fr) minmax(380px,1fr) minmax(380px,1fr)}
  .col.c4{grid-column:2/4;display:grid;grid-template-columns:1fr 1fr;align-items:start}}
@media(max-width:1480px){main{grid-template-columns:1fr 1fr}.col.c1{grid-column:1/-1}
  .col.c4{grid-column:1/-1}}
@media(max-width:980px){main{grid-template-columns:1fr}.col,.col.c4{grid-column:auto;display:flex}}

/* ───────────── panel = wall monitor ───────────── */
.panel{
  border-radius:12px;border:1px solid var(--edge);position:relative;
  background:linear-gradient(#0e1628 0%,#0b1220 55%,#0a101c 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 14px 34px rgba(0,0,0,.55),
    inset 0 0 46px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.panel::before{ /* bezel screws */
  content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;z-index:2;
  background:
    radial-gradient(3px 3px at 11px 11px, #35486f 30%, #0a0f1b 60%, transparent 70%),
    radial-gradient(3px 3px at calc(100% - 11px) 11px, #35486f 30%, #0a0f1b 60%, transparent 70%),
    radial-gradient(3px 3px at 11px calc(100% - 11px), #35486f 30%, #0a0f1b 60%, transparent 70%),
    radial-gradient(3px 3px at calc(100% - 11px) calc(100% - 11px), #35486f 30%, #0a0f1b 60%, transparent 70%);}
.phead{
  display:flex;align-items:center;gap:9px;padding:11px 20px 10px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:2.5px;color:#9fb4d8;
  border-bottom:1px solid var(--edge);
  background:linear-gradient(rgba(90,216,255,.05),transparent);
  border-radius:12px 12px 0 0;text-shadow:0 0 8px rgba(90,216,255,.2)}
.phead .tick{color:var(--cyan);animation:tickpulse 2.4s ease-in-out infinite}
@keyframes tickpulse{50%{opacity:.35}}
.phead .right{margin-left:auto;display:flex;align-items:center;gap:10px;font-weight:400;letter-spacing:.5px}
.pbody{padding:14px 20px 16px}
/* per-panel ident stripe */
.panel.acc-go .phead{box-shadow:inset 3px 0 0 var(--go)}
.panel.acc-cyan .phead{box-shadow:inset 3px 0 0 var(--cyan)}
.panel.acc-blue .phead{box-shadow:inset 3px 0 0 var(--blue-lit)}
.panel.acc-red .phead{box-shadow:inset 3px 0 0 var(--red)}
.panel.acc-amber .phead{box-shadow:inset 3px 0 0 var(--amber)}
.panel.acc-phos .phead{box-shadow:inset 3px 0 0 var(--phos)}

/* ───────────── readouts / gate ───────────── */
.readouts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.ro{border:1px solid var(--edge);border-radius:9px;padding:10px 8px 8px;text-align:center;
  background:linear-gradient(#0a1120,#080d18);box-shadow:inset 0 0 18px rgba(0,0,0,.45)}
.ro .n{font-family:var(--mono);font-size:26px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.ro .l{font-family:var(--mono);font-size:9px;letter-spacing:1.5px;color:var(--muted);margin-top:5px;text-transform:uppercase}
.ro.sync .n{color:var(--cyan);text-shadow:0 0 10px rgba(90,216,255,.4)}
.ro.go .n{color:var(--go);text-shadow:0 0 10px rgba(61,220,132,.45)}
.ro.shield .n{color:#8fb4e8;text-shadow:0 0 10px rgba(47,107,216,.5);font-size:22px}
.ro.shield{border-color:rgba(47,107,216,.45);cursor:help}
.ro.block .n{color:var(--red);text-shadow:0 0 10px rgba(252,61,33,.45)}
.ro.neutral .n{color:var(--muted)}
.gostrip{display:flex;align-items:center;gap:16px;border-radius:9px;padding:11px 18px;margin-bottom:12px;
  border:1px solid var(--edge);font-family:var(--mono);position:relative}
.gostrip::before,.gostrip::after{ /* HUD corner brackets */
  content:"";position:absolute;width:12px;height:12px;pointer-events:none;
  border:2px solid currentColor;opacity:.5}
.gostrip::before{left:4px;top:4px;border-right:none;border-bottom:none;border-radius:4px 0 0 0}
.gostrip::after{right:4px;bottom:4px;border-left:none;border-top:none;border-radius:0 0 4px 0}
.gostrip .big{font-size:22px;font-weight:800;letter-spacing:5px}
.gostrip.GO{color:var(--go);border-color:rgba(61,220,132,.5);
  background:
    linear-gradient(108deg,transparent 32%,rgba(61,220,132,.16) 48%,transparent 62%) no-repeat,
    linear-gradient(rgba(61,220,132,.10),rgba(61,220,132,.03));
  background-size:230% 100%,100% 100%;
  box-shadow:inset 0 0 26px rgba(61,220,132,.07);animation:gosweep 3.4s linear infinite}
@keyframes gosweep{from{background-position:-130% 0,0 0}to{background-position:230% 0,0 0}}
.gostrip.GO .big{text-shadow:0 0 16px rgba(61,220,132,.7)}
.gostrip.STANDBY{color:var(--cyan);border-color:rgba(90,216,255,.4);
  background:linear-gradient(rgba(90,216,255,.07),rgba(90,216,255,.02));box-shadow:inset 0 0 26px rgba(90,216,255,.05)}
.gostrip.STANDBY .big{text-shadow:0 0 14px rgba(90,216,255,.55)}
.gostrip.HOLD{color:var(--amber);border-color:rgba(255,179,0,.5);
  background:linear-gradient(rgba(255,179,0,.09),rgba(255,179,0,.02));box-shadow:inset 0 0 26px rgba(255,179,0,.06)}
.gostrip.HOLD .big{text-shadow:0 0 14px rgba(255,179,0,.6)}
.gostrip.NOGO{color:var(--red);border-color:rgba(252,61,33,.55);
  background:linear-gradient(rgba(252,61,33,.12),rgba(252,61,33,.03));box-shadow:inset 0 0 26px rgba(252,61,33,.08)}
.gostrip.NOGO .big{text-shadow:0 0 16px rgba(252,61,33,.7);animation:blink 1.2s steps(2) infinite}
.gostrip .mono{color:var(--text)}
.warnbanner{display:none;border:1px solid rgba(255,179,0,.5);background:rgba(255,179,0,.07);color:#ffd579;
  border-radius:8px;padding:9px 12px;font-size:12px;margin-bottom:12px}
.warnbanner.on{display:block}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.5px;padding:4px 9px;border-radius:20px;
  border:1px solid var(--edge);color:var(--muted);cursor:pointer;user-select:none;transition:all .12s}
.chip:hover{border-color:#3a4f7d}
.chip.on{color:var(--cyan);border-color:rgba(90,216,255,.5);background:rgba(90,216,255,.07);
  box-shadow:0 0 8px rgba(90,216,255,.15)}
.search{width:100%;padding:8px 12px;border-radius:7px;border:1px solid var(--edge);background:#070c16;
  color:var(--text);font-family:var(--mono);font-size:12px;margin-bottom:8px}
.search:focus{outline:none;border-color:var(--blue-lit);box-shadow:0 0 10px rgba(47,107,216,.25)}
.list{max-height:430px;overflow:auto;border:1px solid var(--edge);border-radius:8px;background:#070b14;
  box-shadow:inset 0 0 24px rgba(0,0,0,.5)}
.row{display:flex;align-items:center;gap:9px;padding:7px 11px;border-bottom:1px solid #101a2e;font-size:12px}
.row:nth-child(4n+1){background:rgba(255,255,255,.012)}
.row.clickable{cursor:pointer;transition:background .1s}
.row.clickable:hover{background:rgba(47,107,216,.1);box-shadow:inset 2px 0 0 var(--blue-lit)}
.row .path{font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.row .sha{font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap}
.vchip{font-family:var(--mono);font-size:9px;letter-spacing:.5px;padding:3px 7px;border-radius:4px;white-space:nowrap}
.v-PROMOTE-CHANGED,.v-PROMOTE-NEW{background:rgba(61,220,132,.14);color:var(--go)}
.v-BLOCK-REDACTED,.v-BLOCK-DEV_SPECIFIC,.v-BLOCK-ESCROW{background:rgba(47,107,216,.14);color:#8fb4e8}
.v-LIVE-ONLY{background:rgba(118,136,168,.15);color:var(--muted)}
.v-IGNORED-DEVLOCAL{background:rgba(255,179,0,.13);color:#ffd579}
.reason{font-size:10.5px;color:var(--muted);padding:0 11px 7px 35px;border-bottom:1px solid #101a2e}
.rc{font-family:var(--mono);font-size:9px;padding:2px 6px;border-radius:4px;white-space:nowrap}
.rc-dev{background:rgba(61,220,132,.15);color:var(--go)}
.rc-live{background:rgba(255,179,0,.15);color:#ffd579}
.rc-both{background:rgba(252,61,33,.18);color:#ff8a76}
.ignbtn{background:none;border:1px solid var(--edge);border-radius:5px;color:var(--muted);cursor:pointer;
  font-size:11px;padding:2px 6px;transition:all .12s}
.ignbtn:hover{color:var(--amber);border-color:var(--amber);box-shadow:0 0 6px rgba(255,179,0,.3)}
.ignbtn.on{color:var(--amber)}
.btnrow{display:flex;align-items:center;gap:9px;margin-top:12px;flex-wrap:wrap}

/* ───────────── hardware buttons ───────────── */
.btn{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--text);
  padding:9px 15px;border-radius:7px;cursor:pointer;position:relative;overflow:hidden;
  border:1px solid #2b3a5c;border-bottom-color:#0c1322;
  background:linear-gradient(#1a2540,#121b31 45%,#0e1526);
  box-shadow:0 3px 0 #060a13, inset 0 1px 0 rgba(255,255,255,.09);
  transition:transform .05s, box-shadow .05s, border-color .15s}
.btn::after{ /* key-cap sheen sweep on hover */
  content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.09),transparent);
  transition:left .35s ease}
.btn:hover::after{left:120%}
.btn:hover{border-color:#3d5382}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #060a13, inset 0 2px 6px rgba(0,0,0,.5)}
.btn:disabled{opacity:.38;cursor:not-allowed;transform:none}
.btn.go{border-color:rgba(61,220,132,.6);color:#c9ffe2;
  background:linear-gradient(#14402b,#0d2f20 45%,#0a2419);box-shadow:0 3px 0 #04120b, inset 0 1px 0 rgba(255,255,255,.10), 0 0 12px rgba(61,220,132,.15)}
.btn.danger{border-color:rgba(252,61,33,.6);color:#ffd6cd;
  background:linear-gradient(#4b1710,#38100a 45%,#2a0c07);box-shadow:0 3px 0 #120402, inset 0 1px 0 rgba(255,255,255,.09), 0 0 12px rgba(252,61,33,.14)}
.btn.cyan{border-color:rgba(90,216,255,.55);color:#d8f4ff;
  background:linear-gradient(#123a4d,#0d2c3c 45%,#0a2230);box-shadow:0 3px 0 #041018, inset 0 1px 0 rgba(255,255,255,.10), 0 0 12px rgba(90,216,255,.15)}

/* ───────────── guarded control: LIFT COVER → ARM → FIRE ─────────────
   A physical missile-switch module. The safety cover is a real obstacle:
   the toggle is unclickable until the cover is flipped open; clicking the
   covered switch just makes the cover shudder. Arming lights the module,
   starts the 8-segment LED drain, and sets the FIRE key pulsing. */
.guard{display:flex;align-items:center;gap:13px;border:1px dashed rgba(252,61,33,.45);border-radius:10px;
  padding:9px 13px;background:repeating-linear-gradient(-45deg,rgba(252,61,33,.05) 0 12px,transparent 12px 24px);
  transition:border-color .25s, box-shadow .35s}
.guard .glabel{font-family:var(--mono);font-size:9px;letter-spacing:1.5px;color:#ff8a76;line-height:1.4;text-align:center}
.guard.armed{border-style:solid;border-color:rgba(252,61,33,.85);
  background:repeating-linear-gradient(-45deg,rgba(252,61,33,.09) 0 12px,rgba(252,61,33,.02) 12px 24px);
  animation:guardpulse 1.05s ease-in-out infinite}
@keyframes guardpulse{
  0%,100%{box-shadow:inset 0 0 30px rgba(252,61,33,.14), 0 0 22px rgba(252,61,33,.20)}
  50%{box-shadow:inset 0 0 16px rgba(252,61,33,.06), 0 0 8px rgba(252,61,33,.08)}}
.guard.armed .glabel{color:#ff5a44;text-shadow:0 0 10px rgba(252,61,33,.6)}
.glamp{display:block;width:7px;height:7px;border-radius:50%;margin:5px auto 0;background:#33415e;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.guard.armed .glamp{background:var(--red);box-shadow:0 0 10px var(--red);animation:blink .5s steps(2) infinite}

/* switch module: base plate + bat toggle + flip-up safety cover */
.swmod{position:relative;width:46px;height:58px;flex:none;perspective:340px}
.armsw{position:absolute;inset:0;border-radius:7px;cursor:pointer;
  border:1px solid #2b3a5c;border-bottom-color:#0c1322;
  background:linear-gradient(#1c2438,#111a2e 55%,#0c1322);
  box-shadow:inset 0 0 14px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.07), 0 2px 6px rgba(0,0,0,.5)}
.armsw::before{ /* toggle slot */
  content:"";position:absolute;left:50%;top:9px;bottom:9px;width:11px;transform:translateX(-50%);
  border-radius:6px;background:linear-gradient(#04070d,#0b1120);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.95), inset 0 -1px 0 rgba(255,255,255,.05)}
.armsw::after{ /* engraved SAFE / ARM legends */
  content:"ARM";position:absolute;top:2px;left:0;right:0;text-align:center;
  font:700 6px/1 var(--mono);letter-spacing:1px;color:#4a5b7f;text-shadow:0 1px 1px #000}
.armsw i{ /* bat lever — flips down (SAFE) ↔ up (ARMED) */
  position:absolute;left:50%;top:50%;width:13px;height:34px;margin:-17px 0 0 -6.5px;border-radius:7px;
  background:linear-gradient(175deg,#8fa0c2,#54648a 45%,#333f5e 90%);
  box-shadow:0 2px 5px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 3px rgba(0,0,0,.4);
  transform:rotateX(42deg) translateY(7px);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), background .2s, box-shadow .2s}
.armsw i::after{ /* lever ball tip */
  content:"";position:absolute;left:50%;bottom:-4px;width:17px;height:17px;margin-left:-8.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#aab8d6,#5d6d94 55%,#38466a);
  box-shadow:0 2px 4px rgba(0,0,0,.7), inset 0 1px 1px rgba(255,255,255,.5)}
.armsw.on{border-color:rgba(252,61,33,.75);
  box-shadow:inset 0 0 16px rgba(252,61,33,.28), 0 0 16px rgba(252,61,33,.35), inset 0 1px 0 rgba(255,255,255,.07)}
.armsw.on i{transform:rotateX(-42deg) translateY(-7px);
  background:linear-gradient(5deg,#ffab99,#e0442a 45%,#8c1a09 90%);
  box-shadow:0 -2px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.45), 0 0 12px rgba(252,61,33,.55)}
.armsw.on i::after{background:radial-gradient(circle at 35% 30%,#ffc9bd,#e5573c 55%,#96200c);
  box-shadow:0 0 10px rgba(252,61,33,.8), inset 0 1px 1px rgba(255,255,255,.5)}

/* sliding safety cover — retracts DOWN into a pocket housing at the base of
   the switch plate. The track clips the cover as it sinks behind the pocket
   lip; a grip-ridged sliver stays peeking out — click it to pull the cover
   back up (which also disarms). */
.swtrack{position:absolute;inset:-3px;z-index:3;overflow:hidden;border-radius:8px;pointer-events:none}
.swcover{position:absolute;inset:0;border-radius:8px;cursor:pointer;pointer-events:auto;
  transition:transform .34s cubic-bezier(.5,1.45,.45,1), filter .15s;
  background:linear-gradient(168deg,rgba(224,52,30,.94),rgba(126,17,6,.96) 70%);
  border:1px solid #ff6a50;
  box-shadow:0 5px 12px rgba(0,0,0,.55), inset 0 1px 8px rgba(255,255,255,.14)}
.swcover::before{ /* grip ridges on the pull tab (this edge peeks from the pocket) */
  content:"";position:absolute;top:3px;left:9px;right:9px;height:7px;border-radius:2px;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.30) 0 1px,transparent 1px 3px)}
.swcover::after{ /* hazard-striped leading edge (first into the pocket) */
  content:"";position:absolute;left:3px;right:3px;bottom:2px;height:7px;border-radius:2px;
  background:repeating-linear-gradient(-45deg,#ffb300 0 5px,#171003 5px 10px);opacity:.85;
  box-shadow:0 1px 2px rgba(0,0,0,.6)}
.swcover b{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);text-align:center;
  font:800 8.5px/1 var(--mono);letter-spacing:3px;color:#ffd6cd;text-shadow:0 -1px 1px #000, 0 1px 1px rgba(255,255,255,.15);
  transition:opacity .15s}
.swcover:hover{filter:brightness(1.18)}
.swcover.open{transform:translateY(calc(100% - 10px))}
.swcover.open b{opacity:0}
.swcover.shake{animation:covshake .3s ease-in-out}
@keyframes covshake{25%{transform:translateY(-2.5px)}50%{transform:translateY(2px) translateX(1.5px)}75%{transform:translateY(-1.5px) translateX(-1.5px)}}
/* pocket housing — the cover disappears behind this lip */
.swpocket{position:absolute;left:-5px;right:-5px;bottom:-8px;height:10px;z-index:4;border-radius:3px;pointer-events:none;
  background:linear-gradient(#3f4c6a,#1a2338 60%,#10192c);
  border:1px solid #2b3a5c;box-shadow:0 2px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.16)}
.swpocket::before{ /* slot mouth shadow */
  content:"";position:absolute;left:4px;right:4px;top:-2px;height:3px;border-radius:2px;
  background:#05080f;box-shadow:inset 0 1px 2px #000}

/* LED arm countdown — 8 segments drain across the window */
.cdwrap{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:60px}
.cdled{display:flex;gap:2.5px;height:11px}
.cdled i{width:5px;height:11px;border-radius:1.5px;background:#221014;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
.cdled i.lit{background:linear-gradient(#ff8a70,#d3220c);box-shadow:0 0 7px rgba(252,61,33,.75), inset 0 1px 0 rgba(255,255,255,.35)}
.armtxt{font-size:9px;letter-spacing:2px;color:#ff8a76;min-height:11px;text-shadow:0 0 8px rgba(252,61,33,.4)}

/* FIRE key — pulses the moment it goes hot */
.btn.fire:not(:disabled){border-color:var(--red);color:#fff;animation:firepulse 1.05s ease-in-out infinite}
@keyframes firepulse{
  0%,100%{box-shadow:0 3px 0 #120402, 0 0 28px rgba(252,61,33,.8), inset 0 1px 0 rgba(255,255,255,.12)}
  50%{box-shadow:0 3px 0 #120402, 0 0 10px rgba(252,61,33,.3), inset 0 1px 0 rgba(255,255,255,.09)}}

/* ───────────── gauges & metrics ───────────── */
.gaugerow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.gauge{text-align:center;padding:4px 0 2px}
.gauge svg{width:100%;max-width:118px}
.gauge .gl{font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--muted);margin-top:2px}
.garc-tick{stroke:#22304f;stroke-width:3;fill:none;stroke-dasharray:1.5 11.9}
.garc-bg{stroke:#1a2440;stroke-width:9;fill:none;stroke-linecap:round}
.garc-fg{stroke-width:9;fill:none;stroke-linecap:round;
  transition:stroke-dasharray .6s, stroke .6s;filter:drop-shadow(0 0 4px rgba(61,220,132,.45))}
.gval{font-family:var(--mono);font-size:17px;font-weight:700;fill:var(--text)}
.gsub{font-family:var(--mono);font-size:7.5px;fill:var(--muted);letter-spacing:1px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.metric{border:1px solid var(--edge);border-radius:8px;padding:9px 11px;background:#080d18;
  box-shadow:inset 0 0 16px rgba(0,0,0,.4)}
.metric .k{font-family:var(--mono);font-size:9px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase}
.metric .v{font-family:var(--mono);font-size:17px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.bar{height:5px;border-radius:3px;background:#141d33;margin-top:7px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue-lit),var(--cyan));
  box-shadow:0 0 8px rgba(90,216,255,.5);transition:width .6s}
.bar.hot i{background:linear-gradient(90deg,#d3410f,var(--red));box-shadow:0 0 8px rgba(252,61,33,.6)}

/* ───────────── service / lamp boards ───────────── */
.lampboard{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lamptile{display:flex;align-items:center;gap:8px;border:1px solid var(--edge);border-radius:8px;
  padding:9px 10px;background:linear-gradient(#0b1220,#080d18);font-family:var(--mono);font-size:10.5px;letter-spacing:1px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 14px rgba(0,0,0,.4)}
.lamptile .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aebfda;
  text-shadow:0 1px 1px rgba(0,0,0,.8)}

/* ───────────── sync & backup ───────────── */
.kv{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:12px;padding:3px 0}
.kv .k{color:var(--muted);font-size:10px;letter-spacing:1px;min-width:86px;text-transform:uppercase}
.kv .v{font-variant-numeric:tabular-nums}
.kv .dot{align-self:center}
.remrow{display:flex;align-items:center;gap:9px;border:1px solid var(--edge);border-radius:8px;
  padding:8px 11px;margin:6px 0;background:#080d18;font-family:var(--mono);font-size:11.5px;
  box-shadow:inset 0 0 14px rgba(0,0,0,.35)}
.remrow .u{color:var(--muted);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.bktile{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:9px 0}
.bkk{border:1px solid var(--edge);border-radius:8px;padding:8px 10px;background:#080d18;text-align:center;
  box-shadow:inset 0 0 14px rgba(0,0,0,.35)}
.bkk .n{font-family:var(--mono);font-size:17px;font-weight:700}
.bkk .l{font-family:var(--mono);font-size:8.5px;color:var(--muted);letter-spacing:1.5px;margin-top:2px;text-transform:uppercase}

/* ───────────── live host bars + crew ───────────── */
.hostbars{display:flex;flex-direction:column;gap:6px;margin-top:11px;padding-top:10px;border-top:1px solid var(--edge)}
.hb{display:flex;align-items:center;gap:9px;font-family:var(--mono)}
.hb .hbk{font-size:9px;letter-spacing:1.5px;color:var(--muted);width:34px;text-align:right}
.hb .bar{flex:1;margin-top:0}
.hb .hbv{font-size:10px;color:#aebfda;width:110px;white-space:nowrap;font-variant-numeric:tabular-nums}
.crewchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cchip{font-family:var(--mono);font-size:10px;padding:4px 8px;border-radius:14px;
  border:1px solid rgba(90,216,255,.35);color:#c8ecff;background:rgba(90,216,255,.06)}
.cchip i{font-style:normal;color:var(--muted);margin-left:6px;font-size:9px}
.cchip.empty{border-color:var(--edge);color:var(--muted)}

/* backup mini run-history */
.minilog{margin-top:10px;border:1px solid var(--edge);border-radius:7px;background:#070b14;
  padding:7px 10px;font-size:9.5px;line-height:1.6;color:var(--muted);
  box-shadow:inset 0 0 14px rgba(0,0,0,.4);overflow-x:auto;white-space:nowrap}
.minilog:empty{display:none}

/* ───────────── alert feed ───────────── */
.feed{max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:5px}
.fitem{font-family:var(--mono);font-size:11px;padding:6px 10px;border-radius:6px;border-left:3px solid var(--edge);
  background:#080d18;color:#aebfda;transition:background .12s, transform .12s, box-shadow .12s}
.fitem:hover{background:#0c1526;transform:translateX(2px);box-shadow:inset 0 0 14px rgba(0,0,0,.3)}
.fitem.nominal{border-left-color:var(--go)}
.fitem.caution{border-left-color:var(--amber)}
.fitem.critical{border-left-color:var(--red);color:#ffb3a6}
.fitem .t{color:var(--muted);margin-right:8px;font-size:9.5px}

/* ───────────── log console ───────────── */
.logmeta{display:flex;gap:14px;align-items:center;font-family:var(--mono);font-size:10.5px;color:var(--muted);
  margin-bottom:8px;letter-spacing:1px}
.logwrap{height:340px;overflow:auto;background:#020503;border:1px solid #12251a;border-radius:8px;
  padding:10px 12px;font-family:var(--mono);font-size:11.5px;line-height:1.5;
  box-shadow:inset 0 0 34px rgba(0,0,0,.75), 0 0 18px rgba(124,255,155,.04);
  text-shadow:0 0 5px rgba(124,255,155,.25);animation:crt 7s ease-in-out infinite}
@keyframes crt{0%,100%{opacity:1}96%{opacity:1}97%{opacity:.93}98%{opacity:1}}
.logline{color:var(--phos);white-space:pre-wrap;word-break:break-all}
.logline.err{color:#ff7a63;text-shadow:0 0 6px rgba(252,61,33,.4)}
.logline.dim{opacity:.28}

/* ───────────── sparkline ───────────── */
.spark{width:100%;height:70px;background:#070b14;border:1px solid var(--edge);border-radius:8px;
  box-shadow:inset 0 0 20px rgba(0,0,0,.5)}
.legend{display:flex;gap:16px;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:8px;flex-wrap:wrap}

/* ───────────── flight controls ───────────── */
.res-in{display:flex;gap:9px;margin-bottom:11px}
.res{flex:1;padding:9px 12px;border-radius:7px;border:1px solid var(--edge);background:#070c16;
  color:var(--text);font-family:var(--mono);font-size:12px;min-width:0}
.res:focus{outline:none;border-color:var(--blue-lit);box-shadow:0 0 10px rgba(47,107,216,.25)}

/* ───────────── modal ───────────── */
.modal{display:none;position:fixed;inset:0;z-index:9500;background:rgba(2,5,10,.8);backdrop-filter:blur(3px)}
.modal.on{display:grid;place-items:center}
.modal .box{width:min(1060px,94vw);max-height:88vh;display:flex;flex-direction:column;border-radius:12px;
  border:1px solid var(--edge);background:linear-gradient(#0e1628,#0a101d);
  box-shadow:0 40px 120px rgba(0,0,0,.8), 0 0 0 1px rgba(47,107,216,.15);animation:mopen .16s ease-out}
@keyframes mopen{from{transform:scale(.97) translateY(8px);opacity:0}}
.mhead{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--edge);
  font-family:var(--mono);font-size:12px;letter-spacing:1px}
.mhead .x{margin-left:auto;background:none;border:1px solid var(--edge);color:var(--muted);border-radius:6px;
  width:28px;height:28px;cursor:pointer}
.mhead .x:hover{color:var(--red);border-color:var(--red);box-shadow:0 0 8px rgba(252,61,33,.3)}
.diff{overflow:auto;padding:14px 18px;font-family:var(--mono);font-size:11.5px;line-height:1.55;white-space:pre-wrap;word-break:break-all}
.d-add{color:var(--go)}.d-del{color:#ff8a76}.d-hunk{color:var(--cyan)}.d-ctx{color:#93a5c4}
.note{padding:10px 18px;border-top:1px solid var(--edge);color:var(--amber);font-size:11.5px;font-family:var(--mono)}
.settings-row{display:flex;gap:9px;margin:7px 0}
.settings-row input{flex:1;padding:9px 12px;border-radius:7px;border:1px solid var(--edge);background:#070c16;
  color:var(--text);font-family:var(--mono);font-size:12px}
table.u{width:100%;border-collapse:collapse;margin-top:10px;font-size:12px}
table.u th{font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px;color:var(--muted);text-align:left;
  padding:6px 8px;border-bottom:1px solid var(--edge);text-transform:uppercase}
table.u td{padding:7px 8px;border-bottom:1px solid #101a2e}

/* ───────────── toasts ───────────── */
#toasts{position:fixed;right:18px;bottom:18px;z-index:9800;display:flex;flex-direction:column;gap:8px}
.toast{padding:11px 16px;border-radius:8px;font-family:var(--mono);font-size:12px;max-width:420px;
  border:1px solid var(--edge);background:#0d1526;box-shadow:0 12px 34px rgba(0,0,0,.6);
  animation:tin .18s ease-out, tglow 1s ease-out}
@keyframes tglow{from{box-shadow:0 12px 34px rgba(0,0,0,.6), 0 0 26px rgba(90,216,255,.3)}}
.toast.nominal{border-left:4px solid var(--go)}
.toast.caution{border-left:4px solid var(--amber)}
.toast.critical{border-left:4px solid var(--red)}
@keyframes tin{from{transform:translateY(10px);opacity:0}}