:root{--yellow:#ffc42f;--green:#12a64e;--dark-teal:#075463;--teal:#0a9ab0;--light-teal:#75b9ca;--bg-primary:#f5f7fa;--bg-secondary:#fff;--bg-card:#fff;--bg-hover:#f0f4f8;--bg-video:#1a1a1a;--border:#0754631f;--border-hover:#0a9ab0;--text-primary:#1a1a2e;--text-secondary:#075463;--text-muted:#07546380;--shadow:0 2px 8px #00000014;--accent:#0a9ab0;--success:#12a64e;--warning:#ffc42f;--danger:#ef4444;--radius:8px;--radius-sm:4px;--gap:4px;--transition:.15s ease}[data-theme=dark]{--bg-primary:#04252e;--bg-secondary:#053540;--bg-card:#064552;--bg-hover:#075463;--bg-video:#000;--border:#75b9ca26;--border-hover:#0a9ab0;--text-primary:#fff;--text-secondary:#75b9ca;--text-muted:#75b9ca80;--shadow:0 4px 12px #00000040}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;transition:background var(--transition), color var(--transition);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.settings-overlay{-webkit-backdrop-filter:blur(8px);z-index:1000;background:#000000b3;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.settings-modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;flex-direction:column;width:100%;max-width:500px;max-height:85vh;display:flex;overflow:hidden;box-shadow:0 20px 40px #0000004d}.settings-modal.password-modal{max-width:380px}.settings-header{border-bottom:1px solid var(--border);background:var(--bg-card);justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex}.settings-header h2{color:var(--text-primary);align-items:center;gap:.5rem;font-size:1rem;font-weight:600;display:flex}.close-btn{border:1px solid var(--border);width:32px;height:32px;color:var(--text-muted);cursor:pointer;background:0 0;border-radius:6px;justify-content:center;align-items:center;font-size:1rem;transition:all .15s;display:flex}.close-btn:hover{color:#fff;background:#ef4444;border-color:#ef4444}.password-form{padding:1.5rem 1.25rem}.password-form .input-group{margin-bottom:1.5rem}.password-form .input-group label{color:var(--text-secondary);margin-bottom:.625rem;font-size:.875rem;font-weight:500;display:block}.password-form input{background:var(--bg-primary);border:2px solid var(--border);width:100%;color:var(--text-primary);border-radius:6px;padding:.75rem 1rem;font-size:.9375rem;transition:border-color .15s}.password-form input:focus{border-color:var(--accent);outline:none}.password-form input::placeholder{color:var(--text-muted)}.password-error{color:#ef4444;align-items:center;gap:.25rem;margin-top:.5rem;font-size:.8125rem;display:flex}.password-actions{justify-content:flex-end;gap:.75rem;display:flex}.settings-content{flex:1;padding:1.25rem;overflow-y:auto}.settings-section{margin-bottom:1.75rem}.settings-section:last-child{margin-bottom:0}.settings-section h3{color:var(--text-secondary);align-items:center;gap:.5rem;margin-bottom:1rem;font-size:.8125rem;font-weight:600;display:flex}.input-group{margin-bottom:1rem}.input-group label{color:var(--text-muted);margin-bottom:.5rem;font-size:.8125rem;font-weight:500;display:block}.input-group input{background:var(--bg-primary);border:1px solid var(--border);width:100%;color:var(--text-primary);border-radius:6px;padding:.625rem .875rem;font-size:.875rem;transition:border-color .15s}.input-group input:focus{border-color:var(--accent);outline:none}.input-row{gap:.625rem;display:flex}.input-row input{background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;flex:1;padding:.625rem .875rem;font-size:.875rem;transition:border-color .15s}.input-row input:focus{border-color:var(--accent);outline:none}.input-row button{background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:6px;padding:.625rem 1rem;font-size:.8125rem;font-weight:600;transition:background .15s}.input-row button:hover{background:var(--dark-teal)}.input-row button:disabled{opacity:.5;cursor:not-allowed}.camera-list{flex-direction:column;gap:.625rem;display:flex}.camera-item{background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;padding:.875rem 1rem;transition:all .15s}.camera-item:hover{border-color:var(--border-hover)}.camera-item.enabled{border-left:4px solid var(--success)}.camera-item.disabled{opacity:.6}.camera-item-main{align-items:center;gap:1rem;display:flex}.camera-toggle{flex-shrink:0}.switch{width:44px;height:24px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{background:var(--text-muted);cursor:pointer;border-radius:24px;transition:background .2s;position:absolute;inset:0}.slider:before{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .2s;position:absolute;bottom:3px;left:3px;box-shadow:0 2px 4px #0003}.switch input:checked+.slider{background:var(--success)}.switch input:checked+.slider:before{transform:translate(20px)}.camera-item-info{flex:1;min-width:0}.camera-item-name{color:var(--text-primary);margin-bottom:.125rem;font-size:.9375rem;font-weight:500}.camera-item-name span{cursor:pointer;border-radius:4px;margin:-.25rem -.5rem;padding:.25rem .5rem;transition:background .15s;display:inline-block}.camera-item-name span:hover{background:var(--bg-hover)}.camera-item-name input{background:var(--bg-card);border:2px solid var(--accent);width:100%;color:var(--text-primary);border-radius:4px;padding:.375rem .5rem;font-size:.9375rem;font-weight:500}.camera-item-name input:focus{outline:none}.camera-item-channel{color:var(--text-muted);font-size:.75rem}.camera-item-status{text-transform:uppercase;letter-spacing:.03em;border-radius:20px;flex-shrink:0;padding:.375rem .75rem;font-size:.6875rem;font-weight:700}.camera-item-status.on{color:var(--success);background:#12a64e26}.camera-item-status.off{background:var(--bg-hover);color:var(--text-muted)}.settings-footer{border-top:1px solid var(--border);background:var(--bg-card);justify-content:flex-end;gap:.75rem;padding:1rem 1.25rem;display:flex}.btn-primary,.btn-secondary{cursor:pointer;border-radius:6px;padding:.625rem 1.25rem;font-size:.875rem;font-weight:600;transition:all .15s}.btn-primary{background:var(--accent);color:#fff;border:none}.btn-primary:hover{background:var(--dark-teal)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{color:var(--text-primary);border:1px solid var(--border);background:0 0}.btn-secondary:hover{border-color:var(--text-muted);background:var(--bg-hover)}.loading{color:var(--text-muted);justify-content:center;align-items:center;padding:3rem;font-size:.9375rem;display:flex}@media (max-width:600px){.settings-modal{border-radius:12px;max-height:95vh}.settings-header,.settings-content,.settings-footer{padding:1rem}.camera-item-main{flex-wrap:wrap;gap:.75rem}.camera-item-status{margin-left:auto}}.stream-type-selector{grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.5rem;margin-bottom:1rem;display:grid}.radio-label{background:var(--bg-primary);border:1px solid var(--border);cursor:pointer;border-radius:8px;align-items:center;gap:.625rem;padding:.75rem 1rem;transition:all .2s;display:flex;position:relative}.radio-label:hover{border-color:var(--border-hover);background:var(--bg-hover)}.radio-label.active{border-color:var(--success);color:var(--success);background:#12a64e1a;font-weight:600}.radio-label input[type=radio]{appearance:none;border:2px solid var(--text-muted);border-radius:50%;place-content:center;width:18px;height:18px;margin:0;transition:all .2s;display:grid}.radio-label input[type=radio]:before{content:"";width:10px;height:10px;box-shadow:inset 1em 1em var(--success);border-radius:50%;transition:transform .2s ease-in-out;transform:scale(0)}.radio-label input[type=radio]:checked{border-color:var(--success)}.radio-label input[type=radio]:checked:before{transform:scale(1)}.radio-label span{font-size:.875rem}.camera-list-container{background:var(--bg-secondary);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;overflow:hidden}.camera-list-header{background:var(--bg-primary);border-bottom:1px solid var(--border);color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;padding:1rem 1.5rem;font-size:.875rem;font-weight:600;display:flex}.camera-list-body{flex-direction:column;display:flex}.camera-list-item{border-bottom:1px solid var(--border);align-items:center;padding:1rem 1.5rem;transition:background .2s;display:flex}.camera-list-item:last-child{border-bottom:none}.camera-list-item:hover{background:var(--bg-hover)}.cl-col{align-items:center;display:flex}.cl-name{color:var(--text-primary);flex:2;gap:1rem;font-weight:600}.cl-loc,.cl-status{flex:1}.cl-action{flex:1;justify-content:flex-end}.camera-icon{background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.25rem;display:flex}.location-badge{color:#0a9ab0;background:#0a9ab01a;border-radius:6px;padding:.25rem .75rem;font-size:.8125rem;font-weight:600}.status-badge{text-transform:uppercase;border-radius:20px;align-items:center;gap:.5rem;padding:.25rem .625rem;font-size:.75rem;font-weight:600;display:flex}.status-badge.online{color:#12a64e;background:#12a64e1a}.status-dot-pulse{background-color:currentColor;border-radius:50%;width:6px;height:6px;animation:2s infinite pulse}.btn-view-stream{background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary);cursor:pointer;white-space:nowrap;border-radius:6px;padding:.5rem 1rem;font-size:.8125rem;font-weight:500;transition:all .2s}.btn-view-stream:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.loading-state,.empty-state{text-align:center;color:var(--text-muted);background:var(--bg-secondary);padding:3rem}.skeleton-item{pointer-events:none}.skeleton-box{background:#ffffff0d;border-radius:6px;position:relative;overflow:hidden}.skeleton-box:after{content:"";background:linear-gradient(90deg,#0000 0%,#ffffff0d 50%,#0000 100%);animation:1.5s infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-box.icon{width:40px;height:40px}.skeleton-box.text{width:150px;height:20px}.skeleton-box.badge{border-radius:20px;width:80px;height:24px}.skeleton-box.button{width:100px;height:32px}@media (max-width:768px){.camera-list-header{display:none}.camera-list-item{flex-wrap:wrap;gap:.75rem;padding:1rem}.cl-name{flex:1 0 100%;font-size:1rem}.cl-loc,.cl-status{flex:none}.cl-action{flex:1 0 100%;margin-top:.5rem}.btn-view-stream{text-align:center;width:100%;padding:.75rem}}.app{background:var(--bg-primary);flex-direction:column;min-height:100vh;display:flex}.header{background:var(--bg-secondary);border-bottom:1px solid var(--border);z-index:100;padding:1.25rem 2rem;position:sticky;top:0}.header-content{justify-content:space-between;align-items:center;max-width:1600px;margin:0 auto;display:flex}.header-left,.header-title{align-items:center;gap:1rem;display:flex}.header-logo{object-fit:contain;width:auto;height:48px}.header-title div h1{color:var(--text-primary);margin:0;font-size:1.5rem;font-weight:700;line-height:1.2}.header-title div h2{color:var(--text-secondary);margin:0;font-size:1rem;font-weight:600;line-height:1.2}.header-subtitle{color:var(--text-muted);margin-top:.25rem;font-size:.8125rem;display:block}.header-right{align-items:center;gap:.5rem;display:flex}.view-switcher{background:var(--bg-primary);border-radius:var(--radius);border:1px solid var(--border);margin-right:1rem;padding:4px;display:flex}.view-btn{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition);background:0 0;border:none;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;display:flex}.view-btn svg{opacity:.7}.view-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.view-btn.active{background:var(--accent);color:#fff}.view-btn.active svg{opacity:1}.divider-vertical{background:var(--border);width:1px;height:24px;margin:0 .5rem}.layout-toggle{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);gap:2px;padding:4px;display:flex}.layout-btn{width:36px;height:32px;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.layout-btn:hover{color:var(--text-secondary);background:var(--bg-hover)}.layout-btn.active{background:var(--accent);color:#fff}.settings-btn,.icon-btn{border-radius:var(--radius);border:1px solid var(--border);width:40px;height:40px;color:var(--text-muted);cursor:pointer;transition:all var(--transition);background:0 0;justify-content:center;align-items:center;display:flex}.settings-btn:hover,.icon-btn:hover{background:var(--bg-hover);border-color:var(--border-hover);color:var(--accent)}.header-clock{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;align-items:flex-end;margin-right:.5rem;padding:.5rem 1rem;display:flex}.clock-time{color:var(--text-primary);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-size:1rem;font-weight:600}.clock-date{color:var(--text-muted);font-size:.6875rem}.search-container{background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:1rem 2rem}.search-wrapper{align-items:center;max-width:1600px;margin:0 auto;display:flex;position:relative}.search-icon{color:var(--text-muted);pointer-events:none;position:absolute;left:1rem}.search-input{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text-primary);transition:all var(--transition);padding:.875rem 1rem .875rem 3rem;font-size:.9375rem}.search-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #0a9ab01a}.search-input::placeholder{color:var(--text-muted)}.search-clear{background:var(--bg-hover);width:24px;height:24px;color:var(--text-muted);cursor:pointer;transition:all var(--transition);border:none;border-radius:50%;justify-content:center;align-items:center;font-size:.75rem;display:flex;position:absolute;right:8rem}.search-clear:hover{background:var(--danger);color:#fff}.search-hint{color:var(--text-muted);align-items:center;gap:.5rem;font-size:.6875rem;display:flex;position:absolute;right:1rem}.search-hint kbd{background:var(--bg-secondary);border:1px solid var(--border);border-radius:3px;padding:.125rem .375rem;font-family:inherit;font-size:.625rem}.main-content{flex:1;width:100%;max-width:1600px;margin:0 auto;padding:1.5rem 2rem}.camera-grid{gap:1.25rem;display:grid}.camera-grid.grid-2x2{grid-template-columns:repeat(2,1fr)}.camera-grid.grid-3x3{grid-template-columns:repeat(3,1fr)}.camera-grid.grid-4x4{grid-template-columns:repeat(4,1fr)}.camera-card{background:var(--bg-secondary);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;transition:all .2s;overflow:hidden}.camera-card:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:0 8px 24px #0000001a}.camera-video-container{aspect-ratio:16/9;background:var(--bg-video);position:relative;overflow:hidden}.camera-video{object-fit:cover;width:100%;height:100%}.live-badge{color:#fff;text-transform:uppercase;letter-spacing:.5px;z-index:10;background:#ef4444;border-radius:4px;align-items:center;gap:.375rem;padding:.375rem .625rem;font-size:.6875rem;font-weight:700;display:flex;position:absolute;top:.75rem;left:.75rem}.live-badge:before{content:"";background:#fff;border-radius:50%;width:6px;height:6px;animation:1.5s infinite pulse}.fullscreen-btn{color:#333;cursor:pointer;opacity:0;z-index:10;background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:1rem;transition:all .2s;display:flex;position:absolute;top:.75rem;right:.75rem}.camera-card:hover .fullscreen-btn{opacity:1}.fullscreen-btn:hover{background:#fff;transform:scale(1.1)}.location-tag{color:#fff;text-transform:uppercase;z-index:10;background:#000000b3;border-radius:4px;padding:.375rem .625rem;font-size:.6875rem;font-weight:600;position:absolute;bottom:.75rem;left:.75rem}.camera-info{padding:1rem}.camera-info-header{justify-content:space-between;align-items:flex-start;gap:.75rem;margin-bottom:.5rem;display:flex}.camera-name{color:var(--text-primary);font-size:.9375rem;font-weight:600;line-height:1.3}.codec-badge{background:var(--bg-primary);border:1px solid var(--border);color:var(--accent);border-radius:4px;flex-shrink:0;padding:.25rem .5rem;font-size:.625rem;font-weight:600}.camera-location{color:var(--text-muted);align-items:center;gap:.375rem;font-size:.8125rem;display:flex}.camera-location svg{flex-shrink:0}.camera-card.skeleton{pointer-events:none}.skeleton-video{aspect-ratio:16/9;background:linear-gradient(90deg, var(--bg-primary) 25%, var(--bg-hover) 50%, var(--bg-primary) 75%);background-size:200% 100%;animation:1.5s infinite shimmer}.skeleton-info{padding:1rem}.skeleton-line{background:var(--bg-primary);border-radius:4px;height:14px;margin-bottom:.5rem}.skeleton-line.short{width:60%}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:4rem 2rem;display:flex}.empty-icon{opacity:.5;margin-bottom:1rem;font-size:3rem}.empty-state h3{color:var(--text-primary);margin-bottom:.5rem;font-size:1.125rem;font-weight:600}.empty-state p{color:var(--text-muted);font-size:.875rem}.camera-loading,.camera-error{background:var(--bg-video);flex-direction:column;justify-content:center;align-items:center;gap:.75rem;display:flex;position:absolute;inset:0}.loading-spinner{border:3px solid #fff3;border-top-color:#fff;border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}.camera-loading span,.camera-error span{color:#ffffffb3;font-size:.75rem}.error-icon{opacity:.5;font-size:1.5rem}.retry-btn{color:#fff;border-radius:var(--radius);cursor:pointer;transition:all var(--transition);background:#fff3;border:1px solid #ffffff4d;padding:.5rem 1rem;font-size:.75rem;font-weight:500}.retry-btn:hover{background:#ffffff4d}.camera-thumbnail{object-fit:cover;filter:brightness(.6);width:100%;height:100%;position:absolute;inset:0}.camera-reconnecting{background:#00000080;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;display:flex;position:absolute;inset:0}.camera-reconnecting span{color:#fff;font-size:.75rem}.camera-error.has-thumbnail{background:#0009}@media (max-width:1200px){.camera-grid.grid-4x4{grid-template-columns:repeat(3,1fr)}}@media (max-width:900px){.header{padding:1rem 1.25rem}.search-container{padding:.75rem 1.25rem}.main-content{padding:1rem 1.25rem}.camera-grid.grid-4x4,.camera-grid.grid-3x3{grid-template-columns:repeat(2,1fr)}.camera-grid{gap:1rem}}@media (max-width:600px){.header-content{flex-direction:column;align-items:stretch;gap:1rem}.header-right{justify-content:space-between;gap:.5rem;width:100%}.view-switcher{flex:1;margin-right:0;display:flex}.view-btn{flex:1;justify-content:center}.divider-vertical{display:none}.header-title h1{font-size:1.25rem}.header-subtitle{font-size:.75rem}.camera-grid.grid-4x4,.camera-grid.grid-3x3,.camera-grid.grid-2x2{grid-template-columns:1fr}.layout-toggle{display:none}}.camera-card.fullscreen{border:none;border-radius:0}.camera-card:-webkit-full-screen{border:none;border-radius:0;width:100vw;height:100vh}.camera-card:fullscreen{border:none;border-radius:0;width:100vw;height:100vh}.camera-card:-webkit-full-screen .camera-video-container{aspect-ratio:auto;height:100vh}.camera-card:fullscreen .camera-video-container{aspect-ratio:auto;height:100vh}.camera-card:-webkit-full-screen .camera-info{background:linear-gradient(#0000,#000c);padding:2rem;position:fixed;bottom:0;left:0;right:0}.camera-card:fullscreen .camera-info{background:linear-gradient(#0000,#000c);padding:2rem;position:fixed;bottom:0;left:0;right:0}.camera-card:-webkit-full-screen .camera-name{color:#fff}.camera-card:fullscreen .camera-name{color:#fff}.camera-card:-webkit-full-screen .camera-location{color:#ffffffb3}.camera-card:fullscreen .camera-location{color:#ffffffb3}.camera-card:-webkit-full-screen .fullscreen-btn{opacity:1;position:fixed;top:1rem;right:1rem}.camera-card:fullscreen .fullscreen-btn{opacity:1;position:fixed;top:1rem;right:1rem}.footer{background:var(--bg-card);border-top:1px solid var(--border);margin-top:auto;padding:2rem}.footer-content{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2rem;max-width:1600px;margin:0 auto;display:flex}.footer-left{align-items:center;gap:1.5rem;max-width:800px;display:flex}.footer-logo{object-fit:contain;width:auto;height:48px}.footer-info{flex-direction:column;gap:.25rem;display:flex}.footer-agency{color:var(--text-primary);font-size:.9375rem;font-weight:700;line-height:1.3}.footer-address{color:var(--text-muted);font-size:.8125rem}.footer-right{align-items:center;display:flex}.footer-links{color:var(--text-muted);background:var(--bg-primary);border:1px solid var(--border);border-radius:20px;align-items:center;gap:.75rem;padding:.5rem 1rem;font-size:.75rem;font-weight:500;display:flex}.footer-divider{color:var(--border)}@media (max-width:900px){.footer-content{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:2rem}.footer-left{flex-direction:column;align-items:center;max-width:100%}.footer-logo{align-self:center}.footer-right{justify-content:center;align-items:center;width:100%}.footer-links{flex-wrap:wrap;justify-content:center;width:100%}}.focused-overlay{z-index:1000;background:#000000f2;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.focused-modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;flex-direction:column;width:100%;max-width:1000px;height:auto;max-height:85vh;display:flex;overflow:hidden;box-shadow:0 25px 80px #0003}.focused-header-bar{background:var(--bg-secondary);border-bottom:1px solid var(--border);z-index:10;flex-shrink:0;justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex}.focused-header-left{align-items:center;gap:.75rem;display:flex}.focused-title{color:var(--text-primary);margin:0;font-size:1.125rem;font-weight:600}.focused-codec{color:#0a9ab0;background:#0a9ab033;border:1px solid #0a9ab066;border-radius:4px;padding:.25rem .625rem;font-size:.6875rem;font-weight:600}.focused-header-right{align-items:center;display:flex}.focused-status{border-radius:20px;align-items:center;gap:.5rem;padding:.375rem .875rem;font-size:.75rem;font-weight:600;display:flex}.focused-status.live{color:#12a64e;background:#12a64e33}.focused-status.live .status-dot{background:#12a64e;border-radius:50%;width:8px;height:8px;animation:1.5s infinite pulse}.focused-status.connecting{color:#ffc42f;background:#ffc42f33}.focused-status.error{color:#ef4444;background:#ef444433}.focused-location-bar{background:var(--bg-primary);z-index:10;border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:.75rem;padding:.625rem 1.5rem;display:flex}.location-pin{color:var(--text-secondary);align-items:center;gap:.375rem;font-size:.8125rem;display:flex}.location-pin svg{color:#0a9ab0}.location-area-tag{color:#fff;text-transform:uppercase;background:#0a9ab0;border-radius:4px;padding:.25rem .625rem;font-size:.6875rem;font-weight:700}.focused-video-wrapper{background:#000;flex:1;justify-content:center;align-items:center;width:100%;min-height:0;margin:0 auto;display:flex;position:relative;overflow:hidden}.focused-video-container{justify-content:center;align-items:center;width:100%;height:100%;transition:transform .2s ease-out;display:flex}.focused-video{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:calc(85vh - 8rem)}.focused-loading,.focused-error{background:#000;flex-direction:column;justify-content:center;align-items:center;gap:1rem;display:flex;position:absolute;inset:0}.focused-loading span,.focused-error span{color:#ffffffb3;font-size:.875rem}.focused-error .error-icon{font-size:2rem}.focused-footer-bar{background:var(--bg-secondary);border-top:1px solid var(--border);z-index:10;flex-shrink:0;justify-content:space-between;align-items:center;padding:.75rem 1.5rem;display:flex}.focused-footer-left{flex:1}.focused-description{color:var(--text-muted);font-size:.8125rem;font-style:italic}.focused-footer-right{align-items:center;gap:.5rem;display:flex}.control-btn{background:var(--bg-primary);border:1px solid var(--border);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.control-btn:hover{background:var(--bg-hover);border-color:var(--border-hover);color:var(--accent)}.control-btn:disabled{opacity:.3;cursor:not-allowed}.control-btn.close{background:#ef444433;border-color:#ef44444d}.control-btn.close:hover{background:#ef4444;border-color:#ef4444}.zoom-level{text-align:center;min-width:48px;color:var(--text-muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-size:.75rem;font-weight:600}.control-divider{background:var(--border);width:1px;height:20px;margin:0 .5rem}@media (max-width:768px){.focused-modal{height:100vh;max-height:100vh;margin:0}.focused-title{font-size:.9375rem}.focused-video-wrapper{min-height:250px}.focused-footer-right{gap:.25rem}.control-btn{width:32px;height:32px}}.focused-video-container.pannable{cursor:grab}.focused-video-container.panning{cursor:grabbing;transition:none!important}.focused-modal:-webkit-full-screen{border:none;border-radius:0;flex-direction:column;width:100vw;max-width:none;height:100vh;max-height:none;display:flex;position:relative}.focused-modal:fullscreen{border:none;border-radius:0;flex-direction:column;width:100vw;max-width:none;height:100vh;max-height:none;display:flex;position:relative}.focused-modal:-webkit-full-screen .focused-video-wrapper{background:#000;flex:1;width:100%;height:100%}.focused-modal:fullscreen .focused-video-wrapper{background:#000;flex:1;width:100%;height:100%}.focused-modal:-webkit-full-screen .focused-video{object-fit:contain;width:100%;max-width:100%;height:100%;max-height:100%}.focused-modal:fullscreen .focused-video{object-fit:contain;width:100%;max-width:100%;height:100%;max-height:100%}.focused-modal:-webkit-full-screen .focused-header-bar{z-index:20;background:linear-gradient(#000000e6 0%,#00000080 60%,#0000 100%);border-bottom:none;padding-top:1.5rem;position:absolute;top:0;left:0;right:0}.focused-modal:fullscreen .focused-header-bar{z-index:20;background:linear-gradient(#000000e6 0%,#00000080 60%,#0000 100%);border-bottom:none;padding-top:1.5rem;position:absolute;top:0;left:0;right:0}.focused-modal:-webkit-full-screen .focused-location-bar{z-index:20;background:0 0;border-bottom:none;padding-left:1.5rem;position:absolute;top:80px;left:0}.focused-modal:fullscreen .focused-location-bar{z-index:20;background:0 0;border-bottom:none;padding-left:1.5rem;position:absolute;top:80px;left:0}.focused-modal:-webkit-full-screen .focused-footer-bar{z-index:20;background:linear-gradient(#0000 0%,#00000080 40%,#000000e6 100%);border-top:none;padding-bottom:1.5rem;position:absolute;bottom:0;left:0;right:0}.focused-modal:fullscreen .focused-footer-bar{z-index:20;background:linear-gradient(#0000 0%,#00000080 40%,#000000e6 100%);border-top:none;padding-bottom:1.5rem;position:absolute;bottom:0;left:0;right:0}:-webkit-any(.focused-modal:-webkit-full-screen .focused-title,.focused-modal:-webkit-full-screen .focused-description,.focused-modal:-webkit-full-screen .zoom-level){color:#fff;text-shadow:0 1px 2px #00000080}:is(.focused-modal:fullscreen .focused-title,.focused-modal:fullscreen .focused-description,.focused-modal:fullscreen .zoom-level){color:#fff;text-shadow:0 1px 2px #00000080}.focused-modal:-webkit-full-screen .control-btn{color:#fff;background:#ffffff26;border-color:#fff3}.focused-modal:fullscreen .control-btn{color:#fff;background:#ffffff26;border-color:#fff3}.focused-modal:-webkit-full-screen .control-btn:hover{color:#000;background:#fff}.focused-modal:fullscreen .control-btn:hover{color:#000;background:#fff}.camera-actions{z-index:10;opacity:0;gap:.5rem;transition:opacity .2s;display:flex;position:absolute;top:.75rem;right:.75rem}.camera-card:hover .camera-actions{opacity:1}.action-btn{color:#333;cursor:pointer;background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.action-btn:hover{background:#fff;transform:scale(1.1)}.camera-meta{justify-content:space-between;align-items:center;gap:1rem;display:flex}.camera-uptime{color:var(--success);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;align-items:center;gap:.25rem;font-size:.75rem;display:flex}.camera-card.clickable{cursor:pointer}.camera-card.clickable:hover{transform:translateY(-4px);box-shadow:0 12px 32px #00000026}.auto-retry-hint{color:#ffffff80;margin-top:.5rem;font-size:.625rem}@media (max-width:768px){.header-clock,.search-hint{display:none}}