:root{--color-neutral-0: #ffffff;--color-neutral-50: #f7f8fa;--color-neutral-100: #eef0f3;--color-neutral-200: #e2e6ea;--color-neutral-300: #cbd2da;--color-neutral-400: #9aa4b2;--color-neutral-500: #6b7480;--color-neutral-700: #3a414b;--color-neutral-900: #171a1f;--color-primary: #2563eb;--color-primary-strong: #1d4ed8;--color-primary-soft: #eef4ff;--color-secondary: #64748b;--color-accent: #06b6d4;--color-success: #16a34a;--color-danger: #dc2626;--color-warning: #d97706;--bg: var(--color-neutral-50);--surface: var(--color-neutral-0);--surface-muted: var(--color-neutral-100);--border: var(--color-neutral-200);--text: var(--color-neutral-900);--text-muted: var(--color-neutral-500);--text-on-primary: #ffffff;--glass-bg: rgba(255, 255, 255, .72);--glass-border: rgba(255, 255, 255, .55);--glass-blur: 16px;--shadow-color: 220 25% 20%;--shadow-sm: 0 1px 2px hsl(var(--shadow-color) / .1);--shadow-md: 0 4px 12px hsl(var(--shadow-color) / .12);--shadow-lg: 0 12px 32px hsl(var(--shadow-color) / .18);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-pill: 100vw;--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--text-xs: clamp(.66rem, .63rem + .14vw, .74rem);--text-sm: clamp(.74rem, .7rem + .18vw, .84rem);--text-base: clamp(.84rem, .8rem + .2vw, .95rem);--text-lg: clamp(1rem, .92rem + .4vw, 1.2rem);--text-xl: clamp(1.25rem, 1.05rem + .8vw, 1.7rem);--leading: 1.5;--weight-normal: 400;--weight-medium: 500;--weight-bold: 700;--space-2xs: clamp(.25rem, .22rem + .15vw, .4rem);--space-xs: clamp(.4rem, .34rem + .3vw, .65rem);--space-sm: clamp(.6rem, .5rem + .45vw, .95rem);--space-md: clamp(.9rem, .74rem + .7vw, 1.45rem);--space-lg: clamp(1.3rem, 1.05rem + 1.1vw, 2.2rem);--space-xl: clamp(2rem, 1.55rem + 2vw, 3.6rem);--dur-fast: .15s;--dur: .2s;--dur-slow: .25s;--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-out: cubic-bezier(.22, 1, .36, 1);--bp-tablet: 768px;--bp-mobile: 480px;color-scheme:light}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){color-scheme:dark;--bg: #0f1216;--surface: #171b21;--surface-muted: #1f242c;--border: #2a313a;--text: #e7eaee;--text-muted: #99a2ad;--color-primary-soft: #16263f;--glass-bg: rgba(23, 27, 33, .72);--glass-border: rgba(255, 255, 255, .08);--shadow-color: 220 40% 2%}}:root[data-theme=dark]{color-scheme:dark;--bg: #0f1216;--surface: #171b21;--surface-muted: #1f242c;--border: #2a313a;--text: #e7eaee;--text-muted: #99a2ad;--color-primary-soft: #16263f;--glass-bg: rgba(23, 27, 33, .72);--glass-border: rgba(255, 255, 255, .08);--shadow-color: 220 40% 2%}:root[data-theme=light]{color-scheme:light}*,*:before,*:after{box-sizing:border-box}*{margin:0}html{font-size:clamp(.875rem,.85rem + .15vw,.9375rem);-webkit-text-size-adjust:100%}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scrollbar-gutter:stable;min-height:100dvh}img,svg,video,iframe{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit}button{cursor:pointer}h1,h2,h3{line-height:1.2;font-weight:var(--weight-bold)}:where(a,button,input,select,textarea,[tabindex],[popover]):focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-base{font-size:var(--text-base)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.muted{color:var(--text-muted);font-size:var(--text-sm)}.grid-gap{gap:var(--space-md)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--space-md)}.card{display:flex;flex-direction:column;gap:var(--space-sm);padding:clamp(var(--space-sm),4cqi,var(--space-lg));background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.card>.card-action{margin-top:auto}@supports (grid-template-rows: subgrid){.card-grid.aligned{grid-template-rows:auto 1fr auto}.card-grid.aligned>.card{display:grid;grid-row:span 3;grid-template-rows:subgrid}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-in{animation:fadeInUp var(--dur-slow) var(--ease-out) both}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.layout{display:grid;grid-template-columns:clamp(220px,20vw,280px) 1fr clamp(260px,24vw,340px);height:100dvh;animation:fadeIn var(--dur-slow) var(--ease-out) both}.sidebar{display:flex;flex-direction:column;padding:var(--space-md);background:var(--surface);overflow:hidden;container-type:inline-size;border-right:1px solid var(--border)}.right-col{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--surface);border-left:1px solid var(--border)}.right-col>.events,.right-col>.templates{flex:1 1 50%;min-height:0;display:flex;flex-direction:column;padding:var(--space-md);overflow:hidden;container-type:inline-size}.right-col>.templates{border-top:1px solid var(--border)}.main{padding:var(--space-lg);overflow-y:auto;container-type:inline-size;display:flex;flex-direction:column;gap:var(--space-md)}.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-bottom:var(--space-xs)}.sidebar-head h3{font-size:var(--text-lg)}.add-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--space-2xs);white-space:nowrap;padding:var(--space-2xs) var(--space-sm);margin-bottom:var(--space-sm);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-on-primary);background:var(--color-primary);border:1px solid var(--color-primary);border-radius:var(--radius-pill);touch-action:manipulation;transition:background var(--dur-fast),transform var(--dur-fast) var(--ease-spring)}.add-btn:hover{background:var(--color-primary-strong);transform:translateY(-1px)}.add-btn:active{transform:scale(.97)}.sidebar>input{width:100%;padding:var(--space-xs) var(--space-sm);margin-bottom:var(--space-sm);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-muted);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}.sidebar>input:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft);outline:none}.cam-list{flex:1;min-height:0;overflow-y:auto;list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-2xs)}.cam-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}.cam-list li:hover{background:var(--surface-muted)}.cam-list li.active{background:var(--color-primary);color:var(--text-on-primary)}.cam-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cam-actions{display:none;gap:var(--space-2xs);flex-shrink:0}.cam-list li:hover .cam-actions,.cam-list li.active .cam-actions{display:flex}.cam-actions button{border:none;background:transparent;color:inherit;padding:2px 4px;border-radius:var(--radius-sm);font-size:var(--text-sm);transition:transform var(--dur-fast) var(--ease-spring)}.cam-actions button:hover{transform:scale(1.2)}.net-toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);padding-top:var(--space-xs);margin-top:var(--space-xs);border-top:1px solid var(--border);font-size:var(--text-xs)}.net-toggle .seg{font-size:var(--text-xs)}.net-toggle .seg button{padding:var(--space-2xs) var(--space-sm)}.sidebar-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);padding-top:var(--space-xs);margin-top:var(--space-xs);border-top:1px solid var(--border);font-size:var(--text-xs);color:var(--text-muted)}.theme-toggle{border:none;background:transparent;font-size:1rem;line-height:1;padding:var(--space-2xs);border-radius:var(--radius-sm);transition:background var(--dur-fast),transform var(--dur-fast) var(--ease-spring)}.theme-toggle:hover{background:var(--surface-muted);transform:scale(1.15)}.btn,.primary{--btn-bg: var(--surface);--btn-fg: var(--color-primary);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);min-height:44px;padding:clamp(.5rem,.4rem + .4vw,.8rem) clamp(.8rem,.6rem + .8vw,1.3rem);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--btn-fg);background:var(--btn-bg);border:1px solid var(--color-primary);border-radius:var(--radius-pill);touch-action:manipulation;transition:transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur) var(--ease-out),background var(--dur-fast),color var(--dur-fast)}.btn:hover:not(:disabled),.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md);background:var(--color-primary-soft);will-change:transform}.btn:active:not(:disabled),.primary:active:not(:disabled){transform:translateY(0) scale(.97)}.btn:disabled,.primary:disabled{opacity:.5;cursor:default}.primary,.btn.primary{--btn-bg: var(--color-primary);--btn-fg: var(--text-on-primary)}.primary:hover:not(:disabled),.btn.primary:hover:not(:disabled){background:var(--color-primary-strong)}.main h2{font-size:var(--text-xl)}.player-wrap{position:relative;width:100%}.player{display:block;width:100%;aspect-ratio:16 / 9;border:none;background:#000;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.player-fs{position:absolute;top:var(--space-2xs);right:var(--space-2xs);z-index:2;width:2.4rem;height:2.4rem;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius-md);background:#00000073;color:#fff;font-size:1.1rem;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background var(--dur-fast),transform var(--dur-fast)}.player-fs:hover{background:#000000a6}.player-fs:active{transform:scale(.94)}.player-wrap:fullscreen{width:100%;height:100%;display:flex;background:#000}.player-wrap:fullscreen .player{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}.player-wrap:fullscreen .player-fs{top:max(var(--space-sm),env(safe-area-inset-top,0px));right:max(var(--space-sm),env(safe-area-inset-right,0px));width:3rem;height:3rem;font-size:1.4rem}.player-wrap:-webkit-full-screen{width:100%;height:100%;display:flex;background:#000}.player-wrap:-webkit-full-screen .player{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}.ptz{display:flex;gap:var(--space-lg);flex-wrap:wrap;align-items:center}.ptz-grid{display:grid;grid-template-columns:repeat(3,44px);gap:var(--space-2xs)}.ptz button,.zoom button,.presets button,.archive button{min-height:44px;padding:var(--space-xs);border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-md);touch-action:manipulation;transition:transform var(--dur-fast) var(--ease-spring),background var(--dur-fast)}.ptz button:hover:not(:disabled),.zoom button:hover:not(:disabled),.presets button:hover:not(:disabled),.archive button:hover:not(:disabled){background:var(--surface-muted);transform:translateY(-1px)}.ptz button:active,.zoom button:active,.presets button:active{transform:scale(.94)}.zoom,.presets{display:flex;flex-direction:column;gap:var(--space-2xs)}.archive{margin-top:var(--space-sm)}.archive h3{font-size:var(--text-lg);margin-bottom:var(--space-xs)}.archive .row{display:flex;gap:var(--space-sm);align-items:end;flex-wrap:wrap}.archive input{padding:var(--space-2xs) var(--space-xs);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}.archive .row button{min-height:0;padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-sm)}.segments{list-style:none;padding:0;margin-top:var(--space-sm)}.segments li{padding:var(--space-2xs) 0;border-bottom:1px solid var(--border)}.segments a{color:var(--color-primary)}.events h3{font-size:var(--text-lg);margin-bottom:var(--space-sm)}.events ul{list-style:none;padding:0;flex:1;min-height:0;overflow-y:auto}.events li{padding:var(--space-2xs) 0;border-bottom:1px solid var(--border);font-size:var(--text-sm);animation:fadeInUp var(--dur) var(--ease-out) both}.templates h3{font-size:var(--text-lg)}.tpl-list{flex:1;min-height:0;overflow-y:auto;list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-2xs)}.tpl-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}.tpl-list li:hover{background:var(--surface-muted)}.tpl-list li.active{background:var(--color-primary);color:var(--text-on-primary)}.tpl-list li:hover .cam-actions,.tpl-list li.active .cam-actions{display:flex}.view-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);flex-wrap:wrap}.view-head h2{margin:0}.rec-btn{display:inline-flex;align-items:center;gap:var(--space-2xs);padding:var(--space-2xs) var(--space-md);border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);color:var(--text);font-size:var(--text-sm);cursor:pointer;white-space:nowrap;transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast)}.rec-btn:hover:not(:disabled){background:var(--surface-muted)}.rec-btn:active:not(:disabled){transform:scale(.97)}.rec-btn:disabled{opacity:.6;cursor:progress}.rec-btn .rec-dot{width:.7em;height:.7em;border-radius:50%;background:#e5484d;flex:none}.rec-btn.recording{border-color:#e5484d;color:#e5484d;font-variant-numeric:tabular-nums}.rec-btn.recording .rec-dot{animation:rec-pulse 1.2s ease-in-out infinite}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.25}}.seg{display:inline-flex;padding:2px;background:var(--surface-muted);border:1px solid var(--border);border-radius:var(--radius-pill)}.seg button{border:none;background:transparent;color:var(--text-muted);padding:var(--space-2xs) var(--space-md);border-radius:var(--radius-pill);font-size:var(--text-sm);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast);white-space:nowrap}.seg button.active{background:var(--color-primary);color:var(--text-on-primary)}.cam-grid{flex:1;min-height:0;display:grid;gap:var(--space-2xs);align-content:center;justify-content:center;align-items:start}.grid-cam{position:relative;overflow:hidden;background:#000;border-radius:var(--radius-sm);aspect-ratio:4 / 3;cursor:pointer;transition:outline-color var(--dur-fast);outline:2px solid transparent}.grid-cam:hover{outline-color:var(--color-primary)}.grid-cam iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:none;pointer-events:none}.grid-cam-label{position:absolute;top:0;left:0;z-index:1;padding:2px var(--space-2xs);font-size:var(--text-xs);color:#fff;background:#0000008c;border-bottom-right-radius:var(--radius-sm)}.tpl-pick{max-height:40dvh;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-2xs);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-xs);margin-bottom:var(--space-sm)}.modal[popover]{top:0;right:0;bottom:0;left:0;margin:auto;width:min(90%,500px);max-height:90dvh;overflow-y:auto;overscroll-behavior:contain;padding:clamp(var(--space-md),5cqi,var(--space-lg));border:1px solid var(--glass-border);border-radius:var(--radius-lg);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));box-shadow:var(--shadow-lg);color:var(--text);opacity:0;transform:scale(.95);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-spring),overlay var(--dur) allow-discrete,display var(--dur) allow-discrete}.modal[popover]:popover-open{opacity:1;transform:scale(1);will-change:transform}@starting-style{.modal[popover]:popover-open{opacity:0;transform:scale(.95)}}.modal[popover]::backdrop{background:#0a0e1473;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity var(--dur) var(--ease-out),overlay var(--dur) allow-discrete,display var(--dur) allow-discrete}.modal[popover]:popover-open::backdrop{opacity:1}@starting-style{.modal[popover]:popover-open::backdrop{opacity:0}}.modal h3{font-size:var(--text-lg);margin-bottom:var(--space-sm)}.modal label{display:flex;flex-direction:column;gap:var(--space-2xs);font-size:var(--text-sm);margin-bottom:var(--space-sm)}.modal input{padding:var(--space-xs);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}.modal input:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft);outline:none}.modal input:disabled{background:var(--surface-muted);color:var(--text-muted)}.modal .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-sm)}.modal-actions{display:flex;align-items:center;gap:var(--space-xs);margin-top:var(--space-md);flex-wrap:wrap}.modal-actions .spacer{flex:1}.test-result{margin-top:var(--space-md);padding:var(--space-xs);font-size:var(--text-sm);text-align:center;border-radius:var(--radius-md);background:var(--surface-muted);animation:fadeIn var(--dur) var(--ease-out) both}.test-result.ok{color:var(--color-success)}.test-result.bad{color:var(--color-danger)}.err{color:var(--color-danger);font-size:var(--text-sm);margin:var(--space-2xs) 0}.events-box{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-xs) var(--space-sm);margin:var(--space-xs) 0}.events-box legend{font-size:var(--text-sm);font-weight:var(--weight-medium);padding:0 var(--space-2xs)}.events-box .muted{margin-bottom:var(--space-xs)}.events-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xs) var(--space-sm)}.event-item{display:flex;flex-direction:row;align-items:center;gap:var(--space-2xs);font-size:var(--text-sm)}.event-item input{width:auto}.event-item.disabled{color:var(--text-muted)}.caps{background:var(--surface-muted);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);margin:var(--space-xs) 0;font-size:var(--text-sm);animation:fadeInUp var(--dur) var(--ease-out) both}.caps-row{margin:var(--space-2xs) 0}.caps details{margin-top:var(--space-2xs)}.caps summary{cursor:pointer;color:var(--text-muted);font-size:var(--text-xs)}.caps-checks{margin:var(--space-2xs) 0 0;padding-left:var(--space-md);color:var(--text-muted);font-size:var(--text-xs)}.login-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--space-md)}.login-card{width:min(92vw,340px);display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-lg);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);animation:fadeInUp var(--dur-slow) var(--ease-out) both}.login-card h2{font-size:var(--text-lg);text-align:center}.login-card input{padding:var(--space-sm);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-muted)}.login-card input:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft);outline:none}.admin-layout{min-height:100dvh;display:flex;flex-direction:column}.admin-head{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border);background:var(--surface)}.admin-head>b{font-size:var(--text-base)}.admin-tabs{display:flex;gap:var(--space-2xs);flex:1}.admin-tabs button{border:none;background:transparent;color:var(--text);padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-pill);font-size:var(--text-sm);transition:background var(--dur-fast)}.admin-tabs button:hover{background:var(--surface-muted)}.admin-tabs button.active{background:var(--color-primary);color:var(--text-on-primary)}.admin-main{padding:var(--space-lg);max-width:1000px;width:100%;margin:0 auto}.admin-section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-md)}.admin-section-head h2{font-size:var(--text-lg)}.admin-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-2xs)}.admin-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}.admin-list-actions{display:flex;gap:var(--space-2xs);flex-shrink:0}.admin-list-actions .btn{min-height:0;padding:var(--space-2xs) var(--space-sm)}@media (max-width: 768px){.layout{grid-template-columns:1fr;grid-template-rows:auto auto auto;height:auto;min-height:100dvh}.sidebar{border-right:none;border-bottom:1px solid var(--border);max-height:45dvh}.right-col{border-left:none;border-top:1px solid var(--border)}.right-col>.events,.right-col>.templates{flex:none;overflow:visible}.events ul,.tpl-list{flex:none;max-height:40dvh}.cam-grid{flex:none;align-content:start}}@media (max-width: 480px){.sidebar{max-height:40dvh}.main{padding:var(--space-md)}.modal[popover]{inset:auto 0 0 0;margin:0;width:100%;max-height:88dvh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;transform:translateY(100%)}.modal[popover]:popover-open{transform:translateY(0)}@starting-style{.modal[popover]:popover-open{transform:translateY(100%)}}}