:root,[data-theme=dark]{--cam-accent:#00ff41;--cam-accent-glow:0 0 12px #00ff4199;--cam-red:#ff3131;--cam-red-bg:#ff000026;--cam-red-border:#ff313180;--cam-red-glow:0 0 12px #ff313133;--cam-card-bg:#0a0a0c;--cam-card-border:#00ff411f;--cam-card-border-h:#00ff4140;--cam-card-glow:0 0 40px #00ff410a;--cam-controls-bg:#000000bf;--cam-controls-border:#00ff411f;--cam-btn-hover-bg:#00ff411f;--cam-text:#fff;--cam-text-ts:#00ff41e6;--cam-grid-line:#00ff410a;--cam-corner-color:#00ff41;--cam-reticle:#00ff41;--cam-scanline:#00000014;--cam-vignette:#0000008c}[data-theme=light]{--cam-accent:#008c24;--cam-accent-glow:0 0 10px #008c2480;--cam-red:#c20;--cam-red-bg:#cc22001a;--cam-red-border:#c206;--cam-red-glow:0 0 10px #cc220026;--cam-card-bg:#fff;--cam-card-border:#008c242e;--cam-card-border-h:#008c2459;--cam-card-glow:0 0 40px #008c240f;--cam-controls-bg:#ffffffe0;--cam-controls-border:#008c2426;--cam-btn-hover-bg:#008c241a;--cam-text:#0a0a0a;--cam-text-ts:#008c24;--cam-grid-line:#008c240d;--cam-corner-color:#008c24;--cam-reticle:#008c24;--cam-scanline:#0000000a;--cam-vignette:#00000040}.camera-card{background:var(--cam-card-bg);border:1px solid var(--cam-card-border);border-radius:12px;width:100%;transition:box-shadow .3s,border-color .3s,background .3s;overflow:hidden;box-shadow:0 0 0 1px #00ff4108,0 24px 60px #00000080}.camera-card:hover{border-color:var(--cam-card-border-h);box-shadow:0 32px 80px #00000080, var(--cam-card-glow)}.video-container{aspect-ratio:16/9;cursor:pointer;background:#000;width:100%;position:relative;overflow:hidden}.main-video{object-fit:cover;width:100%;height:100%;display:block}.corner{z-index:20;pointer-events:none;width:18px;height:18px;transition:border-color .3s;position:absolute}.corner.tl{border-top:2px solid var(--cam-corner-color);border-left:2px solid var(--cam-corner-color);top:10px;left:10px}.corner.tr{border-top:2px solid var(--cam-corner-color);border-right:2px solid var(--cam-corner-color);top:10px;right:10px}.corner.bl{border-bottom:2px solid var(--cam-corner-color);border-left:2px solid var(--cam-corner-color);bottom:46px;left:10px}.corner.br{border-bottom:2px solid var(--cam-corner-color);border-right:2px solid var(--cam-corner-color);bottom:46px;right:10px}.video-overlay.top{z-index:15;background:linear-gradient(#000000bf 0%,#0000 100%);justify-content:space-between;align-items:flex-start;padding:14px 16px;display:flex;position:absolute;top:0;left:0;right:0}.status-badge{background:var(--cam-red-bg);color:var(--cam-red);letter-spacing:2px;border:1px solid var(--cam-red-border);box-shadow:var(--cam-red-glow);border-radius:3px;align-items:center;gap:5px;padding:3px 9px;font-family:Courier New,Courier,monospace;font-size:11px;font-weight:700;transition:background .3s,color .3s,border-color .3s;display:flex}.camera-info{text-align:right;text-shadow:0 2px 8px #000000e6;font-family:Courier New,Courier,monospace}.cam-name{letter-spacing:2px;color:#fff;font-size:12px;font-weight:700;display:block}.cam-timestamp{opacity:.85;color:var(--cam-text-ts);letter-spacing:.5px;font-size:10px;transition:color .3s}.hud-grid{pointer-events:none;z-index:2;background-image:linear-gradient(var(--cam-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--cam-grid-line) 1px, transparent 1px);background-size:40px 40px;transition:background-image .3s;position:absolute;inset:0}.reticle{pointer-events:none;z-index:3;opacity:.25;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.reticle-h{background:var(--cam-reticle);width:30px;height:1px;transition:background .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.reticle-v{background:var(--cam-reticle);width:1px;height:30px;transition:background .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.reticle-circle{border:1px solid var(--cam-reticle);border-radius:50%;width:20px;height:20px;transition:border-color .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.video-controls{background:var(--cam-controls-bg);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--cam-controls-border);z-index:20;justify-content:space-between;align-items:center;padding:8px 14px;transition:transform .25s,background .3s,border-color .3s;display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(100%)}.video-controls.visible{transform:translateY(0)}@media (hover:none){.video-controls{transform:translateY(0)}}.control-group{align-items:center;gap:4px;display:flex}.control-btn{color:var(--cam-text);cursor:pointer;opacity:.7;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:7px;transition:background .15s,color .15s;display:flex}.control-btn:hover,.control-btn:active{background:var(--cam-btn-hover-bg);color:var(--cam-accent);opacity:1}.live-tag{color:var(--cam-accent);letter-spacing:3px;align-items:center;gap:7px;font-family:Courier New,Courier,monospace;font-size:9px;font-weight:700;transition:color .3s;display:flex}.live-dot{background:var(--cam-accent);width:6px;height:6px;box-shadow:var(--cam-accent-glow);border-radius:50%;transition:background .3s;animation:1.5s ease-in-out infinite livepulse}@keyframes livepulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}.blink{animation:1s step-end infinite blink}@keyframes blink{50%{opacity:0}}.scanlines{pointer-events:none;z-index:6;background:repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, var(--cam-scanline) 3px, var(--cam-scanline) 4px);position:absolute;inset:0}.vignette{pointer-events:none;z-index:4;background:radial-gradient(ellipse at center, transparent 60%, var(--cam-vignette) 100%);transition:background .3s;position:absolute;inset:0}@media (width<=480px){.corner{width:14px;height:14px}.cam-name{font-size:10px}.cam-timestamp{font-size:9px}.status-badge{padding:2px 7px;font-size:10px}.live-tag{letter-spacing:2px;font-size:8px}}*{box-sizing:border-box;margin:0;padding:0}:root,[data-theme=dark]{--bg-page:#050507;--bg-header:#0009;--bg-footer:transparent;--border-header:#00ff4126;--border-footer:#ffffff0d;--accent:#00ff41;--accent-dim:#00ff4199;--text-primary:#fff;--text-muted:#fff3;--text-meta:#fff6;--logo-bracket:#00ff41;--toggle-bg:#00ff4114;--toggle-border:#00ff4133;--toggle-hover:#00ff4126;--page-glow:radial-gradient(ellipse at top, #00ff410a 0%, transparent 60%);--dot-shadow:0 0 8px #00ff41, 0 0 16px #00ff4166}[data-theme=light]{--bg-page:#f0f2f0;--bg-header:#ffffffd9;--bg-footer:transparent;--border-header:#008c2433;--border-footer:#00000014;--accent:#008c24;--accent-dim:#008c2499;--text-primary:#0a0a0a;--text-muted:#0000004d;--text-meta:#00000080;--logo-bracket:#008c24;--toggle-bg:#008c240f;--toggle-border:#008c2440;--toggle-hover:#008c241f;--page-glow:radial-gradient(ellipse at top, #008c240f 0%, transparent 60%);--dot-shadow:0 0 8px #008c24, 0 0 16px #008c244d}body{background:var(--bg-page);color:var(--text-primary);min-height:100vh;font-family:Courier New,Courier,monospace;transition:background .3s,color .3s}.dashboard{background:var(--page-glow), var(--bg-page);flex-direction:column;min-height:100vh;transition:background .3s;display:flex}.dashboard-header{border-bottom:1px solid var(--border-header);background:var(--bg-header);-webkit-backdrop-filter:blur(8px);z-index:100;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:14px 24px;transition:background .3s,border-color .3s;display:flex;position:sticky;top:0}.header-left{flex-direction:column;gap:2px;display:flex}.header-logo{letter-spacing:4px;color:var(--text-primary);font-size:20px;font-weight:900;transition:color .3s}.logo-bracket{color:var(--logo-bracket);font-weight:400;transition:color .3s}.header-subtitle{letter-spacing:5px;color:var(--accent-dim);font-size:9px;transition:color .3s}.header-right{flex-flow:wrap;align-items:center;gap:16px;display:flex}.header-status{align-items:center;gap:8px;display:flex}.status-dot{background:var(--accent);width:8px;height:8px;box-shadow:var(--dot-shadow);border-radius:50%;transition:background .3s;animation:2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.status-text{letter-spacing:2px;color:var(--accent);font-size:11px;transition:color .3s}.camera-count{letter-spacing:3px;color:var(--text-meta);font-size:9px;transition:color .3s}.theme-toggle{background:var(--toggle-bg);border:1px solid var(--toggle-border);color:var(--accent);letter-spacing:2px;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:6px;align-items:center;gap:7px;padding:6px 12px;font-family:Courier New,Courier,monospace;font-size:9px;font-weight:700;transition:background .2s,border-color .2s,color .3s;display:flex}.theme-toggle:hover{background:var(--toggle-hover);border-color:var(--accent)}.camera-grid{flex:1;grid-template-columns:1fr 1fr;align-items:start;gap:20px;padding:24px;display:grid}.dashboard-footer{letter-spacing:3px;color:var(--text-muted);border-top:1px solid var(--border-footer);flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;padding:12px 24px;font-size:9px;transition:color .3s,border-color .3s;display:flex}.footer-dot{color:var(--accent-dim);transition:color .3s}@media (width<=768px){.camera-grid{grid-template-columns:1fr;gap:16px;padding:16px}.dashboard-header{padding:12px 16px}.header-logo{letter-spacing:3px;font-size:16px}}@media (width<=480px){.camera-grid{gap:12px;padding:12px}.header-right{gap:10px}.camera-count{display:none}}