:root { --bg:#07111b; --panel:rgba(15,29,42,.82); --panel-strong:#102334; --ink:#edf7f5; --muted:#8ca5ad; --line:rgba(160,205,211,.14); --accent:#20d6a1; --accent-2:#26a6ff; --warning:#ffb020; --danger:#ff5d68; --shadow:0 24px 70px rgba(0,0,0,.3); font-family:"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 10% 0%,rgba(38,166,255,.18),transparent 30%),radial-gradient(circle at 90% 10%,rgba(32,214,161,.14),transparent 26%),linear-gradient(145deg,#07111b,#0b1725 55%,#07111b); }
.intruder-overlay { position:fixed; top:18px; left:50%; z-index:2000; display:flex; align-items:center; gap:16px; width:min(680px,calc(100% - 28px)); padding:18px 22px; transform:translateX(-50%); border:1px solid rgba(255,78,92,.9); border-radius:18px; color:#ffe7e9; background:linear-gradient(110deg,rgba(122,16,31,.98),rgba(48,10,24,.97)); box-shadow:0 18px 55px rgba(0,0,0,.6),0 0 0 5px rgba(255,78,92,.16),0 0 34px rgba(255,45,65,.25); animation:alert-drop .28s ease-out,alert-pulse 2s ease-in-out .35s 2; } .intruder-overlay[hidden] { display:none; } .intruder-overlay strong { display:block; color:#ff9da6; font-size:1.15rem; letter-spacing:.12em; } .intruder-overlay span:not(.overlay-icon) { display:block; margin-top:4px; color:#ffc8cd; font-size:.82rem; } .overlay-icon { display:grid; flex:none; place-items:center; width:42px; height:42px; border-radius:50%; color:#fff; background:linear-gradient(135deg,#ff6672,#d7193f); font-size:1.35rem; font-weight:900; box-shadow:0 0 26px rgba(255,64,85,.65); } .overlay-close { margin-left:auto; padding:3px 9px; color:#ffc8cd; background:transparent; border:0; font-size:1.5rem; } @keyframes alert-pulse { 0%,100% { box-shadow:0 18px 55px rgba(0,0,0,.6),0 0 0 5px rgba(255,78,92,.16),0 0 34px rgba(255,45,65,.25); } 50% { box-shadow:0 18px 55px rgba(0,0,0,.6),0 0 0 10px rgba(255,78,92,.06),0 0 52px rgba(255,45,65,.5); } } @keyframes alert-drop { from { opacity:0; transform:translate(-50%,-18px); } to { opacity:1; transform:translate(-50%,0); } } .shell { width:min(1500px,calc(100% - 40px)); margin:auto; padding:34px 0 60px; }
.brand-lockup { display:flex; align-items:center; gap:9px; margin-bottom:22px; } .brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:9px; color:#07111b; background:linear-gradient(135deg,var(--accent),var(--accent-2)); font-weight:900; font-size:1.1rem; box-shadow:0 0 24px rgba(32,214,161,.3); } .brand-name { color:var(--ink); font-size:1.1rem; font-weight:900; letter-spacing:-.04em; } .brand-name span,.brand-footer span { color:var(--accent); } .brand-divider { width:1px; height:18px; background:var(--line); } .brand-product { color:var(--muted); font-size:.66rem; font-weight:800; letter-spacing:.16em; } .hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.eyebrow { margin:0 0 8px; color:var(--accent); font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:12px; max-width:13ch; font-size:clamp(2.5rem,6vw,5.4rem); line-height:.9; letter-spacing:-.06em; } h2 { margin-bottom:0; font-size:1.35rem; } h3 { margin:0; font-size:1rem; } .lede { max-width:62ch; margin-bottom:0; color:var(--muted); line-height:1.6; }
.hero-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
button,select { border:1px solid var(--line); border-radius:12px; padding:12px 16px; font:inherit; font-weight:700; } button { cursor:pointer; color:#04131a; background:var(--accent); transition:transform .15s,filter .15s; } button:hover { transform:translateY(-2px); filter:brightness(1.08); } button.secondary { color:var(--ink); background:rgba(255,255,255,.06); }
.connection-pill,.camera-state,.tag,.alert-count { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:8px 11px; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } .connection-pill { color:var(--muted); background:rgba(255,255,255,.07); } .connection-pill i,.camera-state i { width:7px; height:7px; border-radius:50%; background:currentColor; } .connection-pill.online { color:var(--accent); } .connection-pill.offline { color:var(--danger); }
.camera-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:20px; }
.panel,.camera-card { border:1px solid var(--line); border-radius:22px; background:var(--panel); box-shadow:var(--shadow); backdrop-filter:blur(14px); }
.camera-card { overflow:hidden; transition:border-color .2s,transform .2s; } .camera-card:hover { transform:translateY(-3px); border-color:rgba(32,214,161,.45); } .camera-card.alerting { border-color:rgba(255,78,92,.9); box-shadow:0 0 0 1px rgba(255,78,92,.24),0 0 28px rgba(255,45,65,.18),var(--shadow); }
.camera-card-head,.camera-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 15px; } .camera-card-head { padding-bottom:10px; } .camera-number { color:var(--accent-2); font-size:.7rem; font-weight:800; letter-spacing:.12em; } .camera-state { padding:5px 8px; font-size:.62rem; color:var(--muted); background:rgba(255,255,255,.06); } .camera-state.live { color:var(--accent); } .camera-state.offline { color:var(--muted); }
.camera-feed { aspect-ratio:16/10; display:grid; place-items:center; overflow:hidden; background:#06101a; } .camera-feed img { width:100%; height:100%; object-fit:cover; } .offline-feed { display:grid; gap:5px; place-items:center; color:var(--muted); text-align:center; } .offline-feed span { color:var(--accent-2); font-size:2.4rem; } .offline-feed small { font-size:.75rem; }
.camera-card-foot { padding-top:11px; border-top:1px solid var(--line); } .roi-chip { color:var(--muted); font-size:.7rem; } .roi-chip.set { color:var(--accent); } .camera-fps { color:var(--muted); font-size:.7rem; } .configure-button { padding:7px 9px; color:var(--ink); background:rgba(255,255,255,.07); font-size:.72rem; }
.workspace-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(300px,1fr); gap:20px; margin-bottom:20px; } .panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 22px 0; } .boundary-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 22px 12px; } label { color:var(--muted); font-size:.8rem; font-weight:700; } select { margin-left:7px; color:var(--ink); background:var(--panel-strong); } .small { padding:9px 11px; font-size:.78rem; } .tag { color:var(--muted); background:rgba(255,255,255,.07); } .tag.success { color:var(--accent); background:rgba(32,214,161,.12); } .tag.warning { color:var(--warning); background:rgba(255,176,32,.12); }
.editor-shell { position:relative; min-height:280px; margin:0 14px; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:#06101a; } .editor-shell img { display:block; width:100%; max-height:540px; aspect-ratio:16/9; object-fit:contain; } #editorCanvas { position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; } .editor-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.9rem; } .helper { min-height:20px; margin:10px 22px 18px; color:var(--muted); font-size:.8rem; }
.alerts-panel { overflow:hidden; } .alert-actions { display:flex; align-items:center; gap:8px; } .alert-count { color:var(--warning); background:rgba(255,176,32,.14); } .clear-alerts { padding:7px 10px; color:var(--muted); background:rgba(255,255,255,.06); font-size:.68rem; } .clear-alerts:hover { color:var(--ink); background:rgba(255,255,255,.12); } .live-alert { display:flex; align-items:center; gap:12px; margin:20px; padding:15px; border:1px solid var(--line); border-radius:16px; } .live-alert strong,.alert-row strong { display:block; font-size:.84rem; } .live-alert small,.alert-row small { display:block; margin-top:4px; color:var(--muted); font-size:.72rem; line-height:1.35; } .live-alert.warning { color:var(--warning); border-color:rgba(255,176,32,.5); background:rgba(255,176,32,.12); } .live-alert.danger { color:var(--danger); border-color:rgba(255,93,104,.5); background:rgba(255,93,104,.1); } .live-alert.idle { color:var(--muted); } .alert-icon,.alert-row-icon { display:grid; flex:none; place-items:center; width:30px; height:30px; border-radius:50%; color:#08131b; background:currentColor; font-weight:900; } .alert-feed { max-height:280px; overflow:auto; padding:0 20px 18px; } .alert-row { display:flex; gap:10px; padding:12px 0; border-top:1px solid var(--line); } .alert-row-icon { width:24px; height:24px; color:var(--warning); font-size:.78rem; } .empty-feed { color:var(--muted); font-size:.8rem; }
.settings-panel { display:flex; align-items:center; gap:24px; padding:18px 22px; } .notification-settings { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .notification-settings input[type="email"] { width:190px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:rgba(255,255,255,.06); font:inherit; } .toggle { display:flex; align-items:center; gap:8px; color:var(--ink); cursor:pointer; } .toggle input { position:absolute; opacity:0; } .toggle-track { position:relative; width:36px; height:20px; border-radius:20px; background:rgba(255,255,255,.18); transition:background .2s; } .toggle-track::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .2s; } .toggle input:checked + .toggle-track { background:var(--accent); } .toggle input:checked + .toggle-track::after { transform:translateX(16px); } .settings-message { color:var(--muted); font-size:.72rem; } .field { display:flex; align-items:center; gap:8px; } .system-status { display:flex; justify-content:flex-end; gap:16px; margin-left:auto; color:var(--muted); font-size:.78rem; }
.brand-footer { margin-top:24px; color:var(--muted); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; } .brand-footer span { font-weight:900; } @media(max-width:1100px){.camera-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:760px){.shell{width:min(100% - 24px,650px);padding-top:22px}.hero,.settings-panel{align-items:stretch;flex-direction:column}.hero-actions{justify-content:flex-start}.camera-grid,.workspace-grid{grid-template-columns:1fr}.system-status{margin-left:0;justify-content:flex-start}.boundary-controls{align-items:flex-start;flex-direction:column}.field{justify-content:space-between;width:100%;}}