:root{--bg: #f5f7fa;--surface: #ffffff;--text: #0f172a;--muted: #475569;--line: #dbe1ea;--accent: #006f82;--accent-2: #154284;font-family:Soehne,Avenir Next,Segoe UI,sans-serif;color:var(--text)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 0 0,#e5f6fa,#f6f9fc 35%,#edf1f7)}.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:#0e2230;color:#dbeaf6;padding:20px;display:flex;flex-direction:column;gap:14px}.sidebar h1{margin:0;font-size:1.6rem;letter-spacing:.03em}.nav-link{display:block;padding:10px 12px;margin-bottom:6px;border-radius:8px;color:#dbeaf6;text-decoration:none}.nav-link.active,.nav-link:hover{background:#1b3f57}.main-content{padding:22px}.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px;box-shadow:0 4px 14px #0000000a}.widget-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.metric-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;display:grid;gap:8px}.metric-card span{color:var(--muted);font-size:.9rem}.metric-card strong{font-size:1.4rem;color:var(--accent-2)}.metric-link-btn{border:none;background:transparent;color:var(--accent-2);font-size:1.4rem;font-weight:700;padding:0;text-align:left;cursor:pointer}.metric-link-btn:hover{color:#0a5a86;text-decoration:underline}.analytics-status-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.chart-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:4px}.subnav{display:flex;gap:10px;margin-bottom:14px}.subnav a{text-decoration:none;border:1px solid var(--line);background:#fff;color:var(--text);border-radius:8px;padding:8px 10px}.subnav a.active{border-color:var(--accent);color:var(--accent)}.filter-bar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}.field-group{display:grid;gap:6px}.field-group span{font-size:.85rem;color:var(--muted)}input,textarea,select,button{border:1px solid #b8c3d5;border-radius:8px;padding:9px;font:inherit}button{background:var(--accent);color:#fff;border-color:var(--accent);cursor:pointer}.player-wrap{background:#000;border-radius:8px;overflow:hidden;margin-bottom:8px}.player{width:100%;min-height:300px;background:#000}.player-surface{position:relative;width:100%;will-change:transform}.player-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.player-pan-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:8;cursor:grab;touch-action:none}.player-pan-layer.is-panning{cursor:grabbing}.app-time-badge{position:absolute;top:10px;right:10px;z-index:9;background:#06101cbd;color:#fff;font-weight:600;font-size:.86rem;border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:4px 8px;pointer-events:none}.overlay-zone-fill{fill:#ffd05024;stroke:none}.overlay-zone-line{fill:none;stroke:#ffce5af2;stroke-width:.35}.overlay-zone-fill-violation{fill:#dc26263d}.overlay-zone-line-violation{stroke:#f87171fa;stroke-width:.45}.overlay-zone-label{fill:#ffde85;font-size:2.4px;font-weight:700;text-shadow:0 0 .6px rgba(0,0,0,.8)}.overlay-det rect{fill:none;stroke-width:.45}.overlay-det text{font-size:2.2px;font-weight:700;text-shadow:0 0 .6px rgba(0,0,0,.8)}.overlay-det-person rect{stroke:#4ade80;fill:none}.overlay-det-person text{fill:#4ade80}.overlay-det-vehicle rect{stroke:#60a5fa;fill:none}.overlay-det-vehicle text{fill:#60a5fa}.overlay-det-plate rect{stroke:#f59e0b;fill:none}.overlay-det-plate text{fill:#f59e0b}.overlay-det-object rect{stroke:#f472b6;fill:none}.overlay-det-object text{fill:#f472b6}.overlay-trail{fill:none;stroke-width:.42;opacity:.9;filter:drop-shadow(0 0 1px rgba(2,10,18,.45))}.overlay-trail path{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .18s ease,opacity .18s ease}.overlay-trail circle{stroke:none;opacity:.98;transition:r .18s ease,opacity .18s ease}.overlay-trail-person{stroke:#4ade80e6}.overlay-trail-person circle{fill:#4ade80f2}.overlay-trail-vehicle{stroke:#60a5fae6}.overlay-trail-vehicle circle{fill:#60a5faf2}.overlay-trail-plate{stroke:#f59e0be6}.overlay-trail-plate circle{fill:#f59e0bf2}.overlay-trail-object{stroke:#f472b6e6}.overlay-trail-object circle{fill:#f472b6f2}.overlay-scrub-hud{position:absolute;left:10px;bottom:10px;z-index:9;min-width:220px;max-width:min(60%,380px);background:#06101cc7;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:7px 9px;color:#f8fafc;pointer-events:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,opacity .18s ease}.overlay-scrub-hud.is-pulse{animation:scrubHudPulse .32s ease-out}.overlay-scrub-hud-title{font-size:.86rem;font-weight:700;line-height:1.2}.overlay-scrub-hud-meta{margin-top:4px;display:flex;gap:10px;font-size:.8rem;color:#f1f5f9f2}.overlay-scrub-hud-subtle{margin-top:3px;font-size:.74rem;color:#cbd5e1f0}.overlay-scrub-hud-person{border-color:#4ade808c;box-shadow:inset 2px 0 #4ade80e6}.overlay-scrub-hud-vehicle{border-color:#60a5fa8c;box-shadow:inset 2px 0 #60a5fae6}.overlay-scrub-hud-plate{border-color:#f59e0b94;box-shadow:inset 2px 0 #f59e0beb}.overlay-scrub-hud-object{border-color:#f472b68c;box-shadow:inset 2px 0 #f472b6eb}@keyframes scrubHudPulse{0%{transform:translateY(2px) scale(.985);opacity:.76}60%{transform:translateY(0) scale(1.015);opacity:1}to{transform:translateY(0) scale(1);opacity:1}}.actions-row{display:flex;gap:8px;flex-wrap:wrap}.overlay-toggles{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.overlay-toggles button{background:#fff;color:#13456f;border-color:#b8d1ea}.overlay-toggles button.is-on{background:#0b5f8f;border-color:#0b5f8f;color:#fff}.overlay-confidence-legend{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;border:1px solid #c8d8ef;border-radius:999px;background:#f7fbff;padding:5px 8px}.overlay-confidence-title{font-size:.78rem;color:#355273;font-weight:700}.overlay-confidence-chip{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;border:1px solid transparent;font-size:.74rem;font-weight:600}.overlay-confidence-chip-person{color:#0f7a3f;border-color:#4ade8073;background:#4ade801f}.overlay-confidence-chip-vehicle{color:#1d4f91;border-color:#60a5fa73;background:#60a5fa1f}.overlay-confidence-chip-plate{color:#8b5a00;border-color:#f59e0b80;background:#f59e0b21}.overlay-confidence-chip-object{color:#8a2661;border-color:#f472b673;background:#f472b61f}.overlay-confidence-scale{display:inline-flex;align-items:center;gap:5px;margin-left:2px}.overlay-confidence-scale-low,.overlay-confidence-scale-high{font-size:.72rem;color:#48627f}.overlay-confidence-scale-line{display:inline-block;width:58px;height:5px;border-radius:999px;background:linear-gradient(90deg,#64748b66,#1e40afeb,#059669f2)}.muted-line{margin:4px 0 0;color:var(--muted);font-size:.92rem}.camera-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}.camera-card{text-align:left;display:grid;gap:6px;background:#f8fbff;color:var(--text);border:1px solid var(--line)}.camera-preview-wrap{position:relative;width:100%;aspect-ratio:16 / 9;border:1px solid #d7e2ef;border-radius:8px;overflow:hidden;background:#0d1b2a}.camera-preview-frame{width:100%;height:100%;border:0;display:block}.camera-preview-video{width:100%;height:100%;object-fit:cover;display:block;background:#000}.camera-live-badge{position:absolute;top:8px;left:8px;font-size:.72rem;font-weight:700;letter-spacing:.03em;color:#fff;background:#b61414e6;border-radius:999px;padding:3px 8px;border:1px solid rgba(255,255,255,.25)}.camera-card-actions{display:flex;justify-content:flex-end}.camera-card.active{border-color:var(--accent);box-shadow:0 0 0 2px #006f8226}.camera-card span{color:var(--muted);font-size:.86rem}.live-source-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.zone-topbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}.zone-help{border:1px solid #d5e4f3;border-radius:10px;background:#f7fbff;padding:10px;margin:8px 0 10px}.zone-help-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.zone-editor-layout{display:grid;grid-template-columns:1fr 320px;gap:12px}.zone-canvas-wrap{position:relative;min-height:420px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#0f172a}.zone-video{width:100%;height:100%;object-fit:contain;background:#000}.zone-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;cursor:crosshair}.zone-existing-fill{fill:#1484ff33}.zone-existing-line{fill:none;stroke:#58a6ff;stroke-width:.4}.zone-draft-line{fill:none;stroke:#ffd166;stroke-width:.45}.zone-draft-fill{fill:#ffd16633}.zone-draft-point{fill:#ffb703}.zone-sidepanel{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff}.zone-item{border:1px solid var(--line);border-radius:8px;padding:8px;margin-bottom:8px;display:grid;gap:6px}.player-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#06101c9e;z-index:1000;padding:28px;overflow:auto}.player-modal{max-width:1240px;margin:0 auto;background:#f7fafd;border:1px solid var(--line);border-radius:14px;padding:16px}.player-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.player-expanded{min-height:560px;max-height:70vh}.timeline-card{margin-top:12px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px}.timeline-head{display:flex;justify-content:space-between;align-items:center}.timeline-track{margin:10px 0;position:relative;height:34px;border:1px solid #c9d5e4;border-radius:8px;background:linear-gradient(to right,#d8e8ff,#eef6ff)}.timeline-segment-block{position:absolute;top:3px;height:26px;border:none;border-radius:4px;background:#facc1570;cursor:pointer}.timeline-segment-event{background:#facc1585}.timeline-segment-critical{background:#ef44448f}.timeline-marker{position:absolute;top:3px;width:6px;height:26px;margin-left:-4px;border:none;border-radius:1px;background:#0ea5e9;cursor:pointer}.timeline-marker-dvr{opacity:.95}.timeline-marker-motion{width:12px;margin-left:-6px;background:#0f7ab7}.timeline-cursor-line{position:absolute;top:-1px;bottom:-1px;width:3px;margin-left:-1px;border-radius:2px;background:#fff;box-shadow:0 0 0 1px #041f3959;pointer-events:none;z-index:3}.timeline-marker-detection{background:#10b981}.timeline-marker-license{background:#f59e0b}.timeline-marker-critical{width:10px;margin-left:-5px;background:#ef4444}.timeline-actions{display:flex;gap:8px;margin:8px 0}.timeline-hints{display:flex;flex-wrap:wrap;gap:8px}.timeline-hints button{background:#edf4ff;border-color:#c8d8ef;color:#17446a}.timeline-range-note{font-size:.9rem;color:#375879;margin-bottom:6px}.mini-chart{display:grid;grid-template-columns:repeat(auto-fit,minmax(28px,1fr));align-items:end;gap:6px;height:180px;border:1px solid var(--line);border-radius:8px;padding:10px;background:#f7fbff}.multi-series-chart{grid-template-columns:repeat(auto-fit,minmax(34px,1fr))}.mini-chart-hourly{width:max-content;min-width:100%;grid-auto-flow:column;grid-auto-columns:minmax(46px,46px);grid-template-columns:none;height:240px}.mini-chart-col{display:grid;grid-template-rows:1fr auto auto;justify-items:center;height:100%;min-width:24px;gap:4px}.mini-chart-col-bars{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:4px;width:100%;height:100%}.mini-chart-bar{width:100%;background:linear-gradient(180deg,#2faad0,#006f82);border-radius:4px 4px 2px 2px;align-self:end}.mini-chart-bar-security{background:linear-gradient(180deg,#f8bb67,#e17a00)}.mini-chart-btn{border:none;cursor:pointer}.mini-chart-breakdown{height:220px}.mini-chart-col-value{font-size:.7rem;color:#1a3d61;font-weight:700}.mini-chart-time{font-size:.68rem;color:#48627f;transform:none;white-space:nowrap;margin-top:2px;line-height:1.1;text-align:center}.mini-chart-time-muted{color:transparent}.breakdown-list{display:grid;gap:8px}.breakdown-row{display:grid;grid-template-columns:180px 1fr 64px;align-items:center;gap:10px;border:1px solid #d7e3f1;background:#f8fbff;color:#0f172a;padding:8px 10px;border-radius:8px;text-align:left}.breakdown-row:hover{border-color:#9ec0e5}.breakdown-label{font-size:.9rem;color:#28455f}.breakdown-track{height:10px;border-radius:999px;background:#e7eff9;overflow:hidden}.breakdown-fill{height:100%;background:linear-gradient(90deg,#2faad0,#006f82)}.breakdown-fill-alt{background:linear-gradient(90deg,#4f8fd2,#154284)}.breakdown-count{text-align:right;font-weight:700;color:#153a63}input[type=range]{width:100%}.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}.video-tile{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px}.tile-thumbnail{width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:8px;margin-bottom:8px;border:1px solid #d7e2ef}.tile-thumbnail-placeholder{background:linear-gradient(90deg,#eef4fb,#f8fbff,#eef4fb);background-size:300% 100%;animation:thumbPulse 1.5s ease-in-out infinite}@keyframes thumbPulse{0%{background-position:0% 0}to{background-position:100% 0}}.video-tile-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.tile-badge{font-size:.75rem;padding:2px 8px;border:1px solid #9dc2ea;border-radius:999px;color:#0f4a85}.tile-time{font-weight:600;margin:6px 0}.tile-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.pipeline-health{border:1px solid #d3dfec;border-radius:10px;background:#f8fcff;padding:10px;margin-bottom:10px}.pipeline-health-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.pipeline-health-grid{display:flex;gap:8px;flex-wrap:wrap}.remote-status-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:12px}.remote-status-card{border:1px solid #d3dfec;background:#f8fcff;border-radius:10px;padding:10px;display:grid;gap:8px}.remote-status-title{font-size:.82rem;font-weight:700;color:#355273;text-transform:uppercase;letter-spacing:.02em}.remote-status-note{font-size:.78rem;color:#5d738f}.edge-agent-panel{border:1px solid #d3dfec;background:#f9fcff;border-radius:10px;padding:12px;margin-bottom:12px}.edge-agent-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}.edge-agent-panel-head h4{margin:0}.edge-agent-list{display:grid;gap:8px}.edge-agent-item{border:1px solid #d9e4f0;background:#fff;border-radius:10px;padding:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.edge-agent-id{font-weight:700;color:#123a66}.events-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}.event-view-toggle{display:inline-flex;border:1px solid #cdd8e8;border-radius:999px;overflow:hidden;background:#f3f7fc}.toggle-btn{border:none;background:transparent;color:#355273;padding:8px 16px;font-weight:600}.toggle-btn.is-active{background:#0f7c94;color:#fff}.status-pill{border-radius:999px;padding:4px 10px;font-size:.86rem;border:1px solid transparent}.status-ready{background:#e8f8ef;color:#0f7a3f;border-color:#bde6ce}.status-queued{background:#eef5ff;color:#1e4a92;border-color:#c9ddff}.status-retry{background:#fff6e8;color:#8b5a00;border-color:#ffe0ae}.status-failed{background:#ffecec;color:#9a1b1b;border-color:#ffc9c9}.status-total{background:#f2f4f8;color:#334155;border-color:#d9e0ea}.risk-list{display:grid;gap:10px}.risk-item{border:1px solid #d7e3f1;border-radius:10px;background:#f8fbff;padding:10px}.risk-item-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;border-bottom:1px solid var(--line);padding:10px 8px;font-size:.92rem}th{color:#334155}@media (max-width: 1024px){.app-shell{grid-template-columns:1fr}.sidebar{position:sticky;top:0;z-index:5}.widget-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid{grid-template-columns:1fr}.player-modal-backdrop{padding:8px}.player-expanded{min-height:280px}.live-source-row{align-items:flex-start;flex-direction:column}.zone-topbar,.zone-editor-layout{grid-template-columns:1fr}.zone-canvas-wrap{min-height:280px}.analytics-grid,.breakdown-row{grid-template-columns:1fr}.breakdown-count{text-align:left}}@media (max-width: 720px){.edge-agent-item{align-items:flex-start}}