/* =====================================================================
   Detection Platform — "OPS" design system (control-room console)
   Dark graphite by default, teal signal accent, IBM Plex, top navigation,
   bordered edge-to-edge panels, mono numerics. Light theme via data-theme.
   ===================================================================== */
:root{
  --bg:#0a0e13; --bg2:#0e131a; --card:#121820; --card2:#171f29; --line:#1e2833; --line2:#2b3746;
  --ink:#f3f6fa; --ink2:#dbe3ec; --muted:#a3b3c5;
  --green:#2dd4bf; --green-dark:#14b8a6; --green-light:rgba(45,212,191,.12); --green-glow:rgba(45,212,191,.3);
  --red:#f4405f; --orange:#f5a524; --blue:#38bdf8; --purple:#a78bfa;
  --radius:6px; --shadow:none;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono','JetBrains Mono',ui-monospace,Menlo,monospace;
  --onaccent:#04201c;
  font-size:14px;
}
:root[data-theme="light"]{
  --bg:#eef2f6; --bg2:#f5f7fa; --card:#ffffff; --card2:#f4f7fa; --line:#d8e0e8; --line2:#c3cdd8;
  --ink:#0b1219; --ink2:#1f2a37; --muted:#4a5b70;
  --green:#0d9488; --green-dark:#0b7c72; --green-light:rgba(13,148,136,.1); --green-glow:rgba(13,148,136,.25);
  --red:#dc2646; --orange:#d97706; --blue:#0284c7;
  --onaccent:#ffffff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg)}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;position:relative}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px}
#app{position:relative;z-index:1}
button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:inherit;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:var(--ink)}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.01em}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:0}
::selection{background:var(--green-light)}

/* ---------- auth (split screen) ---------- */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.15fr 1fr;background:var(--bg)}
.login-wrap::before{content:'COGNIVUE  ·  AI VIDEO OPERATIONS';display:flex;align-items:flex-end;padding:36px 40px;
  font-family:var(--mono);font-size:12px;letter-spacing:.32em;color:var(--green);border-right:1px solid var(--line);
  background:radial-gradient(ellipse at 28% 32%,var(--green-glow),transparent 46%),
    linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:auto,44px 44px,44px 44px;background-color:var(--bg2)}
.login-card{align-self:center;justify-self:center;width:420px;max-width:92%;background:var(--card);border:1px solid var(--line2);border-radius:var(--radius);padding:36px 36px 30px}
.login-card .logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;margin-bottom:6px;letter-spacing:-.01em}
.login-card .logo svg{width:30px;height:30px}
.login-card p.sub{color:var(--muted);margin-bottom:22px;font-size:13px;line-height:1.5}
.login-card label{display:block;font-size:11px;font-weight:600;margin:14px 0 6px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-family:var(--mono)}
.login-card input{width:100%;padding:11px 12px;border:1px solid var(--line2);border-radius:4px;outline:none;background:var(--bg2);transition:.15s}
.login-card input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-light)}
.login-card .btn-primary{width:100%;margin-top:22px;justify-content:center}
.login-err{color:var(--red);font-size:12.5px;margin-top:12px;min-height:18px}
.login-hint{margin-top:16px;font-size:12px;color:var(--muted);text-align:center}
@media(max-width:900px){.login-wrap{grid-template-columns:minmax(0,1fr)}.login-wrap::before{display:none}.login-card{width:min(420px,calc(100vw - 28px));max-width:none;padding:28px 22px 24px}}

/* ---------- shell: top nav + status strip ---------- */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.shell.rail{grid-template-columns:60px 1fr}
/* ---- left sidebar ---- */
.sidebar{display:flex;flex-direction:column;background:var(--card);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;z-index:30;overflow:hidden}
.sb-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;padding:0 16px;height:54px;flex-shrink:0;cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--line)}
.sb-brand svg{width:24px;height:24px;flex-shrink:0}
.sb-brand span b{color:var(--green);font-weight:700}
.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 8px;display:flex;flex-direction:column;gap:1px;scrollbar-width:thin}
.sb-nav::-webkit-scrollbar{width:6px}.sb-nav::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.sb-sec{padding:14px 8px 6px}
.sb-sec span{font-size:9.5px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:5px;color:var(--ink2);font-size:13px;font-weight:500;position:relative;white-space:nowrap;transition:background .12s,color .12s;text-align:left}
.nav-item svg{width:17px;height:17px;stroke:currentColor;flex-shrink:0}
.nav-item:hover{color:var(--ink);background:var(--card2)}
.nav-item.active{color:var(--green);background:var(--green-light)}
.nav-item.active::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:2.5px;border-radius:0 2px 2px 0;background:var(--green)}
.nav-item .nav-label{flex:1;overflow:hidden;text-overflow:ellipsis}
.nav-item .nbadge{background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:3px;padding:1px 5px;font-family:var(--mono);line-height:1.4}
.sb-foot{flex-shrink:0;border-top:1px solid var(--line);padding:8px}
.sb-user{display:flex;align-items:center;gap:9px;padding:8px 6px 4px;min-width:0}
.sb-user-txt{flex:1;min-width:0;line-height:1.3}
.sb-user-txt b{display:block;font-size:12.5px;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-user-txt span{display:block;font-size:10.5px;color:var(--muted);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-collapse{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:5px;color:var(--muted);font-size:12px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.sb-collapse:hover{background:var(--card2);color:var(--ink2)}
.sb-collapse svg{width:15px;height:15px;stroke:currentColor;transition:transform .18s}
/* collapsed rail: icons only */
.shell.rail .nav-label,.shell.rail .sb-brand span,.shell.rail .sb-user-txt,.shell.rail .nbadge,.shell.rail .sb-sec span{display:none}
.shell.rail .sb-brand{justify-content:center;padding:0}
.shell.rail .nav-item{justify-content:center;padding:10px 0}
.shell.rail .sb-sec{padding:8px 10px 6px}
.shell.rail .sb-sec::after{content:'';display:block;height:1px;background:var(--line)}
.shell.rail .sb-user{justify-content:center;flex-wrap:wrap;gap:6px}
.shell.rail .sb-collapse{justify-content:center;padding:8px 0}
.shell.rail .sb-collapse svg{transform:rotate(180deg)}
.main{display:flex;flex-direction:column;min-width:0;min-height:100vh}
/* ---- top bar of the main column ---- */
.topbar{height:54px;display:flex;align-items:center;gap:12px;padding:0 20px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar h1{font-size:16px;font-weight:600;display:flex;align-items:center;gap:9px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar h1 svg{width:18px;height:18px;stroke:var(--green);flex-shrink:0}
.topbar .tools{display:flex;align-items:center;gap:3px;margin-left:auto}
.rail-btn{display:none;align-items:center;color:var(--ink2);padding:6px;border-radius:4px}
.rail-btn svg{width:18px;height:18px;stroke:currentColor}
.tlink{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:4px;color:var(--ink2);font-size:12.5px;font-weight:500;border:1px solid transparent;position:relative;white-space:nowrap}
.tlink:hover{color:var(--ink);background:var(--card2);border-color:var(--line)}
.tlink.active{color:var(--green);border-color:var(--line2);background:var(--card2)}
.tlink svg{width:16px;height:16px;stroke:currentColor}
.avatar{width:30px;height:30px;border-radius:4px;background:var(--green);color:var(--onaccent);font-weight:700;font-size:11.5px;display:grid;place-items:center;font-family:var(--mono);flex-shrink:0;margin-left:6px}
@media (max-width:860px){
  /* the sidebar becomes an overlay drawer: being position:fixed it stops being a grid item,
     so the shell must drop to ONE column or .main would land in the empty first track */
  .shell,.shell.rail{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;width:236px;z-index:50;transform:translateX(-100%);transition:transform .2s}
  .shell.rail .sidebar{transform:none;box-shadow:0 0 40px rgba(0,0,0,.5)}
  .shell.rail .nav-label,.shell.rail .sb-brand span,.shell.rail .sb-user-txt,.shell.rail .nbadge,.shell.rail .sb-sec span{display:revert}
  .shell.rail .nav-item{justify-content:flex-start;padding:9px 10px}
  .rail-btn{display:flex}
  .tlink .tl-txt{display:none}
  .shell.rail::before{content:'';position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40}
  .kpis{grid-template-columns:1fr}
  .kpis .dw{grid-column:1/-1!important}
  .content{padding:12px 14px 22px}
  .topbar{padding:0 12px;gap:8px}
  .topbar h1{font-size:15px}
}
.status-strip{display:flex;align-items:center;gap:26px;padding:0 20px;height:30px;background:var(--bg2);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.status-strip b{color:var(--ink);font-weight:600}
.status-strip .led{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);display:inline-block;margin-right:7px;animation:pulse 2s infinite;vertical-align:middle}
.status-strip .clock{margin-left:auto;color:var(--ink2)}
@media (max-width:1100px){.status-strip span:nth-child(4),.status-strip span:nth-child(5){display:none}}
@media (max-width:720px){.status-strip .clock{display:none}}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px 0}
.page-head h1{font-size:19px;font-weight:600;display:flex;align-items:center;gap:10px;color:var(--ink)}
.page-head h1 svg{width:18px;height:18px;stroke:var(--green)}
.content{flex:1;padding:14px 20px 28px;min-width:0}
.footer{padding:9px 20px;border-top:1px solid var(--line);color:var(--muted);font-size:10.5px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;text-align:center;background:var(--bg2)}
/* legacy no-ops from the old shells (the live classes are .sidebar/.topbar above) */
.side-sec,.side-spacer,.tspacer,.topnav{display:none}

/* ---------- shared ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.card > h3{font-size:14px;font-weight:600}
.grid{display:grid;gap:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line2)}
.kpi.red::before{background:var(--red)} .kpi.orange::before{background:var(--orange)} .kpi.green::before{background:var(--green)}
.kpi .klabel{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-bottom:8px;display:flex;justify-content:space-between;font-family:var(--mono)}
.kpi .klabel svg{stroke:var(--muted)}
.kpi .kvalue{font-size:28px;font-weight:600;font-family:var(--mono);letter-spacing:-.02em;line-height:1.1}
.kpi .kvalue small{font-size:14px;color:var(--muted);font-weight:500}
.kpi .ksub{font-size:12px;margin-top:6px;color:var(--muted)}
.kpi .kbar{height:5px;border-radius:2px;background:var(--line);margin-top:10px;overflow:hidden;display:flex}
.kpi .kbar i{height:100%}
.kpi .kbar i[style*="c9d1da"]{background:var(--line2)!important}
.kpi.red .kvalue{color:var(--red)} .kpi.orange .kvalue{color:var(--orange)} .kpi.green .kvalue{color:var(--green)}
.kpi.selectable{cursor:pointer}
.kpi.selectable:hover{border-color:var(--line2)}
.kpi.selectable.sel{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.btn-primary{background:var(--green);color:var(--onaccent);font-weight:600;padding:9px 14px;border-radius:4px;display:inline-flex;align-items:center;gap:7px;transition:.15s;font-size:13px;letter-spacing:.01em}
.btn-primary:hover{background:var(--green-dark)}
.btn-primary svg{stroke:var(--onaccent)}
.btn-ghost{border:1px solid var(--line2);padding:8px 12px;border-radius:4px;font-weight:600;display:inline-flex;align-items:center;gap:7px;background:var(--card2);color:var(--ink);font-size:13px;transition:.12s}
.btn-ghost svg{stroke:currentColor}
.btn-ghost:hover{border-color:var(--green);color:var(--green);background:var(--green-light)}
.pill{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:3px;font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase;border:1px solid transparent}
.pill.online{background:var(--green-light);color:var(--green);border-color:rgba(45,212,191,.25)}
.pill.offline{background:rgba(244,64,95,.12);color:var(--red)}
.pill.inactive{background:var(--card2);color:var(--muted);border-color:var(--line)}
.pill.critical{background:rgba(244,64,95,.14);color:var(--red);border-color:rgba(244,64,95,.35)}
.pill.high{background:rgba(245,165,36,.14);color:var(--orange);border-color:rgba(245,165,36,.35)}
.pill.warning{background:rgba(245,165,36,.1);color:var(--orange);border-color:rgba(245,165,36,.3)}
.pill.info{background:rgba(56,189,248,.12);color:var(--blue)}
.sevbar{width:3px;border-radius:1px;align-self:stretch;flex-shrink:0}
.sev-critical{background:var(--red)} .sev-high{background:var(--orange)} .sev-warning{background:var(--orange)} .sev-info{background:var(--blue)}
.tabs{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:4px;padding:2px;gap:1px}
.tabs button{padding:6px 12px;border-radius:3px;font-weight:500;color:var(--ink2);font-size:12.5px;transition:.12s}
.tabs button:hover{color:var(--ink)}
.tabs button.active{background:var(--card2);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--line2)}
.tabs.solid button.active{background:var(--green);color:var(--onaccent);box-shadow:none}
select.inp,input.inp{padding:9px 12px;border:1px solid var(--line2);border-radius:4px;background:var(--bg2);outline:none;color:var(--ink);font-size:13px}
select.inp:focus,input.inp:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-light)}
select.inp option{background:var(--card);color:var(--ink)}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
table.tbl{width:100%;border-collapse:collapse}
table.tbl th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);padding:10px 12px;border-bottom:1px solid var(--line2);font-family:var(--mono);font-weight:600}
table.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
table.tbl tr:hover td{background:var(--card2)}
.thumb{width:74px;height:44px;object-fit:cover;border-radius:3px;background:var(--bg2);border:1px solid var(--line)}
.empty{padding:44px;text-align:center;color:var(--muted);font-size:13px}
.spin{width:24px;height:24px;border:2px solid var(--line2);border-top-color:var(--green);border-radius:50%;animation:sp .9s linear infinite;margin:40px auto}
@keyframes sp{to{transform:rotate(360deg)}}
.dbar{background:var(--line)!important}
.dbar i{background:var(--green)!important}

/* toggle switch */
.switch{width:38px;height:20px;border-radius:99px;background:var(--line2);position:relative;transition:.15s;flex-shrink:0}
.switch::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.15s}
.switch.on{background:var(--green)}
.switch.on::after{left:21px;background:var(--onaccent)}
:root[data-theme="light"] .switch.on::after{background:#fff}

/* ---------- dashboard ---------- */
.dash-lower{display:grid;grid-template-columns:1fr 400px;gap:12px;margin-top:12px;align-items:start}
.attn-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:4px;transition:.12s;border-bottom:1px solid var(--line)}
.attn-row:last-child{border-bottom:none}
.attn-row:hover{background:var(--card2)}
.attn-row .thumb{cursor:pointer}
.attn-row .atitle{font-weight:600;font-size:13.5px}
.attn-row .acam{font-size:12px;color:var(--muted)}
.attn-row .aage{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap;font-family:var(--mono)}
.xbadge{background:var(--card2);color:var(--muted);font-size:10.5px;font-weight:700;border-radius:3px;padding:1px 6px;font-family:var(--mono);border:1px solid var(--line)}
.live-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.live-tile{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:16/9;background:#05080c;cursor:pointer;border:1px solid var(--line)}
.live-tile canvas,.live-tile img{width:100%;height:100%;object-fit:cover;display:block}
.live-tile .lt-name{position:absolute;left:8px;bottom:6px;color:#fff;font-size:11px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.9);font-family:var(--mono)}
.live-tile .lt-live{position:absolute;right:8px;bottom:6px;color:var(--green);font-size:10px;font-weight:700;display:flex;align-items:center;gap:4px;font-family:var(--mono);letter-spacing:.08em}
.live-tile .lt-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.barchart{display:flex;align-items:flex-end;gap:4px;height:140px;padding-top:10px}
.barchart .bwrap{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative}
.barchart .b{background:var(--green);opacity:.75;border-radius:2px 2px 0 0;min-height:2px;transition:.3s}
.barchart .bwrap:hover .b{opacity:1}
.barchart .bmed{position:absolute;width:100%;border-top:1px dashed var(--line2)}
.noisy-row{display:flex;justify-content:space-between;padding:8px 2px;border-bottom:1px solid var(--line);font-size:13px}
.noisy-row:last-child{border-bottom:none}
.noisy-row b{font-family:var(--mono);color:var(--green)}

/* ---------- alerts ---------- */
.alerts-layout{display:grid;grid-template-columns:minmax(420px,1fr) minmax(420px,1fr);gap:12px;align-items:start}
.alert-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:4px;cursor:pointer;border:1px solid transparent;border-bottom-color:var(--line);transition:.1s}
.alert-row:hover{background:var(--card2)}
.alert-row.sel{border-color:var(--green);background:var(--green-light)}
.alert-row .dotunread{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}
.alert-row input[type=checkbox]{width:15px;height:15px;accent-color:var(--green)}
.alert-detail img{width:100%;border-radius:4px;background:var(--bg2);border:1px solid var(--line)}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0}

/* ---------- live cameras ---------- */
.cams-grid{display:grid;gap:8px}
/* the chosen layout always fits the viewport — no scrolling to reach a camera */
.cams-grid.fit{min-height:0;justify-content:center;align-content:center}
.cams-grid.fit .cam-tile{aspect-ratio:auto;min-height:0;min-width:0}
.live-bar{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.live-bar svg{stroke:currentColor;vertical-align:-2px}
.cam-tile[draggable=true]{cursor:grab}
.cam-tile.dragging{opacity:.45;cursor:grabbing}
.cam-tile.drop-target{outline:2px dashed var(--green);outline-offset:-3px}
.fs-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.fs-inner img,.fs-inner canvas,.fs-inner iframe{width:100%;height:100%;object-fit:contain}
.fs-name{position:absolute;left:0;right:0;bottom:0;padding:14px 20px;display:flex;align-items:center;gap:14px;
  color:#fff;font-family:var(--mono);font-size:13px;background:linear-gradient(transparent,rgba(3,6,10,.9))}
.cams-grid.g1{grid-template-columns:1fr}
.cams-grid.g4{grid-template-columns:1fr 1fr}
.cams-grid.g9{grid-template-columns:1fr 1fr 1fr}
.cams-grid.g16{grid-template-columns:repeat(4,1fr)}
.cam-tile{position:relative;border-radius:4px;overflow:hidden;background:#05080c;aspect-ratio:16/9;border:1px solid var(--line2)}
.cam-tile canvas,.cam-tile img{width:100%;height:100%;object-fit:contain;display:block}
.cam-tile .ct-footer{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;background:linear-gradient(transparent,rgba(3,6,10,.9));display:flex;align-items:flex-end;justify-content:space-between}
.cam-tile .ct-name{color:#fff;font-weight:600;font-size:12.5px;font-family:var(--mono)}
.cam-tile .ct-meta{color:#9fb0c2;font-size:10.5px;margin-top:2px;font-family:var(--mono);letter-spacing:.04em}
.cam-tile .ct-live{color:var(--green);font-size:10.5px;font-weight:700;display:flex;align-items:center;gap:5px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
.cam-tile .ct-live::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}
.cam-tile .ct-actions{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:.15s}
.cam-tile:hover .ct-actions{opacity:1}
.cam-tile .ct-actions button{width:30px;height:30px;border-radius:3px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;background:rgba(10,14,19,.85);border:1px solid var(--line2)}
.cam-tile .ct-actions .rec{color:var(--red)} .cam-tile .ct-actions .snap,.cam-tile .ct-actions .fs{color:var(--green)}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;font-family:var(--mono);font-size:12px}
.pager button{width:32px;height:32px;border-radius:4px;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;background:var(--card);color:var(--ink)}
.pager button:disabled{opacity:.3;cursor:default}
.layout-btns{display:flex;gap:4px}
.layout-btns button{height:32px;min-width:38px;padding:0 8px;border-radius:4px;border:1px solid var(--line2);display:grid;place-items:center;background:var(--card2);color:var(--ink);font-family:var(--mono);font-size:11.5px}
.layout-btns button.active{background:var(--green);border-color:var(--green);color:var(--onaccent)}

/* ---------- sensors ---------- */
.sensor-head h2{font-size:22px;font-weight:600;display:inline-flex;align-items:center;gap:12px}
.sensor-sub{color:var(--muted);margin-top:4px;font-size:12.5px;font-family:var(--mono)}
.linechart{width:100%;height:240px}
.det-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:12px}
.det-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.det-card .dlabel{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:inline-block;font-family:var(--mono)}
.det-card .dval{font-size:24px;font-weight:600;margin:10px 0 8px;font-family:var(--mono)}
.det-card .dval small{font-size:13px;font-weight:500}
.det-card .dbar{height:5px;border-radius:2px;background:var(--line);overflow:hidden}
.det-card .dbar i{display:block;height:100%;background:var(--green);border-radius:2px}
.det-card .dpct{font-size:11.5px;color:var(--muted);margin-top:6px;font-family:var(--mono)}

/* ---------- LPR ---------- */
.plate{font-family:var(--mono);font-weight:600;border:1px solid var(--line2);border-radius:3px;padding:3px 9px;display:inline-block;letter-spacing:.08em;background:var(--bg2)}
.plate.wl{border-color:var(--red);color:var(--red);background:rgba(244,64,95,.1)}
.confbar{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono)}
.confbar .cb{width:80px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.confbar .cb i{display:block;height:100%}
.colordot{width:11px;height:11px;border-radius:50%;display:inline-block;vertical-align:-1px;margin-right:6px;border:1px solid rgba(255,255,255,.25)}

/* ---------- AI search ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px}
.chip-det{flex-shrink:0;width:108px;border-radius:4px;overflow:hidden;position:relative;cursor:pointer;border:2px solid var(--line);background:#05080c}
.chip-det:hover{border-color:var(--line2)}
.chip-det.sel{border-color:var(--green)}
.chip-det img{width:100%;height:68px;object-fit:cover;display:block}
.chip-det span{position:absolute;left:0;right:0;bottom:0;background:rgba(3,6,10,.75);color:#fff;font-size:10.5px;font-weight:600;padding:2px 7px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em}
.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:14px}
.result-card{background:var(--card);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.result-card:hover{border-color:var(--line2)}
.result-card img{width:100%;height:140px;object-fit:cover;display:block;background:var(--bg2)}
.result-card .rc-body{padding:9px 12px}
.result-card .rc-title{font-weight:600;text-transform:capitalize;font-size:13px}
.result-card .rc-sub{font-size:11.5px;color:var(--muted);font-family:var(--mono)}

/* ---------- counting ---------- */
.count-layout{display:grid;grid-template-columns:1fr 360px;gap:12px;align-items:start}
.line-row{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border-radius:4px;cursor:pointer;border:1px solid transparent;border-bottom-color:var(--line)}
.line-row:hover{background:var(--card2)}
.line-row.sel{background:var(--green-light);border-color:var(--green)}
.line-row .ln{font-weight:600;font-size:13px}
.line-row .lc{font-size:11.5px;color:var(--muted)}
.line-row .lnum{white-space:nowrap;font-family:var(--mono);font-weight:600;color:var(--green);text-align:right}
.line-row .lnum small{display:block;font-family:var(--sans);font-weight:400;color:var(--muted);font-size:10.5px}

/* ---------- heatmap ---------- */
.hm-grid{display:grid;grid-template-columns:auto repeat(24,1fr);gap:2px;font-size:10.5px;font-family:var(--mono)}
.hm-cell{aspect-ratio:1;border-radius:2px;background:var(--card2)}
.hm-lab{display:flex;align-items:center;color:var(--muted);padding-right:6px}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(3,6,10,.7);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal{background:var(--card);border:1px solid var(--line2);border-radius:var(--radius);max-width:1100px;width:100%;max-height:92vh;overflow-y:auto;padding:26px 28px}
.modal h2{color:var(--ink);font-size:18px;display:flex;align-items:center;gap:10px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.modal h2 svg{stroke:var(--green)}
.modal .cfg-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--bg2)}
.fieldset legend,.fieldset .fslabel{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-family:var(--mono)}
.frow{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:10px;margin-bottom:10px}
.frow label{font-weight:500;font-size:13px;color:var(--ink2)}
.frow input,.frow select{width:100%;padding:9px 12px;border:1px solid var(--line2);border-radius:4px;outline:none;background:var(--card);color:var(--ink);font-size:13px}
.frow input:focus,.frow select:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-light)}
.frow-sw{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:13px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.fullscreen-cam{position:fixed;inset:0;background:#000;z-index:60;display:flex;align-items:center;justify-content:center}
.fullscreen-cam canvas,.fullscreen-cam img{max-width:100%;max-height:100%}
.fullscreen-cam .fsx{position:absolute;top:16px;right:16px;color:#fff;font-size:22px;z-index:61;width:38px;height:38px;border:1px solid var(--line2);border-radius:4px;background:rgba(10,14,19,.8)}

/* ---------- onboarding wizard ---------- */
.ob-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:
  radial-gradient(ellipse at 20% 20%,var(--green-glow),transparent 40%),
  linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:auto,44px 44px,44px 44px;background-color:var(--bg)}
.ob-card{background:var(--card);border:1px solid var(--line2);border-radius:var(--radius);padding:36px 40px;width:760px;max-width:96vw;max-height:94vh;overflow-y:auto}
.ob-logo svg{width:32px;height:32px;display:block}
.ob-steps{display:flex;gap:6px;margin:16px 0 26px}
.ob-step{height:4px;flex:1;border-radius:2px;background:var(--line);transition:.3s}
.ob-step.done{background:var(--green);box-shadow:0 0 8px var(--green-glow)}
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ind-card{border:1px solid var(--line2);border-radius:var(--radius);padding:14px;cursor:pointer;transition:.12s;background:var(--bg2)}
.ind-card:hover{border-color:var(--green)}
.ind-card.sel{border-color:var(--green);background:var(--green-light);box-shadow:inset 0 0 0 1px var(--green)}
.ind-card .ic{font-size:26px;margin-bottom:8px}
.ind-card b{display:block;font-size:13.5px;margin-bottom:3px}
.mod-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line)}
.mod-row:last-child{border-bottom:none}
.mod-row b{font-size:13.5px}
@media (max-width:700px){.ind-grid{grid-template-columns:1fr 1fr}}

/* ---------- detection bounding boxes ---------- */
.boxwrap{position:relative;display:block;border-radius:4px;overflow:hidden;background:var(--bg2);border:1px solid var(--line)}
.boxwrap img{width:100%;height:auto;display:block;border-radius:0;border:none}
/* corner brackets only — the subject stays visible inside the marks */
.bbox{position:absolute;--bc:#ff4d43;--bt:2px;--bl:26%;pointer-events:none}
.bbox .c{position:absolute;width:min(15px,var(--bl));height:min(15px,var(--bl));border:0 solid var(--bc);filter:drop-shadow(0 0 1.5px rgba(0,0,0,.75))}
.bbox .c.tl{top:0;left:0;border-top-width:var(--bt);border-left-width:var(--bt)}
.bbox .c.tr{top:0;right:0;border-top-width:var(--bt);border-right-width:var(--bt)}
.bbox .c.bl{bottom:0;left:0;border-bottom-width:var(--bt);border-left-width:var(--bt)}
.bbox .c.br{bottom:0;right:0;border-bottom-width:var(--bt);border-right-width:var(--bt)}
.bbox span{position:absolute;top:-16px;left:-1px;background:color-mix(in srgb,var(--bc) 82%,transparent);color:#fff;font-size:9.5px;font-weight:600;
  padding:1px 5px;border-radius:2px;white-space:nowrap;font-family:var(--mono);letter-spacing:.03em}
.bbox.low{--bc:#f5a524} .bbox.low span{color:#1a1200}
/* zoomed crop of a region of a frame */
.crop{background-repeat:no-repeat;border:1px solid var(--line2);border-radius:4px;background-color:#05080c;width:100%}
.empty-crop{display:grid;place-items:center;color:var(--muted);font-size:11px;font-family:var(--mono)}
/* one plate reading: framed vehicle + plate zoom + the characters read */
.plate-shot{display:grid;grid-template-columns:1fr 190px;gap:12px;align-items:start}
.plate-shot.compact{grid-template-columns:1fr 150px;gap:9px}
.ps-frame{border-radius:6px;overflow:hidden;border:1px solid var(--line2);background:#05080c}
.ps-frame .boxwrap{display:block}
.ps-label{font-size:9.5px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.ps-read{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.ps-conf{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
@media (max-width:700px){.plate-shot{grid-template-columns:1fr}}

/* toast */
#toasts{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--card);color:var(--ink);border:1px solid var(--line2);border-left:3px solid var(--green);border-radius:4px;padding:11px 14px;font-size:13px;box-shadow:0 12px 32px rgba(0,0,0,.45);display:flex;gap:10px;align-items:center;animation:tin .2s}
.toast.critical{border-left-color:var(--red)}
@keyframes tin{from{transform:translateY(10px);opacity:0}}

@media (max-width:1100px){
  .dash-lower,.alerts-layout,.count-layout{grid-template-columns:1fr}
  .modal .cfg-cols{grid-template-columns:1fr}
  .who .greet{display:none}
}

/* ---- login extras ---- */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding:11px 42px 11px 12px;border:1px solid var(--line2);border-radius:4px;outline:none;background:var(--bg2);transition:.15s;font:inherit;color:var(--ink)}
.pw-wrap input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-light)}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border-radius:4px;color:var(--muted)}
.pw-eye:hover{color:var(--ink2);background:var(--card2)}
.pw-eye.on{color:var(--green)}
.pw-eye svg{width:17px;height:17px;stroke:currentColor;fill:none}
.linkbtn{display:block;width:100%;margin-top:12px;padding:6px;font-size:12.5px;color:var(--muted);text-align:center}
.linkbtn:hover{color:var(--green);text-decoration:underline}
.ok-note{display:flex;gap:12px;align-items:flex-start;margin:18px 0 4px;padding:14px;border:1px solid var(--line2);border-radius:6px;background:var(--bg2)}
.ok-note svg{stroke:var(--green);flex-shrink:0;margin-top:2px}
.ok-note b{font-size:14px}

/* LPR table: crop + scene columns keep their own width */
.lpr-tbl td .crop,.lpr-tbl td .boxwrap{border-radius:4px}
.lpr-tbl td:first-child,.lpr-tbl td:nth-child(2){width:1%;white-space:nowrap}
.lpr-tbl .boxwrap img{height:74px;object-fit:cover}

/* ---- customisable dashboard ---- */
.dash-tools{display:flex;justify-content:flex-end;margin-bottom:10px}
/* the kpi row is its own grid; the lower zones are columns */
.dash-lower > .dash-zone{display:flex;flex-direction:column;gap:14px;min-width:0}
.kpis .dw{display:block;min-width:0}
.kpis .dw > .kpi{height:100%}
.dw{position:relative}
.dw[draggable=true]{cursor:grab}
.dw.dragging{opacity:.45}
.dw.drop-target{outline:2px dashed var(--green);outline-offset:4px;border-radius:8px}
.ds-group{margin-bottom:14px}
.ds-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:5px;cursor:pointer;font-size:14px}
.ds-row:hover{background:var(--card2)}
.ds-row input{accent-color:var(--green);width:17px;height:17px}
.ds-row span{flex:1}
.ds-row b{font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-weight:500}
/* horizontal bars for "what the AI saw" */
.tbar{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:10px;padding:6px 0;font-size:13px}
.tbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2)}
.tbar i{height:8px;border-radius:2px;background:var(--green);display:block;min-width:4px}
.tbar b{font-family:var(--mono);font-size:12px;color:var(--ink)}

/* ---- plate detail modal ---- */
.plate-modal{max-width:1000px;position:relative}
.modal-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:6px;display:grid;place-items:center;
  color:var(--muted);font-size:17px;border:1px solid transparent}
.modal-x:hover{background:var(--card2);color:var(--ink);border-color:var(--line)}
.pm-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-right:44px}
.pm-head .pm-actions{margin-left:auto}
.pm-country{font-size:15px}
.plate.big{font-size:26px;padding:10px 16px;letter-spacing:.14em}
.pm-stats{display:flex;gap:22px;margin-top:16px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:13px;color:var(--muted)}
.pm-stats b{color:var(--ink);font-family:var(--mono);font-size:15px;margin-right:4px}
.pm-list{display:flex;flex-direction:column;gap:14px;max-height:56vh;overflow:auto;padding-right:4px}
.sighting{border:1px solid var(--line2);border-radius:8px;padding:14px;background:var(--bg2)}
.sg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.sg-head b{font-size:15px}
.sg-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:4px}
.sg-meta span{display:inline-flex;align-items:center;gap:5px}
.sg-meta svg{stroke:currentColor;width:14px;height:14px}
.sg-meta .src{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line2);border-radius:3px;padding:2px 7px;color:var(--muted)}
.sg-meta .src.ok{color:var(--green);border-color:var(--green)}
.sg-body{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.sg-crop{display:flex;flex-direction:column}
.sg-crop .crop{width:100%;flex:1;min-height:130px;background-color:#05080c}
.sg-px{margin-top:7px;font-family:var(--mono);font-size:11px;color:var(--green)}
.sg-px.muted{color:var(--muted)}
.sg-scene .boxwrap{border-radius:6px}
@media (max-width:820px){.sg-body{grid-template-columns:1fr}}

/* ---- recorders (NVR) ---- */
.rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.rec-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:10px}
.rec-card.open{border-color:var(--green)}
.rc-top{display:flex;align-items:flex-start;gap:11px}
.rc-icon{width:34px;height:34px;border-radius:7px;background:var(--green-light);display:grid;place-items:center;flex-shrink:0}
.rc-icon svg{stroke:var(--green);width:19px;height:19px}
.rc-name{font-size:15px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-addr{font-size:12px;color:var(--muted);font-family:var(--mono);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-chan{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--ink2);margin-top:4px}
.rc-chan b{font-family:var(--mono);color:var(--ink)}
.rc-bar{height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.rc-bar i{display:block;height:100%;background:var(--green);border-radius:3px;transition:width .3s}
.rc-sub{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);font-family:var(--mono)}
.rc-meta{font-size:11.5px;color:var(--muted);font-family:var(--mono);line-height:1.5;border-top:1px solid var(--line);padding-top:9px}
.rc-err{font-size:12px;color:var(--red);background:var(--red-light,rgba(229,72,77,.1));border-radius:4px;padding:7px 9px}
.rc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:11px;margin-top:auto}
.rc-foot .btn-ghost.on{border-color:var(--green);color:var(--green)}
.rc-icons{display:flex;gap:4px}
.rc-icons .btn-ghost{padding:7px}
/* channel picker */
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:10px}
.ch-card{border:1px solid var(--line2);border-radius:7px;padding:11px 12px;cursor:pointer;transition:.12s;background:var(--bg2)}
.ch-card:hover{border-color:var(--muted)}
.ch-card.on{border-color:var(--green);background:var(--green-light)}
.ch-card.off{opacity:.5;cursor:not-allowed}
.ch-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ch-no{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;background:var(--card2);border-radius:3px;padding:2px 7px;color:var(--ink2)}
.ch-top svg{width:15px;height:15px;stroke:var(--green)}
.ch-card.off .ch-top svg{stroke:var(--muted)}
.ch-name{font-size:13.5px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-sub{font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:3px}
.ch-card.on .ch-sub{color:var(--green)}
.ch-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
/* recorder form */
.flabel{display:block;font-size:11px;font-weight:600;margin:14px 0 6px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-family:var(--mono)}
.fhint{font-size:12.5px;color:var(--muted);margin-top:6px}
.kind-help{margin:10px 0 4px;padding:11px 13px;border:1px solid var(--line2);border-radius:6px;background:var(--bg2);font-size:12.5px;line-height:1.7}
.rf-ok,.rf-bad,.rf-wait{margin-top:14px;padding:10px 12px;border-radius:6px;font-size:13px;display:flex;align-items:center;gap:8px}
.rf-ok{background:var(--green-light);color:var(--green);border:1px solid var(--green)}
.rf-ok svg{stroke:currentColor}
.rf-bad{background:rgba(229,72,77,.1);color:var(--red);border:1px solid var(--red)}
.rf-wait{background:var(--bg2);color:var(--muted);border:1px solid var(--line2)}

.modal .inp{width:100%}
.modal .cfg-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.rc-hook{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:6px;
  background:var(--bg2);border:1px solid var(--line2)}
.rc-hook.live{border-color:var(--green)}
.rc-hook-top{min-width:0;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:2px}
.rc-hook-top span{display:flex;align-items:center;gap:5px;font-weight:600;color:var(--ink2)}
.rc-hook-top svg{stroke:var(--muted);width:14px;height:14px}
.rc-hook.live .rc-hook-top svg{stroke:var(--green);fill:var(--green)}
.rc-hook-top b{font-family:var(--mono);font-size:10.5px;font-weight:500}
.rc-hook .btn-ghost{white-space:nowrap;padding:7px 11px;font-size:12.5px}
.hook-steps{margin:0 0 6px;padding-left:20px;font-size:13.5px;line-height:1.75;color:var(--ink2)}
.hook-steps li{margin-bottom:5px}

.seg{display:flex;gap:6px}
.seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border:1px solid var(--line2);border-radius:6px;background:var(--bg2);color:var(--ink2);font-size:13px}
.seg button svg{stroke:currentColor;width:16px;height:16px}
.seg button.active{border-color:var(--green);background:var(--green-light);color:var(--green)}
.rc-note{margin-top:5px;color:var(--ink2);font-family:var(--sans);font-size:12px}

/* ---- line & zone editor ---- */
.count-top{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:12px;align-items:start}
@media (max-width:1100px){.count-top{grid-template-columns:1fr}}
.ed-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ed-tools{display:flex;gap:6px;flex-wrap:wrap}
.ed-tools .btn-ghost{padding:7px 11px;font-size:12.5px}
.ed-stage{position:relative;aspect-ratio:16/9;background:#05080c;border-radius:6px;overflow:hidden;border:1px solid var(--line2);touch-action:none;user-select:none}
.ed-stage img,.ed-stage canvas,.ed-stage iframe{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:fill!important;max-width:none}
.ed-svg,.ed-layer{position:absolute;inset:0;width:100%;height:100%}
.ed-svg{pointer-events:none}
.ed-line{stroke:#2dd4bf;stroke-width:3;filter:drop-shadow(0 0 2px rgba(0,0,0,.9))}
.ed-line.sel{stroke:#fff;stroke-width:4}
.ed-arrow{stroke:#2dd4bf;stroke-width:2;stroke-dasharray:3 3}
.ed-zone{fill:rgba(45,212,191,.13);stroke:#2dd4bf;stroke-width:2}
.ed-zone.intrusion{fill:rgba(240,85,91,.15);stroke:#f0555b}
.ed-zone.parking{fill:rgba(96,165,250,.15);stroke:#60a5fa}
.ed-zone.sel{stroke-width:3.5;stroke:#fff}
.ed-grab{position:absolute;cursor:move}
.ed-h{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;border:3px solid #0f766e;cursor:grab;box-shadow:0 1px 5px rgba(0,0,0,.7);z-index:3}
.ed-h.sq{border-radius:3px;cursor:nwse-resize}
.ed-tag{position:absolute;transform:translate(4px,4px);background:rgba(8,12,18,.86);color:#fff;font:600 10.5px var(--mono);padding:2px 6px;border-radius:3px;white-space:nowrap;cursor:pointer;z-index:2;border-left:3px solid #2dd4bf}
.ed-tag.intrusion{border-left-color:#f0555b}.ed-tag.parking{border-left-color:#60a5fa}
.ed-tag.line{transform:translate(-50%,-150%)}
.ed-in{position:absolute;transform:translate(-50%,-50%);font:700 9.5px var(--mono);letter-spacing:.08em;color:#04130f;background:#2dd4bf;padding:1px 5px;border-radius:3px;pointer-events:none;z-index:2}
.ed-hint{font-size:12.5px;margin-top:9px}
.ed-side h3{font-size:16px}
.ed-item{display:flex;align-items:center;gap:9px;padding:9px 8px;border-radius:5px;cursor:pointer;border-bottom:1px solid var(--line)}
.ed-item:hover{background:var(--card2)}
.ed-item b{flex:1;font-size:13.5px;font-weight:500}
.ed-item small{font:11px var(--mono);color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;background:#2dd4bf;flex-shrink:0}
.dot.intrusion{background:#f0555b}.dot.parking{background:#60a5fa}.dot.line{border-radius:2px;height:4px;width:14px}
.ed-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.ed-facts small{display:block;font:10.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.ed-facts b{font:600 20px var(--mono)}
/* ---- person trail ---- */
.trail{margin-bottom:12px}
.trail h3{display:flex;align-items:center;gap:8px;font-size:16px}
.trail h3 svg{stroke:var(--green)}
.trail-row{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:12px 0 4px}
.trail-stop{position:relative;flex:0 0 190px;max-width:190px;display:flex;flex-direction:column;gap:3px}
.trail-pic{height:190px;width:100%;object-fit:contain;background:#05080c;border:1px solid var(--line2);border-radius:5px}
.trail-stop b{font-size:13px;margin-top:5px}
.trail-stop small{font:11px var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-n{position:absolute;top:6px;left:6px;z-index:2;width:22px;height:22px;border-radius:50%;background:var(--green);color:var(--onaccent);font:700 11px var(--mono);display:grid;place-items:center}
.trail-arrow{flex:0 0 auto;color:var(--muted)}
.trail-arrow svg{stroke:currentColor}
.rc-attrs{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.rc-attrs span{font:10.5px var(--mono);background:var(--green-light);color:var(--green);padding:1px 6px;border-radius:3px}

/* crossings, count alerts, traces */
.cross-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-top:14px}
.cross-pic{position:relative;aspect-ratio:16/10;border-radius:5px;border:1px solid var(--line2);background:#05080c center/cover no-repeat;overflow:hidden}
.cross-pic.none{display:grid;place-items:center;color:var(--muted);font:11px var(--mono)}
.cross-pic i{position:absolute;width:16px;height:16px;margin:-16px 0 0 -8px;border:2px solid #2dd4bf;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.6)}
.cross-meta{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.cross-meta small{font:11px var(--mono);color:var(--muted)}
.rule-form{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.rule-form .inp{width:100%}
.trace{display:flex;align-items:center;gap:12px;padding:11px 6px;border-bottom:1px solid var(--line);font-size:13.5px}
.trace svg{stroke:var(--muted);flex-shrink:0}
.trace.refused{background:rgba(240,85,91,.06)}

/* parking: the camera picture with each row drawn on it */
.park-view{position:relative;max-width:860px;margin-left:auto;margin-right:auto;border-radius:10px;overflow:hidden;border:1px solid var(--line2);margin-bottom:16px;background:#05080c;line-height:0}
.park-view img{display:block;width:100%;height:auto}
.park-row{position:absolute;border:2px solid #60a5fa;background:rgba(96,165,250,.12);border-radius:4px;cursor:pointer;line-height:1.2}
.park-row.sel{border-color:var(--green);background:rgba(45,212,191,.16)}
.park-row span{position:absolute;left:-2px;bottom:100%;margin-bottom:2px;white-space:nowrap;font:600 11px var(--mono,monospace);padding:3px 7px;border-radius:4px;background:rgba(5,8,12,.86);color:#e8eef5}

/* a camera that has stopped sending pictures */
.cam-off{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#e8eef5;text-align:center;padding:12px}
.cam-off b{font-size:14px;letter-spacing:.02em}
.cam-off span{font:12px var(--mono);color:#aab6c4}
.cam-tile .ct-live.off{color:var(--red)}
.cam-tile .ct-live.off::before{background:var(--red);box-shadow:none;animation:none}

/* ---------- phone ---------- */
@media (max-width:860px){
  .kpis{grid-template-columns:1fr 1fr!important}
  .kpi .kvalue{font-size:22px!important}
  .card{overflow-x:auto}
  .tabs{max-width:100%;flex-wrap:wrap}
  .count-layout{grid-template-columns:1fr}
  .tbl{min-width:560px}
  .rep-layout{grid-template-columns:1fr!important}
  .chips{overflow-x:auto;max-width:100%}
  .filters select,.filters .inp{max-width:100%}
  #content select.inp{max-width:100%}
}
@media (max-width:700px){
  .cams-grid.fit .cam-tile{aspect-ratio:16/9}
  .videowall-grid,.wall-grid{grid-template-columns:1fr!important}
}
.lt-live.off{color:var(--red)}.lt-live.off::before{background:var(--red);box-shadow:none;animation:none}
.fs-name .ct-live.off{color:var(--red)}