/* White Rabbit Online - LCARS-style home screen. Original artwork and code; no external resources. */
:root{
  --bg:#010208; --pn:rgba(14,12,22,.78); --txt:#ffd9a6; --mut:#a58a6a; --line:rgba(255,153,0,.3);
  --c1:#ff9900; --c2:#ffcc99; --c3:#cc99cc; --c4:#9999ff; --c5:#99ccff; --c6:#cc6666; --c7:#ffcc66; --ink:#140b00;
  --ok:#66dd99; --glow:0 0 16px rgba(255,153,0,.4);
  --font:'Bahnschrift SemiCondensed','Bahnschrift Condensed','Oswald','Antonio','Arial Narrow','Helvetica Neue Condensed','Segoe UI',sans-serif;
  --side:222px; --bar:30px; --hd:96px;
}
body[data-scheme="blue"]{--txt:#cfe2ff;--c1:#5b9bff;--c2:#a8c8ff;--c3:#8f8fe8;--c4:#7ad0ff;--c5:#b6e3ff;--c6:#d27a8a;--c7:#7fb2ff;--line:rgba(91,155,255,.32);--glow:0 0 16px rgba(91,155,255,.45);--mut:#7e93b5}
body[data-scheme="violet"]{--txt:#f0d8ff;--c1:#c07cff;--c2:#e2bfff;--c3:#ff9ad5;--c4:#9d8cff;--c5:#8ec5ff;--c6:#ff7a9a;--c7:#d9a3ff;--line:rgba(192,124,255,.32);--glow:0 0 16px rgba(192,124,255,.45);--mut:#a58bbd}
body[data-scheme="green"]{--txt:#d4ffd8;--c1:#4ad98a;--c2:#a6f0c4;--c3:#7fd0b8;--c4:#6fb7ff;--c5:#9be8e0;--c6:#e0a36a;--c7:#b8e86a;--line:rgba(74,217,138,.32);--glow:0 0 16px rgba(74,217,138,.45);--mut:#7fa58c}
body[data-alert="1"]{--txt:#ffb8b0;--c1:#ff3b30;--c2:#ff8a80;--c3:#c4453b;--c4:#ff5a4d;--c5:#ff9a8f;--c6:#ff2a1f;--c7:#ff6a5c;--line:rgba(255,59,48,.4);--glow:0 0 18px rgba(255,59,48,.55);--mut:#b36a64;--bg:#080102}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--txt);font-family:var(--font);font-size:16px;letter-spacing:.05em;text-transform:uppercase;overflow:hidden;transition:background .8s,color .6s}
button{font:inherit;letter-spacing:inherit;color:inherit}
a{color:inherit}
.hidden{display:none!important}
#bgstars{position:fixed;inset:0;width:100%;height:100%;z-index:0}
#glare{position:fixed;inset:0;z-index:60;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.13) 0 1px,transparent 1px 3px)}
#glare::after{content:"";position:absolute;left:0;right:0;top:-160px;height:160px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--c1) 9%,transparent),transparent);animation:sweep 8s linear infinite}
@keyframes sweep{to{transform:translateY(calc(100vh + 320px))}}
body[data-glare="0"] #glare{display:none}

/* ---------- frame ---------- */
.lc{position:fixed;inset:0;z-index:2;display:grid;grid-template-columns:var(--side) minmax(0,1fr);grid-template-rows:var(--hd) minmax(0,1fr) 64px;padding:10px 16px 12px 10px}
.lc-side{grid-row:1/4;display:flex;flex-direction:column;min-height:0}
.lc-elbow{position:relative;flex:none;height:var(--hd);background:var(--c1);border-radius:74px 0 0 0;display:flex;align-items:flex-end;justify-content:flex-end;padding:8px 14px;color:var(--ink);font-weight:700;font-size:18px;letter-spacing:.14em;transition:background .6s}
.lc-elbow::after{content:"";position:absolute;left:100%;top:var(--bar);width:54px;height:54px;background:radial-gradient(circle at 100% 100%,transparent 53px,var(--c1) 54px);transition:background .6s}
.lc-elbow-b{position:relative;flex:none;height:84px;background:var(--c3);border-radius:0 0 0 74px;display:flex;align-items:flex-start;justify-content:flex-end;padding:10px 14px;color:var(--ink);font-weight:700;font-size:14px;letter-spacing:.14em;transition:background .6s}
.lc-elbow-b::after{content:"";position:absolute;left:100%;bottom:var(--bar);width:54px;height:54px;background:radial-gradient(circle at 100% 0,transparent 53px,var(--c3) 54px)}
.lc-menu{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:6px 0;display:flex;flex-direction:column;gap:6px;scrollbar-width:none}
.lc-menu::-webkit-scrollbar{width:0}
.nb{position:relative;flex:1 1 40px;max-height:56px;min-height:34px;width:calc(100% - 28px);margin-left:0;padding:4px 14px;border:0;cursor:pointer;color:var(--ink);font-weight:700;font-size:15px;letter-spacing:.1em;text-align:right;border-radius:0 24px 24px 0;display:flex;align-items:flex-end;justify-content:flex-end;transition:width .45s cubic-bezier(.2,.9,.2,1),flex-basis .45s cubic-bezier(.2,.9,.2,1),max-height .45s,filter .2s,background .6s}
.nb:hover{filter:brightness(1.22);width:calc(100% - 8px)}
.nb.on{width:100%;max-height:78px;flex-basis:62px;filter:brightness(1.28);box-shadow:var(--glow)}
.nb small{position:absolute;left:12px;bottom:5px;font-size:10px;font-weight:600;opacity:.75;letter-spacing:.2em}
.nb.tog.act{background:var(--c7)!important}
.nb.red.act{animation:blinkbg 1s steps(2) infinite}
@keyframes blinkbg{50%{filter:brightness(.55)}}
.k1{background:var(--c1)}.k2{background:var(--c2)}.k3{background:var(--c3)}.k4{background:var(--c4)}.k5{background:var(--c5)}.k6{background:var(--c6)}.k7{background:var(--c7)}
.menu-gap{flex:none;height:8px}

.lc-top{grid-column:2;display:flex;flex-direction:column;min-width:0}
.bars{display:flex;gap:7px;height:var(--bar);flex:none}
.bars i{display:block;height:100%;background:var(--c1);transition:background .6s,flex-grow .8s,width .8s;position:relative;overflow:hidden}
.bars i:nth-child(1){flex:1}.bars i:nth-child(2){width:140px;background:var(--c2)}.bars i:nth-child(3){width:80px;background:var(--c3)}.bars i:nth-child(4){width:44px;background:var(--c4);border-radius:0 20px 20px 0}
.bars i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.35) 50%,transparent 100%);transform:translateX(-100%);animation:shine 5s infinite}
.bars i:nth-child(2)::after{animation-delay:1.4s}.bars i:nth-child(3)::after{animation-delay:2.6s}
@keyframes shine{40%,100%{transform:translateX(100%)}}
.lc-head{flex:1;min-height:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 6px 0 58px}
.lc-title{margin:0;font-weight:600;color:var(--c1);letter-spacing:.16em;text-shadow:var(--glow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(20px,2.6vw,34px);transition:color .6s}
.lc-title small{display:block;font-size:.5em;color:var(--c2);letter-spacing:.34em;font-weight:400;margin-top:2px}
.lc-clock{text-align:right;flex:none;line-height:1.15}
.lc-clock b{display:block;font-size:clamp(20px,2.4vw,32px);font-weight:500;color:var(--c2)}
.lc-clock span{font-size:12px;color:var(--mut);letter-spacing:.25em}

.lc-stage{grid-column:2;position:relative;min-height:0;padding:10px 4px 6px 58px;overflow:hidden}
.scr{position:absolute;inset:10px 4px 6px 58px;display:none;gap:12px}
.scr.on,.scr.enter,.scr.leaving{display:flex}
.scr.leaving .pn{transform:translateX(-60px) scaleX(.85)}
.pn{--g:1;position:relative;min-width:0;flex:var(--g) 1 0;background:var(--pn);border:1px solid var(--line);border-left:12px solid var(--cc,var(--c1));border-radius:28px 8px 8px 28px;padding:14px 18px 16px;overflow:hidden;backdrop-filter:blur(3px);opacity:0;transform:translateX(70px) scaleX(.85);flex-grow:.0001;transition:flex-grow .7s cubic-bezier(.2,.9,.2,1),opacity .5s,transform .7s cubic-bezier(.2,.9,.2,1),border-color .6s}
.scr.on .pn{opacity:1;transform:none;flex-grow:var(--g)}
.scr.on .pn:nth-child(2){transition-delay:.08s}.scr.on .pn:nth-child(3){transition-delay:.16s}
.pn h3{margin:0 0 8px;font-size:13px;letter-spacing:.32em;color:var(--cc,var(--c1));font-weight:600;display:flex;justify-content:space-between;gap:8px}
.pn h3 em{font-style:normal;color:var(--mut);font-weight:400;letter-spacing:.18em}
.pn.col{display:flex;flex-direction:column}
.pn canvas,.pn svg.fill{display:block;width:100%;flex:1;min-height:0}
.lt{line-height:1.55;text-transform:none;letter-spacing:.03em;font-size:17px}
.lt.up{text-transform:uppercase;letter-spacing:.06em}
.hot{color:#d8ffff;text-shadow:0 0 8px #5ff,0 0 16px #0ff}
.beam{display:inline-block;width:3px;height:1.05em;background:#bff;vertical-align:-.15em;margin-left:1px;box-shadow:0 0 10px 2px #5ff,0 0 22px 4px rgba(0,255,255,.5);animation:flick .12s steps(2) infinite}
@keyframes flick{50%{opacity:.55}}
.big{font-size:clamp(26px,4vw,52px);line-height:1;color:var(--c2);font-weight:500}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 24px;border-radius:40px;background:var(--c1);color:var(--ink);font-weight:700;letter-spacing:.14em;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,filter .2s,box-shadow .2s,background .6s}
.btn:hover{filter:brightness(1.2);transform:translateY(-1px);box-shadow:var(--glow)}
.btn.red{background:#d8453b;color:#fff}.btn.blue{background:#4a6dff;color:#fff}
.row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:13px;letter-spacing:.14em}
.row b{color:var(--c2);font-weight:500;font-variant-numeric:tabular-nums}
.meter{height:11px;border-radius:11px;background:rgba(150,130,100,.25);overflow:hidden;margin:3px 0 9px}
.meter i{display:block;height:100%;width:50%;background:linear-gradient(90deg,var(--c1),var(--c2));border-radius:11px;transition:width .9s ease}
.mlab{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.18em;color:var(--mut)}
.log{font-family:Consolas,'Cascadia Mono',monospace;font-size:13px;line-height:1.6;text-transform:none;letter-spacing:0;overflow:hidden;height:100%}
.log div{white-space:pre-wrap;word-break:break-word}.log .t{color:var(--mut)}
.pill{width:100%;aspect-ratio:2.4/1;max-width:300px;border-radius:200px;margin:8px auto 14px;box-shadow:0 0 40px var(--pc),inset 0 -10px 24px rgba(0,0,0,.35),inset 0 10px 18px rgba(255,255,255,.35);animation:bob 4s ease-in-out infinite;background:var(--pc)}
@keyframes bob{50%{transform:translateY(-8px)}}
.dial{width:100%;max-height:100%;flex:1;min-height:0}
.dial .r1{animation:spin 24s linear infinite;transform-origin:50% 50%}.dial .r2{animation:spin 14s linear infinite reverse;transform-origin:50% 50%}.dial .r3{animation:spin 9s linear infinite;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{transform:scale(1.12);opacity:.65}}
.rkstat{flex:1;min-height:0;overflow-y:auto;padding-right:6px;scrollbar-width:thin}
.rkstat .gh{margin:12px 0 6px;font-size:12px;letter-spacing:.26em;color:var(--c2)}.rkstat .gh:first-child{margin-top:0}
.rkstat .mlab span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.rkstat .mlab span:last-child{white-space:nowrap}
.rkchips{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.rkchip{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.08em;border-bottom:1px solid var(--line);padding:5px 0;min-width:0}
.rkchip i{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 8px currentColor}.rkchip span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rkchip b{color:var(--c2);font-weight:500;font-size:11px}
.scr.live{padding-top:38px;box-sizing:border-box}
.livebar{position:absolute;left:0;right:0;top:0;height:30px;display:flex;align-items:center;gap:12px;padding:0 16px 0 14px;border:1px solid var(--line);border-left:12px solid var(--c1);border-radius:16px 6px 6px 16px;background:rgba(14,12,22,.72);font-size:11px;letter-spacing:.14em;color:var(--mut);overflow:hidden;white-space:nowrap;z-index:2}
.livebar i{width:9px;height:9px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 10px #ff4d4d;flex:none;animation:blink2 1.4s infinite}
.livebar b{color:var(--c1);font-weight:700;letter-spacing:.24em;flex:none}
.livebar span{overflow:hidden;text-overflow:ellipsis;min-width:0}.livebar .s{display:none}
@media (max-width:1320px){.livebar .l{display:none}.livebar .s{display:block}}
.cmlog{flex:1;min-height:0;overflow-y:auto;font-family:Consolas,'Cascadia Mono',monospace;font-size:12px;line-height:1.5;letter-spacing:.02em;text-transform:uppercase;scrollbar-width:thin;padding-right:6px}
.cml{display:flex;gap:10px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.05);align-items:baseline}
.cml.new{animation:cmflash 1.6s ease-out}@keyframes cmflash{from{background:rgba(255,204,102,.28)}to{background:transparent}}
.cml .t{color:var(--mut);flex:none;font-variant-numeric:tabular-nums}
.cml .tg{flex:none;min-width:62px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.1em;padding:1px 6px;border-radius:10px;color:#0b0b10}
.cml .m{min-width:0;overflow-wrap:anywhere}.cml .m em{font-style:normal;color:var(--c2)}
.tg.o{background:#66dd99}.tg.i{background:#7ad0ff}.tg.f{background:#ff6b6b}.tg.w{background:#ffcc33}.tg.s{background:#cc99ff}
.cmday{color:var(--c1);letter-spacing:.3em;font-size:12px;text-align:center;padding:10px 0 4px;border-bottom:1px solid var(--line)}
.cmmore{align-self:center;margin:2px 0 8px;border:1px solid var(--line);background:rgba(255,153,0,.1);color:var(--c1);font:600 12px/1 inherit;font-family:inherit;letter-spacing:.2em;padding:8px 18px;border-radius:20px;cursor:pointer}
.cmmore:hover{background:rgba(255,153,0,.25)}
.cmfoot{flex:none;margin-top:8px;font-size:10px;letter-spacing:.12em;color:var(--mut);line-height:1.5}
.cstat .gh{margin:14px 0 6px;font-size:12px;letter-spacing:.26em;color:var(--c2)}.cstat .gh:first-child{margin-top:0}
.cstat .dayrow{display:grid;grid-template-columns:54px 1fr auto;gap:8px;align-items:center;font-size:11px;letter-spacing:.1em;padding:3px 0}
.cstat .dbar{height:8px;border-radius:8px;background:rgba(150,130,100,.22);overflow:hidden;display:flex}.cstat .dbar i{display:block;height:100%}
.cstat .dbar .g{background:#66dd99}.cstat .dbar .r{background:#ff6b6b}
.cstat .dnum{color:var(--c2);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:760px){.scr.live{padding-top:64px}.livebar{height:56px;white-space:normal;flex-wrap:wrap;align-content:center;gap:2px 10px;padding:4px 12px;font-size:10px;border-radius:14px}.livebar b{letter-spacing:.16em}}
/* ---------- BRIDGE: windowed live dashboard ---------- */
.bgrid{flex:1;min-width:0;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,.95fr) minmax(0,1.2fr) minmax(0,1.15fr);gap:10px}
.win{--wc:var(--c1);position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px 4px 4px 4px;background:linear-gradient(180deg,rgba(20,18,34,.86),rgba(9,8,16,.86));overflow:hidden;box-shadow:inset 0 0 28px rgba(0,0,0,.35)}
.scr.on .win{animation:winin .75s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes winin{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.win.c1{--wc:var(--c1)}.win.c2{--wc:var(--c2)}.win.c3{--wc:var(--c3)}.win.c4{--wc:var(--c4)}.win.c5{--wc:var(--c5)}.win.c6{--wc:var(--c6)}.win.c7{--wc:var(--c7)}
.win.span2{grid-column:span 2}
.win>header{flex:none;display:flex;align-items:stretch;justify-content:space-between;gap:8px;height:24px;border-bottom:1px solid var(--line)}
.win>header b{display:flex;align-items:center;padding:0 16px 0 12px;background:var(--wc);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.2em;border-radius:15px 0 14px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.win>header em{align-self:center;font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--mut);padding-right:10px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.win>header em::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--wc);box-shadow:0 0 8px var(--wc);animation:blink2 1.8s infinite}
.win::before,.win::after{content:'';position:absolute;pointer-events:none}
.win::before{right:0;bottom:0;width:18px;height:18px;border-right:2px solid var(--wc);border-bottom:2px solid var(--wc);opacity:.7;border-radius:0 0 4px 0}
.win::after{left:0;right:0;top:-45%;height:45%;background:linear-gradient(180deg,transparent,rgba(170,200,255,.07),transparent);animation:wsweep 7s linear infinite;animation-delay:calc(var(--i) * -.9s)}
@keyframes wsweep{to{top:115%}}
.win .wb{flex:1;min-height:0;display:flex;flex-direction:column;gap:5px;padding:8px 11px 10px;overflow:hidden}
.win .bigrow{display:flex;align-items:baseline;gap:10px;flex:none}
.win .big{font-size:clamp(24px,2.5vw,42px);font-weight:700;line-height:1;color:var(--wc);text-shadow:0 0 14px var(--wc);font-variant-numeric:tabular-nums;letter-spacing:.02em;transition:color .5s}
.win .sub{font-size:10px;letter-spacing:.16em;color:var(--mut)}
.win .kv{display:flex;justify-content:space-between;gap:8px;font-size:11px;letter-spacing:.12em;padding:2px 0;border-bottom:1px solid var(--line);flex:none}
.win .kv b{color:var(--c2);font-weight:500;font-variant-numeric:tabular-nums;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win .spark{display:block;width:100%;flex:1 1 0;min-height:26px}
.win .meter{flex:none;margin:2px 0 4px;height:8px}
.win .meter i{transition:width .8s ease,background .5s}
/* status */
.stwrap{display:flex;align-items:center;gap:10px;flex:1;min-height:0}
.helm{flex:none;height:100%;max-height:150px;aspect-ratio:1;width:auto}
.helm .r1{animation:spin 24s linear infinite;transform-origin:50% 50%}.helm .r2{animation:spin 14s linear infinite reverse;transform-origin:50% 50%}.helm .r3{animation:spin 9s linear infinite;transform-origin:50% 50%}
#stcore{animation:corebeat 2.4s ease-in-out infinite;transform-origin:50% 50%;transition:fill .6s}@keyframes corebeat{50%{transform:scale(1.14);opacity:.7}}
.stinfo{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.stbig{font-size:clamp(13px,1.35vw,20px);font-weight:700;letter-spacing:.1em;color:var(--wc);line-height:1.15;text-shadow:0 0 12px var(--wc)}
.stlist{display:flex;flex-direction:column;gap:3px;font-size:10px;letter-spacing:.07em;color:var(--txt)}
.stlist div{display:flex;gap:6px;align-items:baseline;min-width:0}.stlist i{width:7px;height:7px;border-radius:50%;flex:none;transform:translateY(-1px)}.stlist span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* cpu threads */
.thr{flex:none;display:flex;gap:3px;height:26px;align-items:flex-end}
.thr i{flex:1;background:var(--wc);min-height:2px;border-radius:2px;transition:height .6s ease,background .5s;opacity:.85}
/* memory ring */
.ringrow{display:flex;align-items:center;gap:12px;flex:none}
.ring{width:76px;height:76px;flex:none;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10}.ring .rbg{stroke:rgba(150,130,100,.22)}
.ring .rfg{stroke:var(--wc);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .9s ease,stroke .5s;filter:drop-shadow(0 0 6px var(--wc))}
/* rows */
.trow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 42px;gap:8px;align-items:center;font-size:10px;letter-spacing:.07em;padding:2px 0}
.trow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trow b{text-align:right;color:var(--c2);font-weight:500;font-variant-numeric:tabular-nums}
.trow .tb{height:6px;border-radius:6px;background:rgba(150,130,100,.22);overflow:hidden}.trow .tb i{display:block;height:100%;border-radius:6px;background:var(--wc);transition:width .8s ease}
#stoList,#tmpList{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
/* stations */
.stn{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow:hidden}
.srow{display:grid;grid-template-columns:10px minmax(80px,.9fr) 64px 38px minmax(0,2.4fr);gap:9px;align-items:center;font-size:11px;letter-spacing:.08em;padding:5px 0;border-bottom:1px solid var(--line)}
.srow i{width:9px;height:9px;border-radius:50%;box-shadow:0 0 9px currentColor;animation:blink2 1.8s infinite}
.srow .sn{font-weight:700;color:var(--c2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.srow .ss,.srow .sb{color:var(--mut);font-size:10px}
.stk{overflow:hidden;white-space:nowrap;position:relative;color:var(--txt);mask-image:linear-gradient(90deg,#000 88%,transparent)}.stk span{display:inline-block;padding-right:40px}
.stk.mv span{animation:tick 16s linear infinite}@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-100%)}}
/* mail */
.mstats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex:none}
.mstats div{border:1px solid var(--line);border-radius:8px;padding:4px 6px;text-align:center;background:rgba(255,255,255,.02)}
.mstats b{display:block;font-size:clamp(15px,1.5vw,24px);color:var(--wc);line-height:1.1;font-variant-numeric:tabular-nums}.mstats small{font-size:8px;letter-spacing:.12em;color:var(--mut)}
.mlog{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:2px;font-family:Consolas,'Cascadia Mono',monospace;font-size:10.5px;letter-spacing:.01em}
.mlog .ml{display:flex;gap:6px;align-items:baseline;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.05);padding:2px 0}.mlog .ml span:last-child{overflow:hidden;text-overflow:ellipsis;min-width:0}
.mlog .tg{flex:none;font-size:9px;font-weight:700;padding:0 5px;border-radius:8px;color:#0b0b10;min-width:44px;text-align:center}
/* systems */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;flex:none}
.svcs div{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.1em;border:1px solid var(--line);border-radius:8px;padding:3px 6px}.svcs i{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 8px currentColor}
.wd{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.07em;padding:2px 0;border-bottom:1px solid rgba(255,255,255,.05);min-width:0}.wd i{width:7px;height:7px;border-radius:50%;flex:none}.wd span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wd b{color:var(--mut);font-weight:500;flex:none}
#sysWatch{flex:1;min-height:0;overflow:hidden}
#stnList,#sysWatch,#mailLog,#tmpList,#stoList{-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.win .wl{font-size:12px;line-height:1.5;text-transform:none;letter-spacing:.03em;margin:0;flex:1;min-height:0;overflow:hidden}
@media (max-width:1180px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(215px,auto);overflow-y:auto;padding-right:4px}.win.span2{grid-column:span 2}.win .wb{overflow:visible}}
@media (max-width:760px){.bgrid{grid-template-columns:1fr;overflow:visible}.win.span2{grid-column:auto}.srow{grid-template-columns:10px 1fr 56px;}.srow .sb,.srow .stk{display:none}.win{min-height:200px}}
@media (prefers-reduced-motion:reduce){.win::after,.helm .r1,.helm .r2,.helm .r3,#stcore,.stk.mv span{animation:none}}

#cv-hist{flex:none!important;height:118px;min-height:118px!important}
.pn h3.enh{margin-top:14px}
.mlab small{font-size:11px;opacity:.7;margin-left:8px;letter-spacing:.1em}
.hull{fill:none;stroke:var(--c1);stroke-width:2;transition:stroke .6s}
.sec{fill:rgba(255,153,0,.07);stroke:var(--c2);stroke-width:1.5;cursor:pointer;transition:fill .3s,stroke .3s}
.sec.hi,.sec:hover{fill:var(--c1);stroke:#fff}
svg text{fill:var(--c2);font-family:var(--font);font-size:11px;letter-spacing:.16em}

/* alert */
#alertbar{position:fixed;left:0;right:0;top:46%;z-index:55;pointer-events:none;text-align:center;font-size:clamp(34px,8vw,110px);font-weight:700;letter-spacing:.3em;color:#ff3b30;text-shadow:0 0 30px #f00;opacity:0;transform:scaleY(.2);transition:opacity .3s,transform .3s}
body[data-alert="1"] #alertbar{opacity:.9;transform:none;animation:alertflash 1s steps(2) infinite}
@keyframes alertflash{50%{opacity:.12}}
body[data-alert="1"]::after{content:"";position:fixed;inset:0;z-index:58;pointer-events:none;box-shadow:inset 0 0 140px rgba(255,0,0,.55);animation:alertflash 1s steps(2) infinite}

/* footer */
.lc-bot{grid-column:2;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;padding-right:150px}
.lc-bot .read{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:0 6px 4px 58px;font-size:11px;color:var(--mut);letter-spacing:.2em}
.autobar{height:var(--bar);display:flex;gap:7px}
.autobar i{display:block;height:100%;background:var(--c3);transition:background .6s}
.autobar i:nth-child(1){flex:1;position:relative;overflow:hidden;background:rgba(150,130,100,.25)}
.autobar i:nth-child(1) b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--c1);transition:background .6s}
.autobar i:nth-child(2){width:110px;background:var(--c2)}.autobar i:nth-child(3){width:44px;border-radius:0 20px 20px 0;background:var(--c4)}

/* the stationary login button */
#login{position:fixed;right:18px;bottom:16px;z-index:70;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 30px 0 22px;border-radius:48px 14px 14px 48px;background:var(--c1);color:var(--ink);font-weight:700;font-size:19px;letter-spacing:.22em;text-decoration:none;box-shadow:0 0 0 4px var(--bg),0 0 22px rgba(255,153,0,.4);transition:transform .2s,filter .2s,background .6s,box-shadow .6s}
#login::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px rgba(0,0,0,.25);animation:blink 2.2s infinite}
@keyframes blink{50%{opacity:.25}}
#login:hover{filter:brightness(1.18);transform:translateX(-4px)}
#login:focus-visible,.nb:focus-visible,.btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* intro */
#boot{position:fixed;inset:0;z-index:100;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity .8s;cursor:pointer}
#boot.fade{opacity:0;pointer-events:none}
#boot .in{width:min(720px,92vw)}
#boot h2{margin:0 0 14px;font-weight:500;font-size:clamp(22px,4vw,44px);letter-spacing:.3em;color:var(--c1);text-shadow:var(--glow)}
#boot pre{margin:0;font:inherit;font-size:clamp(14px,2vw,19px);line-height:1.7;color:var(--c2);white-space:pre-wrap}
#boot .skip{margin-top:26px;font-size:12px;letter-spacing:.3em;color:var(--mut)}

@media (max-width:860px){
  :root{--side:0px;--hd:70px}
  body{overflow:auto}
  .lc{position:relative;inset:auto;min-height:100vh;display:block;padding:8px 8px 150px}
  .lc-side{display:block}
  .lc-elbow,.lc-elbow-b{display:none}
  .lc-menu{flex-direction:row;overflow-x:auto;padding:8px 0;gap:6px}
  .nb{flex:0 0 auto;width:auto;max-height:none;min-height:40px;border-radius:20px;padding:4px 14px;align-items:center}
  .nb.on,.nb:hover{width:auto;flex-basis:auto;max-height:none}
  .nb small{display:none}
  .lc-head{padding:0 4px}
  .lc-title{white-space:normal;font-size:19px;line-height:1.15}
  .dial{max-height:240px}
  .pn{padding:12px 14px 14px}
  .lc-stage{padding:6px 0;min-height:70vh;overflow:visible}
  .scr{position:relative;inset:auto;flex-direction:column}
  .pn{flex:none!important;min-height:200px;opacity:1;transform:none;flex-grow:1}
  .pn canvas,.pn svg.fill{min-height:220px}
  #cv-core{min-height:460px}
  .lc-bot{padding-right:0}.lc-bot .read{padding-left:6px}
  #login{right:10px;bottom:10px;min-height:44px;font-size:16px}
  .menu-gap{flex:0 0 12px;height:auto}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}#glare::after{display:none}}

/* right-click quick menu */
#ctx{position:fixed;z-index:90;min-width:240px;max-height:calc(100vh - 16px);overflow-y:auto;padding:0 0 10px;background:rgba(6,5,12,.95);border:1px solid var(--line);border-left:14px solid var(--c1);border-radius:30px 8px 8px 8px;box-shadow:0 14px 50px rgba(0,0,0,.75),var(--glow);transform-origin:top left;transform:scale(.55,.15);opacity:0;pointer-events:none;transition:transform .24s cubic-bezier(.2,.9,.2,1),opacity .16s;scrollbar-width:thin}
#ctx.on{transform:none;opacity:1;pointer-events:auto}
#ctx .ch{padding:12px 16px 4px;font-size:11px;letter-spacing:.32em;color:var(--mut)}
#ctx .ch:first-child{padding-top:14px;color:var(--c1)}
#ctx button{display:flex;justify-content:space-between;align-items:center;gap:18px;width:calc(100% - 12px);margin:3px 0 0;padding:0 16px;min-height:31px;border:0;border-radius:0 18px 18px 0;background:var(--cc,var(--c1));color:var(--ink);font-weight:700;font-size:14px;letter-spacing:.12em;text-align:left;cursor:pointer;transition:width .18s,filter .15s,background .6s}
#ctx button:hover,#ctx button:focus-visible{filter:brightness(1.28);width:100%;outline:none}
#ctx button.cur{box-shadow:inset 0 0 0 2px #fff}
#ctx button i{font-style:normal;font-size:11px;opacity:.75;letter-spacing:.18em}
.cx1{--cc:var(--c1)}.cx2{--cc:var(--c2)}.cx3{--cc:var(--c3)}.cx4{--cc:var(--c4)}.cx5{--cc:var(--c5)}.cx6{--cc:var(--c6)}.cx7{--cc:var(--c7)}

/* server rack picture (public, decorative) */
.rk rect{fill:#16161d;stroke:var(--c2);stroke-width:1.5;transition:fill .3s,stroke .3s}
.rk text{fill:var(--c2);font-size:11px;font-weight:700;letter-spacing:.1em}
.rk.hi rect:first-child{fill:rgba(255,153,0,.22);stroke:#fff}
.rk .ports rect{fill:#0b0b10;stroke:#5a5f6a;stroke-width:1}
.rk .grill{fill:#07070b;stroke:#2c3a44}.rk .fan{fill:none;stroke:var(--c5);stroke-width:2;opacity:.7}
.rk .led{fill:#7dff9a;animation:blink2 1.3s infinite}
@keyframes blink2{50%{opacity:.2}}

/* ---------- public detail popouts (Pro Star System / server rack) ---------- */
.sdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:9px;background:#8c8c9a;vertical-align:middle;box-shadow:0 0 6px currentColor}
.rk{transition:filter .2s}.rk:hover{filter:brightness(1.25)}
#pubpop{position:fixed;inset:0;z-index:95;pointer-events:none}
#pubpop .pshade{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .3s}
#pubpop.on{pointer-events:auto}#pubpop.on .pshade{opacity:1}
#pubpop .pdrawer{position:absolute;top:0;right:0;bottom:0;width:min(560px,100vw);display:flex;flex-direction:column;background:rgba(6,5,12,.97);border-left:14px solid var(--c1);border-radius:46px 0 0 46px;transform:translateX(105%);transition:transform .38s cubic-bezier(.2,.8,.2,1);box-shadow:var(--glow,0 0 30px rgba(255,153,0,.3))}
#pubpop.on .pdrawer{transform:none}
#pubpop .phead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 10px 26px}
#pubpop .ptitle{margin:0;font-size:clamp(20px,3vw,28px);letter-spacing:.18em;font-weight:600;color:var(--c1);text-shadow:var(--glow)}
#pubpop .pclose{border:0;cursor:pointer;min-height:38px;padding:0 22px;border-radius:38px;background:var(--c3);color:var(--ink);font:700 13px/1 inherit;letter-spacing:.16em;font-family:inherit}
#pubpop .pbody{flex:1;overflow-y:auto;padding:4px 22px 30px 26px}
#pubpop .chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
#pubpop .chip{display:inline-block;padding:2px 12px;border-radius:12px;color:#000;font-weight:700;font-size:12px;letter-spacing:.14em}
#pubpop .chip2{display:inline-block;padding:2px 12px;border-radius:12px;background:rgba(150,130,100,.25);font-size:12px;letter-spacing:.12em}
#pubpop .pnote{margin:8px 0;padding:10px 14px;background:rgba(255,204,51,.08);border-left:6px solid #ffcc33;font-size:13px;letter-spacing:.08em}
#pubpop .pnote.bad{border-left-color:#ff4d4d;background:rgba(255,77,77,.1)}
#pubpop .pmut{color:var(--mut);font-size:11px}
#pubpop .pcard{margin:8px 0 12px;padding:10px 14px 10px;border:1px solid var(--line);border-left:8px solid var(--c3);border-radius:18px 6px 6px 18px}
#pubpop .pcard h3,#pubpop .gh{margin:14px 0 6px;font-size:12px;letter-spacing:.3em;color:var(--c3);font-weight:600;display:flex;justify-content:space-between}
#pubpop .pcard h3{margin-top:2px}
#pubpop .pbig{font-size:19px;line-height:1.3;text-transform:none;letter-spacing:.02em;color:var(--txt);margin:2px 0 8px;overflow-wrap:anywhere}
#pubpop .pdesc{font-size:12px;line-height:1.5;color:var(--mut);text-transform:none;letter-spacing:.02em;margin:6px 0}
#pubpop .row{align-items:baseline}#pubpop .row span{min-width:0;overflow-wrap:anywhere}#pubpop .row b{text-align:right;text-transform:none;overflow-wrap:anywhere}
#pubpop .mlab{display:flex;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:.12em;margin-top:6px}
@media (max-width:640px){#pubpop .pdrawer{width:100vw;border-radius:30px 0 0 0;border-left-width:10px}}

/* embed mode (?embed=1): only the Bridge grid, used inside the private command panel */
body.embed .lc-side,body.embed .lc-top,body.embed .lc-bot,body.embed #login,body.embed #glare,body.embed #boot,body.embed #alertbar{display:none!important}
body.embed .lc{display:block;padding:0}
body.embed .lc-stage{position:absolute;inset:0;padding:0;overflow:hidden}
body.embed .scr{inset:0}
body.embed #w-wel{display:none}
body.embed #w-sys{grid-column:span 2}
@media (max-width:1180px){body.embed .lc-stage{position:relative}}