@font-face{font-family:Manrope;src:url('../fonts/Manrope-Variable.ttf')}@font-face{font-family:Barlow;src:url('../fonts/BarlowCondensed-Bold.ttf');font-weight:700}
:root{--navy:#061b3a;--navy2:#0b2a5b;--blue:#1759d1;--yellow:#ffc300;--ink:#14213a;--muted:#607087;--line:#d9e2ec;--soft:#f2f5f8;--white:#fff;--green:#0b9b68;--red:#cf3345;--orange:#d78013;--shadow:0 18px 55px rgba(6,27,58,.14)}
*{box-sizing:border-box}html{min-width:240px;background:var(--soft);color:var(--ink);font-family:Manrope,"Segoe UI",sans-serif}body{margin:0}button,input,select{font:inherit}button,a{transition:.18s ease}a{color:var(--blue);text-decoration:none}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Barlow,"Arial Narrow",sans-serif;line-height:.96;letter-spacing:.01em}h1{font-size:clamp(2.2rem,5vw,4.4rem);margin-bottom:10px}h2{font-size:1.8rem;margin-bottom:8px}code{overflow-wrap:anywhere}.eyebrow{display:block;color:var(--blue);font:700 .75rem Manrope;letter-spacing:.13em;text-transform:uppercase}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:9px 15px;border:1px solid transparent;border-radius:7px;background:none;color:var(--ink);font-weight:750;cursor:pointer}.btn:hover{transform:translateY(-1px)}.btn.primary{background:var(--blue);color:#fff}.btn.secondary{background:#fff;border-color:var(--line)}.btn.ghost{color:inherit;border-color:rgba(255,255,255,.25)}.btn.danger{color:var(--red);border-color:#f2bdc3;background:#fff}.btn.small{min-height:34px;padding:6px 10px;font-size:.8rem}.btn.full{width:100%}.alert{margin:0 0 18px;padding:13px 15px;border:1px solid #aad0ff;border-radius:8px;background:#e9f3ff}.alert.danger{color:#8f1726;border-color:#f3b3bb;background:#fff0f2}.alert.success{color:#096b49;border-color:#9edbc7;background:#eafff7}
.app-frame{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}.app-sidebar{position:sticky;top:0;display:flex;flex-direction:column;height:100vh;padding:18px 13px;color:#fff;background:var(--navy);border-right:3px solid var(--yellow)}.sidebar-brand{display:block;height:86px;padding:7px;overflow:hidden}.sidebar-brand img{width:100%;height:100%;object-fit:contain}.sidebar-nav{display:grid;gap:5px;margin-top:18px}.sidebar-nav a{padding:12px 14px;border-radius:7px;color:#cdd8e8;font-weight:700}.sidebar-nav a:hover,.sidebar-nav a.active{color:var(--navy);background:var(--yellow)}.nav-label{margin:22px 12px 5px;color:#7e94b0;font-size:.68rem;text-transform:uppercase;letter-spacing:.13em}.sidebar-user{display:grid;gap:10px;margin-top:auto;padding:13px;border:1px solid rgba(255,255,255,.15);border-radius:9px;background:rgba(0,0,0,.16)}.sidebar-user strong,.sidebar-user small{display:block}.sidebar-user small{color:#92a9c5}.sidebar-user form,.wall-card form,td form,.camera-card footer form{display:inline}.app-shell{min-width:0}.topbar{position:sticky;z-index:40;top:0;display:flex;align-items:center;justify-content:space-between;min-height:70px;padding:10px clamp(18px,3vw,42px);background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.topbar strong{display:block}.live-chip,.status{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:999px;background:#edf2f7;font-size:.75rem;font-weight:800}.live-chip i,.status i{width:8px;height:8px;border-radius:50%;background:var(--green)}.status.offline i{background:var(--red)}.status.pending i,.status.degraded i{background:var(--orange)}.main-content{width:min(1600px,100%);margin:auto;padding:clamp(20px,3vw,46px)}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:25px}.page-head p{margin:0;color:var(--muted)}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:13px;margin-bottom:18px}.metric-card,.panel,.wall-card,.camera-card,.event-gallery article{background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 8px 25px rgba(6,27,58,.06)}.metric-card{display:grid;min-height:145px;padding:20px;overflow:hidden;border-top:4px solid var(--blue)}.metric-card.success{border-color:var(--green)}.metric-card.warning{border-color:var(--orange)}.metric-card span,.metric-card small{color:var(--muted)}.metric-card strong{font:700 3.5rem Barlow;color:var(--navy)}.panel{margin-bottom:18px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line)}.panel-head h2,.panel-head p{margin:0}.panel-head p{color:var(--muted)}.padded{padding:20px}.event-list{padding:5px 20px}.event-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--line)}.event-row img,.event-placeholder{width:58px;height:46px;object-fit:cover;border-radius:5px}.event-placeholder{display:grid;place-items:center;color:var(--yellow);background:var(--navy);font:700 1.2rem Barlow}.event-row strong,.event-row span{display:block}.event-row span,.event-row time{color:var(--muted);font-size:.78rem}.empty-inline,.empty-state{padding:35px;text-align:center;color:var(--muted)}
.filter-bar{display:flex;gap:8px;margin-bottom:16px}.filter-bar input,.filter-bar select{min-width:min(360px,70vw)}input,select{width:100%;min-height:43px;padding:9px 11px;color:var(--ink);background:#fff;border:1px solid #b8c6d8;border-radius:6px}input:focus,select:focus{outline:3px solid rgba(23,89,209,.18);border-color:var(--blue)}label{display:grid;gap:6px;color:var(--ink);font-size:.82rem;font-weight:750}label small{color:var(--muted);font-weight:500}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.span-2{grid-column:span 2}.check{display:flex;align-items:center;gap:8px}.check input{width:18px;min-height:18px}.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}fieldset{border:1px solid var(--line);border-radius:8px;padding:14px}legend{font-weight:800}
.camera-grid{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:14px}.camera-card{min-width:0;overflow:hidden}.camera-media{position:relative;height:220px;overflow:hidden;background:#020b17}.camera-media img,.camera-media video,.camera-media iframe,.camera-media>div{display:block;width:100%;height:100%;object-fit:cover;border:0}.play-overlay{position:absolute;inset:50% auto auto 50%;width:52px;height:52px;transform:translate(-50%,-50%);color:#fff;background:rgba(6,27,58,.85);border:1px solid rgba(255,255,255,.4);border-radius:50%;cursor:pointer}.camera-media>.status{position:absolute;top:10px;right:10px;color:#fff;background:rgba(6,27,58,.83)}.camera-info{padding:14px 16px}.camera-info span,.camera-info small{display:block;color:var(--muted);font-size:.75rem}.camera-info h2{margin:4px 0;font-size:1.55rem}.camera-card footer{display:flex;align-items:center;gap:6px;padding:0 15px 15px;flex-wrap:wrap}
.wall-list{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:14px}.wall-card{display:grid;grid-template-columns:100px 1fr;gap:16px;padding:15px}.wall-preview{display:grid;place-items:center;align-content:center;min-height:120px;color:#fff;background:var(--navy);border-radius:7px}.wall-preview span,.wall-preview small{font-size:.7rem}.wall-preview strong{font:700 3rem Barlow;color:var(--yellow)}.wall-card footer{display:flex;gap:6px;grid-column:1/-1}.assignment-list{display:grid}.assignment-list article{display:grid;grid-template-columns:minmax(200px,1.2fr) minmax(180px,1fr) 130px 80px;align-items:center;gap:10px;padding:12px 20px;border-bottom:1px solid var(--line)}.assignment-list .check{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:8px}.assignment-list .check small{grid-column:2}
.modal{position:fixed;z-index:200;inset:0;display:grid;place-items:center;padding:20px;visibility:hidden;opacity:0;background:rgba(2,11,23,.75)}.modal.open{visibility:visible;opacity:1}.modal-panel{width:min(680px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:22px;background:#fff;border-radius:11px;box-shadow:var(--shadow)}.modal-panel>header,.focus-panel>header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.modal-panel>header h2{margin:0}.modal-panel>header button,.focus-panel>header button{width:42px;height:42px;border:0;border-radius:7px;font-size:1.6rem;cursor:pointer}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.focus-panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:min(1500px,100%);height:min(900px,100%);padding:15px;color:#fff;background:#020b17;border:1px solid #365b88;border-radius:10px}.focus-panel>header{margin:0 0 10px}.focus-media{min-height:0;overflow:hidden}.focus-media img,.focus-media video,.focus-media iframe,.focus-media>div{width:100%;height:100%;object-fit:contain;border:0}
.event-gallery{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:13px}.event-gallery article{overflow:hidden}.event-gallery img,.event-gallery .event-placeholder{width:100%;height:170px;object-fit:cover;border-radius:0}.event-gallery article>div:last-child{padding:13px}.event-type{color:var(--blue);font-weight:800;font-size:.73rem}.event-gallery time{color:var(--muted);font-size:.75rem}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}th{color:var(--muted);font-size:.72rem;text-transform:uppercase}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.check-list,.settings-copy{padding:20px}.check-list>div{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:9px;padding:10px 0;border-bottom:1px solid var(--line)}.check-list i{width:11px;height:11px;margin-top:4px;border-radius:50%;background:var(--red)}.check-list .ok i{background:var(--green)}.check-list span{color:var(--muted)}.settings-copy dd{margin:0 0 15px;color:var(--muted)}
.splash-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,rgba(255,195,0,.16),transparent 42%),var(--navy)}.splash{display:grid;justify-items:center;gap:42px;padding:40px;text-align:center}.splash-logo{width:min(760px,86vw);height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}.splash-enter{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.02em;padding:14px 34px;border:2px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(255,255,255,.06);transition:background .2s,border-color .2s}.splash-enter:hover,.splash-enter:focus-visible{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
.login-body{min-height:100vh;padding:24px;background:var(--navy)}.login-shell{display:grid;grid-template-columns:1.25fr .75fr;width:min(1450px,100%);min-height:calc(100vh - 48px);margin:auto;overflow:hidden;background:#fff;border-radius:14px}.login-visual{position:relative;display:grid;align-content:end;padding:55px;color:#fff;background:radial-gradient(circle at 54% 42%,rgba(255,195,0,.22),transparent 25%),var(--navy2);overflow:hidden}.login-lockup{position:absolute;top:25px;left:35px;width:230px}.login-mascot{position:absolute;inset:50% auto auto 50%;width:min(55%,520px);transform:translate(-50%,-56%)}.login-copy{position:relative;z-index:2;max-width:630px}.login-copy .eyebrow{color:var(--yellow)}.login-copy h1{font-size:clamp(3rem,6vw,6rem)}.login-panel{display:grid;place-items:center;padding:40px}.stack-form{display:grid;gap:15px;width:min(420px,100%)}.stack-form h2{font-size:2.6rem}.stack-form .eyebrow{margin-bottom:-8px}
.setup-shell{display:grid;place-items:center;width:min(760px,100%);min-height:calc(100vh - 48px);margin:auto}.setup-shell>.panel{width:100%;padding:clamp(22px,5vw,48px)}.setup-shell .stack-form{margin-top:24px}
.tv-body{height:100vh;overflow:hidden;color:#fff;background:#020b17}.tv-header{display:flex;align-items:center;justify-content:space-between;height:92px;padding:12px 20px;background:var(--navy);border-bottom:3px solid var(--yellow)}.tv-header h1{margin:0;font-size:2.4rem}.tv-header .eyebrow{color:var(--yellow)}.tv-stats{display:flex;align-items:center;gap:16px}.tv-stats span{display:flex;align-items:center;gap:6px}.tv-stats i{width:8px;height:8px;background:var(--green);border-radius:50%}.tv-stats button,.tv-stats a{padding:8px;color:#fff;background:#153861;border:1px solid #395b83;border-radius:6px}.tv-summary{display:grid;grid-template-columns:repeat(3,1fr);height:74px;gap:8px;padding:8px 12px}.tv-summary article{display:flex;align-items:baseline;gap:8px;padding:9px 15px;background:#0b2343;border:1px solid #26476d;border-radius:5px}.tv-summary strong{font:700 2rem Barlow;color:var(--yellow)}.tv-grid{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:6px;height:calc(100vh - 92px);padding:8px}.tv-body[data-tv-mode=dashboard] .tv-grid{height:calc(100vh - 166px)}.layout-1x1{--cols:1}.layout-2x2{--cols:2}.layout-3x2,.layout-3x3{--cols:3}.layout-4x4{--cols:4}.tv-camera{position:relative;min-width:0;min-height:0;overflow:hidden;background:#061426;border:1px solid #27486f;border-radius:4px}.tv-camera.size-wide{grid-column:span 2}.tv-camera.size-tall{grid-row:span 2}.tv-camera.size-featured{grid-column:span 2;grid-row:span 2}.tv-camera .camera-media{height:100%}.tv-camera>header{position:absolute;z-index:3;top:0;right:0;left:0;display:flex;justify-content:space-between;gap:12px;padding:10px 12px 30px;background:linear-gradient(#020b17e8,transparent);pointer-events:none}.tv-camera>header small,.tv-camera>header strong{display:block}.tv-camera>header small{color:var(--yellow)}.tv-open{position:absolute;z-index:5;right:10px;bottom:10px;width:42px;height:42px;color:#fff;background:#0b2a5be8;border:1px solid #50739b;border-radius:5px;cursor:pointer}.carousel-hidden{display:none}.tv-body[data-tv-mode=carousel] .tv-grid{--cols:1}.tv-body[data-tv-mode=carousel] .tv-camera{grid-column:1;grid-row:1}.tv-empty{display:grid;place-items:center;text-align:center;grid-column:1/-1}.mobile-only{display:none}
.player-error{display:grid!important;place-items:center;align-content:center;gap:8px;padding:20px;text-align:center;color:#fff;background:#101d31}.player-error span{color:#aebdd1;font-size:.8rem}
@media(max-width:1100px){.camera-grid,.wall-list{grid-template-columns:repeat(2,minmax(240px,1fr))}.event-gallery{grid-template-columns:repeat(3,minmax(200px,1fr))}.metric-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.app-frame{grid-template-columns:1fr}.app-sidebar{position:fixed;z-index:100;inset:0 auto 0 0;width:min(300px,88vw);transform:translateX(-105%)}body.sidebar-open .app-sidebar{transform:none}.mobile-only{display:inline-grid}.main-content{padding:20px 14px}.page-head{align-items:flex-start;flex-direction:column}.camera-grid,.wall-list,.settings-grid,.event-gallery{grid-template-columns:1fr}.assignment-list article{grid-template-columns:1fr 1fr}.assignment-list .check{grid-column:1/-1}.login-body{padding:0}.login-shell{grid-template-columns:1fr;min-height:100vh;border-radius:0}.login-visual{display:none}.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.tv-header{height:76px}.tv-header h1{font-size:1.6rem}.tv-stats span{display:none}.tv-grid{height:calc(100vh - 76px);--cols:1!important}.tv-body[data-tv-mode=dashboard] .tv-grid{height:calc(100vh - 150px)}}
@media(max-width:420px){.metric-grid{grid-template-columns:1fr}.assignment-list article{grid-template-columns:1fr}.event-row{grid-template-columns:48px minmax(0,1fr)}.event-row time{grid-column:2}.tv-stats{gap:6px}.tv-stats time{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}}

/* Operational UI refinement */
:root{--navy:#06182f;--navy2:#0a2a53;--blue:#1459d9;--yellow:#ffd000;--ink:#10223c;--muted:#5d6e83;--line:#d5dee9;--soft:#eef2f6;--green:#07966a;--red:#d13b4b;--orange:#c9780b;--shadow:0 20px 60px rgba(3,20,43,.18)}
html{font-size:16px}body{background-color:var(--soft);background-image:linear-gradient(rgba(6,24,47,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(6,24,47,.025) 1px,transparent 1px);background-size:32px 32px}button,input,select{font-size:.9rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
label{font-size:.875rem}.btn.small{font-size:.875rem}
.app-sidebar{background:linear-gradient(180deg,#071b36 0%,#041326 100%);box-shadow:8px 0 35px rgba(3,20,43,.13)}.sidebar-nav a{font-size:.9rem}.topbar{box-shadow:0 6px 22px rgba(3,20,43,.05)}.main-content{width:min(1720px,100%)}.head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.command-head{padding-bottom:18px;border-bottom:1px solid var(--line)}.command-head h1{margin-bottom:7px}.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid rgba(20,89,217,.35);outline-offset:2px}.btn:disabled{opacity:.62;cursor:wait;transform:none}.btn.loading::before{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}.btn.ghost-light{color:var(--blue);border-color:#b9cae1;background:#f6f9fc}.panel.compact{padding:10px}.filter-bar.panel{align-items:center;width:100%;box-shadow:none}.search-field{flex:1}.filter-bar input{min-width:0}.camera-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.camera-card{transition:transform .18s ease,box-shadow .18s ease}.camera-card:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(3,20,43,.12)}.camera-media{height:230px}.camera-media::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.play-overlay{z-index:4;display:grid;place-items:center;box-shadow:0 8px 30px rgba(0,0,0,.28)}.play-overlay:hover{background:var(--blue);transform:translate(-50%,-50%) scale(1.06)}.camera-info{min-height:132px}.camera-info h2{font-size:1.75rem}.capability-list{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.capability-list span{max-width:100%;padding:4px 7px;border-radius:4px;color:#35516f;background:#edf3f9;font-size:.67rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status{font-size:.72rem}.status.online{color:#08724f;background:#e8f8f2}.status.offline{color:#a52232;background:#ffedf0}.status.pending,.status.degraded{color:#925707;background:#fff5de}.camera-media>.status,.tv-camera .status{color:#fff;background:rgba(3,20,43,.86)}
.metric-grid-5{grid-template-columns:repeat(5,minmax(145px,1fr))}.metric-card{position:relative;min-height:132px}.metric-card::after{content:"";position:absolute;right:-16px;bottom:-22px;width:78px;height:78px;border:16px solid rgba(20,89,217,.055);border-radius:50%}.metric-card.danger-metric{border-color:var(--red)}.dashboard-columns{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);gap:18px}.dashboard-columns .panel{margin:0}.health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;padding:5px 20px}.health-camera{display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.health-thumb{width:70px;height:50px;overflow:hidden;border-radius:6px;background:#061426}.health-thumb img{width:100%;height:100%;object-fit:cover}.health-camera small,.health-camera strong,.health-camera div>span{display:block}.health-camera small,.health-camera div>span{color:var(--muted);font-size:.7rem}.health-camera strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}.health-camera>.status{justify-self:end}.event-panel .event-row{grid-template-columns:48px minmax(0,1fr)}.event-panel .event-row time{grid-column:2}.event-panel .event-row img,.event-panel .event-placeholder{width:48px;height:42px}
.integration-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.integration-strip article{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:10px}.integration-strip small,.integration-strip strong{display:block}.integration-strip small{color:var(--muted);font-size:.72rem}.integration-strip strong{font-size:.86rem}.integration-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:7px;color:var(--yellow);background:var(--navy);font:700 .82rem Barlow;letter-spacing:.04em}.security-note{padding:12px;border-left:3px solid var(--yellow);color:#394d66;background:#f6f8fb;font-size:.82rem}.gateway-note{display:flex;align-items:center;justify-content:space-between;gap:25px}.gateway-note h2{margin:4px 0 8px}.gateway-note p{margin:0;color:var(--muted)}
.wall-list{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}.wall-card{grid-template-columns:140px minmax(0,1fr);padding:16px}.wall-preview{position:relative;display:block;min-height:145px;padding:14px;background:linear-gradient(145deg,#09254a,#041326)}.wall-preview>span{position:absolute;right:10px;bottom:8px;color:#94aac4;text-transform:uppercase}.mini-wall{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:31px;gap:4px}.mini-wall i{border:1px solid #3e638d;border-radius:2px;background:#102f55}.mini-wall i:first-child{border-color:#d6b000;background:#4e4816}.wall-copy h2{margin:6px 0;font-size:2rem}.wall-copy p{margin:12px 0 0;color:var(--muted);font-size:.78rem}.wall-card footer{align-self:end}.assignment-list article:hover{background:#f7f9fc}
.assignment-head{display:grid;grid-template-columns:minmax(200px,1.2fr) minmax(180px,1fr) 130px 80px;gap:10px;padding:10px 20px;color:var(--muted);background:#f5f7fa;border-bottom:1px solid var(--line);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.selection-count{padding:6px 9px;color:#36516e;background:#edf3f9;border-radius:999px;font-size:.72rem;font-weight:800}.sticky-save{position:sticky;bottom:0;display:flex;justify-content:flex-end;background:rgba(255,255,255,.94);border-top:1px solid var(--line);backdrop-filter:blur(10px)}
.role-guide{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}.role-guide article{padding:15px 16px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:8px}.role-guide strong,.role-guide span{display:block}.role-guide span{margin-top:4px;color:var(--muted);font-size:.78rem}.role-chip{display:inline-flex;padding:5px 8px;border-radius:5px;color:#264661;background:#eaf1f8;font-size:.78rem;font-weight:800}.role-chip.role-admin{color:#fff;background:var(--navy)}.role-chip.role-tv{color:#805000;background:#fff0c5}.role-chip.role-zona{color:#096b49;background:#e4f8f0}
.zone-list{display:grid;gap:16px}.zone-card{position:relative;overflow:hidden}.zone-settings{display:grid;grid-template-columns:minmax(180px,1fr) minmax(140px,.6fr) auto auto;align-items:end;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}.zone-camera-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:8px;padding:18px 20px}.zone-camera{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:9px;padding:11px;border:1px solid var(--line);border-radius:7px;background:#f8fafc;cursor:pointer}.zone-camera:has(input:checked){border-color:#80a8df;background:#edf4ff;box-shadow:inset 3px 0 var(--blue)}.zone-camera input{width:18px;min-height:18px}.zone-camera strong,.zone-camera small{display:block}.zone-camera small{margin-top:2px;color:var(--muted);font-size:.72rem}.zone-actions{display:flex;justify-content:flex-end;padding:0 20px 18px}.zone-delete{position:absolute;right:20px;top:70px}
.toast-region{position:fixed;z-index:500;right:20px;top:20px;display:grid;gap:8px;width:min(390px,calc(100vw - 40px))}.toast{padding:14px 16px;color:#fff;background:var(--navy);border-left:4px solid var(--green);border-radius:7px;box-shadow:var(--shadow);opacity:0;transform:translateY(-12px);transition:.22s ease}.toast.show{opacity:1;transform:none}.toast.danger{border-color:var(--red)}
.tv-body{background-color:#010915;background-image:radial-gradient(circle at 50% 0,rgba(20,89,217,.13),transparent 35%)}.tv-header{height:84px;padding:10px 18px;background:rgba(4,19,38,.96)}.tv-header h1{font-size:2.15rem}.tv-grid{grid-template-columns:repeat(var(--cols,var(--auto-cols,4)),minmax(0,1fr));height:calc(100vh - 84px);padding:7px}.tv-body[data-tv-mode=dashboard] .tv-grid{height:calc(100vh - 158px)}.tv-camera{border-color:#1f4167;background:#031020}.tv-camera .camera-media,.tv-camera .camera-media canvas,.tv-camera .camera-media video{transform:translateZ(0);backface-visibility:hidden}.tv-camera .camera-media{contain:layout paint}.tv-camera .camera-media>div[id^=imou-]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) translateZ(0)}.tv-camera .camera-media>video,.tv-camera .camera-media>img{object-fit:contain;background:#000}.tv-camera>header{z-index:5;padding:9px 11px 34px}.tv-camera>header strong{max-width:22vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tv-camera .play-overlay{opacity:.82}.tv-camera .player-loading{position:absolute;z-index:2;right:10px;bottom:10px;display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:4px;color:#bdd0e5;background:rgba(3,20,43,.78);font-size:.68rem}.player-loading i{width:11px;height:11px;border:2px solid #8da6c2;border-right-color:var(--yellow);border-radius:50%;animation:spin .8s linear infinite}.tv-open{display:grid;place-items:center;font-size:1.1rem}.tv-empty{grid-column:1/-1}.tv-empty h2{font-size:3rem}.focus-panel{border-color:#315e91}.focus-panel .eyebrow{color:var(--yellow)}.player-error .btn{margin-top:6px}.layout-auto{--cols:var(--auto-cols,4)}
.tv-body.tv-focus-direct .tv-camera.camera-focused{position:fixed!important;z-index:260;inset:0;display:block!important;width:100vw;height:100vh;border:0;border-radius:0;background:#000;grid-column:auto;grid-row:auto;cursor:default}.tv-body.tv-focus-direct .tv-camera.camera-focused .camera-media{height:100vh!important}.tv-body.tv-focus-direct .tv-camera.camera-focused>header{z-index:8;padding:18px 82px 62px 20px}.tv-body.tv-focus-direct .tv-camera.camera-focused>header strong{max-width:calc(100vw - 140px);font-size:clamp(1rem,2vw,1.7rem)}.tv-body.tv-focus-direct .tv-camera.camera-focused .tv-open{display:none!important}.tv-focus-close{display:none;position:fixed;z-index:2147483647;top:18px;right:18px;width:58px;height:58px;place-items:center;color:#fff;background:#b52c40;border:1px solid #e05e70;border-radius:8px;font-size:2.2rem;font-weight:900;line-height:1;cursor:pointer}.tv-body.tv-focus-direct .tv-focus-close:not([hidden]){display:grid}.tv-focus-close:focus{outline:3px solid #fff;outline-offset:2px}
.camera-media[data-stream-state]::before,.focus-media[data-stream-state]::before{content:"CONECTANDO";position:absolute;z-index:7;left:10px;bottom:10px;padding:5px 8px;border:1px solid rgba(255,255,255,.18);border-radius:4px;color:#dbe8f6;background:rgba(3,20,43,.88);font-size:.64rem;font-weight:900;letter-spacing:.08em;pointer-events:none}.focus-media{position:relative}.camera-media[data-stream-state="queued"]::before,.focus-media[data-stream-state="queued"]::before{content:"EN COLA"}.camera-media[data-stream-state="live"]::before,.focus-media[data-stream-state="live"]::before{content:"EN VIVO";color:#fff;background:rgba(4,121,82,.9)}.camera-media[data-stream-state="paused"]::before,.focus-media[data-stream-state="paused"]::before{content:"PAUSADA";background:rgba(151,91,5,.92)}.camera-media[data-stream-state="error"]::before,.focus-media[data-stream-state="error"]::before{content:"REINTENTANDO";background:rgba(166,30,47,.92)}.camera-media[data-stream-state="image"]::before{content:"IMAGEN"}
.camera-media:has(.player-error)::before,.focus-media:has(.player-error)::before{display:none}.tv-camera{cursor:zoom-in;transition:border-color .18s ease,box-shadow .18s ease}.tv-camera:hover,.tv-camera:focus-visible{border-color:#ffd000;box-shadow:inset 0 0 0 1px rgba(255,208,0,.45);outline:none}.tv-camera>header strong{font-size:clamp(.78rem,1.1vw,1rem);text-shadow:0 2px 8px #000}.focus-panel>header button{color:#fff;background:#b52c40;border:1px solid #e05e70;font-weight:900}.focus-panel>header button:hover,.focus-panel>header button:focus-visible{background:#db3c53;transform:scale(1.04)}.modal.open .focus-panel{animation:focus-in .16s ease-out}@keyframes focus-in{from{opacity:.45;transform:scale(.985)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1300px){.metric-grid-5{grid-template-columns:repeat(3,1fr)}.dashboard-columns{grid-template-columns:1fr}.integration-strip{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}}
@media(max-width:900px){.health-grid{grid-template-columns:1fr}.gateway-note{align-items:flex-start;flex-direction:column}.role-guide{grid-template-columns:repeat(2,1fr)}.zone-settings{grid-template-columns:1fr 1fr}.zone-delete{position:static;margin:0 20px 18px}.tv-title .eyebrow{display:none}.tv-header h1{font-size:1.6rem}.tv-camera>header strong{max-width:50vw}}
@media(max-width:800px){.metric-grid-5{grid-template-columns:repeat(2,1fr)}.wall-card{grid-template-columns:110px minmax(0,1fr)}.wall-preview{min-height:125px}.assignment-head{display:none}.tv-header{height:70px}.tv-grid{height:calc(100vh - 70px)}.tv-body[data-tv-mode=dashboard] .tv-grid{height:calc(100vh - 144px)}}
@media(max-width:520px){.metric-grid-5{grid-template-columns:1fr 1fr}.metric-card{min-height:110px;padding:15px}.metric-card strong{font-size:2.8rem}.health-camera{grid-template-columns:58px minmax(0,1fr)}.health-thumb{width:58px}.health-camera>.status{grid-column:2;justify-self:start}.wall-card{grid-template-columns:1fr}.wall-preview{min-height:110px}.head-actions{width:100%}.head-actions .btn{flex:1}.role-guide,.zone-settings{grid-template-columns:1fr}.tv-stats a{display:none}}

/* Paginación de muros TV: max_visible indica cámaras por página. */
.tv-page-hidden{display:none!important}.tv-pagination{display:flex;align-items:center;gap:7px;padding:4px;border:1px solid #395b83;border-radius:9px;background:#06182f}.tv-pagination button{display:grid;place-items:center;width:48px;height:40px;padding:0;font-size:1.55rem;font-weight:900;line-height:1;cursor:pointer}.tv-pagination button:hover,.tv-pagination button:focus-visible{color:var(--navy);background:var(--yellow);border-color:var(--yellow)}.tv-pagination [data-tv-page-label]{display:inline-flex!important;min-width:54px;justify-content:center;color:#fff;font-weight:900;font-variant-numeric:tabular-nums}
@media(max-width:800px){.tv-pagination{gap:3px}.tv-pagination button{width:42px;height:36px}.tv-pagination [data-tv-page-label]{min-width:46px;font-size:.78rem}}