:root{color-scheme:dark;--bg: #0e1117;--surface: rgba(22, 27, 36, .92);--surface-strong: #171d27;--stroke: rgba(148, 163, 184, .14);--text: #edf2f7;--muted: #97a3b6;--accent: #f59e0b;--accent-strong: #d97706;--accent-soft: rgba(245, 158, 11, .14);--warning: #f59e0b;--critical: #ef4444;--shadow: 0 24px 60px rgba(0, 0, 0, .32);--radius-xl: 24px;--radius-lg: 18px}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:Trebuchet MS,Segoe UI,sans-serif;color:var(--text);background:radial-gradient(circle at top left,rgba(245,158,11,.16),transparent 20%),radial-gradient(circle at top right,rgba(59,130,246,.14),transparent 24%),linear-gradient(180deg,#0f141d,#0a0d12)}button,input,select{font:inherit}.page-shell{max-width:1640px;margin:0 auto;padding:28px 24px 44px}.hero{display:flex;justify-content:space-between;gap:28px;padding:30px;border:1px solid var(--stroke);border-radius:var(--radius-xl);background:linear-gradient(145deg,#141923f5,#0e121af0),linear-gradient(120deg,rgba(245,158,11,.1),transparent 42%);box-shadow:var(--shadow)}.hero-copy{max-width:840px}.eyebrow,.panel-kicker{display:inline-flex;margin-bottom:10px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-strong)}.hero-copy h1{margin:0 0 12px;font-size:clamp(2.2rem,3.8vw,3.4rem);line-height:1.02}.hero-copy p{margin:0;max-width:720px;font-size:1.08rem;line-height:1.65;color:var(--muted)}.hero-actions,.header-actions,.zone-actions{display:flex;flex-wrap:wrap;gap:12px}.page-nav{display:inline-flex;gap:8px;margin-top:22px;padding:8px;border-radius:999px;background:#111720e0;border:1px solid var(--stroke)}.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border:1px solid transparent;border-radius:999px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease}.button:hover:not(:disabled){transform:translateY(-1px)}.button:disabled{opacity:.52;cursor:not-allowed}.button-primary{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-strong));box-shadow:0 18px 32px #8f411733}.button-small{min-height:40px;padding:0 16px}.button-secondary{color:var(--text);background:#121821eb;border-color:var(--stroke)}.button-ghost{color:var(--muted);background:transparent;border-color:var(--stroke)}.toggle-chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(148,163,184,.16);background:#0c1118eb;color:var(--muted);cursor:pointer}.toggle-chip input{width:18px;height:18px;margin:0;accent-color:var(--accent)}.toggle-chip span{color:inherit;font-size:.94rem;font-weight:700}.toggle-chip.active{color:var(--text);border-color:#f59e0b6b;background:#281c09db}.status-grid,.content-grid,.setup-grid{display:grid;gap:22px;margin-top:20px}.camera-strip{margin-top:22px;padding:24px;border:1px solid var(--stroke);border-radius:var(--radius-lg);background:var(--surface);box-shadow:0 18px 40px #00000038}.camera-strip-header{margin-bottom:18px}.camera-card-grid,.checkbox-grid,.export-grid{display:grid;gap:14px}.camera-card-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.camera-card{padding:18px;border:1px solid rgba(148,163,184,.12);border-radius:18px;background:#10151eeb;color:var(--text);text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.camera-card:hover{transform:translateY(-2px);border-color:#f59e0b47}.camera-card:focus-visible{outline:2px solid rgba(245,158,11,.6);outline-offset:2px}.camera-card.active{border-color:#f59e0b7a;box-shadow:inset 0 0 0 1px #f59e0b38;background:#241908e0}.camera-card-head,.camera-card-meta{display:flex;justify-content:space-between;gap:12px}.camera-card-head{align-items:flex-start}.camera-card-head>div{display:grid;gap:8px}.camera-card-id{display:block;margin-bottom:6px;color:var(--muted);font-size:.82rem;font-family:Consolas,JetBrains Mono,monospace}.camera-card p{margin:12px 0;color:var(--muted);line-height:1.5}.camera-card-meta{color:var(--muted);font-size:.88rem}.camera-card-link{margin-top:14px;padding:0;border:0;background:transparent;color:var(--accent);cursor:pointer}.status-pill{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:#3b82f624;color:#93c5fd;font-size:.82rem;white-space:nowrap}.status-pill.success{background:#22c55e24;color:#86efac}.status-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.status-card,.panel,.notice{border:1px solid var(--stroke);border-radius:var(--radius-lg);background:var(--surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 18px 40px #00000038}.status-card{padding:24px}.status-card span,.metric-card span,.camera-summary span,.field span,.panel-meta span{display:block;color:var(--muted);font-size:.84rem}.status-card strong{display:block;margin-top:8px;font-size:1.6rem}.status-card p,.metric-card p,.camera-summary p,.feed-caption p,.editor-footer p,.empty-state{margin:10px 0 0;color:var(--muted);line-height:1.55}.notice{display:flex;gap:14px;align-items:center;margin-top:18px;padding:16px 18px}.notice-success{border-color:#2d7a4b47;background:#11301deb}.notice-error{border-color:#ad3e2847;background:#3e1512eb}.notice-info{border-color:#be7b1247;background:#3f2b0ceb}.tab-bar{display:inline-flex;gap:8px;margin-top:24px;padding:8px;border-radius:999px;background:#111720e0;border:1px solid var(--stroke)}.tab{min-height:42px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}.tab.active{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff}.content-grid{grid-template-columns:minmax(0,1.55fr) minmax(380px,.95fr);align-items:start}.setup-grid{grid-template-columns:minmax(0,1.45fr) minmax(360px,.8fr);align-items:start}.zones-layout{grid-template-columns:minmax(0,1.55fr) minmax(360px,.8fr)}.monitor-board{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,.9fr);gap:20px;align-items:start}.monitor-main,.monitor-thumbs{min-width:0}.monitor-thumbs{display:grid;gap:14px}.monitor-thumbs-head h3{margin:0;font-size:1.1rem}.monitor-thumbs-head p{margin:8px 0 0;color:var(--muted)}.feed-stage-featured{min-height:520px}.mini-feed-grid{display:grid;gap:12px}.mini-feed-card{display:grid;gap:10px;padding:12px;border:1px solid rgba(148,163,184,.12);border-radius:18px;background:#0d121ae0;color:var(--text);text-align:left;cursor:pointer}.mini-feed-card.active,.mini-feed-card:hover{border-color:#f59e0b52}.mini-feed-preview{overflow:hidden;border-radius:14px;aspect-ratio:16 / 9;background:#090c12}.mini-feed-preview img{display:block;width:100%;height:100%;object-fit:cover}.mini-feed-meta{display:grid;gap:4px}.mini-feed-meta strong{font-size:.98rem}.mini-feed-meta span{color:var(--muted);font-size:.86rem}.panel{padding:24px;min-width:0}.auth-panel{max-width:560px;margin-top:24px}.auth-actions{margin-top:18px}.panel-wide{grid-column:1 / -1}.side-column{display:grid;gap:20px}.panel-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}.panel-header h2{margin:0;font-size:1.55rem}.panel-meta{text-align:right}.panel-meta strong,.camera-summary strong{display:block;margin-top:6px;font-family:Consolas,JetBrains Mono,monospace;font-size:1.02rem}.feed-stage,.editor-stage{position:relative;overflow:hidden;border-radius:20px;background:linear-gradient(160deg,#080b10,#141a22)}.feed-stage{aspect-ratio:16 / 9}.feed-stage img,.editor-stage img,.editor-stage svg{display:block;width:100%;height:100%}.feed-stage img,.editor-stage img{object-fit:cover}.editor-stage{aspect-ratio:16 / 9;min-height:560px;width:100%}.editor-stage svg{position:absolute;top:0;right:0;bottom:0;left:0;cursor:crosshair}.point-label{fill:#c7d2e2;font-size:18px;font-weight:700;pointer-events:none}.point-label.active{fill:#fff7db}.feed-caption,.editor-footer{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-top:14px}.feed-caption span,.editor-footer span{max-width:320px;color:var(--muted);font-size:.92rem}.point-summary{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.point-chip{display:grid;gap:4px;min-width:160px;padding:12px 14px;border-radius:14px;border:1px solid rgba(148,163,184,.14);background:#0d121ae0;color:var(--text);text-align:left;cursor:pointer}.point-chip strong{font-size:.95rem}.point-chip span{color:var(--muted);font-size:.86rem}.point-chip.active{border-color:#f59e0b8a;box-shadow:inset 0 0 0 1px #f59e0b57;background:#281c09db}.metric-grid,.detection-grid,.zone-card-grid,.camera-summary{display:grid;gap:14px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-card,.detection-column,.zone-card,.camera-summary article{padding:18px;border-radius:18px;background:var(--surface-strong);border:1px solid rgba(148,163,184,.1)}.metric-card strong{display:block;margin-top:8px;font-size:1.42rem}.event-list{display:grid;gap:12px}.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted)}.event-card{padding:16px;border-radius:16px;border:1px solid rgba(148,163,184,.1);background:var(--surface-strong)}.event-card.info{border-left:4px solid var(--accent)}.event-card.warning{border-left:4px solid var(--warning)}.event-card.critical{border-left:4px solid var(--critical)}.event-head{display:flex;justify-content:space-between;gap:12px}.event-head time{color:var(--muted);font-size:.86rem}.event-card p{margin:10px 0 0;color:var(--muted)}.detection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.detection-column h3{margin:0 0 14px}.chip-list{display:flex;flex-wrap:wrap;gap:10px}.chip{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-strong);font-size:.92rem}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.camera-form-grid{display:grid;gap:16px}.field{display:grid;gap:8px}.field-wide{grid-column:1 / -1}.field input,.field select{width:100%;min-height:54px;padding:0 16px;border-radius:14px;border:1px solid rgba(148,163,184,.18);background:#0c1118e6;color:var(--text)}.field-color input{min-height:48px;padding:6px}.camera-summary{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:20px}.camera-summary.single-column{grid-template-columns:1fr;margin-top:0}.zone-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:16px;align-items:end;margin-bottom:18px}.zone-toolbar.compact{grid-template-columns:minmax(0,1fr) 140px auto}.zone-actions{grid-column:1 / -1}.zone-card-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.setup-grid>.panel:first-child,.setup-grid>.panel:first-child .editor-stage{min-width:0}.zone-card{display:grid;grid-template-columns:18px 1fr auto;gap:14px;align-items:center}.zone-card.active{border-color:#b8632f5c;box-shadow:inset 0 0 0 1px #b8632f3d}.zone-chip{width:18px;height:18px;border-radius:999px;box-shadow:0 0 0 4px #fffc}.zone-card p{margin:6px 0 0;color:var(--muted)}.export-grid{grid-template-columns:repeat(2,minmax(0,240px))}.checkbox-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:16px}.checkbox-chip{display:grid;gap:6px;padding:14px 16px;border-radius:16px;border:1px solid rgba(148,163,184,.12);background:#0d121ae0;cursor:pointer}.checkbox-chip input{width:18px;height:18px;margin:0}.checkbox-chip span{color:var(--muted)}.checkbox-chip strong{font-family:Consolas,JetBrains Mono,monospace;font-size:.95rem}.checkbox-chip.active{border-color:#f59e0b7a;background:#281c09db}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:840px}th,td{padding:14px 12px;border-bottom:1px solid rgba(65,52,35,.08);text-align:left}th{color:var(--muted);font-size:.84rem;text-transform:uppercase;letter-spacing:.08em}.empty-state{padding:16px;border-radius:16px;background:#0f141cc7}.empty-state.compact{padding:0;background:transparent}.empty-state.large{padding:22px}@media (max-width: 1180px){.monitor-board,.content-grid,.setup-grid,.detection-grid,.metric-grid,.camera-summary,.export-grid{grid-template-columns:1fr}.hero,.panel-header,.feed-caption,.editor-footer{flex-direction:column;align-items:flex-start}}@media (max-width: 820px){.page-shell{padding:20px 16px 32px}.hero{padding:24px}.form-grid,.zone-toolbar,.zone-card,.monitor-board{grid-template-columns:1fr}.panel{padding:18px}.feed-stage-featured,.editor-stage{min-height:300px}}
