:root{--blue:#2563ff;--cyan:#06b6d4;--green:#10b981;--dark:#0f172a;--slate:#64748b;--light:#f8fafc;--border:#e2e8f0;--success:#22c55e;--warning:#f59e0b;--error:#ef4444;--brand-gradient:linear-gradient(135deg, var(--blue), var(--cyan));--bg:var(--light);--surface:#fff;--surface-2:#f1f5f9;--text:var(--dark);--muted:var(--slate);--line:var(--border);--accent:var(--blue);--radius:14px;--radius-sm:10px;--shadow-sm:0 1px 2px #0f172a0f, 0 1px 3px #0f172a0a;--shadow:0 4px 16px #0f172a14;--shadow-lg:0 12px 40px #0f172a29;--font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-head:"Inter Tight", "Inter", -apple-system, "Segoe UI", sans-serif}@font-face{font-family:Inter;src:url(/fonts/inter-var.woff2)format("woff2");font-weight:400 700;font-display:swap}@font-face{font-family:Inter Tight;src:url(/fonts/inter-tight-var.woff2)format("woff2");font-weight:600 700;font-display:swap}.btn{border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:11px 18px;font-weight:500;transition:background .15s,border-color .15s,transform 50ms;display:inline-flex}.btn:active:not(:disabled){transform:translateY(1px)}.btn:hover:not(:disabled){background:var(--surface-2)}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 1px 2px #2563ff59}.btn.primary:hover:not(:disabled){background:#1d4ed8}.btn.ghost{color:var(--slate);background:0 0;border-color:#0000}.btn.danger{color:#b91c1c;background:#fef2f2;border-color:#fecaca}.btn.small{padding:7px 13px;font-size:13px}.btn.block{width:100%;margin-top:10px;display:flex}.btn:disabled{opacity:.5;cursor:default}.pill{color:#047857;background:#ecfdf5;border-radius:999px;align-items:center;gap:6px;padding:3px 10px 3px 8px;font-size:12px;font-weight:500;display:inline-flex}.pill:before{content:"";background:currentColor;border-radius:50%;width:6px;height:6px}.pill.live{color:#1d4ed8;background:#eff6ff}.pill.pending{color:#b45309;background:#fffbeb}.pill.inactive{color:#b91c1c;background:#fef2f2}.pill.neutral{background:var(--surface-2);color:var(--slate)}h1,h2,h3,h4{font-family:var(--font-head);letter-spacing:-.02em;color:var(--text)}:root{--tabs-h:60px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);overscroll-behavior:none;-webkit-font-smoothing:antialiased;margin:0;font-size:15px;line-height:1.4}button,input,select{font-family:inherit;font-size:inherit;color:inherit}input,select{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);width:100%;margin:5px 0;padding:12px 14px;font-size:16px;transition:border-color .15s,box-shadow .15s}input:focus,select:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px #2563ff26}h2{margin:0 0 10px;font-size:20px}h3{margin:0 0 10px;font-size:17px}h4{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 6px;font-size:12px;font-weight:600}.muted{color:var(--muted)}.small{font-size:13px}.center{text-align:center}.ok{color:var(--success)}.bad{color:var(--error)}.link{color:var(--blue);cursor:pointer;background:0 0;border:none;padding:4px;font-weight:500}.error-box{border-radius:var(--radius-sm);color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;margin:10px 0;padding:10px 12px;font-size:14px}.warn{border-radius:var(--radius-sm);color:#92400e;background:#fffbeb;border:1px solid #fde68a;padding:10px 12px;font-size:14px}.empty-state{text-align:center;color:var(--muted);padding:36px 16px}.empty-state small{margin-top:8px;display:block}.splash,.login{min-height:100%;padding:24px;padding-top:calc(24px + env(safe-area-inset-top));text-align:center;background:radial-gradient(1200px 600px at 50% -10%, #e8f0ff, var(--bg) 60%);place-items:center;display:grid}.login-card{background:var(--surface);border:1px solid var(--line);width:100%;max-width:380px;box-shadow:var(--shadow);border-radius:20px;padding:28px 24px 24px}.login-card .brand-lockup{justify-content:center;margin-bottom:10px;display:flex}.brand-logo{max-width:200px;max-height:72px;margin:0 auto 8px;display:block}.company-badge{background:var(--surface-2);color:var(--text);border-radius:999px;align-items:center;gap:6px;margin:6px auto 4px;padding:5px 12px;font-size:13px;font-weight:500;display:inline-flex}.tagline{color:var(--muted);margin:6px 0 16px;font-size:14px}.shell{flex-direction:column;height:100%;display:flex}.banner{padding:7px 12px;padding-top:calc(7px + env(safe-area-inset-top));color:#92400e;text-align:center;background:#fffbeb;border-bottom:1px solid #fde68a;font-size:13px}.appbar{padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));background:var(--surface);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:10px;display:flex}.banner+.content .appbar,.banner~.content{padding-top:0}.appbar .who{color:var(--muted);font-size:13px}.content{-webkit-overflow-scrolling:touch;flex:1;min-height:0;overflow-y:auto}.tabs{height:calc(var(--tabs-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--line);display:flex}.tabs button{color:var(--muted);background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;font-size:11px;font-weight:500;display:flex}.tabs button.on{color:var(--blue)}.tab-icon{font-size:19px;line-height:1}.toast{left:50%;bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom) + 14px);background:var(--dark);color:#fff;max-width:90vw;box-shadow:var(--shadow-lg);z-index:50;border-radius:999px;padding:11px 18px;font-size:14px;position:fixed;transform:translate(-50%)}.vtile{aspect-ratio:16/9;touch-action:manipulation;background:#050b16;position:relative;overflow:hidden}.vtile video{object-fit:contain;will-change:transform;width:100%;height:100%;position:absolute;inset:0}.vtile-msg{color:#94a3b8;pointer-events:none;place-items:center;font-size:12px;display:grid;position:absolute;inset:0}.vtile-msg.bad{color:#fca5a5}.vtile-label{color:#fff;text-shadow:0 1px 3px #000000e6;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;font-size:11px;font-weight:500;position:absolute;bottom:6px;left:8px;right:8px;overflow:hidden}.live{flex-direction:column;min-height:100%;display:flex}.chips{scrollbar-width:none;gap:8px;padding:12px 14px;display:flex;overflow-x:auto}.chips::-webkit-scrollbar{display:none}.chip{border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;border-radius:999px;flex:none;padding:8px 15px;font-size:14px;font-weight:500}.chip.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 1px 3px #2563ff66}.live-grid{background:var(--dark);gap:3px;padding:3px;display:grid}.live-bar{justify-content:space-between;align-items:center;padding:14px;display:flex}.seg{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);display:inline-flex;overflow:hidden}.seg.wide{margin:6px 0;display:flex}.seg.wide button{flex:1}.seg button{cursor:pointer;background:0 0;border:none;padding:9px 16px;font-weight:500}.seg button.on{background:var(--blue);color:#fff}.pager{color:var(--muted);align-items:center;gap:10px;font-size:14px;display:flex}.pager button{border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);cursor:pointer;width:40px;height:38px;font-size:20px;line-height:1}.pager button:disabled{opacity:.4}.cv-header{background:var(--surface);border-bottom:1px solid var(--line);align-items:center;gap:8px;padding:10px 12px;display:flex}.cv-title{text-align:center;flex:1;font-weight:600}.cv-title small{color:var(--muted);font-weight:400;display:block}.icon-btn{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:999px;width:40px;height:40px;font-size:20px;line-height:1}.icon-btn.star.on{color:var(--warning);background:#fffbeb;border-color:#fde68a}.cv-video{background:var(--dark);position:relative}.cv-nav{color:#fff;cursor:pointer;background:#0f172a8c;border:none;width:36px;height:56px;font-size:24px;position:absolute;top:50%;transform:translateY(-50%)}.cv-nav.left{border-radius:0 10px 10px 0;left:0}.cv-nav.right{border-radius:10px 0 0 10px;right:0}.cv-actions{justify-content:center;gap:12px;padding:16px;display:flex}.action{border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);min-width:88px;box-shadow:var(--shadow-sm);cursor:pointer;flex-direction:column;align-items:center;gap:5px;padding:13px 10px;display:flex}.action b{font-size:18px;font-weight:600}.action span{color:var(--muted);font-size:12px}.action.on{border-color:var(--blue);color:var(--blue);background:#eff6ff}.hint{text-align:center;color:var(--muted);padding:0 16px;font-size:12px}.ev-big{background:var(--dark);width:100%;display:block}.playback{padding-bottom:16px}.pb-controls{grid-template-columns:1fr 155px;gap:8px;padding:12px 14px;display:grid}.pb-video{background:var(--dark);position:relative}.pb-clock{color:#fff;font-variant-numeric:tabular-nums;background:#0f172abf;border-radius:999px;padding:3px 10px;font-size:13px;position:absolute;top:8px;right:10px}.pb-buttons{justify-content:space-around;padding:12px 10px;display:flex}.pb-buttons button{border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);cursor:pointer;min-width:58px;padding:10px 6px;font-weight:500}.pb-buttons button:disabled{opacity:.4}.timeline{padding:0 14px}.tl-bar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);touch-action:none;height:56px;position:relative;overflow:hidden}.tl-block{background:var(--blue);opacity:.75;border-radius:3px;min-width:1px;height:22px;position:absolute;top:9px}.tl-block.motion{background:var(--warning)}.tl-block.alarm{background:var(--error)}.tl-tick{border-left:1px solid var(--border);position:absolute;top:0;bottom:0}.tl-tick span{color:var(--muted);font-size:10px;position:absolute;bottom:4px;left:4px}.tl-cursor{background:var(--dark);width:2px;margin-left:-1px;position:absolute;top:0;bottom:0}.tl-zoom{align-items:center;gap:6px;padding:10px 0;display:flex}.tl-zoom button{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:999px;padding:6px 13px;font-size:13px}.tl-zoom button.on{background:var(--blue);border-color:var(--blue);color:#fff}.tl-hover{font-variant-numeric:tabular-nums;color:var(--muted);margin-left:auto}.pb-list{padding:0 14px}.pb-item{border:none;border-bottom:1px solid var(--line);text-align:left;font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;align-items:center;gap:10px;width:100%;padding:12px 4px;display:flex}.tag{color:#1d4ed8;background:#eff6ff;border-radius:999px;margin-left:auto;padding:3px 10px;font-size:11px;font-weight:500}.tag.motion{color:#b45309;background:#fffbeb}.tag.line,.tag.intrusion,.tag.alarm{color:#b91c1c;background:#fef2f2}.events{padding:14px}.events-head{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.event-list{margin:0;padding:0;list-style:none}.event-list li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);cursor:pointer;gap:12px;margin-bottom:10px;padding:10px;display:flex}.event-list img,.event-list .noimg{aspect-ratio:16/9;object-fit:cover;background:var(--dark);border-radius:8px;flex:none;width:116px}.event-list .tag{margin-left:0}.ev-cam{margin:5px 0 2px;font-size:14px;font-weight:500}.settings{padding:14px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:14px;padding:16px}.row{justify-content:space-between;align-items:center;gap:8px;display:flex}.row.gap{gap:10px}.row.end{justify-content:flex-end;margin-top:16px}.row label{color:var(--muted);flex:1;font-size:13px}.checks{grid-template-columns:1fr 1fr;display:grid}.check{align-items:center;gap:9px;padding:7px 0;font-size:14px;display:flex}.check input{width:19px;height:19px;accent-color:var(--blue);margin:0}.scope-dvr{border-left:2px solid var(--line);margin:4px 0;padding-left:10px}.scope-cams{grid-template-columns:1fr 1fr;padding-left:12px;display:grid}.days{gap:5px;margin:8px 0;display:flex}.days button{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:8px;flex:1;padding:9px 0;font-size:12px;font-weight:500}.days button.on{background:var(--blue);border-color:var(--blue);color:#fff}.switch{width:50px;height:30px;position:relative;flex:none!important}.switch input{opacity:0;width:0;height:0}.switch span{cursor:pointer;background:#cbd5e1;border-radius:999px;transition:background .2s;position:absolute;inset:0}.switch span:after{content:"";width:24px;height:24px;box-shadow:var(--shadow-sm);background:#fff;border-radius:50%;transition:transform .2s;position:absolute;top:3px;left:3px}.switch input:checked+span{background:var(--success)}.switch input:checked+span:after{transform:translate(20px)}.user-list,.company-list{margin:10px 0 0;padding:0;list-style:none}.user-list li{border-bottom:1px solid var(--line);cursor:pointer;justify-content:space-between;padding:12px 0;display:flex}.company-list li{border-bottom:1px solid var(--line);cursor:pointer;align-items:center;gap:12px;padding:14px 2px;display:flex}.grow{flex:1;min-width:0}.dot{background:var(--error);border-radius:50%;flex:none;width:9px;height:9px;box-shadow:0 0 0 3px #ef444426}.dot.on{background:var(--success);box-shadow:0 0 0 3px #22c55e2e}.add-company{border-bottom:1px solid var(--line);padding:12px 0}.status-list{gap:5px;font-size:14px;display:grid}.keybox{border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line);word-break:break-all;-webkit-user-select:all;user-select:all;margin:10px 0;padding:13px;font-family:ui-monospace,Consolas,monospace;font-size:13px}code{background:var(--surface-2);border-radius:5px;padding:2px 6px;font-family:ui-monospace,Consolas,monospace;font-size:.92em}.sheet{z-index:40;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0f172a73;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet-body{width:100%;max-height:88vh;padding:20px 16px calc(20px + env(safe-area-inset-bottom));background:var(--surface);box-shadow:var(--shadow-lg);border-radius:20px 20px 0 0;overflow-y:auto}@media (width>=720px){.content>*{max-width:920px;margin:0 auto}}