:root{
  --bg:#000;
  --grad:linear-gradient(130deg,#000 0%,#18042527 50%,#0218127e 100%);
  --glass:#0000006e;          
  --glass2:#11101012;
  --border:#ffffff1a;         
  --ink:#dcdbf0e1;            
  --muted:#c6d0f0a6;          
  --cyan:#1fe0ff;            
  --teal:#21bca5;            
  --purp:#bf7dff;            
  --brandpurp:#a200ff;
  --green:#38ffb3;           
  --warn:#ffcc33;            
  --err:#ff49d8;             
  --num:#85e29a;             
  --metal-top:#3a3f45; --metal-mid:#1d2228; --metal-bot:#080b0f;
  --metal-edge:#55ffffff; --metal-hair:#225d6874;
  --seg-on:#70f0ff; --seg-off:#123640;
  --aura:0 4px 18px rgba(255,255,255,.12),0 8px 18px rgba(33,188,165,.18),1px 8px 18px rgba(162,0,255,.13);
  --radius:16px; --radius-sm:12px; --radius-xs:8px;
  --mono:ui-monospace,"Cascadia Code",Consolas,monospace;
  --sans:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);color:var(--ink);background:#000;font-size:13px;overflow:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--grad);filter:blur(6px) brightness(.9) saturate(1.05);transform:scale(1.03)}
body::after{content:"";position:fixed;inset:0;z-index:-1;opacity:.5;background-image:
  radial-gradient(1.3px 1.3px at 18% 28%,#fff,transparent),radial-gradient(1.2px 1.2px at 72% 62%,#bfeee6,transparent),
  radial-gradient(1px 1px at 42% 82%,#fff,transparent),radial-gradient(1.3px 1.3px at 86% 20%,#d9c8ff,transparent),
  radial-gradient(1px 1px at 56% 12%,#fff,transparent),radial-gradient(1.1px 1.1px at 31% 56%,#cfeee9,transparent);
  background-repeat:repeat;background-size:560px 560px}
a{color:var(--teal);text-decoration:none;cursor:pointer}a:hover{text-decoration:underline}
.hide{display:none!important}.mono{font-family:var(--mono)}

.grad{color:#7df3ff;font-weight:800;letter-spacing:.04em;text-shadow:0 0 10px rgba(31,224,255,.55),0 0 2px rgba(31,224,255,.85)}

.btn-title{font-family:var(--sans);font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1;font-size:13px}


#app{display:grid;grid-template-rows:auto 1fr;height:100vh}
.detline{color:var(--green);padding:2px 0;opacity:0;animation:fadein .3s forwards;font-family:var(--mono);font-size:12px}
@keyframes fadein{to{opacity:1}}


.pragHeader{position:relative;z-index:50;background:var(--glass);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border)}
.pragHeader .nav{max-width:1900px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.dnaSwirl{position:relative;flex:1;height:56px;overflow:hidden;border-radius:14px;pointer-events:none}
.ph-tag{position:absolute;left:13px;top:50%;transform:translateY(-50%);z-index:3;pointer-events:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);opacity:.85}
.ph-tag b{color:var(--teal);font-weight:700}
.ph-right{position:absolute;right:13px;top:50%;transform:translateY(-50%);z-index:3;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);opacity:.8}
.dev{position:relative;flex:none}
.dropdown-toggle{background:none;border:none;outline:none;cursor:pointer;padding:6px;display:flex;transition:transform .16s}
.dropdown-toggle:hover{transform:translateY(-2px)}
.dropdown-toggle svg{pointer-events:none}
.dropdown-menu{display:none;position:absolute;top:124%;right:0;min-width:248px;padding:8px 0;
  background:#000000e1;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);
  box-shadow:var(--aura);backdrop-filter:blur(14px) saturate(160%);z-index:100}
.dropdown.open .dropdown-menu{display:block}
.menu-section{display:block;padding:9px 16px 4px;font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--teal);font-weight:700;opacity:.9}
.dropdown-menu a{display:block;padding:8px 16px;color:var(--ink);font-size:13px;font-weight:500}
.dropdown-menu a:hover{background:rgba(151,39,216,.185);color:var(--teal);text-decoration:none}
.dropdown-menu .muted-row{padding:8px 16px;color:var(--muted);font-size:11.5px;font-family:var(--mono)}


#stage{position:relative;min-height:0;overflow:hidden}


#wizard{height:100%;overflow-y:auto}
.wiz{display:flex;flex-direction:column;align-items:center;min-height:100%;padding:30px 22px 44px;text-align:center}
.wiz-introwrap{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:56vh}
.wiz-logo{width:128px;height:128px;object-fit:contain;filter:drop-shadow(0 0 26px rgba(33,188,165,.5))}
@keyframes wizLogoInOut{0%{opacity:0;transform:scale(.9)}26%{opacity:1;transform:scale(1)}66%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.03)}}
.wiz-logo.intro{animation:wizLogoInOut 2.1s ease forwards}
.wiz-introsub{margin-top:20px;color:var(--muted);letter-spacing:.22em;text-transform:uppercase;font-family:var(--mono);font-size:10.5px;opacity:0;animation:fadein .8s ease .5s forwards}
.wiz-head{display:flex;flex-direction:column;align-items:center;gap:2px;animation:fadein .55s ease forwards}
.wiz-pulse{line-height:0}
.wiz-pulse canvas{width:92px;height:92px}
.wiz-ask{max-width:640px;margin:14px auto 2px;font-size:18px;line-height:1.42}
.wiz-ask b{color:var(--green)}
.wiz-sub{color:var(--muted);font-size:12.5px;margin-bottom:22px}
.wiz-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(188px,1fr));gap:16px;max-width:792px;width:100%;margin:0 auto}
.wiz-tile{position:relative;border-radius:var(--radius);padding:20px 16px;cursor:pointer;text-align:center;
  background:linear-gradient(160deg,#13283a66 0%,#0c1a2840 48%,#06121c14 100%);
  border:1px solid var(--border);box-shadow:0 8px 24px #0008;transition:transform .12s,box-shadow .12s,border-color .12s;overflow:hidden}
.wiz-tile:hover{transform:translateY(-3px);box-shadow:var(--aura);border-color:rgba(31,224,255,.4)}
.wiz-tile.disabled{opacity:.42;cursor:default}
.wiz-tile.disabled:hover{transform:none;box-shadow:0 8px 24px #0008;border-color:var(--border)}
.wiz-tile canvas[data-ic]{width:56px;height:56px}
.wiz-tile canvas[data-ic],.wiz-tile svg,.wiz-tile .wiz-glyph,.wiz-tile .wiz-tname,.wiz-tile .wiz-tsub{position:relative;z-index:2;color:var(--muted)}
.wiz-glyph{width:56px;height:56px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;margin:0 auto;
  font-family:var(--mono);font-weight:800;font-size:17px;color:var(--muted);border:1px solid var(--border);background:#0000003a}
.wiz-tname{font-size:15px;font-weight:700;letter-spacing:.04em;margin-top:12px}
.wiz-tsub{color:var(--muted);font-size:11.5px;margin-top:6px;line-height:1.4}
.wiz-back{display:inline-block;margin-top:20px;color:var(--muted);cursor:pointer;font-size:12px;font-family:var(--mono)}
.wiz-back:hover{color:var(--teal)}
.wiz-log{width:100%;max-width:620px;margin:6px auto 0;text-align:left}


#mirror{display:grid;grid-template-rows:auto 1fr;height:100%;min-height:0}
#obView{overflow-y:auto;padding:22px;min-height:0}


#obTopbar{position:relative;display:flex;align-items:center;gap:10px;height:38px;padding:0 8px;
  background:linear-gradient(180deg,var(--metal-top),var(--metal-mid) 42%,var(--metal-bot));
  border-bottom:2px solid #000a;box-shadow:inset 0 1px 0 var(--metal-edge),0 2px 10px #000a}
#obTopbar::after{content:"";position:absolute;left:0;right:0;top:34%;height:1px;background:#ffffff14;pointer-events:none}
.ob-left{display:flex;align-items:center;gap:10px;height:30px;padding:0 9px;border-radius:7px;
  background:rgba(0,0,0,.45);box-shadow:inset 0 1px 0 #ffffff20}

.ob-word{font-family:var(--sans);font-weight:800;font-size:15px;letter-spacing:.14em;
  color:#9af1ff;text-shadow:0 0 9px rgba(112,240,255,.55),0 0 2px rgba(112,240,255,.9);
  cursor:pointer;user-select:none}
.ob-nav{display:flex;align-items:center;gap:7px}
.ob-nav canvas{width:21px;height:27px;cursor:pointer;opacity:.82;transition:opacity .12s}
.ob-nav canvas:hover:not(.dim){opacity:1}
.ob-nav canvas.dim{opacity:.26;cursor:default;pointer-events:none}
.ob-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.ob-hart{line-height:0;display:flex;align-items:center}
.ob-hart canvas{width:22px;height:18px}
.ob-hart.live{animation:obbeat 1.05s ease-in-out infinite;transform-origin:center}
@keyframes obbeat{0%,40%,100%{transform:scale(1)}12%{transform:scale(1.18)}26%{transform:scale(1)}}
.ob-cap{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:13px;
  background:var(--glass2);border:1px solid var(--border);font-family:var(--mono);font-size:10px;font-weight:700;color:var(--muted);cursor:pointer}
.ob-cap .lbl{font-weight:800}
.ob-cap.wifi .lbl{color:var(--cyan)}.ob-cap.lte .lbl{color:var(--purp)}
.ob-mini{display:inline-flex;align-items:flex-end;gap:3px;height:16px}
.ob-mini i{width:4px;border-radius:2px;display:block}
.ob-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.ob-bars i{width:3px;border-radius:1px;display:block;background:var(--green)}
.ob-bars i.off{opacity:.18}
.ob-batt{position:relative;width:30px;height:15px;border:1px solid var(--bcol,var(--green));border-radius:3px;cursor:pointer}
.ob-batt::after{content:"";position:absolute;right:-4px;top:4px;width:3px;height:7px;border-radius:1px;background:var(--bcol,var(--green))}
.ob-batt>i{position:absolute;left:2px;top:2px;bottom:2px;border-radius:2px;background:var(--bcol,var(--green))}
.ob-batt .ob-bolt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;line-height:1;color:#04141a;text-shadow:0 0 2px #fff}
.ob-clock{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--seg-on);cursor:pointer;
  text-shadow:0 0 9px rgba(112,240,255,.55);padding:3px 9px;border-radius:7px;background:rgba(0,0,0,.45)}

.ob-usb{align-items:center;justify-content:center;line-height:0;cursor:pointer;
  animation:obusbbreathe 1.8s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(31,224,255,.55))}
@keyframes obusbbreathe{0%,100%{opacity:1}50%{opacity:.55}}

.ob-cap .aiv{font-family:var(--mono);font-weight:700}


.ob-detail-backdrop{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.28)}
.ob-detail{position:fixed;top:44px;right:8px;z-index:121;width:286px;max-width:calc(100vw - 18px);
  background:#0a0712f2;border:1px solid var(--cyan);border-radius:10px;padding:11px 12px;
  box-shadow:0 12px 34px #000b,inset 0 1px 0 #ffffff14;backdrop-filter:blur(8px)}
.ob-detail-title{font-family:var(--mono);font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--cyan)}
.ob-detail-div{height:1px;background:var(--border);opacity:.5;margin:7px 0}
.ob-detail-rows{display:flex;flex-direction:column;gap:4px}
.ob-drow{display:flex;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:10px;color:var(--muted)}
.ob-drow.first{font-size:11px;color:var(--ink)}
.ob-drow .dv{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:62%}

.ob-detail.hart .ob-detail-title,.ob-detail.hart .ob-detail-rows{padding-right:58px}
.ob-detail-orb{position:absolute;top:34px;right:12px;width:54px;height:54px;pointer-events:none;z-index:2}
.ob-detail-btns{display:flex;gap:7px;margin-top:10px}
.ob-dbtn{flex:1;background:rgba(56,255,179,.12);border:1px solid rgba(56,255,179,.4);color:var(--green);
  border-radius:8px;padding:7px 6px;font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.06em;cursor:pointer}
.ob-dbtn:hover:not([disabled]){background:rgba(56,255,179,.22)}
.ob-dbtn[disabled]{opacity:.42;cursor:default}
.ob-detail-foot{margin-top:9px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--muted);opacity:.7;text-align:center}


.usbov{position:fixed;inset:0;z-index:140;display:flex;align-items:flex-start;justify-content:center}
.usb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.usb-dialog{position:relative;margin-top:64px;width:392px;max-width:92vw;z-index:1;
  background:#0a0712;border:1px solid var(--cyan);border-radius:var(--radius);
  box-shadow:var(--aura);padding:18px}
.usb-dialog.wide{width:560px}
.usb-head{display:flex;align-items:center;justify-content:space-between}
.usb-title{font-family:var(--mono);font-size:14px;font-weight:800;letter-spacing:.12em;color:var(--cyan)}
.usb-x{cursor:pointer;color:var(--muted);font-size:15px;padding:2px 6px;border-radius:6px}
.usb-x:hover{color:var(--err);background:rgba(255,255,255,.06)}
.usb-sub{color:var(--muted);font-size:11.5px;margin-top:3px}
.usb-mount{margin-top:12px;font-size:12px;color:var(--ink)}
.usb-store{margin-top:12px}
.usb-store-line{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.usb-bar{height:10px;background:#ffffff10;border-radius:6px;overflow:hidden;margin:6px 0}
.usb-bar>span{display:block;height:100%;border-radius:6px}
.usb-store-pct{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.usb-btns{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.usb-btn{position:relative;overflow:hidden;width:100%;border-radius:10px;padding:11px 12px;cursor:pointer;
  font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.07em;
  background:var(--glass2);border:1px solid var(--border);color:var(--ink)}
.usb-btn:hover{border-color:rgba(255,255,255,.28)}
.usb-btn.warn{color:var(--warn);border-color:rgba(255,204,51,.4)}
.usb-btn.cyan{color:var(--cyan);border-color:rgba(31,224,255,.4)}
.usb-btn.green{color:var(--green);border-color:rgba(56,255,179,.45)}
.usb-btn[disabled]{cursor:default;opacity:.92}
.usb-prog{position:absolute;left:0;top:0;bottom:0;background:rgba(56,255,179,.22);z-index:0;transition:width .12s linear}
.usb-btn-lbl{position:relative;z-index:1}
.usb-msg{margin-top:10px;font-size:11px;color:var(--green)}
.usb-crumbrow{display:flex;align-items:center;gap:10px;margin-top:12px}
.usb-up{cursor:pointer;font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--cyan);
  border:1px solid rgba(31,224,255,.35);border-radius:7px;padding:4px 9px}
.usb-up:hover{background:rgba(31,224,255,.12)}
.usb-crumb{font-family:var(--mono);font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usb-crumb-root{color:var(--cyan);cursor:pointer}
.usb-list{margin-top:10px;max-height:46vh;overflow-y:auto;border:1px solid var(--border);border-radius:10px}
.usb-entry{display:flex;justify-content:space-between;gap:14px;padding:9px 12px;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:12px}
.usb-entry:last-child{border-bottom:0}
.usb-entry.dir{cursor:pointer;color:var(--cyan)}
.usb-entry.dir:hover{background:rgba(31,224,255,.07)}
.usb-en-size{color:var(--muted);font-size:11px}
.usb-empty{padding:16px;text-align:center;color:var(--muted);font-family:var(--mono);font-size:11px}


.calc-wrap{display:flex;justify-content:center;margin-top:6px}
.calc-console{width:420px;max-width:96vw;background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;box-shadow:var(--aura);backdrop-filter:blur(6px)}
.calc-screen{background:rgba(0,0,0,.45);border:1px solid var(--border);border-radius:12px;padding:12px 16px;
  text-align:right;min-height:104px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.calc-meta{display:flex;align-items:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--teal);opacity:.85}
.calc-meta .spacer{flex:1}
.calc-expr{font-family:var(--mono);font-size:12.5px;color:var(--muted);min-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calc-out{font-family:var(--mono);font-size:36px;font-weight:700;color:var(--seg-on);margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}
.calc-key{height:46px;border-radius:11px;cursor:pointer;font-family:var(--mono);font-size:16px;font-weight:700;
  color:var(--ink);background:linear-gradient(180deg,#1a2230,#10151d);border:1px solid var(--border);
  transition:transform .08s,box-shadow .12s,background .12s}
.calc-key:hover{box-shadow:var(--aura);transform:translateY(-1px)}
.calc-key:active{transform:translateY(1px) scale(.98)}
.calc-key.num{color:#eaf2ff;font-size:18px}
.calc-key.fn{color:var(--muted);font-size:13px;background:linear-gradient(180deg,#222a36,#161b24)}
.calc-key.fn.active{background:linear-gradient(180deg,var(--warn),#c79a14);color:#1a1400;border-color:var(--warn)}
.calc-key.sci{color:var(--purp);border-color:rgba(191,125,255,.3);font-size:14px}
.calc-key.mem{color:var(--teal);border-color:rgba(33,188,165,.3);font-size:13px}
.calc-key.op{color:var(--cyan);border-color:rgba(31,224,255,.35);font-size:20px}
.calc-key.op.active{background:linear-gradient(180deg,#1fe0ff,#13a8c4);color:#04141a;border-color:var(--cyan)}
.calc-key.eq{color:#05120f;background:linear-gradient(180deg,var(--green),#1ac98c);border-color:rgba(56,255,179,.6);font-size:20px}
.calc-key.eq.span2{grid-column:span 2}
.calc-key.eq:hover{background:linear-gradient(180deg,#5cffc6,#1ec99a)}


.pill{display:inline-flex;align-items:center;gap:6px;height:27px;padding:0 11px;border-radius:13px;
  background:var(--glass2);border:1px solid var(--border);font-family:var(--mono);font-size:11px;color:var(--muted)}
.pill.on{color:var(--cyan);border-color:rgba(31,224,255,.35)}
.pill.dim{opacity:.42}
.pill.live{color:var(--green);border-color:rgba(56,255,179,.35)}
.pill.warn{color:var(--warn);border-color:rgba(255,204,51,.35)}


.led{font-family:var(--mono);color:var(--seg-on);letter-spacing:.06em;text-shadow:0 0 8px rgba(112,240,255,.5)}


.page-title{font-size:20px;letter-spacing:.02em;margin-bottom:4px}
.page-sub{color:var(--muted);font-size:12.5px;margin-bottom:18px}


.card{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;overflow:hidden;backdrop-filter:blur(6px)}
.card>h3{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);
  padding:11px 15px;border-bottom:1px solid var(--border);background:rgba(33,188,165,.05);display:flex;align-items:center;gap:8px}
.card .body{padding:15px}
.glass{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);backdrop-filter:blur(6px)}


.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}

.tile{position:relative;border-radius:8px;padding:18px;min-height:150px;cursor:pointer;opacity:.94;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#13283a66 0%,#0c1a2840 48%,#06121c14 100%);
  border:1px solid var(--border);box-shadow:0 8px 26px #0009;transition:transform .12s,box-shadow .12s,background .14s,opacity .14s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--aura);opacity:1;
  background:linear-gradient(160deg,#193954 0%,#0f1f2e66 48%,#08161f33 100%)}
.tile::before{content:"";position:absolute;left:1px;right:1px;top:1px;height:28%;border-radius:7px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.27),rgba(255,255,255,0));opacity:.20}
.tile::after{content:"";position:absolute;inset:2px;border-radius:7px;border:1px solid transparent;opacity:.34;z-index:1;pointer-events:none;transition:opacity .14s}
.tile.cyan::after{border-color:var(--cyan)}
.tile.purp::after{border-color:var(--purp)}
.tile:hover::after{opacity:.68}
.tile-wave{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);opacity:.42;pointer-events:none;border-radius:7px;z-index:1}
.tile .t-ic,.tile .t-name,.tile .t-sub,.tile canvas[data-ic]{position:relative;z-index:2}
.tile .t-ic{font-size:34px;filter:drop-shadow(0 0 12px rgba(255,255,255,.25))}
.tile .t-name{font-size:18px;font-weight:700;letter-spacing:.06em;margin-top:14px}
.tile .t-sub{color:var(--muted);font-size:12px;margin-top:5px}


.cta{background:linear-gradient(180deg,var(--teal),#1ca490);color:#05120f;font-weight:800;border:none;border-radius:12px;padding:11px 18px;cursor:pointer;font-size:14px;transition:transform .15s,box-shadow .15s}
.cta:hover{background:var(--brandpurp);color:var(--ink);box-shadow:var(--aura);transform:translateY(-2px)}
.btn{background:var(--glass2);color:var(--ink);border:1px solid var(--border);border-radius:12px;padding:8px 14px;cursor:pointer;font-weight:600}
.btn:hover{background:rgba(33,188,165,.12);border-color:rgba(33,188,165,.35);color:var(--teal)}
.btn.sm{padding:5px 10px;font-size:12px}
label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--teal);margin:14px 0 6px;font-weight:600}
input,select,textarea{width:100%;background:rgba(0,0,0,.32);border:1px solid var(--border);border-radius:10px;color:var(--ink);padding:10px 12px;font-family:var(--mono);font-size:13px;outline:none}
input:focus,select:focus{border-color:var(--teal);box-shadow:0 0 0 2px rgba(33,188,165,.24)}
.toggle{display:inline-block;width:42px;height:23px;border-radius:12px;background:#ffffff1a;position:relative;cursor:pointer;border:1px solid var(--border)}
.toggle.on{background:rgba(56,255,179,.3)}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.15s}
.toggle.on::after{left:21px;background:var(--green)}


.kv{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border)}
.kv:last-child{border-bottom:0}.kv .k{color:var(--muted)}.kv .v{font-family:var(--mono);color:var(--ink)}
.kv .v.num{color:var(--num)}
table.grid{width:100%;border-collapse:collapse}
table.grid th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--teal);text-align:left;padding:9px 12px;border-bottom:1px solid var(--border)}
table.grid td{padding:9px 12px;border-bottom:1px solid var(--border);font-size:13px}
table.grid tr:hover td{background:rgba(33,188,165,.05)}


.chip{display:inline-block;padding:2px 9px;border-radius:11px;font-size:11px;font-weight:600}
.chip.live{background:var(--green);color:#05120f}.chip.warn{background:var(--warn);color:#1a1400}
.chip.err{background:var(--err);color:#fff}.chip.idle{background:#ffffff14;color:var(--muted)}
.chip.cyan{background:var(--cyan);color:#04141a}.chip.purp{background:var(--purp);color:#1a0a2a}


.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}
.stat{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:14px}
.stat .v{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--ink)}
.stat .l{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-top:3px}
.bar{height:13px;background:#ffffff10;border-radius:7px;overflow:hidden;margin:6px 0}
.bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--purp))}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spacer{flex:1}
.muted{color:var(--muted)}.small{font-size:11.5px}
.divider{height:1px;background:linear-gradient(90deg,transparent,#ffffff1f,transparent);margin:14px 0}


.orb{line-height:0;flex:none}.orb.live{animation:breath 1.96s ease-in-out infinite}
@keyframes breath{0%,100%{transform:scale(.985)}50%{transform:scale(1.045)}}
.swirlbox{border:1px solid var(--border);border-radius:12px;background:rgba(0,0,0,.28);padding:10px}


#modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.62);backdrop-filter:blur(3px)}
.modal-card{width:480px;max-width:92%;background:#0a0712;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--aura);padding:22px}