@import"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";:root{--main-color: 148, 163, 184;--accent: rgb(var(--main-color));--panel: linear-gradient(160deg, #161616 0%, #0d0d0d 55%, #070707 100%);--line: rgba(255, 255, 255, .09);--line-soft: rgba(255, 255, 255, .06);--fill: rgba(255, 255, 255, .04);--fill-hover: rgba(255, 255, 255, .08);--txt: #ffffff;--txt-mute: rgba(255, 255, 255, .6);--txt-dim: rgba(255, 255, 255, .4);--danger: 229, 72, 77;--success: 52, 211, 153;--warning: 234, 179, 8;--smooth: cubic-bezier(.22, 1, .36, 1);--spring: cubic-bezier(.34, 1.56, .64, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;outline:none;border:none;-webkit-user-select:none;user-select:none;font-family:Montserrat,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}html,body,#root{width:100%;height:100%}body{background:#050505;color:var(--txt);overflow:hidden}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:#ffffff08;border-radius:8px}::-webkit-scrollbar-thumb{background:rgba(var(--main-color),.55);border-radius:8px}::-webkit-scrollbar-thumb:hover{background:rgba(var(--main-color),.85)}input{background:transparent;color:var(--txt)}input::placeholder{color:var(--txt-dim)}button{font:inherit;color:inherit;background:none;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}code{font-family:Consolas,monospace;font-size:11px;color:var(--accent)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px) scale(.96);filter:blur(4px)}60%{filter:blur(0)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.88)}60%{transform:scale(1.02)}to{opacity:1;transform:scale(1)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}@keyframes rowIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}.anim-fade{animation:fadeIn .3s ease both}.anim-fade-up{animation:fadeInUp .55s var(--smooth) both;animation-delay:var(--row-stagger, 0s)}.anim-scale{animation:scaleIn .4s var(--spring) both}.anim-slide-left{animation:slideInLeft .45s var(--smooth) both}.spin{display:inline-flex;animation:spin .9s linear infinite}.card-hover{transition:transform .35s var(--smooth),border-color .3s ease,box-shadow .4s ease;will-change:transform}.card-hover:hover{transform:translateY(-4px);border-color:#ffffff38!important;box-shadow:0 14px 24px -10px #0009,0 4px 8px -4px #0006}.btn-press{transition:transform .15s ease,filter .2s ease,box-shadow .25s ease,background .2s ease,border-color .2s ease,color .2s ease}.btn-press:hover:not(:disabled){filter:brightness(1.1)}.btn-press:active:not(:disabled){transform:scale(.96)}.spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.15);border-top-color:var(--accent);animation:spin .8s linear infinite}.spinner.large{width:34px;height:34px;border-width:3px}.boot-screen{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.boot-text{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--txt-dim);animation:pulse 1.6s ease infinite}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;padding:6px;animation:fadeIn .25s ease}.container{position:relative;flex:1;min-width:0;display:flex;background:#ffffff1a;clip-path:polygon(26px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 26px),calc(100% - 26px) 100%,12px 100%,0 calc(100% - 12px),0 26px);filter:drop-shadow(0 24px 48px rgba(0,0,0,.55));animation:scaleIn .35s var(--spring)}.container-inner{position:relative;flex:1;min-width:0;margin:1px;display:flex;background:var(--panel);clip-path:polygon(25px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 25px),calc(100% - 25px) 100%,11px 100%,0 calc(100% - 11px),0 25px);overflow:hidden}.container:after{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);pointer-events:none}.main-area{flex:1;min-width:0;display:flex;flex-direction:column}.sidebar{position:relative;z-index:30;width:72px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:20px 0 22px;background:linear-gradient(180deg,#00000080,#00000047);border-right:1px solid var(--line-soft)}.sidebar-nav{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px}.hex-close{margin-top:auto}.hex-btn{position:relative;width:46px;height:52px;padding:0;cursor:pointer;color:var(--txt-mute);animation:hexIn .45s var(--spring) both;animation-delay:var(--stagger, 0s)}@keyframes hexIn{0%{opacity:0;transform:translate(-16px) scale(.7)}to{opacity:1;transform:translate(0) scale(1)}}.hex-shape,.hex-shape:before,.hex-shape:after{clip-path:polygon(50% 0%,96% 25%,96% 75%,50% 100%,4% 75%,4% 25%);transition:background .25s ease}.hex-shape{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#ffffff52,#ffffff1a 40%,#ffffff0a)}.hex-shape:before{content:"";position:absolute;top:1.5px;right:1.5px;bottom:1.5px;left:1.5px;background:#08080a}.hex-shape:after{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;background:linear-gradient(180deg,#232327,#141417 55%,#0e0e10)}.hex-icon{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:2;transition:color .25s ease,transform .2s ease}.hex-icon svg{width:20px;height:20px;display:block}.hex-btn:hover .hex-shape{background:linear-gradient(180deg,rgba(var(--main-color),.9),rgba(var(--main-color),.35))}.hex-btn:hover .hex-shape:after{background:linear-gradient(180deg,color-mix(in srgb,rgb(var(--main-color)) 14%,#111),#0c0c0e)}.hex-btn:hover .hex-icon{color:rgb(var(--main-color));transform:scale(1.12)}.hex-btn:active .hex-icon{transform:scale(.94)}.hex-btn.active .hex-shape,.hex-btn.active .hex-shape:before,.hex-btn.active .hex-shape:after{background:rgb(var(--main-color))}.hex-btn.active .hex-icon{color:#0b0b0c}.hex-close:hover .hex-icon{transform:scale(1.12) rotate(-8deg)}.hex-tooltip{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%) translate(-6px);background:#0c0c0cf7;border:1px solid rgba(var(--main-color),.4);border-radius:8px;padding:7px 13px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--txt);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .25s var(--spring);z-index:50;box-shadow:0 8px 20px #0009}.hex-tooltip:before{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:rgba(var(--main-color),.4)}.hex-btn:hover .hex-tooltip{opacity:1;transform:translateY(-50%) translate(0)}.ui-header{position:relative;z-index:2;padding:18px 26px 14px;border-bottom:1px solid var(--line)}.ui-header-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.ui-titles{display:flex;flex-direction:column;gap:3px}.ui-title{font-size:24px;font-weight:900;line-height:1.15;letter-spacing:1.5px;background:linear-gradient(100deg,#fff 30%,rgb(var(--main-color)),#fff 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:titleShine 4s ease-in-out infinite}@keyframes titleShine{0%,to{background-position:0% 0}50%{background-position:100% 0}}.ui-subtitle{font-size:11px;font-weight:500;color:var(--txt-dim);letter-spacing:.3px}.header-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;border:1px solid rgba(var(--main-color),.35);background:rgba(var(--main-color),.1);font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}.tab-content{position:relative;z-index:2;flex:1;min-height:0;display:flex;padding:16px 18px 18px}.tab-pane{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}.field-label{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--txt-dim)}.field-hint{font-size:11px;font-weight:500;color:var(--txt-dim);line-height:1.5}.counter{padding:1px 7px;border-radius:999px;background:rgba(var(--main-color),.14);border:1px solid rgba(var(--main-color),.35);color:rgb(var(--main-color));font-size:9px;letter-spacing:1px}.section-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.side-hint{font-size:10.5px;font-weight:500;color:var(--txt-dim);line-height:1.5;margin-top:10px}.empty-state{margin:auto;text-align:center;display:flex;flex-direction:column;gap:8px}.empty-state h2{font-size:16px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}.empty-state p{font-size:12px;color:var(--txt-mute)}.btn-primary{border-radius:10px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(180deg,color-mix(in srgb,rgb(var(--main-color)) 82%,#fff),rgb(var(--main-color)) 45%,color-mix(in srgb,rgb(var(--main-color)) 70%,#000));color:#0b0b0c;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;transition:filter .2s ease,transform .15s ease;box-shadow:inset 0 1px #ffffff59;padding:12px 40px}.btn-primary:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-1px)}.btn-primary:active:not(:disabled){transform:scale(.97)}.btn-primary:disabled{background:#ffffff0f;color:var(--txt-dim);box-shadow:none;opacity:1}.btn-ghost{display:inline-flex;align-items:center;gap:8px;height:34px;border-radius:10px;border:1px solid rgba(var(--main-color),.4);background:rgba(var(--main-color),.12);color:rgb(var(--main-color));font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:0 16px}.btn-ghost svg{width:16px;height:16px}.btn-ghost:hover{background:rgba(var(--main-color),.22);border-color:rgba(var(--main-color),.6)}.icon-button,.mini-button{position:relative;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--line);background:var(--fill);color:var(--txt-mute)}.mini-button{width:28px;height:28px;border-radius:8px}.icon-button svg{width:18px;height:18px}.mini-button svg{width:14px;height:14px}.icon-button:hover:not(:disabled),.mini-button:hover:not(:disabled){color:rgb(var(--main-color));border-color:rgba(var(--main-color),.45);background:rgba(var(--main-color),.1)}.icon-button.danger{color:rgb(var(--danger));border-color:rgba(var(--danger),.5);background:rgba(var(--danger),.14);animation:pulse 1.6s ease infinite}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px);background:#0c0c0cf7;border:1px solid rgba(var(--main-color),.35);border-radius:7px;padding:5px 10px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;color:var(--txt);opacity:0;pointer-events:none;transition:opacity .15s ease,transform .2s var(--spring);z-index:60}[data-tooltip]:hover:after{opacity:1;transform:translate(-50%) translateY(0)}.toolbar-actions{display:flex;align-items:center;gap:8px}.live-tab{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}.live-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.segmented{display:flex;gap:4px;padding:4px;border-radius:12px;background:#00000059;border:1px solid var(--line-soft)}.segmented-button{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;border-radius:8px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--txt-mute);animation:rowIn .35s var(--spring) both;animation-delay:var(--option-stagger, 0s)}.segmented-button svg{width:16px;height:16px}.segmented-button:hover{color:var(--txt);background:var(--fill-hover)}.segmented-button.active{background:rgb(var(--main-color));color:#0b0b0c;box-shadow:inset 0 1px #ffffff59}.camera-wall{flex:1;min-height:0;display:grid;gap:10px}.camera-wall.layout-grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.camera-wall.layout-focus{grid-template-columns:1fr;grid-template-rows:1fr}.camera-wall.layout-highlight{grid-template-columns:3fr 1fr;grid-template-rows:repeat(3,1fr);grid-template-areas:"main side0" "main side1" "main side2"}.layout-highlight .slot-main{grid-area:main}.layout-highlight .slot-side-0{grid-area:side0}.layout-highlight .slot-side-1{grid-area:side1}.layout-highlight .slot-side-2{grid-area:side2}.wall-slot{min-width:0;min-height:0;display:flex}.camera-tile{position:relative;flex:1;min-width:0;overflow:hidden;background:#000;border:1px solid var(--line);border-radius:12px;animation:scaleIn .45s var(--spring) both;animation-delay:var(--stagger, 0s);transition:border-color .25s ease,box-shadow .3s ease}.camera-tile.is-main{border-color:rgba(var(--main-color),.35)}.camera-tile.is-zoomed{cursor:grab}.camera-tile.is-zoomed:active{cursor:grabbing}.camera-tile.has-motion{border-color:rgba(var(--warning),.85);box-shadow:inset 0 0 0 2px rgba(var(--warning),.65),0 0 24px -6px rgba(var(--warning),.5)}.camera-video{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;transform-origin:center;transition:transform .12s ease-out}.camera-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--txt-dim);background:repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 12px,transparent 12px 24px)}.camera-badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;align-items:center;z-index:3}.camera-name{display:inline-flex;align-items:center;gap:8px;padding:5px 11px 5px 5px;border-radius:999px;background:#0009;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase}.camera-index{width:20px;height:20px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(var(--main-color),.9);color:#0b0b0c;font-size:10px;font-weight:900;letter-spacing:0}.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:6px;font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;border:1px solid}.badge-motion{color:rgb(var(--warning));border-color:rgba(var(--warning),.55);background:rgba(var(--warning),.15);animation:scaleIn .3s var(--spring) both}.badge-rec{position:absolute;top:12px;right:12px;z-index:3;color:#fff;border-color:rgba(var(--danger),.9);background:rgba(var(--danger),.75)}.badge-rec:before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.2s ease infinite}.badge-muted{color:var(--txt-dim);border-color:var(--line);background:var(--fill)}.zoom-pill{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#000000a6;border:1px solid rgba(var(--main-color),.45);font-size:11px;font-weight:800;color:rgb(var(--main-color))}.zoom-pill svg{width:14px;height:14px}.camera-offline{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;background:#0000008c;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--txt-mute);animation:fadeIn .3s ease both}.ptz-pad{position:absolute;left:14px;bottom:14px;z-index:3;width:104px;height:104px;opacity:0;transform:scale(.9);transition:opacity .25s ease,transform .3s var(--spring)}.camera-tile:hover .ptz-pad{opacity:1;transform:scale(1)}.ptz-button{position:absolute;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:#0009;border:1px solid rgba(255,255,255,.14);color:var(--txt-mute)}.ptz-button svg{width:16px;height:16px}.ptz-button:hover{color:rgb(var(--main-color));border-color:rgba(var(--main-color),.5)}.ptz-button.up{top:0;left:35px}.ptz-button.down{bottom:0;left:35px}.ptz-button.left{left:0;top:35px}.ptz-button.right{right:0;top:35px}.dropdown{position:relative}.dropdown-trigger{width:100%;height:34px;padding:0 10px 0 12px;display:flex;align-items:center;justify-content:space-between;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:#ffffff0d;font-size:12px;font-weight:600;transition:border-color .2s ease,background .2s ease}.dropdown.open .dropdown-trigger,.dropdown-trigger:hover{border-color:rgba(var(--main-color),.6);background:rgba(var(--main-color),.08)}.dropdown-chevron{display:inline-flex;transition:transform .35s var(--spring)}.dropdown-chevron svg{width:16px;height:16px}.dropdown.open .dropdown-chevron{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;padding:5px;border-radius:10px;background:#0c0c0cfa;border:1px solid rgba(var(--main-color),.35);box-shadow:0 14px 30px #0009;animation:scaleIn .28s var(--spring) both;transform-origin:top}.dropdown-item{width:100%;text-align:left;padding:8px 10px;border-radius:7px;font-size:12px;font-weight:600;color:var(--txt-mute);animation:rowIn .3s var(--smooth) both;animation-delay:var(--option-stagger, 0s)}.dropdown-item:hover{background:var(--fill-hover);color:var(--txt)}.dropdown-item.active{background:rgb(var(--main-color));color:#0b0b0c}.recordings-tab{flex:1;min-height:0;display:flex;gap:16px}.recordings-side{width:280px;flex-shrink:0;min-height:0;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;background:#0000004d;border:1px solid var(--line-soft)}.side-header{display:flex;align-items:center;justify-content:space-between;margin-top:6px}.day-chips{display:flex;flex-wrap:wrap;gap:6px}.hour-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));max-height:168px;overflow-y:auto}.hour-chips .chip{font-variant-numeric:tabular-nums;text-align:center}.chip{padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--fill);font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:capitalize;color:var(--txt-mute);animation:rowIn .3s var(--spring) both;animation-delay:var(--option-stagger, 0s)}.chip:hover{color:var(--txt);border-color:rgba(var(--main-color),.4)}.chip.active{background:rgb(var(--main-color));border-color:transparent;color:#0b0b0c}.time-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding-right:4px}.time-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-radius:8px;border:1px solid transparent;background:var(--fill);text-align:left;animation:rowIn .35s var(--smooth) both;animation-delay:var(--row-stagger, 0s);transition:background .15s ease,border-color .15s ease}.time-row:hover{background:var(--fill-hover);border-color:var(--line)}.time-row.active{background:rgba(var(--main-color),.16);border-color:rgba(var(--main-color),.55)}.time-range{font-family:Consolas,monospace;font-size:12px;font-weight:700;color:var(--txt)}.time-sep{margin:0 6px;color:var(--txt-dim)}.time-meta{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:var(--txt-dim)}.list-message{padding:14px 6px;font-size:11px;color:var(--txt-dim)}.list-message.error{color:rgb(var(--danger))}.player{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}.player-screen{position:relative;flex:1;min-height:0;border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--line)}.player-video{width:100%;height:100%;object-fit:contain;display:block}.player-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none}.placeholder-title{font-size:14px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--txt-mute)}.placeholder-hint{font-size:11px;color:var(--txt-dim);animation:pulse 2.4s ease infinite}.player-caption{position:absolute;top:12px;left:12px;padding:6px 12px;border-radius:999px;background:#0009;border:1px solid rgba(255,255,255,.12);font-size:11px;font-weight:700;letter-spacing:.5px;pointer-events:none}.player-controls{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:#00000059;border:1px solid var(--line-soft)}.control-button{position:relative;width:36px;height:36px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;color:var(--txt-mute)}.control-button svg{width:18px;height:18px}.control-button:hover:not(:disabled){color:rgb(var(--main-color));background:var(--fill-hover)}.control-button.active-sound{color:rgb(var(--main-color));background:rgba(var(--main-color),.12)}.control-button.primary{background:rgb(var(--main-color));color:#0b0b0c;box-shadow:inset 0 1px #ffffff59}.control-button.primary:hover{color:#0b0b0c;background:rgb(var(--main-color))}.player-time{width:104px;flex-shrink:0;text-align:center;font-family:Consolas,monospace;font-size:12px;font-weight:700;color:var(--txt-mute)}.seek-bar,.range-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;height:6px;border-radius:999px;background:linear-gradient(90deg,rgb(var(--main-color)) var(--fill, 0%),rgba(255,255,255,.1) var(--fill, 0%));cursor:pointer}.range-input{width:100%;background:#ffffff1a}.seek-bar::-webkit-slider-thumb,.range-input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid rgb(var(--main-color));box-shadow:0 2px 6px #00000080;transition:transform .2s var(--spring)}.seek-bar:hover::-webkit-slider-thumb,.range-input:hover::-webkit-slider-thumb{transform:scale(1.25)}.seek-bar:disabled{opacity:.35;cursor:default}.speed-button{width:44px;height:30px;flex-shrink:0;border-radius:8px;border:1px solid rgba(var(--main-color),.4);background:rgba(var(--main-color),.12);color:rgb(var(--main-color));font-size:11px;font-weight:800}.player-notice{padding:9px 12px;border-radius:10px;border:1px solid rgba(var(--main-color),.3);background:rgba(var(--main-color),.08);font-size:11px;font-weight:600;color:var(--txt-mute);word-break:break-all}.photos-tab{flex:1;min-height:0;display:flex;flex-direction:column}.photo-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;align-content:start;padding:4px 4px 4px 0}.photo-card{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid var(--line-soft);background:var(--fill);text-align:left;animation:fadeInUp .45s var(--smooth) both;animation-delay:var(--row-stagger, 0s)}.photo-card img{width:100%;aspect-ratio:16 / 9;object-fit:cover;display:block;background:#000}.photo-info{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;font-size:10.5px;color:var(--txt-dim)}.photo-info strong{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--txt)}.viewer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#000000e0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.viewer-image{max-width:92vw;max-height:84vh;border-radius:10px;box-shadow:0 30px 60px #000000b3}.viewer-close{position:absolute;top:22px;right:22px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--line);background:#00000080}.viewer-close svg{width:18px;height:18px}.hint-pill{position:absolute;bottom:26px;left:50%;transform:translate(-50%);padding:9px 18px;border-radius:999px;background:#00000073;border:1px solid rgba(255,255,255,.12);font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--txt-mute);white-space:nowrap}.status-tab{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}.status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-bottom:14px}.status-card{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:12px;border:1px solid var(--line-soft);background:var(--fill);animation:fadeInUp .45s var(--smooth) both;animation-delay:var(--row-stagger, 0s)}.status-card-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}.status-title{font-size:14px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}.status-ip{font-family:Consolas,monospace;font-size:11px;color:var(--txt-dim)}.status-line{display:grid;grid-template-columns:12px 110px 1fr;align-items:center;gap:8px;font-size:12px}.status-key{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--txt-dim)}.status-value{font-weight:600;color:var(--txt-mute)}.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}.dot.ok{background:rgb(var(--success));box-shadow:0 0 10px rgba(var(--success),.6)}.dot.warn{background:rgb(var(--warning))}.dot.bad{background:rgb(var(--danger));box-shadow:0 0 10px rgba(var(--danger),.6);animation:pulse 1.4s ease infinite}.dot.rec{background:rgb(var(--danger));animation:pulse 1.2s ease infinite}.dot.muted{background:#ffffff2e}.settings-tab{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}.settings-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding-right:6px}.settings-section{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:12px;border:1px solid var(--line-soft);background:#00000040}.section-title{font-size:12px;font-weight:900;letter-spacing:2.5px;text-transform:uppercase;color:rgb(var(--main-color))}.camera-rows{display:flex;flex-direction:column;gap:8px}.camera-row{display:grid;grid-template-columns:24px 1fr 1fr;gap:10px;align-items:center}.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px 18px}.form-field{display:flex;flex-direction:column;gap:7px}.text-input{height:34px;padding:0 11px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#ffffff0d;font-size:12px;font-weight:500;color:var(--txt);-webkit-user-select:text;user-select:text;transition:border-color .2s ease,background .2s ease}.text-input.mono{font-family:Consolas,monospace}.text-input:focus{border-color:var(--accent);background:#ffffff12}.accent-options{display:flex;flex-wrap:wrap;gap:10px}.accent-swatch{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 8px;border-radius:999px;border:1px solid var(--line);background:var(--fill);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--txt-mute)}.swatch-dot{width:20px;height:20px;border-radius:50%;background:rgb(var(--swatch));box-shadow:inset 0 1px #ffffff59}.accent-swatch.active{border-color:rgb(var(--swatch));color:var(--txt);background:rgba(var(--swatch),.12)}.toggle{position:relative;width:46px;height:26px;border-radius:999px;background:#ffffff1a;border:1px solid var(--line)}.toggle-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .35s var(--spring)}.toggle.on{background:rgb(var(--main-color))}.toggle.on .toggle-knob{transform:translate(20px)}.settings-footer{display:flex;align-items:center;justify-content:flex-end;gap:14px}.save-message{font-size:11px;font-weight:700;animation:fadeIn .3s ease}.save-message.ok{color:rgb(var(--success))}.save-message.bad{color:rgb(var(--danger))}.toast{position:fixed;bottom:34px;left:50%;z-index:200;transform:translate(-50%);padding:11px 22px;border-radius:999px;background:#0c0c0cf5;border:1px solid rgba(var(--main-color),.45);box-shadow:0 14px 30px #0009;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;animation:toastIn .4s var(--spring) both}.toast.rec{border-color:rgba(var(--danger),.7);color:rgb(var(--danger))}.toast.bad{border-color:rgba(var(--danger),.7)}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(16px) scale(.9)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}.help-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:150;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.help-card{width:460px;padding:24px 26px;border-radius:14px;background:var(--panel);border:1px solid rgba(var(--main-color),.3);box-shadow:0 30px 60px #000000b3}.help-title{font-size:18px;font-weight:900;letter-spacing:2px;margin-bottom:16px;color:rgb(var(--main-color))}.shortcut-list{display:flex;flex-direction:column;gap:7px}.shortcut-row{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:12px;font-size:12px;font-weight:600;color:var(--txt-mute);animation:rowIn .3s var(--smooth) both;animation-delay:var(--row-stagger, 0s)}kbd{justify-self:start;padding:4px 9px;border-radius:6px;border:1px solid rgba(var(--main-color),.4);background:rgba(var(--main-color),.1);font-family:Consolas,monospace;font-size:11px;font-weight:700;color:var(--txt)}.login-page{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 50% 30%,rgba(var(--main-color),.08),transparent 60%),#050505}.login-card{width:min(400px,100%);background:#ffffff1a;clip-path:polygon(22px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 22px),calc(100% - 22px) 100%,10px 100%,0 calc(100% - 10px),0 22px);filter:drop-shadow(0 24px 48px rgba(0,0,0,.55))}.login-card-inner{margin:1px;display:flex;flex-direction:column;gap:16px;padding:30px 28px;background:var(--panel);clip-path:polygon(21px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 21px),calc(100% - 21px) 100%,9px 100%,0 calc(100% - 9px),0 21px)}.login-card .ui-subtitle{margin-top:-10px;margin-bottom:4px}.login-card .btn-primary{margin-top:6px}.login-error{padding:9px 12px;border-radius:8px;border:1px solid rgba(var(--danger),.5);background:rgba(var(--danger),.12);color:rgb(var(--danger));font-size:12px;font-weight:600}.tile-actions{position:absolute;top:10px;right:10px;z-index:3;display:flex;gap:6px}.tile-button{position:relative;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:#0009;border:1px solid rgba(255,255,255,.14);color:var(--txt-mute)}.tile-button svg{width:17px;height:17px}.tile-button:hover{color:rgb(var(--main-color));border-color:rgba(var(--main-color),.5)}.tile-button.on{color:#0b0b0c;background:rgb(var(--main-color));border-color:transparent}.tile-button[data-tooltip]:after{bottom:auto;top:calc(100% + 8px)}.btn-primary.compact{padding:10px 22px;font-size:11px}.btn-primary.danger{background:linear-gradient(180deg,rgb(var(--danger)),color-mix(in srgb,rgb(var(--danger)) 70%,#000));color:#fff}.btn-ghost.small{height:30px;padding:0 12px;font-size:10px}.btn-ghost.danger{color:rgb(var(--danger));border-color:rgba(var(--danger),.45);background:rgba(var(--danger),.1)}.btn-ghost.danger:hover{background:rgba(var(--danger),.2);border-color:rgba(var(--danger),.7)}.btn-ghost:disabled{opacity:.35;cursor:not-allowed}.link-button{color:rgb(var(--main-color));font-family:Consolas,monospace;font-size:11px;text-decoration:underline dotted}.badge-danger{color:rgb(var(--danger));border-color:rgba(var(--danger),.55);background:rgba(var(--danger),.12)}.mono{font-family:Consolas,monospace}.nowrap{white-space:nowrap}.admin-page{flex:1;min-height:0;display:flex;flex-direction:column}.access-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:4px}.access-card{display:flex;gap:16px;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:12px;border:1px solid var(--line-soft);background:var(--fill);animation:fadeInUp .45s var(--smooth) both;animation-delay:var(--row-stagger, 0s)}.access-card.blocked{opacity:.6;border-color:rgba(var(--danger),.3)}.access-main{display:flex;flex-direction:column;gap:7px;min-width:0}.access-title{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.access-title strong{font-size:14px;font-weight:800;letter-spacing:.5px}.access-meta,.access-session{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11.5px;color:var(--txt-mute)}.access-session{font-size:11px;color:var(--txt-dim)}.session-live{color:rgb(var(--success));font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:10px}.session-off{color:var(--txt-dim)}.access-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:360px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:20px;background:#000000b8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.modal-card{width:min(440px,100%);max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding:24px 26px;border-radius:14px;background:var(--panel);border:1px solid rgba(var(--main-color),.3);box-shadow:0 30px 60px #000000b3}.modal-card.wide{width:min(620px,100%)}.modal-title{font-size:16px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}.modal-text{font-size:12.5px;line-height:1.6;color:var(--txt-mute)}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}.key-box{padding:14px;border-radius:10px;border:1px dashed rgba(var(--main-color),.5);background:#0006;word-break:break-all;-webkit-user-select:all;user-select:all}.key-box code{font-size:13px;-webkit-user-select:all;user-select:all}.check-grid{display:flex;flex-wrap:wrap;gap:8px}.check-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;border:1px solid var(--line);background:var(--fill);font-size:12px;font-weight:700;color:var(--txt-mute)}.check-box{width:16px;height:16px;border-radius:5px;border:2px solid rgba(255,255,255,.25);transition:background .2s ease,border-color .2s ease}.check-chip.active{color:var(--txt);border-color:rgba(var(--main-color),.55);background:rgba(var(--main-color),.12)}.check-chip.active .check-box{background:rgb(var(--main-color));border-color:rgb(var(--main-color));box-shadow:inset 0 0 0 3px #0e0e10}.form-field.inline{flex-direction:row;align-items:center;gap:12px}.filters-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}.filters-bar .filter{width:210px}.filters-bar .total{margin-left:auto}.events-table-wrap{flex:1;min-height:0;overflow:auto;border-radius:12px;border:1px solid var(--line-soft);background:#00000040}.events-table{width:100%;border-collapse:collapse;font-size:12px}.events-table th{position:sticky;top:0;z-index:1;text-align:left;padding:10px 12px;background:#0f0f10;border-bottom:1px solid var(--line);font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--txt-dim)}.events-table td{padding:9px 12px;border-bottom:1px solid var(--line-soft);color:var(--txt-mute);vertical-align:top}.events-table tbody tr{animation:rowIn .3s var(--smooth) both;animation-delay:var(--row-stagger, 0s)}.events-table tbody tr:hover td{background:var(--fill)}.events-table .detail{color:var(--txt-dim);font-size:11px}.event-pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.5px;white-space:nowrap;border:1px solid var(--line)}.event-pill.ok{color:rgb(var(--success));border-color:rgba(var(--success),.4);background:rgba(var(--success),.1)}.event-pill.bad{color:rgb(var(--danger));border-color:rgba(var(--danger),.45);background:rgba(var(--danger),.12)}.event-pill.warn{color:rgb(var(--warning));border-color:rgba(var(--warning),.45);background:rgba(var(--warning),.1)}.event-pill.muted{color:var(--txt-mute)}.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}@media (max-width: 760px){.overlay{padding:0}.container,.container-inner{clip-path:none;margin:0}.container-inner{flex-direction:column-reverse}.sidebar{width:100%;height:64px;flex-direction:row;justify-content:center;padding:6px 12px;border-right:none;border-top:1px solid var(--line-soft)}.sidebar-nav{position:static;transform:none;flex-direction:row}.hex-close{margin-top:0;margin-left:auto}.hex-tooltip{display:none}.ui-header{padding:12px 16px 10px}.ui-title{font-size:18px}.tab-content{padding:10px}.camera-wall:not(.layout-highlight){grid-template-columns:1fr!important;overflow-y:auto;grid-auto-rows:minmax(200px,auto)!important}.camera-tile{aspect-ratio:16 / 9}.access-card{flex-direction:column;align-items:stretch}.access-actions{justify-content:flex-start;max-width:none}.filters-bar .filter{width:100%}}.badge-admin{color:rgb(var(--main-color));border-color:rgba(var(--main-color),.55);background:rgba(var(--main-color),.14)}.live-toolbar{flex-wrap:wrap}.segmented-button:disabled{opacity:.35}@media (max-width: 760px){.live-toolbar .segmented{flex:1;justify-content:center}.live-toolbar .segmented-button{padding:0 9px}.live-toolbar .segmented-button span{display:none}.camera-wall.layout-highlight{grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto;grid-template-areas:"main main main" "side0 side1 side2"}.camera-wall.layout-highlight .camera-tile{aspect-ratio:16 / 9}}@media (max-width: 760px){.recordings-tab{flex-direction:column;gap:10px;overflow-y:auto;overflow-x:hidden}.recordings-tab .player{order:-1;flex:none;gap:8px}.recordings-tab .player-screen{flex:none;aspect-ratio:16 / 9;min-height:0}.recordings-tab .placeholder-title{font-size:12px}.recordings-tab .player-caption{top:8px;left:8px;padding:4px 10px;font-size:10px}.recordings-tab .player-controls{flex-wrap:wrap;gap:4px;padding:8px}.recordings-tab .control-button{width:32px;height:32px}.recordings-tab .speed-button{width:38px}.recordings-tab .seek-bar{order:-1;flex:1 1 100%;height:8px;margin:6px 2px 4px}.recordings-tab .player-time{width:auto;flex:1;font-size:10.5px;white-space:nowrap}.recordings-side{width:100%;flex:none;min-height:auto;max-height:none;padding:12px;gap:8px}.recordings-side .day-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.recordings-side .day-chips::-webkit-scrollbar{display:none}.recordings-side .chip{flex-shrink:0;padding:8px 13px;font-size:11px}.recordings-side .hour-chips{display:flex;max-height:none}.recordings-side .time-list{flex:none;overflow:visible;padding-right:0}.recordings-side .time-row{padding:12px}}