/* ============================================================
   ZEM BodyCam — DreamsERP dark theme (v0.62.0)
   Structural redesign on the DreamsERP v1.0.1 design system:
   242px sidebar w/ 56px icon rail, grouped menu, topbar with
   breadcrumb, card/table/badge/button components per template,
   Geist type, slate-dark surfaces, ZEM orange as primary.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#0B1220; --panel:#141D31; --panel-2:#1A2540; --panel-3:#20304E;
  --line:#243250; --line-soft:#1C2942;
  --fg:#E8EEF9; --muted:#8CA0BF; --dim:#5D7295;
  --brand:#F97316; --brand-soft:rgba(249,115,22,.14); --brand-line:rgba(249,115,22,.35);
  --ok:#10B981; --ok-soft:rgba(16,185,129,.14);
  --warn:#F59E0B; --warn-soft:rgba(245,158,11,.14);
  --bad:#EF4444; --bad-soft:rgba(239,68,68,.14);
  --info:#0EA5E9; --info-soft:rgba(14,165,233,.14);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  /* New design language: zero corner radius, 2px section rules, no shadows. */
  --r-sm:0px; --r-md:0px; --r-lg:0px;
  --rule:2px;
  --side-w:246px; --side-mini:56px; --top-h:66px;
  --shadow:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
::selection{background:var(--brand-soft)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--panel-3);border-radius:0;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- shell: sidebar + main ---------- */
.zem-shell{display:flex;min-height:100vh}
.zem-side{width:var(--side-w);min-width:var(--side-w);background:var(--panel);
  border-right:var(--rule) solid var(--line-soft);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow:hidden;transition:width .18s,min-width .18s;z-index:40}
body.side-mini .zem-side{width:var(--side-mini);min-width:var(--side-mini)}
.zem-brand{display:flex;align-items:center;gap:10px;padding:15px 14px;
  border-bottom:var(--rule) solid var(--line-soft);min-height:66px}
.zem-brand .dot{width:34px;height:34px;border-radius:0;background:var(--brand);
  display:grid;place-items:center;font-weight:800;font-size:16px;color:#0B1220;flex:none}
.zem-brand b{font-size:15px;letter-spacing:.2px;white-space:nowrap}
.zem-brand b span{color:var(--brand)}
.zem-brand small{display:block;color:var(--dim);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
body.side-mini .zem-brand b,body.side-mini .zem-brand small{display:none}
.zem-collapse{margin-left:auto;background:none;border:1px solid var(--line);color:var(--muted);
  width:26px;height:26px;border-radius:7px;cursor:pointer;display:grid;place-items:center;flex:none}
.zem-collapse:hover{color:var(--fg);border-color:var(--panel-3)}
body.side-mini .zem-collapse{margin:0 auto}
body.side-mini .zem-brand{justify-content:center;padding:14px 6px 12px}
body.side-mini .zem-brand .dot{display:none}

.zem-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 10px 6px}
.zem-nav .navsec{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  padding:14px 10px 6px;white-space:nowrap}
.zem-nav .navsec:first-child{padding-top:4px}
body.side-mini .zem-nav .navsec{padding:10px 0 4px;text-align:center;font-size:8px;letter-spacing:.08em}
.zem-nav a{display:flex;align-items:center;gap:11px;color:var(--muted);padding:9px 10px;margin:1px 0;
  border-radius:var(--r-md);font-size:13.5px;font-weight:500;white-space:nowrap;position:relative;
  border-left:3px solid transparent;transition:background .12s,color .12s}
.zem-nav a svg{width:18px;height:18px;flex:none;stroke-width:1.75}
.zem-nav a:hover{background:var(--panel-2);color:var(--fg)}
.zem-nav a.active{background:var(--brand-soft);color:#fff;border-left-color:var(--brand)}
.zem-nav a.active svg{color:var(--brand)}
.zem-nav a .count{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--brand);
  background:var(--brand-soft);border-radius:0;padding:1px 7px;font-style:normal}
.zem-nav a .count:empty{display:none}
body.side-mini .zem-nav a{justify-content:center;padding:10px 0;border-left-width:0;border-radius:var(--r-md)}
body.side-mini .zem-nav a span,body.side-mini .zem-nav a .count{display:none}
body.side-mini .zem-nav a.active{box-shadow:inset 0 0 0 1px var(--brand-line)}

.zem-sysbox{border-top:var(--rule) solid var(--line-soft);padding:10px 14px;font-size:11.5px}
.zem-sysbox .row{display:flex;justify-content:space-between;gap:8px;padding:3px 0;color:var(--dim)}
.zem-sysbox .row b{color:var(--muted);font-weight:600;font-family:var(--mono);font-size:11px}
body.side-mini .zem-sysbox{display:none}

.zem-main{flex:1;min-width:0;display:flex;flex-direction:column}
.zem-top{height:var(--top-h);min-height:var(--top-h);display:flex;align-items:center;gap:14px;
  padding:0 22px;background:var(--panel);border-bottom:var(--rule) solid var(--line-soft);
  position:sticky;top:0;z-index:30}
.zem-crumb{font-size:12px;color:var(--dim);white-space:nowrap}
.zem-crumb b{color:var(--muted);font-weight:600}
.zem-crumb .sep{margin:0 7px;color:var(--line)}
.zem-top .grow{flex:1}
.zem-clock{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;
  color:var(--muted);background:var(--panel-2);border:1px solid var(--line-soft);
  border-radius:0;padding:6px 13px}
.zem-clock .pulse{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}
.zem-sidebtn{display:none;background:none;border:1px solid var(--line);color:var(--muted);
  width:32px;height:32px;border-radius:8px;cursor:pointer;place-items:center}

.zem-body{padding:22px 24px 44px;max-width:1660px;width:100%}
.zem-pagehead{margin:0 0 20px;padding-bottom:16px;border-bottom:var(--rule) solid var(--line-soft)}
.zem-pagehead h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em}
.zem-pagehead .sub{color:var(--muted);font-size:12.5px;margin-top:4px;font-family:var(--mono)}

/* mobile */
@media (max-width:900px){
  .zem-side{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow)}
  body.side-open .zem-side{transform:none}
  body.side-mini .zem-side{width:var(--side-w);min-width:var(--side-w)}
  .zem-sidebtn{display:grid}
  .zem-body{padding:14px 12px 40px}
  .zem-overlaybg{position:fixed;inset:0;background:rgba(2,6,17,.6);z-index:35;display:none}
  body.side-open .zem-overlaybg{display:block}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--panel-2);color:var(--fg);
  border:1px solid var(--line);border-radius:var(--r-md);padding:8px 15px;font-size:13px;
  font-weight:600;font-family:var(--sans);cursor:pointer;transition:all .12s;white-space:nowrap}
.btn:hover{background:var(--panel-3);border-color:var(--panel-3)}
.btn.brand{background:var(--brand);border-color:var(--brand);color:#0B1220;font-weight:700}
.btn.brand:hover{background:#ea6a0a}
.btn.danger{background:var(--bad-soft);border-color:rgba(239,68,68,.4);color:#F87171}
.btn.danger:hover{background:rgba(239,68,68,.22)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--fg);background:var(--panel-2)}
.btn.sm{padding:5px 11px;font-size:12px;border-radius:var(--r-sm)}
.btn:disabled{opacity:.45;cursor:default;pointer-events:none}

/* ---------- forms ---------- */
.fld,input[type=text],input[type=date],input[type=time],input[type=number],input[type=password],select,textarea{
  background:var(--panel-2);border:1px solid var(--line);color:var(--fg);border-radius:var(--r-md);
  padding:8px 12px;font-size:13px;font-family:var(--sans);outline:none;transition:border .12s}
.fld:focus,input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
select{cursor:pointer}
label,.k{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 5px;font-weight:600}
.fsec{margin-bottom:16px}
input[type=checkbox]{accent-color:var(--brand);width:15px;height:15px}

/* ---------- cards / panels ---------- */
.panel,.card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:18px}
.stat{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:16px 18px}
.stat .n,.stat b{font-size:24px;font-weight:800;font-family:var(--mono);letter-spacing:-.02em}
.stat .s,.stat span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.tbl thead th{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  text-align:left;padding:11px 14px;background:var(--panel-2);border-bottom:var(--rule) solid var(--line);font-weight:600}
.tbl tbody td{padding:11px 14px;border-bottom:1px solid var(--line-soft);font-size:13px;vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .1s}
.tbl tbody tr:hover{background:var(--panel-2)}

/* ---------- badges / chips / pills ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-sm);padding:3px 9px;
  background:var(--panel-3);color:var(--muted);font-family:var(--mono)}
.badge.flagged{background:var(--bad-soft);color:#F87171}
.b-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:0;padding:3px 11px;
  font-size:11px;font-weight:600;background:var(--panel-3);color:var(--muted)}
.pill.ok,.chip.ok{background:var(--ok-soft);color:#34D399}
.pill.warn,.chip.warn{background:var(--warn-soft);color:#FBBF24}
.pill.bad,.chip.bad{background:var(--bad-soft);color:#F87171}
.chip{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-md);padding:6px 11px;
  font-size:12px;background:var(--panel-2);border:1px solid var(--line-soft);color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- tiles (playback / live) ---------- */
.tile{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  overflow:hidden;position:relative;transition:transform .12s,border .12s,box-shadow .12s}
.tile:hover{border-color:var(--brand-line)}
.t-top{position:absolute;top:0;left:0;right:0;padding:9px;display:flex;justify-content:space-between;z-index:2}
.t-bot{position:absolute;bottom:0;left:0;right:0;padding:11px;z-index:2;
  background:linear-gradient(transparent,rgba(4,8,18,.88))}
.t-name{font-weight:700;font-size:13px;color:#fff}
.t-guard{font-size:11px;color:rgba(255,255,255,.65);font-family:var(--mono);margin-top:2px}
.hourband{font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.1em}

/* ---------- misc shared ---------- */
.mono{font-family:var(--mono)}
.help,.hint,.mut,.muted{color:var(--muted);font-size:12.5px;line-height:1.6}
.grow{flex:1}
.empty{padding:60px 20px;text-align:center;color:var(--dim);background:var(--panel);
  border:1px dashed var(--line);border-radius:var(--r-lg)}
.empty .big{font-size:17px;font-weight:700;color:var(--muted);margin-bottom:6px}
.section-label{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin:22px 0 10px;font-weight:600}
.noprint{}
@media print{.noprint,.zem-side,.zem-top{display:none!important}.zem-body{padding:0}
  body{background:#fff;color:#000}.panel,.card,.tbl{border-color:#ddd;background:#fff}}

/* ---------- modal ---------- */
.zem-overlay{position:fixed;inset:0;background:rgba(4,8,18,.72);backdrop-filter:blur(3px);
  display:grid;place-items:center;z-index:100;padding:18px}
.zem-modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  width:min(460px,100%);box-shadow:var(--shadow);overflow:hidden}
.zem-modal h3{margin:0;padding:16px 20px;font-size:15px;border-bottom:1px solid var(--line-soft)}
.zem-modal .zm-body{padding:18px 20px;color:var(--muted);font-size:13px;line-height:1.6}
.zem-modal .zm-foot{padding:14px 20px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:flex-end;gap:10px;background:var(--panel-2)}

/* ---------- toast ---------- */
.zem-toast{position:fixed;right:18px;bottom:18px;z-index:120;background:var(--panel);
  border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r-md);
  padding:12px 18px;font-size:13px;box-shadow:var(--shadow);animation:tin .18s}
.zem-toast.ok{border-left-color:var(--ok)}
.zem-toast.err{border-left-color:var(--bad)}
@keyframes tin{from{transform:translateY(8px);opacity:0}}

/* ---------- loading bar ---------- */
.zem-loadbar{position:fixed;top:0;left:0;height:2px;background:var(--brand);z-index:200;
  transition:width .3s}

/* ---------- page-specific carried components ---------- */
.wall{display:grid;gap:14px}
.wall-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.dev{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:16px}
.row,.rowx,.rowi{display:flex;align-items:center;gap:10px}
.drop{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden}
.seg button{background:none;border:none;color:var(--muted);padding:7px 14px;font-size:12.5px;font-weight:600;cursor:pointer}
.seg button.on{background:var(--brand-soft);color:var(--brand)}
.reg-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:16px}
.reg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.reg-sub{color:var(--dim);font-size:11.5px;font-family:var(--mono)}
.reg-pill{display:inline-block;border-radius:0;padding:2px 10px;font-size:11px;background:var(--panel-3);color:var(--muted)}
.reg-kv{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0;color:var(--muted)}
.batt{font-family:var(--mono)}
.lowbatt{color:#F87171}
.tr-box{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.tr-head{padding:12px 16px;background:var(--panel-2);border-bottom:1px solid var(--line-soft);font-weight:600}
.tr-body{padding:14px 16px}
.tr-line{padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.tr-line:last-child{border-bottom:none}
.rte{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md)}
.rte-bar{display:flex;gap:4px;padding:6px;border-bottom:1px solid var(--line-soft)}
.rte-bar button{background:none;border:none;color:var(--muted);width:28px;height:26px;border-radius:5px;cursor:pointer}
.rte-bar button:hover{background:var(--panel-3);color:var(--fg)}
.rte-body{padding:12px;min-height:120px;outline:none;font-size:13.5px}
.up-bar{height:6px;background:var(--panel-3);border-radius:0;overflow:hidden}
.up-prog{height:100%;background:var(--brand);transition:width .2s}

/* ============================================================
   ZEM Operations workspace — DreamSERP-inspired redesign (0.65)
   Light, information-dense, and built for control-room scanning.
   ============================================================ */
:root{
  --bg:#F4F6FA;
  --panel:#FFFFFF;
  --panel-2:#F8FAFC;
  --panel-3:#EEF2F7;
  --line:#DDE3EC;
  --line-soft:#E8ECF2;
  --fg:#172033;
  --muted:#64748B;
  --dim:#8A98AB;
  --brand:#2563EB;
  --brand-soft:#EAF1FF;
  --brand-line:#AFC8FF;
  --ok:#0F9F6E;
  --ok-soft:#E7F8F1;
  --warn:#C77B08;
  --warn-soft:#FFF6DF;
  --bad:#D14343;
  --bad-soft:#FDECEC;
  --info:#1677C8;
  --info-soft:#E8F4FD;
  --r-sm:7px;
  --r-md:10px;
  --r-lg:14px;
  --rule:1px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05);
}
html,body{background:var(--bg);color:var(--fg)}
body.modal-open{overflow:hidden}
::-webkit-scrollbar-thumb{background:#CBD4E1;border:2px solid var(--bg);border-radius:10px}

.zem-side{
  background:#101828;
  border-right:0;
  box-shadow:4px 0 18px rgba(15,23,42,.09)
}
.zem-brand{border-bottom:1px solid rgba(255,255,255,.08);padding:15px 16px}
.zem-brand .dot{
  border-radius:9px;
  color:#fff;
  background:linear-gradient(145deg,#3B82F6,#1D4ED8);
  box-shadow:0 5px 14px rgba(37,99,235,.32)
}
.zem-brand b{color:#fff}.zem-brand b span{color:#8AB4FF}
.zem-brand small{color:#8190A9}
.zem-collapse{border-color:rgba(255,255,255,.12);color:#91A0B8;border-radius:7px}
.zem-collapse:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.zem-nav .navsec{color:#64748B;font-weight:700}
.zem-nav a{
  color:#A9B5C8;
  border-left:0;
  border-radius:8px;
  padding:9px 11px;
  margin:2px 0
}
.zem-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.zem-nav a.active{
  background:linear-gradient(90deg,rgba(37,99,235,.28),rgba(37,99,235,.12));
  color:#fff;
  box-shadow:inset 3px 0 0 #60A5FA
}
.zem-nav a.active svg{color:#8AB4FF}
.zem-nav a .count{background:rgba(96,165,250,.15);color:#A8C9FF;border-radius:12px}
.zem-sysbox{border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.08)}
.zem-sysbox .row{color:#6F7F98}.zem-sysbox .row b{color:#A9B5C8}

.zem-top{
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 3px rgba(15,23,42,.035);
  backdrop-filter:blur(12px)
}
.zem-crumb{color:var(--dim)}.zem-crumb b{color:var(--fg)}
.zem-clock{background:var(--panel-2);border-color:var(--line);color:var(--muted);border-radius:9px}
.zem-sidebtn{border-color:var(--line);color:var(--muted);background:#fff}
.zem-body{max-width:1720px;padding:24px 28px 48px}
.zem-pagehead{
  padding-bottom:0;
  border:0;
  margin-bottom:20px
}
.zem-pagehead h1{font-size:24px;letter-spacing:-.025em}
.zem-pagehead .sub{font-family:var(--sans);font-size:13px;color:var(--muted)}

.panel,.card,.stat,.dev,.reg-card,.tr-box{
  background:var(--panel);
  border-color:var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow)
}
.panel,.card{padding:20px}
.stat{padding:18px 20px}
.stat .n,.stat b{color:var(--fg)}
.stat .s,.stat span{color:var(--muted)}

.btn{
  min-height:36px;
  justify-content:center;
  background:#fff;
  color:#334155;
  border-color:#D6DEE9;
  border-radius:8px;
  box-shadow:0 1px 1px rgba(15,23,42,.03)
}
.btn:hover{background:#F8FAFC;border-color:#B9C5D5;color:#0F172A;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.brand:hover{background:#1D4ED8;border-color:#1D4ED8}
.btn.danger{background:#fff;border-color:#F0B7B7;color:var(--bad)}
.btn.danger:hover{background:var(--bad-soft);border-color:#E59494}
.btn.ghost{background:transparent;box-shadow:none;color:var(--muted)}
.btn.sm{min-height:31px;padding:5px 11px;border-radius:7px}

.fld,input[type=text],input[type=date],input[type=time],input[type=number],
input[type=password],select,textarea,.in{
  background:#fff;
  border-color:#D5DEE9;
  color:var(--fg);
  border-radius:8px;
  min-height:38px
}
.fld:focus,input:focus,select:focus,textarea:focus,.in:focus{
  border-color:#76A4FA;
  box-shadow:0 0 0 3px rgba(37,99,235,.12)
}
label,.k{color:#66768D}

.tbl,.ops-tbl{
  background:#fff;
  border-color:var(--line-soft);
  border-radius:12px
}
.tbl thead th,.ops-tbl th{
  background:#F8FAFC;
  color:#718096;
  border-color:var(--line)
}
.tbl tbody td,.ops-tbl td{border-color:var(--line-soft)}
.tbl tbody tr:hover,.ops-tbl tbody tr:hover{background:#FAFBFD}

.pill,.badge,.chip{border-radius:999px;font-weight:700}
.pill.ok,.chip.ok,.pill.active{background:var(--ok-soft);color:#087A54}
.pill.warn,.chip.warn,.pill.waiting{background:var(--warn-soft);color:#9A5D00}
.pill.bad,.chip.bad,.pill.expired{background:var(--bad-soft);color:#B63232}
.pill.live{background:var(--ok-soft);color:#087A54}
.pill.off{background:var(--panel-3);color:var(--muted)}
.seg{background:#fff;border-color:var(--line);border-radius:9px}
.seg button.on{background:var(--brand);color:#fff}
.empty{background:#fff;border-color:#CCD6E3;border-radius:14px}
.section-label{color:#718096}

/* Correct dialog lifecycle: hidden means genuinely non-interactive. */
.zem-overlay{
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background:rgba(15,23,42,.52);
  backdrop-filter:blur(5px);
  transition:opacity .16s ease,visibility .16s ease;
  padding:20px
}
.zem-overlay.show{opacity:1;visibility:visible;pointer-events:auto}
.zem-modal{
  width:min(540px,100%);
  max-height:min(760px,calc(100vh - 40px));
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid rgba(255,255,255,.7);
  border-radius:16px;
  box-shadow:0 24px 70px rgba(15,23,42,.22);
  transform:translateY(10px) scale(.985);
  transition:transform .16s ease
}
.zem-overlay.show .zem-modal{transform:none}
.zem-modal .m-head{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:20px 22px 17px;
  border-bottom:1px solid var(--line-soft)
}
.zem-modal .m-head>div{flex:1;min-width:0}
.zem-modal .m-head h3{
  margin:0;
  padding:0;
  border:0;
  color:var(--fg);
  font-size:18px;
  line-height:1.3
}
.zem-modal .m-head p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.zem-modal .m-close{
  width:32px;height:32px;min-width:32px;border:0;border-radius:8px;
  background:#F1F5F9;color:#64748B;font-size:22px;line-height:1;cursor:pointer
}
.zem-modal .m-close:hover{background:#E2E8F0;color:#0F172A}
.zem-modal .m-body{padding:20px 22px;overflow:auto}
.zem-modal .m-foot{
  padding:15px 22px;
  border-top:1px solid var(--line-soft);
  display:flex;
  justify-content:flex-end;
  gap:9px;
  background:#F8FAFC
}
.zem-toasts{position:fixed;right:20px;bottom:20px;z-index:220;display:grid;gap:8px}
.zem-toast{
  position:relative;right:auto;bottom:auto;
  color:var(--fg);background:#fff;border-color:var(--line);
  border-radius:10px;box-shadow:0 12px 35px rgba(15,23,42,.16)
}
.zem-lb{
  position:fixed;inset:0;z-index:320;display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(7,15,28,.88);backdrop-filter:blur(10px)
}
.zem-lb.show{display:flex}
.lb-inner{width:min(1240px,calc(100vw - 88px));max-height:calc(100vh - 36px);display:grid;grid-template-rows:minmax(0,1fr) auto}
.lb-stage{
  --feed-ratio:1.6;position:relative;justify-self:center;width:min(100%,calc((100vh - 150px)*var(--feed-ratio)));
  max-height:calc(100vh - 150px);aspect-ratio:var(--feed-ratio);overflow:hidden;
  background:#07111F;border-radius:14px 14px 0 0;box-shadow:0 22px 70px rgba(0,0,0,.35)
}
.lb-bar{
  width:min(100%,calc((100vh - 150px)*var(--feed-ratio)));justify-self:center;
  display:flex;align-items:center;gap:16px;padding:12px 14px;background:#fff;color:#172033;
  border-radius:0 0 14px 14px;box-shadow:0 22px 70px rgba(0,0,0,.35)
}
.lb-meta{min-width:0;flex:1}.lb-title{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-sub{font-size:11px;color:#64748B;margin-top:2px}.lb-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.lb-x,.lb-arrow{
  position:fixed;z-index:3;border:1px solid rgba(255,255,255,.24);background:rgba(15,23,42,.72);
  color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px)
}
.lb-x{top:18px;right:20px;width:40px;height:40px;border-radius:10px;font-size:27px}
.lb-arrow{top:50%;width:44px;height:60px;border-radius:12px;font-size:36px;transform:translateY(-50%)}
.lb-arrow.left{left:18px}.lb-arrow.right{right:18px}.lb-arrow:disabled{opacity:.3;cursor:default}
.lb-stamp{position:absolute;left:12px;top:12px;z-index:4;color:#fff;background:rgba(5,12,22,.65);padding:5px 8px;border-radius:7px}
.lb-mute{position:absolute;right:12px;top:12px;z-index:4}.lb-zoom{position:absolute;right:12px;bottom:12px;z-index:4;display:flex;gap:6px}
body.modal-open .zem-lb{display:none}
@media(max-width:720px){
  .zem-lb{padding:8px}.lb-inner{width:100%;max-height:calc(100vh - 16px)}
  .lb-stage{max-height:calc(100vh - 150px)}.lb-bar{align-items:stretch;flex-direction:column}
  .lb-actions .btn{flex:1}.lb-arrow{display:none}.lb-x{top:10px;right:10px}
}

#zem-loadbar{height:3px;background:linear-gradient(90deg,#2563EB,#60A5FA)}

@media(max-width:900px){
  .zem-body{padding:17px 13px 40px}
  .zem-overlaybg{background:rgba(15,23,42,.55)}
  .zem-modal{max-height:calc(100vh - 22px);border-radius:14px}
}
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ev-item{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line-soft)}
.ic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.ic-chip{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:8px;font-size:12px}

/* ============================================================
   Control Room Portal theme — supplied design, live-data edition
   Applied by zem.js to every workspace except Devices.
   ============================================================ */
body.theme-controlroom{
  --bg:#0B1220;--panel:#141D31;--panel-2:#1A2540;--panel-3:#20304E;
  --line:#243250;--line-soft:#1C2942;
  --fg:#E8EEF9;--muted:#8CA0BF;--dim:#5D7295;
  --brand:#F97316;--brand-soft:rgba(249,115,22,.14);--brand-line:rgba(249,115,22,.38);
  --ok:#10B981;--ok-soft:rgba(16,185,129,.14);
  --warn:#F59E0B;--warn-soft:rgba(245,158,11,.14);
  --bad:#EF4444;--bad-soft:rgba(239,68,68,.14);
  --info:#0EA5E9;--info-soft:rgba(14,165,233,.14);
  --r-sm:0px;--r-md:0px;--r-lg:0px;--rule:2px;--shadow:none;
  background:var(--bg);color:var(--fg)
}
body.theme-controlroom .zem-side{
  background:var(--panel);border-right:2px solid var(--line-soft);box-shadow:none
}
body.theme-controlroom .zem-brand{border-bottom:2px solid var(--line-soft);padding:15px 14px}
body.theme-controlroom .zem-brand .dot{
  border-radius:0;background:var(--brand);color:#0B1220;box-shadow:none
}
body.theme-controlroom .zem-brand b{color:var(--fg)}
body.theme-controlroom .zem-brand b span{color:var(--brand)}
body.theme-controlroom .zem-brand small{color:var(--dim)}
body.theme-controlroom .zem-collapse{
  border-color:var(--line);color:var(--muted);background:transparent;border-radius:0
}
body.theme-controlroom .zem-collapse:hover{background:var(--panel-2);color:var(--fg);border-color:var(--line)}
body.theme-controlroom .zem-nav .navsec{color:var(--dim)}
body.theme-controlroom .zem-nav a{
  color:var(--muted);border-radius:0;border-left:3px solid transparent;padding:9px 10px;margin:1px 0
}
body.theme-controlroom .zem-nav a:hover{background:var(--panel-2);color:var(--fg)}
body.theme-controlroom .zem-nav a.active{
  background:var(--brand-soft);color:#fff;border-left-color:var(--brand);box-shadow:none
}
body.theme-controlroom .zem-nav a.active svg{color:var(--brand)}
body.theme-controlroom .zem-nav a .count{background:var(--brand-soft);color:var(--brand);border-radius:0}
body.theme-controlroom .zem-sysbox{
  border-top:2px solid var(--line-soft);background:transparent
}
body.theme-controlroom .zem-sysbox .row{color:var(--dim)}
body.theme-controlroom .zem-sysbox .row b{color:var(--muted)}
body.theme-controlroom .zem-top{
  height:60px;min-height:60px;background:var(--panel);border-bottom:2px solid var(--line-soft);
  box-shadow:none;backdrop-filter:none
}
body.theme-controlroom .zem-crumb{color:var(--dim)}
body.theme-controlroom .zem-crumb b{color:var(--muted)}
body.theme-controlroom .zem-clock{
  color:var(--muted);background:var(--panel-2);border-color:var(--line-soft);border-radius:0
}
body.theme-controlroom .zem-sidebtn{background:var(--panel-2);border-color:var(--line);color:var(--fg);border-radius:0}
body.theme-controlroom .zem-body{max-width:1780px;padding:18px 22px 44px}
body.theme-controlroom .zem-pagehead{
  border-bottom:2px solid var(--line-soft);padding-bottom:12px;margin-bottom:16px
}
body.theme-controlroom .zem-pagehead h1{font-size:21px;letter-spacing:-.015em}
body.theme-controlroom .zem-pagehead .sub{font-family:var(--mono);color:var(--muted);font-size:12.5px}

body.theme-controlroom .panel,
body.theme-controlroom .card,
body.theme-controlroom .stat,
body.theme-controlroom .dev,
body.theme-controlroom .reg-card,
body.theme-controlroom .tr-box,
body.theme-controlroom .metric,
body.theme-controlroom .fleet-stat{
  background:var(--panel);border-color:var(--line-soft);border-radius:0;box-shadow:none
}
body.theme-controlroom .btn{
  min-height:34px;background:var(--panel-2);color:var(--fg);border-color:var(--line);
  border-radius:0;box-shadow:none
}
body.theme-controlroom .btn:hover{
  background:var(--panel-3);border-color:var(--panel-3);color:var(--fg);transform:none
}
body.theme-controlroom .btn.brand{background:var(--brand);border-color:var(--brand);color:#0B1220}
body.theme-controlroom .btn.brand:hover{background:#FB923C;border-color:#FB923C}
body.theme-controlroom .btn.danger{background:var(--bad-soft);border-color:rgba(239,68,68,.4);color:#F87171}
body.theme-controlroom .btn.ghost{background:transparent;color:var(--muted)}
body.theme-controlroom .fld,
body.theme-controlroom input[type=text],
body.theme-controlroom input[type=date],
body.theme-controlroom input[type=time],
body.theme-controlroom input[type=number],
body.theme-controlroom input[type=password],
body.theme-controlroom select,
body.theme-controlroom textarea,
body.theme-controlroom .in{
  background:var(--panel-2);border-color:var(--line);color:var(--fg);
  border-radius:0;min-height:36px;box-shadow:none
}
body.theme-controlroom input:focus,
body.theme-controlroom select:focus,
body.theme-controlroom textarea:focus,
body.theme-controlroom .in:focus{
  border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)
}
body.theme-controlroom label,
body.theme-controlroom .k{color:var(--dim)}
body.theme-controlroom .tbl,
body.theme-controlroom .ops-tbl{
  background:var(--panel);border-color:var(--line-soft);border-radius:0
}
body.theme-controlroom .tbl thead th,
body.theme-controlroom .ops-tbl th{
  background:var(--panel-2);color:var(--dim);border-color:var(--line)
}
body.theme-controlroom .tbl tbody td,
body.theme-controlroom .ops-tbl td{border-color:var(--line-soft)}
body.theme-controlroom .tbl tbody tr:hover,
body.theme-controlroom .ops-tbl tbody tr:hover{background:var(--panel-2)}
body.theme-controlroom .pill,
body.theme-controlroom .badge,
body.theme-controlroom .chip{border-radius:0}
body.theme-controlroom .pill.ok,
body.theme-controlroom .chip.ok,
body.theme-controlroom .pill.active,
body.theme-controlroom .pill.live{background:var(--ok-soft);color:#34D399}
body.theme-controlroom .pill.warn,
body.theme-controlroom .chip.warn,
body.theme-controlroom .pill.waiting{background:var(--warn-soft);color:#FBBF24}
body.theme-controlroom .pill.bad,
body.theme-controlroom .chip.bad,
body.theme-controlroom .pill.expired{background:var(--bad-soft);color:#F87171}
body.theme-controlroom .pill.off{background:var(--panel-3);color:var(--muted)}
body.theme-controlroom .seg{background:var(--panel-2);border-color:var(--line);border-radius:0}
body.theme-controlroom .seg button.on{background:var(--brand);color:#0B1220}
body.theme-controlroom .empty{
  background:var(--panel);border-color:var(--line);border-radius:0
}
body.theme-controlroom .tile{border-radius:0;background:var(--panel);border-color:var(--line-soft)}
body.theme-controlroom .tile:hover{border-color:var(--brand-line)}
body.theme-controlroom [style*="background:#fff"],
body.theme-controlroom [style*="background: #fff"],
body.theme-controlroom [style*="background:#FFFFFF"]{background:var(--panel)!important}

body.theme-controlroom .zem-overlay{background:rgba(4,8,18,.78);backdrop-filter:blur(3px)}
body.theme-controlroom .zem-modal{
  background:var(--panel);border:1px solid var(--line);border-radius:0;box-shadow:none
}
body.theme-controlroom .zem-modal .m-head{border-color:var(--line-soft)}
body.theme-controlroom .zem-modal .m-head h3{color:var(--fg)}
body.theme-controlroom .zem-modal .m-head p{color:var(--muted)}
body.theme-controlroom .zem-modal .m-close{
  border-radius:0;background:var(--panel-2);color:var(--muted)
}
body.theme-controlroom .zem-modal .m-close:hover{background:var(--panel-3);color:var(--fg)}
body.theme-controlroom .zem-modal .m-foot{background:var(--panel-2);border-color:var(--line-soft)}
body.theme-controlroom .zem-toast{
  background:var(--panel);color:var(--fg);border-color:var(--line);border-radius:0;box-shadow:none
}
body.theme-controlroom #zem-loadbar{background:var(--brand)}

/* Playback: supplied two-column control-room composition, backed by real R2 data. */
.pb-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
.pb-sidebar{background:var(--panel);border:1px solid var(--line-soft);position:sticky;top:78px}
.pb-sidebar-head{padding:13px 14px;border-bottom:2px solid var(--line)}
.pb-eyebrow{
  color:var(--dim);font:600 9.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase
}
.pb-side-title{font-size:14px;font-weight:700;margin-top:3px}
.pb-field{padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.pb-field select{width:100%;min-width:0}
.pb-date-status{display:flex;gap:9px;align-items:flex-start;padding:13px 14px;color:var(--muted)}
.pb-date-status b{display:block;color:var(--fg);font-size:11.5px}
.pb-date-status small{display:block;color:var(--dim);font:10px/1.5 var(--mono);margin-top:2px}
.pb-live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);margin-top:5px;flex:none;animation:pulse 2s infinite}
.pb-content{min-width:0}
.pb-toolbar{
  min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 13px;background:var(--panel);border:1px solid var(--line-soft);border-bottom:2px solid var(--line)
}
.pb-toolbar b{display:block;font-size:13px;margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.pb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:12px}

@media(max-width:1100px){
  body.theme-controlroom .zem-body{padding:16px 16px 40px}
  .pb-layout{grid-template-columns:220px minmax(0,1fr)}
  .pb-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}
@media(max-width:760px){
  body.theme-controlroom .zem-top{padding:0 12px}
  body.theme-controlroom .zem-clock{padding:5px 8px;font-size:11px}
  body.theme-controlroom .zem-body{padding:13px 10px 34px}
  body.theme-controlroom .zem-pagehead h1{font-size:19px}
  .pb-layout{grid-template-columns:1fr}
  .pb-sidebar{position:static;display:grid;grid-template-columns:1fr 1fr}
  .pb-sidebar-head,.pb-date-status{grid-column:1/-1}
  .pb-field{border-bottom:1px solid var(--line-soft)}
  .pb-toolbar{align-items:flex-start}
  .pb-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
}
@media(max-width:480px){
  .pb-sidebar{display:block}
  .pb-toolbar{display:block}
  .pb-toolbar #count{margin-top:6px}
  .pb-grid{grid-template-columns:1fr 1fr}
}

/* ============================================================
   Modern operations UI (0.69)
   A single, accessible light workspace with a dark navigation rail.
   Page-specific dark compatibility rules above remain dormant.
   ============================================================ */
/* Modernist: flat, architectural, near-mono red on a light ground, zero radius,
   strong 2px rules, everything flush left, set in Archivo. */
body.theme-modern{
  --bg:#F3F2F2;--panel:#FFFFFF;--panel-2:#EDECEC;--panel-3:#E2E0E0;
  --line:#CFCCCA;--line-soft:#E4E1DF;
  --fg:#201E1D;--muted:#605D5D;--dim:#7D7979;
  --brand:#EC3013;--brand-soft:#FFE0D9;--brand-line:#FFC4B8;
  --ok:#0E7C57;--ok-soft:#E4F3EC;
  --warn:#B45309;--warn-soft:#FBEEDD;
  --bad:#DC2626;--bad-soft:#FBE4E4;
  --info:#1D6FB8;--info-soft:#E6F1FA;
  --r-sm:0px;--r-md:0px;--r-lg:0px;
  --divider:rgba(32,30,29,.34);
  --shadow:none;
  /* Modernist token aliases, so redesigned markup can use the system names. */
  --color-bg:#F3F2F2;--color-surface:#EAE9E9;--color-text:#201E1D;
  --color-accent:#EC3013;--color-divider:rgba(32,30,29,.40);
  background:var(--bg);color:var(--fg)
}
/* Dark architectural rail (#201e1d) exactly as the mockup — light content beside it. */
body.theme-modern .zem-side{background:#201E1D;border-right:0;box-shadow:none}
body.theme-modern .zem-brand{border-color:transparent;border-bottom:2px solid rgba(243,242,242,.16)}
body.theme-modern .zem-brand .dot{border-radius:0;background:var(--brand);color:#fff;box-shadow:none}
body.theme-modern .zem-brand b{color:#F3F2F2}
body.theme-modern .zem-brand b span{color:var(--brand)}
body.theme-modern .zem-brand small{color:rgba(243,242,242,.5)}
body.theme-modern .zem-collapse{color:rgba(243,242,242,.6);border-color:rgba(243,242,242,.18);background:transparent}
body.theme-modern .zem-collapse:hover{background:rgba(243,242,242,.09);color:#fff;border-color:rgba(243,242,242,.28)}
body.theme-modern .zem-nav .navsec{color:rgba(243,242,242,.42);font-weight:800}
body.theme-modern .zem-nav a{color:rgba(243,242,242,.74);border-radius:0;border-left:3px solid transparent}
body.theme-modern .zem-nav a:hover{background:rgba(243,242,242,.08);color:#fff}
body.theme-modern .zem-nav a.active{color:#fff;background:rgba(236,48,19,.24);box-shadow:none;border-left-color:var(--brand)}
body.theme-modern .zem-nav a.active svg{color:var(--brand)}
body.theme-modern .zem-nav a .count{color:#fff;background:var(--brand);border-radius:0}
body.theme-modern .zem-sysbox{border-color:rgba(243,242,242,.16);border-top:2px solid rgba(243,242,242,.16);background:transparent}
body.theme-modern .zem-sysbox .row{color:rgba(243,242,242,.5)}
body.theme-modern .zem-sysbox .row b{color:rgba(243,242,242,.78)}
body.theme-modern .zem-top{background:#FFFFFF;border-bottom:2px solid var(--divider);box-shadow:none;backdrop-filter:none}
body.theme-modern .zem-body{max-width:1760px;padding:24px 28px 52px}
body.theme-modern .zem-pagehead{border:0;border-bottom:2px solid var(--divider);padding-bottom:14px;margin-bottom:20px}
body.theme-modern .zem-pagehead h1{font-size:25px;letter-spacing:-.02em;font-weight:800}
body.theme-modern .zem-pagehead .sub{font-family:var(--sans);font-size:13px;color:var(--muted)}
body.theme-modern .panel,
body.theme-modern .card,
body.theme-modern .stat,
body.theme-modern .dev,
body.theme-modern .reg-card,
body.theme-modern .tr-box,
body.theme-modern .metric{background:#fff;color:var(--fg);border:1px solid var(--line);border-radius:0;box-shadow:none}
body.theme-modern .btn{border-radius:0}
body.theme-modern .btn.brand{background:var(--brand);border-color:var(--brand);color:#fff}
body.theme-modern .btn.brand:hover{background:#DD2B0F;border-color:#DD2B0F}
body.theme-modern .fld,
body.theme-modern input[type=text],
body.theme-modern input[type=date],
body.theme-modern input[type=time],
body.theme-modern input[type=number],
body.theme-modern input[type=password],
body.theme-modern select,
body.theme-modern textarea,
body.theme-modern .in{background:#fff;color:var(--fg);border-color:var(--line);border-radius:0}
body.theme-modern input:focus,
body.theme-modern select:focus,
body.theme-modern textarea:focus,
body.theme-modern .in:focus{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
body.theme-modern .in,body.theme-modern input,body.theme-modern select,body.theme-modern textarea{max-width:100%;box-sizing:border-box}
/* Fields fill their container by default — the fix for inputs and textareas
   floating at the browser's tiny default width. Checkboxes, radios, ranges and
   colour swatches keep their natural size. Inline width/max-width still wins. */
body.theme-modern .in,body.theme-modern select,body.theme-modern textarea{width:100%}
body.theme-modern input[type=checkbox],body.theme-modern input[type=radio],body.theme-modern input[type=range],body.theme-modern input[type=color]{width:auto}

/* Live view: actual picture, not a cover crop. */
body.theme-modern[data-zem-page="live"] .wall-head{
  position:sticky;top:76px;z-index:8;flex-wrap:wrap;padding:10px 12px;margin:0 0 14px;
  background:#fff;border:1px solid var(--line);border-radius:0;
  box-shadow:none;backdrop-filter:none
}
body.theme-modern[data-zem-page="live"] .wall{align-items:start;gap:14px}
body.theme-modern[data-zem-page="live"] .tile{
  width:100%;aspect-ratio:16/10;min-height:220px;background:#07111F;border:1px solid var(--line);
  border-radius:0;box-shadow:none;isolation:isolate
}
body.theme-modern[data-zem-page="live"] .tile.feed-portrait{
  --feed-ratio:.5625;width:min(100%,calc((100vh - 205px)*var(--feed-ratio)));
  max-height:calc(100vh - 205px);aspect-ratio:var(--feed-ratio);justify-self:center
}
body.theme-modern[data-zem-page="live"] .tile.feed-landscape{aspect-ratio:var(--feed-ratio,1.6)}
body.theme-modern[data-zem-page="live"] .tile video,
body.theme-modern #lb-vid{
  position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#07111F
}
body.theme-modern[data-zem-page="live"] .tile.offline{min-height:220px}
body.theme-modern[data-zem-page="live"] .noimg{position:absolute;inset:0;display:grid;place-items:center;color:#91A0B8;background:#0A1626;text-transform:uppercase;letter-spacing:.12em;font:600 11px var(--mono)}
body.theme-modern[data-zem-page="live"] .t-top{background:linear-gradient(rgba(3,10,20,.68),transparent);pointer-events:none}
body.theme-modern[data-zem-page="live"] .t-bot{padding:44px 13px 12px}
body.theme-modern[data-zem-page="live"] .t-name{font-size:14px;line-height:1.3}
body.theme-modern[data-zem-page="live"] .t-guard{font-size:10.5px}
body.theme-modern[data-zem-page="live"] .t-flip,
body.theme-modern[data-zem-page="live"] .t-rot,
body.theme-modern[data-zem-page="live"] .t-zoom button{border:0;border-radius:6px;background:rgba(255,255,255,.9);color:#172033;min-width:25px;min-height:25px;cursor:pointer}

/* Dashboard owns some hard-coded white cards; declare their foreground too. */
body.theme-modern[data-zem-page="ops"] .ops-kpi,
body.theme-modern[data-zem-page="ops"] .ops-section{background:#fff;color:var(--fg);border-color:var(--line-soft)}
body.theme-modern[data-zem-page="ops"] .ops-section h3,
body.theme-modern[data-zem-page="ops"] .ops-section b{color:var(--fg)}
body.theme-modern[data-zem-page="ops"] #nowboard{width:100%;overflow:auto}
body.theme-modern[data-zem-page="ops"] .ops-hero{background:#201E1D;border-radius:0}

/* Playback: polished browser panel while retaining permanent room values. */
body.theme-modern[data-zem-page="play"] .pb-sidebar,
body.theme-modern[data-zem-page="play"] .pb-toolbar{background:#fff;border-color:var(--line);border-radius:0;box-shadow:none;overflow:hidden}
body.theme-modern[data-zem-page="play"] .pb-sidebar-head{background:var(--panel-2);border-color:var(--line)}
body.theme-modern[data-zem-page="play"] .pb-content{min-height:420px}

/* Autopilot controls need to be writing surfaces, not tiny single-line boxes. */
body.theme-modern[data-zem-page="autopilot"] .card{color:var(--fg)}
body.theme-modern[data-zem-page="autopilot"] .field textarea.in{width:100%;min-width:0}
body.theme-modern[data-zem-page="autopilot"] .sticky{background:rgba(255,255,255,.96);color:var(--fg);border-color:var(--line);backdrop-filter:blur(10px)}

@media(max-width:1000px){
  body.theme-modern .zem-body{padding:18px 16px 42px}
  body.theme-modern[data-zem-page="live"] .wall-head{top:72px}
  body.theme-modern[data-zem-page="live"] .tile{aspect-ratio:4/3}
}
@media(max-width:760px){
  body.theme-modern .zem-body{padding:14px 11px 34px}
  body.theme-modern .zem-pagehead h1{font-size:21px}
  body.theme-modern[data-zem-page="live"] .wall-head{position:static}
  body.theme-modern[data-zem-page="live"] .wall-head .grow{display:none}
  body.theme-modern[data-zem-page="live"] .wall-head .seg{max-width:100%;overflow:auto}
  body.theme-modern[data-zem-page="live"] .wall-head #screensel{flex:1;min-width:150px}
  body.theme-modern[data-zem-page="live"] .tile{aspect-ratio:3/4;min-height:360px}
}
@media(max-width:480px){
  body.theme-modern[data-zem-page="play"] .pb-grid{grid-template-columns:1fr}
}
.zem-operator{
  max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border:1px solid var(--line);background:var(--panel);color:var(--muted);
  border-radius:9px;padding:8px 11px;font:600 12px/1.1 inherit;cursor:pointer
}
.zem-operator:hover{color:var(--ink);border-color:var(--blue)}
@media(max-width:720px){.zem-operator{max-width:105px;padding:7px 9px}}

/* ============================================================
   MODERNIST COMPONENT LAYER — for redesigned screens (Devices,
   Reports, etc.). New class names; existing pages are unaffected.
   Colours resolve from the active theme-modern tokens.
   ============================================================ */
.hr{height:2px;border:0;margin:16px 0;background:var(--divider,rgba(32,30,29,.34))}
.btn-primary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-decoration:none;font-weight:800;font-size:13px;padding:8px 13px;background:var(--brand);border:1px solid var(--brand);color:#fff;border-radius:0}
.btn-primary:hover{background:#DD2B0F;border-color:#DD2B0F}
.btn-secondary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-decoration:none;font-weight:800;font-size:13px;padding:8px 13px;background:#fff;border:1px solid var(--line);color:var(--fg);border-radius:0}
.btn-secondary:hover{background:var(--panel-2)}
.btn-ghost{display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-decoration:none;font-weight:800;font-size:13px;padding:6px 8px;background:transparent;border:1px solid transparent;color:var(--brand);border-radius:0}
.btn-ghost:hover{background:var(--brand-soft)}
.btn-icon{width:34px;height:34px;padding:0;justify-content:center}
.btn-block{width:100%;justify-content:flex-start;text-align:left;margin-top:8px}
.tag{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.02em;padding:3px 10px;border-radius:0;background:var(--panel-2);color:var(--fg)}
.tag-accent{background:var(--brand-soft);color:#7C1405}
.tag-neutral{background:var(--panel-2);color:var(--muted)}
.tag-outline{border:1px solid var(--brand);color:var(--brand);background:transparent}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.bad{background:var(--bad-soft);color:var(--bad)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.field>label{display:block;font-size:12px;margin-bottom:5px;color:var(--muted)}
.input{width:100%;min-height:36px;padding:6px 10px;font:inherit;font-size:14px;color:var(--fg);background:#fff;border:1px solid var(--line);border-radius:0}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
textarea.input{min-height:104px;resize:vertical}
.card-kicker{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.card-title{font-weight:800;font-size:17px;line-height:1.2}
.card-body{margin:0;font-size:13px;color:var(--muted);flex:1}
.card-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim)}
.seg{display:inline-flex;overflow:hidden;border:1px solid var(--line);border-radius:0;flex:none}
.seg-opt{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;font-size:13px;cursor:pointer;white-space:nowrap;background:#fff;color:var(--fg)}
.seg-opt+.seg-opt{border-left:1px solid var(--line)}
.seg-opt.active{background:var(--brand);color:#fff}
.seg-opt:not(.active):hover{background:var(--panel-2)}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px;border-bottom:2px solid var(--divider,rgba(32,30,29,.34))}
.table td{padding:8px;border-bottom:1px solid var(--line)}
.table tbody tr:hover{background:var(--panel-2)}
.tablewrap{overflow-x:auto}
.dialog-backdrop{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:rgba(45,43,43,.5);z-index:60}
.dialog{width:min(560px,100%);max-height:88vh;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:18px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 32px rgba(45,43,43,.22)}
.dialog-title{font-weight:800;font-size:20px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ============================================================
   theme-modern — full component coverage (0.70)
   Brings tables, pills, chips, segmented controls, modals, empty
   states, clock and toast into the Modernist look so redesigned
   internals match the shell — not just the sidebar. Flat, zero
   radius, red accent, 2px section rules on a light ground.
   ============================================================ */
body.theme-modern .stat,
body.theme-modern .drop,
body.theme-modern .tr-box{background:#fff;border:1px solid var(--line);border-radius:0;box-shadow:none}
body.theme-modern .stat .n,body.theme-modern .stat b{color:var(--fg)}
body.theme-modern .stat .s,body.theme-modern .stat span{color:var(--muted)}

/* Buttons: flat, no lift. Brand stays solid red (declared above). */
body.theme-modern .btn{min-height:34px;background:#fff;color:var(--fg);border-color:var(--line);box-shadow:none}
body.theme-modern .btn:hover{background:var(--panel-2);border-color:var(--dim);color:var(--fg);transform:none}
body.theme-modern .btn:active{transform:none}
body.theme-modern .btn.ghost{background:transparent;border-color:transparent;color:var(--muted);box-shadow:none}
body.theme-modern .btn.ghost:hover{background:var(--panel-2);color:var(--fg)}
body.theme-modern .btn.danger{background:#fff;border-color:var(--brand-line);color:var(--bad)}
body.theme-modern .btn.danger:hover{background:var(--bad-soft);border-color:var(--bad)}

/* Tables: transparent head, 2px rule under it, hairline row dividers. */
body.theme-modern .tbl,
body.theme-modern .ops-tbl{background:#fff;border:1px solid var(--line);border-radius:0;box-shadow:none}
body.theme-modern .tbl thead th,
body.theme-modern .ops-tbl th{background:var(--panel-2);color:var(--muted);border-bottom:2px solid var(--divider)}
body.theme-modern .tbl tbody td,
body.theme-modern .ops-tbl td{border-color:var(--line-soft);color:var(--fg)}
body.theme-modern .tbl tbody tr:hover,
body.theme-modern .ops-tbl tbody tr:hover{background:var(--panel-2)}

/* Pills / badges / chips: squared, semantic colours on the light palette. */
body.theme-modern .pill,
body.theme-modern .badge,
body.theme-modern .chip{border-radius:0}
body.theme-modern .pill,
body.theme-modern .badge{background:var(--panel-2);color:var(--muted)}
body.theme-modern .chip{background:#fff;border:1px solid var(--line);color:var(--muted)}
body.theme-modern .pill.ok,body.theme-modern .chip.ok,body.theme-modern .pill.active,body.theme-modern .pill.live{background:var(--ok-soft);color:var(--ok)}
body.theme-modern .pill.warn,body.theme-modern .chip.warn,body.theme-modern .pill.waiting{background:var(--warn-soft);color:var(--warn)}
body.theme-modern .pill.bad,body.theme-modern .chip.bad,body.theme-modern .pill.expired,body.theme-modern .badge.flagged{background:var(--bad-soft);color:var(--bad)}
body.theme-modern .pill.off{background:var(--panel-2);color:var(--muted)}

/* Segmented control + empty state. */
body.theme-modern .seg{background:#fff;border:1px solid var(--line);border-radius:0}
body.theme-modern .seg button{color:var(--muted)}
body.theme-modern .seg button.on{background:var(--brand);color:#fff}
body.theme-modern .empty{background:#fff;border:1px dashed var(--line);border-radius:0;color:var(--muted)}
body.theme-modern .empty .big{color:var(--fg)}
body.theme-modern .section-label{color:var(--muted)}

/* Clock, operator chip, toast, loading bar. */
body.theme-modern .zem-clock{background:var(--panel-2);border-color:var(--line);color:var(--muted);border-radius:0}
body.theme-modern .zem-clock .pulse{background:var(--ok)}
body.theme-modern .zem-sidebtn{background:var(--panel-2);border-color:var(--line);color:var(--fg);border-radius:0}
body.theme-modern .zem-operator{background:var(--panel-2);border-color:var(--line);color:var(--muted);border-radius:0}
body.theme-modern .zem-operator:hover{color:var(--fg);border-color:var(--brand)}
body.theme-modern .zem-toast{background:#fff;color:var(--fg);border-color:var(--line);border-left-width:3px;border-radius:0;box-shadow:0 10px 30px rgba(32,30,29,.16)}
body.theme-modern #zem-loadbar,body.theme-modern .zem-loadbar{background:var(--brand)}

/* Modal: flat panel, square, single hairline border, restrained shadow. */
body.theme-modern .zem-overlay{background:rgba(32,30,29,.5);backdrop-filter:blur(3px)}
body.theme-modern .zem-modal{background:#fff;border:1px solid var(--line);border-radius:0;box-shadow:0 20px 60px rgba(32,30,29,.24)}
body.theme-modern .zem-modal .m-head{border-color:var(--line-soft)}
body.theme-modern .zem-modal .m-head h3{color:var(--fg)}
body.theme-modern .zem-modal .m-head p{color:var(--muted)}
body.theme-modern .zem-modal .m-close{border-radius:0;background:var(--panel-2);color:var(--muted)}
body.theme-modern .zem-modal .m-close:hover{background:var(--panel-3);color:var(--fg)}
body.theme-modern .zem-modal .m-foot{background:var(--panel-2);border-color:var(--line-soft)}

/* Legacy dark modal head/foot used by some pages. */
body.theme-modern .zem-modal h3{border-color:var(--line-soft);color:var(--fg)}
body.theme-modern .zem-modal .zm-body{color:var(--muted)}
body.theme-modern .zem-modal .zm-foot{background:var(--panel-2);border-color:var(--line-soft)}

/* Tiles / event & incident chips outside the live page. */
body.theme-modern .tile{background:#fff;border:1px solid var(--line);border-radius:0;box-shadow:none}
body.theme-modern .tile:hover{border-color:var(--brand-line)}
body.theme-modern .ev-item,
body.theme-modern .ic-chip{border-radius:0;border-color:var(--line)}
body.theme-modern .ic-chip{background:var(--panel-2)}

/* Playback list rows / registers pick up flat surfaces. */
body.theme-modern .reg-card{background:#fff;border:1px solid var(--line);border-radius:0}
body.theme-modern .reg-pill{background:var(--panel-2);color:var(--muted);border-radius:0}
body.theme-modern .tr-head{background:var(--panel-2);border-color:var(--line-soft);color:var(--fg)}

/* ============================================================
   theme-modern — AI Reports (.srp) convergence (0.72)
   Rounds corners, adds soft shadows, softens the 2px rules, moves
   to the AI-Supervision-Reports palette, and switches to Inter so
   the WHOLE portal matches the AI Reports design. Appended last,
   so it wins the cascade; the earlier flat rules stay dormant.
   ============================================================ */
body.theme-modern{
  --bg:#F4F5F8; --panel:#FFFFFF; --panel-2:#FAFBFC; --panel-3:#F1F3F7;
  --line:#E7E9EF; --line-soft:#EEF0F4;
  --fg:#161A20; --muted:#646C79; --dim:#98A0AD;
  --brand:#EC3013; --brand-soft:#FDEDE9; --brand-line:#F5C9BE; --brand-ink:#C42910;
  --ok:#0E9F6E; --ok-soft:#E7F7F0;
  --warn:#D9820A; --warn-soft:#FDF2E1;
  --bad:#E5484D; --bad-soft:#FCEBEC;
  --info:#2563EB; --info-soft:#EAF0FE;
  --r-sm:8px; --r-md:10px; --r-lg:14px; --rule:1px;
  --divider:var(--line);
  --shadow:0 1px 2px rgba(16,24,40,.05),0 12px 28px -10px rgba(16,24,40,.10);
  --shadow-card:0 1px 2px rgba(16,24,40,.05);
  --sans:'Inter','Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-family:var(--sans);
}
body.theme-modern .zem-body,body.theme-modern input,body.theme-modern select,
body.theme-modern textarea,body.theme-modern button{font-family:var(--sans)}

/* Dark navigation rail — rounded items + soft red active, matching the AI Reports rail */
body.theme-modern .zem-side{background:#1B1D24;border-right:0;box-shadow:2px 0 20px rgba(16,24,40,.08)}
body.theme-modern .zem-brand{border-bottom:1px solid rgba(255,255,255,.08)}
body.theme-modern .zem-brand .dot{border-radius:9px;box-shadow:0 4px 12px rgba(236,48,19,.34)}
body.theme-modern .zem-nav{padding:12px 12px 8px}
body.theme-modern .zem-nav .navsec{letter-spacing:.13em;font-weight:700;color:rgba(243,242,242,.4);padding:14px 10px 6px}
body.theme-modern .zem-nav a{border-radius:9px;border-left:0;padding:9px 11px;margin:2px 0;font-weight:500;transition:.12s}
body.theme-modern .zem-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
body.theme-modern .zem-nav a.active{background:rgba(236,48,19,.16);border-left:0;box-shadow:inset 0 0 0 1px rgba(236,48,19,.4);color:#fff}
body.theme-modern .zem-nav a.active svg{color:#FF7A5E}
body.theme-modern .zem-nav a .count{border-radius:999px;background:var(--brand);color:#fff}
body.theme-modern .zem-collapse{border-radius:8px}

/* Topbar — soft hairline + subtle blur, no hard 2px rule */
body.theme-modern .zem-top{background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);box-shadow:0 1px 2px rgba(16,24,40,.04);backdrop-filter:saturate(1.1) blur(8px)}
body.theme-modern .zem-clock,body.theme-modern .zem-sidebtn,body.theme-modern .zem-operator{border-radius:9px}
body.theme-modern .zem-pagehead{border-bottom:1px solid var(--line);padding-bottom:16px}
body.theme-modern .zem-pagehead h1{letter-spacing:-.022em;font-weight:800}

/* Surfaces — rounded + soft shadow */
body.theme-modern .panel,body.theme-modern .card,body.theme-modern .stat,
body.theme-modern .dev,body.theme-modern .reg-card,body.theme-modern .tr-box,
body.theme-modern .metric,body.theme-modern .drop,body.theme-modern .tile,
body.theme-modern .fleet-stat{border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
body.theme-modern .drop{box-shadow:var(--shadow)}
body.theme-modern .tile:hover{border-color:var(--brand-line)}
body.theme-modern .ops-hero{border-radius:var(--r-lg)}

/* Buttons — rounded with a gentle hover lift */
body.theme-modern .btn{border-radius:9px;box-shadow:0 1px 1px rgba(16,24,40,.03);transition:.13s}
body.theme-modern .btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px -2px rgba(16,24,40,.10)}
body.theme-modern .btn:active{transform:translateY(0)}
body.theme-modern .btn.sm{border-radius:8px}
body.theme-modern .btn.brand{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 2px 10px -1px rgba(236,48,19,.30)}
body.theme-modern .btn.brand:hover{background:#DD2B0F;border-color:#DD2B0F}
body.theme-modern .btn-primary,body.theme-modern .btn-secondary{border-radius:9px}
body.theme-modern .btn-ghost,body.theme-modern .btn-icon{border-radius:9px}

/* Inputs / selects — rounded, soft focus ring */
body.theme-modern .fld,body.theme-modern input[type=text],body.theme-modern input[type=date],
body.theme-modern input[type=time],body.theme-modern input[type=number],body.theme-modern input[type=password],
body.theme-modern input[type=search],body.theme-modern input[type=email],body.theme-modern select,
body.theme-modern textarea,body.theme-modern .in,body.theme-modern .input{border-radius:9px}
body.theme-modern input:focus,body.theme-modern select:focus,body.theme-modern textarea:focus,
body.theme-modern .in:focus,body.theme-modern .input:focus{border-color:#F0A08C;box-shadow:0 0 0 3px var(--brand-soft)}

/* Tables — rounded frame, hairline header rule, soft row hover */
body.theme-modern .tbl,body.theme-modern .ops-tbl{border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-card)}
body.theme-modern .tbl thead th,body.theme-modern .ops-tbl th,body.theme-modern .table th{border-bottom:1px solid var(--line)}
body.theme-modern .tbl tbody tr:hover,body.theme-modern .ops-tbl tbody tr:hover,body.theme-modern .table tbody tr:hover{background:var(--panel-2)}

/* Pills / badges / chips / tags — pill-rounded */
body.theme-modern .pill,body.theme-modern .badge,body.theme-modern .chip,
body.theme-modern .tag,body.theme-modern .reg-pill{border-radius:999px}

/* Segmented control, empty state, dividers — rounded / softened */
body.theme-modern .seg{border-radius:10px;overflow:hidden}
body.theme-modern .empty{border-radius:14px;border-style:dashed}
body.theme-modern .hr{height:1px;background:var(--line)}

/* Modals, dialogs, toasts, load bar — rounded + soft depth */
body.theme-modern .zem-modal{border-radius:16px;box-shadow:0 24px 60px -14px rgba(16,24,40,.30)}
body.theme-modern .zem-modal .m-close{border-radius:8px}
body.theme-modern .dialog{border-radius:16px;box-shadow:0 24px 60px -14px rgba(16,24,40,.30)}
body.theme-modern .zem-toast{border-radius:12px;box-shadow:0 12px 30px -8px rgba(16,24,40,.18)}

/* Modernist component classes used by already-redesigned pages (Reports/Devices) */
body.theme-modern .card-title{letter-spacing:-.01em}
body.theme-modern .seg-opt.active{background:var(--brand)}
body.theme-modern .table th{border-bottom-color:var(--line)}