:root{
  --bg:#EEF1F6; --surface:#FFFFFF; --surface-2:#F5F7FB; --surface-3:#E9ECF3;
  --border:#D8DEEA; --border-strong:#C2CADC; --ink:#16202C; --muted:#5C6B82; --muted-2:#7E8AA0;
  --accent:#1490A0; --accent-ink:#FFFFFF; --accent-wash:#1490A01A;
  --sev-critical:#C6353D; --sev-critical-wash:#C6353D14;
  --sev-warning:#C05F19; --sev-warning-wash:#C05F1914;
  --sev-routine:#3F8F49; --sev-routine-wash:#3F8F4914;
  --sev-system:#5B5FD1; --sev-system-wash:#5B5FD114;
  --danger:#C6353D;
  --shadow: 0 1px 2px #16202C0D, 0 8px 24px -12px #16202C26;
  --font-display: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, "Roboto Mono", monospace;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0E1420; --surface:#161D2B; --surface-2:#1D2536; --surface-3:#232C40;
    --border:#2A3448; --border-strong:#384463; --ink:#EDF1F7; --muted:#8993AC; --muted-2:#5E6A85;
    --accent:#2FB6C4; --accent-ink:#03171B; --accent-wash:#2FB6C41F;
    --sev-critical:#E5484D; --sev-critical-wash:#E5484D1F;
    --sev-warning:#F0883E; --sev-warning-wash:#F0883E1F;
    --sev-routine:#6EBE6E; --sev-routine-wash:#6EBE6E1F;
    --sev-system:#8B93F0; --sev-system-wash:#8B93F01F;
    --danger:#E5484D;
    --shadow: 0 1px 2px #00000040, 0 12px 32px -16px #000000A0;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1420; --surface:#161D2B; --surface-2:#1D2536; --surface-3:#232C40;
  --border:#2A3448; --border-strong:#384463; --ink:#EDF1F7; --muted:#8993AC; --muted-2:#5E6A85;
  --accent:#2FB6C4; --accent-ink:#03171B; --accent-wash:#2FB6C41F;
  --sev-critical:#E5484D; --sev-critical-wash:#E5484D1F;
  --sev-warning:#F0883E; --sev-warning-wash:#F0883E1F;
  --sev-routine:#6EBE6E; --sev-routine-wash:#6EBE6E1F;
  --sev-system:#8B93F0; --sev-system-wash:#8B93F01F;
  --danger:#E5484D;
  --shadow: 0 1px 2px #00000040, 0 12px 32px -16px #000000A0;
}
:root[data-theme="light"]{
  --bg:#EEF1F6; --surface:#FFFFFF; --surface-2:#F5F7FB; --surface-3:#E9ECF3;
  --border:#D8DEEA; --border-strong:#C2CADC; --ink:#16202C; --muted:#5C6B82; --muted-2:#7E8AA0;
  --accent:#1490A0; --accent-ink:#FFFFFF; --accent-wash:#1490A01A;
  --sev-critical:#C6353D; --sev-critical-wash:#C6353D14;
  --sev-warning:#C05F19; --sev-warning-wash:#C05F1914;
  --sev-routine:#3F8F49; --sev-routine-wash:#3F8F4914;
  --sev-system:#5B5FD1; --sev-system-wash:#5B5FD114;
  --danger:#C6353D;
  --shadow: 0 1px 2px #16202C0D, 0 8px 24px -12px #16202C26;
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased; min-height:100vh;
}

.app-shell{ display:grid; grid-template-columns:220px 1fr; min-height:100vh; }
@media (max-width: 900px){ .app-shell{grid-template-columns:1fr;} }

.sidebar{
  background:var(--surface); border-right:1px solid var(--border);
  padding:20px 14px; display:flex; flex-direction:column; gap:20px;
}
@media (max-width: 900px){
  .sidebar{ border-right:none; border-bottom:1px solid var(--border);
    flex-direction:row; align-items:center; padding:12px 16px; overflow-x:auto; gap:16px; }
  .sidebar .brand{display:none;}
}
.brand{display:flex; align-items:center; gap:10px; padding:2px 4px 4px;}
.brand-mark{width:26px; height:26px; border-radius:8px; flex:none; background:var(--accent);
  display:flex; align-items:center; justify-content:center;}
.brand-mark i{width:7px; height:7px; border-radius:50%; background:var(--accent-ink);}
.brand-name{font-size:13px; font-weight:700; letter-spacing:-.005em;}

.nav-list{display:flex; flex-direction:column; gap:2px;}
@media (max-width: 900px){ .nav-list{flex-direction:row; gap:6px;} }
.nav-item{
  all:unset; box-sizing:border-box; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--muted);
  padding:9px 10px; border-radius:8px; border-left:3px solid transparent; white-space:nowrap;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.nav-item:hover{background:var(--surface-2); color:var(--ink);}
.nav-item:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.nav-item.active{color:var(--ink); background:var(--accent-wash); border-left-color:var(--accent);}
@media (max-width: 900px){
  .nav-item{border-left:none; border-bottom:3px solid transparent; border-radius:6px 6px 0 0;}
  .nav-item.active{border-bottom-color:var(--accent);}
}

.wrap{ max-width:1180px; margin:0 auto; padding:28px 20px 64px; }

header{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.eyebrow{ font-family:var(--font-display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 8px; }
h1{ font-family:var(--font-body); font-size:26px; font-weight:800; letter-spacing:-.01em; margin:0; text-wrap:balance; }
.lead{margin:6px 0 0; color:var(--muted); font-size:14px; max-width:52ch;}

.sidebar-footer{ margin-top:auto; display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:1px solid var(--border); }
@media (max-width: 900px){ .sidebar-footer{ margin-top:0; flex-direction:row; align-items:center; border-top:none; padding-top:0; flex:none; } }
.session-email{font-size:12.5px; color:var(--muted); font-family:var(--font-display); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
button.ghost-btn{
  font-family:var(--font-body); background:none; color:var(--muted);
  border:1px solid var(--border-strong); border-radius:9px; padding:8px 14px;
  font-size:13px; font-weight:600; cursor:pointer; transition:color .12s ease, border-color .12s ease;
}
button.ghost-btn:hover{color:var(--ink); border-color:var(--ink);}
button.ghost-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.stations{ display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap; border-bottom:1px solid var(--border); }
.station-tab{
  font-family:var(--font-display); font-size:13px; letter-spacing:-.01em; background:none; border:none;
  cursor:pointer; color:var(--muted); padding:10px 4px 12px; margin-right:18px; border-bottom:2px solid transparent;
  display:flex; align-items:baseline; gap:8px; transition:color .12s ease, border-color .12s ease;
}
.station-tab .count{font-family:var(--font-body); font-size:11px; color:var(--muted-2); font-variant-numeric:tabular-nums;}
.station-tab:hover{color:var(--ink);}
.station-tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent);}
.station-tab:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

.board{ display:grid; grid-template-columns:250px 1fr; gap:22px; align-items:start; }
@media (max-width: 780px){ .board{grid-template-columns:1fr;} }
.panel-title{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); font-weight:700; margin:0 0 12px; }

.pool{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; position:sticky; top:20px; }
.pool-list{display:flex; flex-direction:column; gap:8px;}
.person{
  display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px; padding:8px 10px; cursor:grab; transition:border-color .12s ease, background .12s ease;
}
.person:hover{border-color:var(--border-strong);}
.person.dragging{opacity:.4;}
.avatar{
  width:28px; height:28px; border-radius:50%; flex:none; background:var(--surface-3); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700;
  font-family:var(--font-display); border:1px solid var(--border-strong);
}
.person-meta{min-width:0;}
.person-name{font-size:13.5px; font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.person-sub{font-family:var(--font-display); font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums;}
.pool-hint{font-size:12px; color:var(--muted); margin:14px 2px 0; line-height:1.5;}

.categories{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 14px 12px;
  display:flex; flex-direction:column; gap:10px; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.card.dragover{ border-color:var(--sev-color, var(--accent)); box-shadow:0 0 0 3px var(--sev-wash, var(--accent-wash)); background:var(--surface-2); }
.card-head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.card-title-row{display:flex; align-items:center; gap:8px; min-width:0;}
.sev-dot{width:8px; height:8px; border-radius:50%; flex:none; background:var(--sev-color);}
.card-title{font-size:14.5px; font-weight:700; letter-spacing:-.005em;}
.card-count{font-family:var(--font-display); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; flex:none;}
.card-desc{font-size:12px; color:var(--muted); margin:-4px 0 0; line-height:1.45;}

.assigned{display:flex; flex-wrap:wrap; gap:6px; min-height:30px;}
.chip{
  display:flex; align-items:center; gap:6px; background:var(--sev-wash); border:1px solid var(--sev-color);
  color:var(--ink); border-radius:999px; padding:4px 6px 4px 10px; font-size:12.5px; font-weight:600;
}
.chip button{ all:unset; cursor:pointer; line-height:1; font-size:13px; color:var(--muted);
  width:16px; height:16px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.chip button:hover{background:var(--surface-3); color:var(--ink);}
.chip button:focus-visible{outline:2px solid var(--sev-color); outline-offset:1px;}

.empty-slot{ font-size:12px; color:var(--muted-2); font-style:italic;
  border:1px dashed var(--border-strong); border-radius:8px; padding:6px 10px; }

.add-row{ border-top:1px dashed var(--border); padding-top:9px; margin-top:2px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.add-label{font-size:11px; color:var(--muted-2); margin-right:2px;}
.ghost-chip{
  all:unset; cursor:pointer; display:flex; align-items:center; gap:5px; border:1px dashed var(--border-strong);
  color:var(--muted); border-radius:999px; padding:4px 10px 4px 8px; font-size:12px; font-weight:600;
  transition:border-color .12s ease, color .12s ease, background .12s ease;
}
.ghost-chip:hover{border-color:var(--sev-color); color:var(--ink); background:var(--sev-wash);}
.ghost-chip:focus-visible{outline:2px solid var(--sev-color); outline-offset:2px;}
.ghost-chip .plus{font-family:var(--font-display); font-size:12px;}
.all-set{font-size:12px; color:var(--muted-2);}

.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:9px; font-size:13px; font-weight:600;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.error{background:var(--danger); color:#fff;}

.center-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:32px;
  max-width:360px; width:100%; text-align:center; box-shadow:var(--shadow);
}
.login-card h1{font-size:19px; margin:14px 0 6px;}
.login-card p{color:var(--muted); font-size:13.5px; margin:0 0 22px; line-height:1.5;}
button.primary{
  font-family:var(--font-body); background:var(--accent); color:var(--accent-ink); border:none;
  border-radius:9px; padding:11px 18px; font-size:14px; font-weight:700; cursor:pointer; width:100%;
  transition:filter .12s ease;
}
button.primary:hover{filter:brightness(1.06);}
button.primary:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.error-text{color:var(--danger); font-size:13px; margin-top:14px;}

.skeleton{ color:var(--muted); font-size:13.5px; padding:20px 4px; }

button.ghost-btn:disabled{ opacity:.45; cursor:not-allowed; }
button.ghost-btn:disabled:hover{ color:var(--muted); border-color:var(--border-strong); }

.camera-list-item{ font:inherit; color:inherit; text-align:left; width:100%; cursor:pointer; }
.camera-list-item.active{ border-color:var(--accent); background:var(--accent-wash); }

.camera-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px;
  display:flex; flex-direction:column; gap:14px;
}
.camera-panel-head{ display:flex; align-items:center; justify-content:space-between; }
.camera-photo-wrap{ display:flex; align-items:center; justify-content:center; min-height:220px; }
.camera-photo{ max-width:100%; max-height:60vh; border-radius:10px; display:block; }
.camera-actions{ display:flex; flex-wrap:wrap; gap:8px; border-top:1px dashed var(--border); padding-top:12px; }

.ptz-section{ border-top:1px dashed var(--border); padding-top:12px; }
.ptz-pad{
  display:grid; grid-template-columns:repeat(3, 40px); grid-template-rows:repeat(2, 40px);
  gap:4px; justify-content:center; margin-top:8px;
}
.ptz-btn{
  all:unset; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px; cursor:pointer;
  font-size:16px; color:var(--ink); transition:border-color .12s ease, background .12s ease;
}
.ptz-btn:hover{ border-color:var(--border-strong); background:var(--surface-3); }
.ptz-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ptz-btn:disabled{ opacity:.4; cursor:not-allowed; }
.ptz-up{ grid-column:2; grid-row:1; }
.ptz-left{ grid-column:1; grid-row:2; }
.ptz-right{ grid-column:3; grid-row:2; }
.ptz-down{ grid-column:2; grid-row:2; }

@media (prefers-reduced-motion: reduce){ *{transition-duration:0.001ms !important; animation-duration:0.001ms !important;} }