/* Layout: RTL app shell — navy sidebar on the right, light working canvas, data in tabular mono */
:root{
  --navy:#0D2B55; --teal:#028090; --mint:#02C39A; --orange:#F97316;
  --bg:#F3F6F9; --surface:#FFFFFF; --surface-2:#EEF3F7; --line:#DCE4EC;
  --fg:#13233A; --muted:#5B6B80; --side:#0D2B55; --side-fg:#C9D6E6; --side-active:#163C70;
  --good:#0E8F6E; --good-bg:#DDF5EC; --warn:#B45309; --warn-bg:#FEF0DC; --bad:#C2253A; --bad-bg:#FCE3E6;
  --info-bg:#E0F2F4; --shadow:0 1px 2px rgba(13,43,85,.06),0 4px 14px rgba(13,43,85,.05);
  --f-body:"IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B1524; --surface:#122036; --surface-2:#172842; --line:#24385A; --fg:#E4ECF5; --muted:#93A4BB;
  --side:#08111F; --side-fg:#A9BAD0; --side-active:#15305A; --teal:#22A6B5; --mint:#2BD9AE; --orange:#FB8A3C; --navy:#7FA8E0;
  --good:#3CCB9C; --good-bg:#0F3A30; --warn:#F5A54A; --warn-bg:#3D2A12; --bad:#F27486; --bad-bg:#43161F; --info-bg:#123744;
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B1524; --surface:#122036; --surface-2:#172842; --line:#24385A; --fg:#E4ECF5; --muted:#93A4BB;
  --side:#08111F; --side-fg:#A9BAD0; --side-active:#15305A; --teal:#22A6B5; --mint:#2BD9AE; --orange:#FB8A3C; --navy:#7FA8E0;
  --good:#3CCB9C; --good-bg:#0F3A30; --warn:#F5A54A; --warn-bg:#3D2A12; --bad:#F27486; --bad-bg:#43161F; --info-bg:#123744;
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14px;line-height:1.55}
*{box-sizing:border-box}
button,select,input,textarea{font:inherit;color:inherit}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.app{display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100%}
/* sidebar */
.side{background:var(--side);color:var(--side-fg);padding-block:18px;padding-inline:14px;display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 6px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-mark{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,#028090,#02C39A);display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--f-num);font-size:13px}
.brand b{display:block;color:#fff;font-size:15px;line-height:1.2}
.brand small{font-size:11.5px;opacity:.75}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-label{font-size:11px;letter-spacing:.04em;color:#7F95B3;padding:6px 8px 4px;font-weight:600}
.nav-item{display:flex;align-items:center;gap:9px;width:100%;text-align:start;background:none;border:0;color:var(--side-fg);padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13.5px}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.on{background:var(--side-active);color:#fff;box-shadow:inset -3px 0 0 #02C39A}
.nav-item .tag{margin-inline-start:auto;font-size:10.5px;font-family:var(--f-num);opacity:.7}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.55;flex:none}
.side-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.who{display:flex;gap:10px;align-items:center}
.avatar{width:34px;height:34px;border-radius:50%;background:#1E4A82;color:#fff;display:grid;place-items:center;font-weight:600;flex:none}
.who b{color:#fff;font-size:13px;display:block}
.who small{font-size:11.5px}
.side select{background:#0A2244;border:1px solid #23477A;color:#fff;border-radius:8px;padding:7px 8px;width:100%}
/* main */
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-block:12px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
.crumbs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:13px;min-width:0}
.crumbs button{background:none;border:0;color:var(--teal);cursor:pointer;padding:0}
.crumbs .sep{opacity:.5}
.top-tools{margin-inline-start:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px}
.seg button{border:0;background:none;padding:5px 11px;border-radius:7px;cursor:pointer;color:var(--muted);font-size:13px}
.seg button.on{background:var(--surface);color:var(--fg);box-shadow:var(--shadow);font-weight:600}
.menu-btn{display:none;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 10px;cursor:pointer}
.content{padding-block:22px 48px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:18px;max-width:1440px;width:100%}
.demo-note{font-size:12px;color:var(--muted);background:var(--surface-2);border:1px dashed var(--line);border-radius:8px;padding:6px 10px}
h1{font-size:22px;margin:0;line-height:1.3;text-wrap:balance;color:var(--fg)}
h2{font-size:16px;margin:0;text-wrap:balance}
h3{font-size:14px;margin:0}
.page-head{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;justify-content:space-between}
.page-head p{margin:4px 0 0;color:var(--muted);max-width:70ch}
.eyebrow{font-size:12px;color:var(--teal);font-weight:600;letter-spacing:.02em}
/* cards & grids */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0;display:flex;flex-direction:column;gap:12px}
.panel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-head .sub{color:var(--muted);font-size:12.5px}
.panel-head .right{margin-inline-start:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.section-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:9px;background:var(--teal);color:#fff;font-weight:600}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-73{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;position:relative;min-width:0}
.kpi::before{content:"";position:absolute;inset-inline-start:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--line)}
.kpi.good::before{background:var(--good)} .kpi.warn::before{background:var(--warn)} .kpi.bad::before{background:var(--bad)}
.kpi .lbl{font-size:12.5px;color:var(--muted);line-height:1.35;min-height:2.7em}
.kpi .val{font-size:24px;font-weight:600;font-family:var(--f-num);font-variant-numeric:tabular-nums;line-height:1.2;color:var(--fg)}
.kpi .val small{font-size:13px;color:var(--muted);font-weight:500}
.kpi .formula{font-size:11px;color:var(--muted);border-top:1px dashed var(--line);padding-top:5px;margin-top:2px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:99px;white-space:nowrap;background:var(--surface-2);color:var(--muted)}
.pill.good{background:var(--good-bg);color:var(--good)} .pill.warn{background:var(--warn-bg);color:var(--warn)} .pill.bad{background:var(--bad-bg);color:var(--bad)} .pill.info{background:var(--info-bg);color:var(--teal)}
.chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;border:1px solid var(--line);font-size:11.5px;font-family:var(--f-body);background:var(--surface-2)}
/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:9px 11px;text-align:start;border-bottom:1px solid var(--line);vertical-align:middle}
th{background:var(--surface-2);font-weight:600;color:var(--muted);font-size:12px;white-space:nowrap}
tr:last-child td{border-bottom:0}
tr.click{cursor:pointer} tr.click:hover td{background:var(--surface-2)}
td.n,th.n{text-align:end}
/* buttons/forms */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 13px;cursor:pointer;font-size:13px;font-weight:500}
.btn:hover{border-color:var(--teal);color:var(--teal)}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.primary:hover{filter:brightness(1.08);color:#fff}
.btn.sm{padding:4px 9px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.field{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted);min-width:0}
.field input,.field select,.field textarea,.inp{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 9px;color:var(--fg);width:100%}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
/* tabs */
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);padding-bottom:0}
.tabs button{border:0;background:none;padding:9px 12px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;font-size:13.5px}
.tabs button.on{color:var(--teal);border-bottom-color:var(--teal);font-weight:600}
/* bars */
.bars{display:flex;flex-direction:column;gap:9px}
.bar-row{display:grid;grid-template-columns:130px minmax(0,1fr) 78px;gap:10px;align-items:center;font-size:12.5px}
.bar-track{height:12px;background:var(--surface-2);border-radius:6px;overflow:hidden;display:flex}
.bar-fill{height:100%;background:var(--teal)}
.bar-fill.alt{background:var(--orange)}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:middle}
/* list */
.list{display:flex;flex-direction:column}
.li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.li:last-child{border-bottom:0}
.li .body{min-width:0;flex:1}
.li .meta{font-size:12px;color:var(--muted)}
.sev{width:4px;align-self:stretch;border-radius:3px;background:var(--line);flex:none}
.sev.bad{background:var(--bad)} .sev.warn{background:var(--warn)} .sev.good{background:var(--good)}
/* unit cards */
.unit-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ucard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:8px;text-align:start}
.ucard:hover{border-color:var(--teal)}
.ucard .code{font-family:var(--f-num);font-size:12px;color:#fff;background:var(--navy);border-radius:6px;padding:2px 7px;align-self:flex-start}
.ucard .row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.ucard .row b{color:var(--fg)}
/* heatmap */
.hm td.cell{text-align:center;font-family:var(--f-num);font-weight:600}
.hm td.na{color:var(--muted);text-align:center}
/* misc */
.empty{color:var(--muted);font-size:13px;padding:14px;text-align:center;border:1px dashed var(--line);border-radius:10px}
.hypo{font-size:11px;background:var(--warn-bg);color:var(--warn);border-radius:5px;padding:1px 6px;font-weight:600}
.qc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.check{display:flex;gap:8px;align-items:center;font-size:13px;padding:4px 0}
.check input{width:16px;height:16px;accent-color:var(--teal)}
.roster td.s{text-align:center;font-family:var(--f-num);font-weight:600}
.s-D{color:var(--teal)} .s-E{color:var(--orange)} .s-N{color:var(--navy)} .s-O,.s-L{color:var(--muted)}
.toast{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));left:max(18px,env(safe-area-inset-left,0px));background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:30;font-size:13px}
:root[data-theme="dark"] .toast{background:#15305A}
.login{min-height:100%;display:grid;place-items:center;padding-block:30px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:linear-gradient(160deg,#0D2B55 0%,#0B3B5C 55%,#028090 130%)}
.login-card{background:var(--surface);border-radius:16px;padding:26px;max-width:760px;width:100%;display:flex;flex-direction:column;gap:16px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.role-btn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:11px 12px;text-align:start;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.role-btn:hover{border-color:var(--teal)}
.role-btn b{font-size:13.5px} .role-btn small{color:var(--muted);font-size:11.5px}
.matrix td{text-align:center;font-family:var(--f-num);font-size:12px}
.matrix td:first-child{text-align:start;font-family:var(--f-body)}
.spark{display:block}
.overlay{display:none}
@media (max-width:1180px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.g-73{grid-template-columns:1fr}}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset-block:0;right:0;width:min(290px,86vw);z-index:40;transform:translateX(105%);transition:transform .2s;height:100%;padding-top:calc(18px + env(safe-area-inset-top,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
  .side.open{transform:none}
  .overlay.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:35}
  .menu-btn{display:inline-flex}
  .g2,.g3{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bar-row{grid-template-columns:90px minmax(0,1fr) 64px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- production additions ---- */
.loading{color:var(--muted);padding:40px 0;text-align:center}
.err{background:var(--bad-bg);color:var(--bad);border-radius:10px;padding:10px 14px;font-size:13px}
.login-card form{display:flex;flex-direction:column;gap:10px}
.login-card .links{display:flex;justify-content:space-between;font-size:12.5px}
.login-card .links button{background:none;border:0;color:var(--teal);cursor:pointer;padding:0}
.icon-btn{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:3px 8px;cursor:pointer;font-size:12px}
.icon-btn:hover{border-color:var(--teal);color:var(--teal)}
.roster td.s.editable{cursor:pointer}
.roster td.s.editable:hover{background:var(--surface-2)}
.perm-cell{display:flex;gap:2px;justify-content:center}
.perm-cell label{display:inline-flex;align-items:center;font-family:var(--f-num);font-size:11px;gap:1px;cursor:pointer}
.perm-cell input{width:12px;height:12px;accent-color:var(--teal)}
.scope-tag{font-size:11px;color:var(--muted)}

/* ===== v1.0.2 Live wallboard (deliberately single dark look, like a TV display) ===== */
.wb{--w-bg:#0D1830;--w-tile:#16284A;--w-tile2:#1C335E;--w-line:#294673;--w-fg:#EAF1FB;--w-mut:#93A7C6;--w-cyan:#3FC1E0;--w-mint:#02C39A;--w-orange:#F97316;--w-red:#EF4444;--w-bad:#4A1F38;
  background:var(--w-bg);color:var(--w-fg);border-radius:14px;padding:12px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;color-scheme:dark}
.wb:fullscreen{border-radius:0;overflow:auto;padding:18px;align-content:start}
.wb ::selection{background:var(--w-cyan);color:#000}
.wt{background:var(--w-tile);border-radius:10px;padding:12px 14px;position:relative;min-width:0;display:flex;flex-direction:column;gap:6px}
.wt h4{margin:0;font-size:13px;font-weight:600;color:var(--w-fg);display:flex;gap:8px;align-items:center}
.wt h4 .sub{margin-inline-start:auto}
.wt .sub{font-size:11.5px;color:var(--w-mut);font-weight:400}
.wt .big{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:clamp(26px,2.6vw,40px);font-weight:600;line-height:1.05;direction:ltr;text-align:end;unicode-bidi:isolate}
.wt .big small{font-size:.42em;color:var(--w-mut);margin-inline-start:3px;font-weight:500}
.wt .lbl{font-size:12px;color:var(--w-mut);line-height:1.3}
.wt.good{box-shadow:inset 0 0 0 2px var(--w-mint)}
.wt.warn{box-shadow:inset 0 0 0 2px var(--w-orange)}
.wt.bad{background:var(--w-bad)}
.wt .badge{position:absolute;bottom:8px;left:8px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;font-family:var(--f-num)}
.wt .badge.good{background:var(--w-mint)} .wt .badge.warn{background:var(--w-orange)} .wt .badge.bad{background:var(--w-red)}
.wb .s2{grid-column:span 2}.wb .s3{grid-column:span 3}.wb .s4{grid-column:span 4}.wb .s6{grid-column:span 6}.wb .s8{grid-column:span 8}.wb .s12{grid-column:span 12}
.wb-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:transparent;padding:4px 4px 2px}
.wb-head h2{font-size:17px;color:var(--w-fg);margin:0}
.wb-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--w-mint)}
.wb-live i{width:8px;height:8px;border-radius:50%;background:var(--w-mint);box-shadow:0 0 0 0 rgba(2,195,154,.6);animation:wbpulse 2s infinite}
@keyframes wbpulse{0%{box-shadow:0 0 0 0 rgba(2,195,154,.6)}70%{box-shadow:0 0 0 8px rgba(2,195,154,0)}100%{box-shadow:0 0 0 0 rgba(2,195,154,0)}}
.wb-head .tools{margin-inline-start:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.wb select,.wb .wbtn{background:var(--w-tile2);color:var(--w-fg);border:1px solid var(--w-line);border-radius:8px;padding:6px 10px;font-size:12.5px;cursor:pointer}
.wb .wbtn.on{background:var(--w-mint);border-color:var(--w-mint);color:#04261d;font-weight:600}
.wb .clock{font-family:var(--f-num);font-size:15px;color:var(--w-fg)}
.wb svg text{fill:var(--w-mut);font-family:var(--f-num);font-size:10px}
.wb .hb{display:grid;grid-template-columns:44px minmax(0,1fr) 34px;gap:8px;align-items:center;font-size:12.5px}
.wb .hb .tr{height:6px;background:var(--w-tile2);border-radius:3px;overflow:hidden;display:flex;justify-content:flex-start}
.wb .hb .tr i{display:block;height:100%;background:var(--w-cyan);border-radius:3px}
.wb .hb .tr i.ip{background:#7C8CF8}
.wb .hb b{font-family:var(--f-num);text-align:start;direction:ltr}
.wb .wl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;font-size:12px;padding:5px 0;border-bottom:1px solid var(--w-line)}
.wb .wl:last-child{border-bottom:0}
.wb .wl .m{color:var(--w-mut);font-size:11px}
.wb .mins{font-family:var(--f-num);font-weight:600;border-radius:6px;padding:1px 7px;align-self:center;grid-row:span 2}
.wb .mins.bad{background:var(--w-red);color:#fff}.wb .mins.warn{background:var(--w-orange);color:#1b0b00}.wb .mins.ok{background:var(--w-tile2);color:var(--w-fg)}
.wb .lb{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:12.5px;padding:4px 0}
.wb .lb .rk{width:20px;height:20px;border-radius:50%;background:var(--w-tile2);display:grid;place-items:center;font-size:11px;font-family:var(--f-num)}
.wb .lb b{font-family:var(--f-num)}
.wb .wtable{width:100%;border-collapse:collapse;font-size:12.5px}
.wb .wtable th{color:var(--w-mut);font-weight:500;background:transparent;border-bottom:1px solid var(--w-line);padding:6px 8px;text-align:start;white-space:nowrap}
.wb .wtable td{border-bottom:1px solid var(--w-line);padding:7px 8px;color:var(--w-fg)}
.wb .wtable tr.click:hover td{background:var(--w-tile2)}
.wb .wtable td.n{font-family:var(--f-num);text-align:end;direction:ltr}
.wb .dotst{display:inline-block;width:9px;height:9px;border-radius:50%}
.wb .dotst.good{background:var(--w-mint)}.wb .dotst.warn{background:var(--w-orange)}.wb .dotst.bad{background:var(--w-red)}
.wb .empty-w{color:var(--w-mut);font-size:12.5px;padding:10px 0}
.wb .scroll{overflow-x:auto}
.wb .legend-w{display:flex;gap:12px;font-size:11px;color:var(--w-mut)}
.wb .legend-w i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-inline-end:4px;vertical-align:middle}
@media (max-width:1100px){.wb{grid-template-columns:repeat(6,minmax(0,1fr))}.wb .s4,.wb .s3{grid-column:span 3}.wb .s6,.wb .s8,.wb .s12{grid-column:span 6}}
@media (max-width:640px){.wb{grid-template-columns:repeat(2,minmax(0,1fr));padding:8px;gap:8px}.wb .s3,.wb .s4,.wb .s6,.wb .s8,.wb .s12{grid-column:span 2}.wb .s2{grid-column:span 1}.wt .big{font-size:28px}}
@media (prefers-reduced-motion:reduce){.wb-live i{animation:none}}

/* ===== v1.1: notifications bell ===== */
.bell-wrap{position:relative;display:inline-flex}
.bell{position:relative}
.bell-count{position:absolute;top:-6px;left:-6px;background:var(--bad);color:#fff;border-radius:99px;font-size:10px;font-family:var(--f-num);min-width:17px;height:17px;display:grid;place-items:center;padding:0 4px}
.bell-panel{position:absolute;top:calc(100% + 8px);left:0;width:min(360px,calc(100vw - 32px));max-height:70vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:12px;z-index:50;display:flex;flex-direction:column;gap:6px}
.bell-item{display:flex;flex-direction:column;gap:2px;text-align:start;background:none;border:0;border-bottom:1px solid var(--line);padding:8px 4px;cursor:pointer;color:var(--fg)}
.bell-item.unread{background:var(--info-bg);border-radius:8px}
.bell-item span{font-size:12px;color:var(--muted)} .bell-item small{font-size:11px;color:var(--muted)}

[hidden]{display:none!important}
td.num{white-space:nowrap}