.nvr-fallback{min-height:180px;color:var(--ink-soft);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.nvr-fallback h2,.nvr-fallback h3{color:var(--ink-main);margin:.5rem 0 .25rem}.nvr-fallback .meta{color:var(--ink-soft);font-size:1rem}.settings-section-tabs{gap:.5rem;margin-bottom:1rem;display:flex}.settings-section-tabs .secondary-btn.active{background:var(--button);color:#fff}.settings-field{margin-bottom:1rem}.icon-button{cursor:pointer;color:var(--button);vertical-align:middle;background:0 0;border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;width:40px;height:40px;margin-right:.5rem;padding:.3rem;transition:background .15s,color .15s,box-shadow .15s;display:inline-flex}.icon-button.active{background:var(--button);color:#fff;box-shadow:0 0 0 2px var(--button-hover), 0 2px 8px #0d6aa81f}.icon-button:focus{box-shadow:0 0 0 2px var(--ok), 0 2px 8px #109f7a1f}:root{--bg-main:#0f1f2f;--bg-surface:#112d43;--bg-panel:#f4f8fb;--ink-main:#0c1824;--ink-soft:#6b7d8f;--line:#0b2d482e;--ok:#109f7a;--warn:#b27200;--bad:#c13a3a;--button:#0d6aa8;--button-hover:#0a527f}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink-main);background:radial-gradient(circle at 10% -10%,#2a93d559,#0000 40%),radial-gradient(circle at 90% 110%,#073f6159,#0000 42%),linear-gradient(145deg,#d6e8f4,#f2f8fc 50%,#d8e6f1);margin:0;font-family:Space Grotesk,Segoe UI,sans-serif}#app{min-height:100vh;padding:2rem 1rem 3rem}.auth-shell{place-items:center;min-height:calc(100vh - 4rem);display:grid}.auth-card{border:1px solid var(--line);background:#f9fcff;border-radius:18px;width:min(460px,100%);padding:1.2rem;box-shadow:0 12px 26px #07294429}.auth-logo{object-fit:contain;width:64px;height:64px}.auth-eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);margin:.65rem 0 0;font-size:.72rem}.auth-copy{color:var(--ink-soft);margin:.5rem 0 0}.auth-form{gap:.8rem;margin-top:1rem;display:grid}.auth-error{color:var(--bad);background:#c13a3a1a;border:1px solid #c13a3a4d;border-radius:10px;margin:0;padding:.55rem .65rem}.app-shell{gap:1rem;max-width:1320px;margin:0 auto;display:grid}.header-panel{background:linear-gradient(128deg, var(--bg-main), var(--bg-surface));color:#eff7ff;border-radius:18px;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.25rem 1.4rem;display:flex;box-shadow:0 12px 26px #07294438}.header-block{align-items:center;gap:.7rem;display:flex}.header-logo{object-fit:contain;width:44px;height:44px}.header-actions,.camera-actions{gap:.5rem;display:flex}.eyebrow{letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin:0;font-size:.73rem}h1{margin:.2rem 0 0;font-size:clamp(1.3rem,2.7vw,2rem)}.status-chip{background:#dff0ff14;border:1px solid #e5f3ff47;border-radius:999px;max-width:min(48ch,100%);margin:0;padding:.5rem .75rem;font-size:.88rem}.controls-panel{background:var(--bg-panel);border:1px solid var(--line);border-radius:16px;grid-template-columns:1fr auto;gap:.8rem;padding:1rem;display:grid}label{gap:.35rem;display:grid}label span{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem}input{border:1px solid var(--line);border-radius:10px;width:100%;padding:.75rem;font-family:IBM Plex Mono,monospace;font-size:.92rem}button{background:var(--button);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:.8rem 1.15rem;font-weight:600;transition:background .12s}.secondary-btn{padding:.55rem .8rem}.secondary-btn.active{background:#184f74;box-shadow:inset 0 0 0 1px #ffffff26}.secondary-btn.danger{background:#8f2f2f}.secondary-btn.danger:hover{background:#732525}button:hover{background:var(--button-hover)}button:disabled{cursor:not-allowed;opacity:.7}.operator-text{color:var(--ink-soft);grid-column:1/-1;margin:0}.camera-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;display:grid}.empty-state{border:1px dashed var(--line);background:#f8fbfe;border-radius:14px;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem;display:flex}.empty-state p{margin:0}.camera-card{border:1px solid var(--line);background:#f8fbfe;border-radius:16px;gap:.65rem;padding:.85rem;display:grid}.camera-head{justify-content:space-between;align-items:center;gap:.6rem;display:flex}.camera-head-actions{align-items:center;gap:.5rem;display:flex}h2{margin:0;font-size:1rem}.state-pill{text-transform:uppercase;letter-spacing:.07em;border-radius:999px;padding:.18rem .55rem;font-size:.7rem;font-weight:700}.state-connected{color:var(--ok);background:#109f7a1f}.state-connecting{color:var(--warn);background:#b272001c}.state-failed{color:var(--bad);background:#c13a3a1c}.player-wrap{aspect-ratio:16/10;background:#0a1927;border-radius:10px;overflow:hidden}.player-wrap iframe{border:0;width:100%;height:100%}.player-fallback{color:#d3e7f7;text-align:center;place-content:center;padding:.6rem;display:grid}.meta{color:var(--ink-soft);margin:0;font-family:IBM Plex Mono,monospace;font-size:.82rem}.tiny-btn{border:1px solid var(--line);color:#0f3047;background:#e6f1f8;border-radius:8px;padding:.34rem .55rem;font-size:.74rem;font-weight:700}.tiny-btn:hover{background:#d4e6f3}.settings-shell{gap:1rem;max-width:1320px;margin:0 auto;display:grid}.settings-layout{grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:.9rem;display:grid}.settings-sidebar,.settings-content{border:1px solid var(--line);background:#f8fbfe;border-radius:14px;padding:.95rem}.settings-camera-list{gap:.45rem;display:grid}.settings-form{gap:.8rem;display:grid}.settings-actions{justify-content:flex-end;display:flex}.settings-success{color:#0d6a54;background:#109f7a1a;border:1px solid #109f7a47;border-radius:10px;margin:0;padding:.55rem .65rem}.stream-shell{gap:1rem;max-width:1440px;margin:0 auto;display:grid}.stream-panel{border:1px solid var(--line);background:#f8fbfe;border-radius:14px;gap:.7rem;padding:.9rem;display:grid}.stream-stage{background:#0a1927;border-radius:10px;width:100%;min-height:min(82vh,920px);overflow:hidden}.stream-stage iframe{border:0;width:100%;height:100%;min-height:min(82vh,920px)}@media (width<=1050px){.camera-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-layout{grid-template-columns:1fr}}@media (width<=760px){#app{padding:.85rem .75rem 2rem}.header-panel{flex-direction:column;align-items:stretch}.header-actions,.camera-actions,.secondary-btn{width:100%}.controls-panel,.camera-grid{grid-template-columns:1fr}.empty-state{flex-direction:column;align-items:stretch}}
