:root{--color-primary:#007aff;--color-accent:#5ac8fa;--color-success:#34c759;--color-error:#ff3b30;--color-bg-primary:#000;--color-surface:#1c1c1e;--color-text-primary:#fff;--color-text-secondary:#8e8e93;--glass-bg:#1e1e23d9;--glass-bg-light:#1e1e238c;--glass-border:#fff3;--glass-blur:blur(10px);--glass-shadow:none;--glass-shadow-hover:none;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--text-xs:12px;--text-sm:14px;--text-base:16px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-pill:9999px;--z-panel:200;--z-overlay:400;--z-close:500;--duration-fast:.15s;--easing-default:cubic-bezier(.4, 0, .2, 1);--font-sans:"Fira Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100dvh;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);overflow:hidden}body{font-family:var(--font-sans);background:var(--color-bg-primary);color:var(--color-text-primary);-webkit-font-smoothing:antialiased}#app{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.skip-link{background:var(--color-primary);color:#fff;padding:var(--space-2) var(--space-4);z-index:9999;text-decoration:none;transition:top .2s;position:absolute;top:-40px;left:0}.skip-link:focus{top:0}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:.5px solid var(--glass-border);border-radius:var(--radius-lg);transition:border-color var(--duration-fast) var(--easing-default);position:relative}.glass-panel:hover{border-color:#ffffff2e}.camera-grid{background:#000;flex-grow:1;grid-template-columns:repeat(4,1fr);gap:1px;width:100%;min-height:0;display:grid;position:relative;overflow:hidden}.camera-cell{cursor:pointer;-webkit-tap-highlight-color:#ffffff1a;transition:box-shadow var(--duration-fast) var(--easing-default);contain:layout style paint;background:#000;border:.5px solid #ffffff0f;outline:none;margin:0;padding:0;font-size:0;line-height:0;position:relative;overflow:hidden;box-shadow:0 0 0 .5px #ffffff0f}.camera-cell[data-status=online]{box-shadow:0 0 0 .5px #34c7591f}.camera-cell[data-status=offline]{box-shadow:0 0 0 .5px #ff3b3014}.camera-cell:hover{z-index:1;box-shadow:0 0 0 .5px #fff3}.camera-cell[data-status=online]:hover{box-shadow:0 0 0 .5px #34c7594d}.camera-cell[data-status=offline]:hover{box-shadow:0 0 0 .5px #ff3b3033}.camera-cell video{object-fit:cover;will-change:transform;width:100%;height:100%;display:block}.camera-cell:active{opacity:.85}.camera-cell.fullscreen{z-index:var(--z-overlay);cursor:pointer;aspect-ratio:unset;animation:fs-enter .25s var(--easing-default);border-color:#0000;position:fixed;inset:0}@keyframes fs-enter{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.camera-cell.fullscreen video{object-fit:contain}.fullscreen-close{top:calc(env(safe-area-inset-top,0px) + var(--space-3));right:var(--space-3);z-index:var(--z-close);border-radius:var(--radius-pill);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:44px;height:44px;transition:background var(--duration-fast) var(--easing-default);background:#0009;border:.5px solid #fff3;justify-content:center;align-items:center;display:none;position:fixed}.camera-cell.fullscreen .fullscreen-close{display:flex}.fullscreen-close:hover{background:#000c}.fullscreen-close:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.fullscreen-nav-btn{z-index:calc(var(--z-close) - 1);color:#fff;cursor:pointer;opacity:0;background:#0000008c;border:.5px solid #ffffff1f;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:opacity .3s,transform .2s;display:flex;position:fixed;bottom:16px}.fullscreen-nav-btn.nav-visible{opacity:1}.fullscreen-nav-btn.hidden-nav{opacity:0}.fullscreen-nav-btn:hover{background:#000000b3;transform:scale(1.1)}.fullscreen-nav-btn.prev{left:calc(50% - 48px)}.fullscreen-nav-btn.next{left:calc(50% + 8px)}@media (width<=768px){.fullscreen-nav-btn{width:36px;height:36px;bottom:8px}.fullscreen-nav-btn.prev{left:calc(50% - 44px)}.fullscreen-nav-btn.next{left:calc(50% + 8px)}}.camera-offline-overlay{color:var(--color-error);z-index:1;pointer-events:none;background:#000000bf;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex;position:absolute;inset:0}.camera-offline-overlay span{text-transform:capitalize;font-size:1.2rem;font-weight:500}.camera-cell[data-status=online] .camera-offline-overlay{display:none}.camera-placeholder{justify-content:center;align-items:center;gap:var(--space-2);background:var(--color-bg-primary);flex-direction:column;transition:opacity .35s;animation:2s ease-in-out infinite placeholder-pulse;display:flex;position:absolute;inset:0}.camera-placeholder.placeholder-hidden{opacity:0;pointer-events:none}@keyframes placeholder-pulse{0%,to{opacity:.6}50%{opacity:1}}.placeholder-caption{font-size:var(--text-xs);color:var(--color-text-secondary);text-align:center;padding:0 var(--space-2);line-height:1.3}.camera-placeholder-info{padding:var(--space-6) var(--space-3) var(--space-2);opacity:.4;transition:opacity var(--duration-fast) var(--easing-default);pointer-events:none;background:linear-gradient(#0000,#000000bf);justify-content:space-between;align-items:center;display:flex;position:absolute;bottom:0;left:0;right:0}.camera-cell:hover .camera-placeholder-info,.camera-cell:focus-within .camera-placeholder-info{opacity:1}.camera-placeholder-name{font-size:var(--text-sm);color:var(--color-text-primary);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.status-badge{padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);text-transform:capitalize;font-weight:500}.status-badge.online{color:var(--color-success);background:#34c75940}.status-badge.offline{color:var(--color-error);background:#ff3b3040}.navbar{top:env(safe-area-inset-top,0px);z-index:var(--z-panel);padding:var(--space-4) 0 0;opacity:1;pointer-events:auto;flex-direction:column;align-items:center;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;left:0;right:0;transform:translateY(0)}.navbar.hidden{opacity:0;pointer-events:none;transform:translateY(-100%)}.navbar-inner{align-items:center;gap:var(--space-3);padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);animation:glass-in .2s var(--easing-default) forwards;display:flex}.search-row{align-items:center;gap:var(--space-2);flex:1;min-width:0;display:flex}.filter-icon{color:var(--color-text-secondary);flex-shrink:0}.navbar-icon-btn{color:var(--color-text-secondary);cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;transition:color .2s;display:flex}.navbar-icon-btn:hover{color:var(--color-text-primary)}.filter-divider{background:var(--glass-border);flex-shrink:0;width:1px;height:18px}.filter-input{min-width:120px;color:var(--color-text-primary);font-size:var(--text-sm);font-family:var(--font-sans);z-index:1;background:0 0;border:none;outline:none;flex:1;height:24px;padding:0;position:relative}.filter-input:focus-visible{outline:none}.filter-input::placeholder{color:var(--color-text-secondary)}.filter-select{color:var(--color-text-primary);font-size:var(--text-sm);font-family:var(--font-sans);cursor:pointer;padding:0 var(--space-5) 0 var(--space-2);appearance:none;z-index:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 0 center no-repeat;border:none;outline:none;min-width:120px;height:24px;position:relative}.filter-select option{background:var(--color-surface);color:var(--color-text-primary)}.navbar-link{border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3);font-size:var(--text-sm);color:var(--color-text-primary);background:#007aff26;border:.5px solid #007aff4d;text-decoration:none;transition:background .2s,border-color .2s}.navbar-link:hover{background:#007aff40;border-color:#007aff80}.selection-overlay{z-index:calc(var(--z-overlay) + 1);opacity:0;pointer-events:none;background:#00000080;transition:opacity .3s;position:fixed;inset:0}.selection-overlay.open{opacity:1;pointer-events:auto}.selection-panel{width:min(380px,85vw);z-index:calc(var(--z-overlay) + 2);background:var(--color-surface);border-left:.5px solid var(--glass-border);flex-direction:column;transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(100%)}.selection-panel.open{transform:translate(0)}.selection-panel-header{padding:var(--space-4) var(--space-4) var(--space-3);border-bottom:.5px solid var(--glass-border);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.selection-panel-header h2{font-size:var(--text-base);font-weight:600}.selection-panel-close{width:32px;height:32px;color:var(--color-text-secondary);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.selection-panel-close:hover{color:var(--color-text-primary);background:#ffffff14}.selection-panel-actions{gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:.5px solid var(--glass-border);flex-shrink:0;display:flex}.selection-action-btn{padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);border:.5px solid var(--glass-border);color:var(--color-text-secondary);font-size:var(--text-sm);cursor:pointer;font-family:var(--font-sans);background:0 0;flex:1;transition:color .2s,border-color .2s}.selection-action-btn:hover{color:var(--color-text-primary);border-color:#ffffff4d}.selection-panel-list{padding:var(--space-2) 0;overscroll-behavior:contain;flex:1;overflow-y:auto}.selection-panel-list::-webkit-scrollbar{width:6px}.selection-panel-list::-webkit-scrollbar-track{background:0 0}.selection-panel-list::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:3px}.selection-item{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);cursor:pointer;transition:background .15s;display:flex}.selection-item:hover{background:#ffffff0a}.selection-item:active{background:#ffffff14}.selection-item-name{font-size:var(--text-sm);white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.selection-item-status{font-size:var(--text-xs);padding:2px var(--space-2);border-radius:var(--radius-sm);flex-shrink:0}.selection-item-status.online{color:var(--color-success);background:#34c75926}.selection-item-status.offline{color:var(--color-text-secondary);background:#8e8e9326}.selection-item-category{border-radius:var(--radius-sm);text-transform:capitalize;flex-shrink:0;padding:1px 6px;font-size:10px}.toggle-switch{flex-shrink:0;width:40px;height:24px;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{cursor:pointer;background:#ffffff1f;border-radius:12px;transition:background .2s;position:absolute;inset:0}.toggle-slider:before{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .2s cubic-bezier(.4,0,.2,1);position:absolute;top:3px;left:3px}.toggle-switch input:checked+.toggle-slider{background:var(--color-primary)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(16px)}.camera-count{font-size:var(--text-xs);color:var(--color-text-secondary)}.filter-sheet-header .camera-count{margin-left:auto;margin-right:var(--space-2)}.empty-message{justify-content:center;align-items:center;gap:var(--space-2);color:var(--color-text-secondary);font-size:var(--text-base);background:var(--glass-bg);border:.5px solid var(--glass-border);border-radius:var(--radius-lg);pointer-events:none;flex-direction:column;width:260px;height:120px;margin:auto;display:flex;position:absolute;inset:0}@keyframes glass-in{0%{opacity:0;transform:scale(.95)translateY(-8px)}to{opacity:1;transform:scale(1)translateY(0)}}.filter-toggle,.filter-sheet-overlay,.filter-sheet{display:none}@media (width<=768px){.navbar{padding:var(--space-3) 0 0;margin-bottom:var(--space-2);opacity:1;pointer-events:auto;transition:none;position:relative;transform:none}.navbar.hidden{opacity:1;pointer-events:auto;transform:none}.navbar-inner{padding:var(--space-1) var(--space-2);gap:var(--space-2);border-radius:var(--radius-pill);flex-wrap:wrap;width:auto;max-width:95%}.filter-divider,#category-filter,#status-filter{display:none}.search-row{align-items:center;gap:var(--space-2);width:100%;display:flex;position:relative}.filter-icon{pointer-events:none;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.filter-input{min-width:0;min-height:44px;padding:var(--space-2) var(--space-2) var(--space-2) 36px;background-color:var(--glass-bg-light);border-radius:var(--radius-md);flex:1}.navbar-icon-btn{min-height:44px}#refresh-btn,#select-btn{display:none}.filter-toggle{justify-content:center;align-items:center;width:44px;height:44px;display:flex}.navbar-link{text-align:center;justify-content:center;align-items:center;width:100%;min-height:44px;display:flex}.camera-grid{gap:2px}.camera-placeholder-info{padding:var(--space-3);min-height:44px}.placeholder-text{font-size:var(--text-sm);color:var(--color-text-secondary)}.placeholder-caption{font-size:var(--text-xs);color:var(--color-text-secondary)}.camera-placeholder-name{font-size:var(--text-base)}.filter-sheet-overlay{z-index:calc(var(--z-overlay) + 1);opacity:0;pointer-events:none;background:#00000080;transition:opacity .3s;position:fixed;inset:0}.filter-sheet-overlay.open{opacity:1;pointer-events:auto}.filter-sheet{z-index:calc(var(--z-overlay) + 2);background:var(--color-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;flex-direction:column;max-height:55vh;transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%)}.filter-sheet.open{transform:translateY(0)}.filter-sheet-handle{width:36px;height:4px;margin:var(--space-2) auto 0;background:#fff3;border-radius:2px;flex-shrink:0}.filter-sheet-header{padding:var(--space-3) var(--space-4);border-bottom:.5px solid var(--glass-border);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.filter-sheet-header h2{font-size:var(--text-base);font-weight:600}.filter-sheet-close{width:32px;height:32px;color:var(--color-text-secondary);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.filter-sheet-close:hover{color:var(--color-text-primary);background:#ffffff14}.filter-sheet-body{padding:var(--space-3) var(--space-4);gap:var(--space-3);flex-direction:column;display:flex;overflow-y:auto}.filter-sheet-select{width:100%;min-height:44px;padding:var(--space-2) var(--space-5) var(--space-2) var(--space-3);border:.5px solid var(--glass-border);background:var(--glass-bg-light);color:var(--color-text-primary);font-size:var(--text-sm);font-family:var(--font-sans);border-radius:var(--radius-md);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;outline:none}.filter-sheet-select option{background:var(--color-surface);color:var(--color-text-primary)}.filter-sheet-buttons{gap:var(--space-2);padding-top:var(--space-2);display:flex}.filter-sheet-btn{justify-content:center;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);border:.5px solid var(--glass-border);background:var(--glass-bg-light);color:var(--color-text-secondary);font-size:var(--text-sm);font-family:var(--font-sans);cursor:pointer;flex:1;transition:color .2s,border-color .2s;display:flex}.filter-sheet-btn:hover{color:var(--color-text-primary);border-color:#ffffff4d}}@media (prefers-reduced-motion:reduce){.navbar,.navbar.hidden{transition:none}.navbar-inner{animation:none}.skip-link{transition:none}.camera-placeholder{transition:none;animation:none}.camera-placeholder-info{opacity:1;transition:none}.camera-cell{transition:none}.camera-cell.fullscreen{animation:none}.selection-panel,.selection-overlay{transition:none}}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}:focus:not(:focus-visible){outline:none}