:root{--bg:#050a0e;--bg2:#081218;--panel:#0b151b;--panel2:#0e1b22;--line:#26343c;--text:#edf3f5;--muted:#8d9aa2;--red:#ef342d;--red2:#9b211f;--green:#6bd63f;--yellow:#f2c84b;--blue:#3ca8ff;--purple:#aa70ff;--shadow:0 12px 36px rgba(0,0,0,.28)}*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(circle at 48% 0,#0d1820 0,#050a0e 45%,#03070a 100%);color:var(--text);font:14px/1.42 Inter,Segoe UI,Arial,sans-serif;min-height:100%}button,input,select{font:inherit}.app-shell{display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-rows:56px auto;min-height:100vh}.topbar{grid-column:1/-1;display:grid;grid-template-columns:190px 1fr 260px;align-items:center;border-bottom:1px solid var(--line);background:#071016;padding:0 14px;position:sticky;top:0;z-index:30}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:34px;height:34px;border:3px solid var(--red);border-radius:50%;display:grid;place-items:center;color:var(--red);font-size:18px;box-shadow:inset 0 0 0 4px #071016,0 0 0 1px #ff4d45}.brand strong{font-size:26px;letter-spacing:3px}.brand small{display:block;font-size:8px;letter-spacing:5px;margin-top:-4px}.top-title{text-align:center;font-weight:900;font-size:26px;letter-spacing:.6px}.top-actions{display:flex;justify-content:flex-end;gap:18px;align-items:center}.clock{text-align:right}.clock b{display:block;font-size:18px}.clock span{font-size:11px;color:var(--muted)}.user-pill{border:1px solid var(--line);padding:9px 12px;border-radius:9px;background:#0a141a;color:#c9d3d8}.sidebar{grid-row:2;position:sticky;top:56px;align-self:start;height:calc(100vh - 56px);border-right:1px solid var(--line);background:linear-gradient(#09131a,#071016);padding:10px 8px;overflow:auto}.side-section{font-size:10px;color:#adb7bd;padding:4px 7px 8px}#nav{display:flex;flex-direction:column;gap:4px}.nav-btn{border:0;background:transparent;color:#d5dde0;text-align:left;padding:9px 10px;border-radius:5px;cursor:pointer;display:flex;gap:9px;align-items:center}.nav-btn:hover{background:#111f27}.nav-btn.active{background:linear-gradient(90deg,#ef342d,#a62322);color:#fff;box-shadow:0 5px 18px rgba(239,52,45,.2)}.sidebar-status{margin-top:18px;border:1px solid var(--line);border-radius:8px;padding:10px;background:#081218}.sidebar-status h4{font-size:10px;color:#b6c0c5;margin:0 0 8px}.sidebar-status>div{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.05);padding:6px 0;font-size:11px}.sidebar-status b{color:var(--green)}.sidebar-status small{display:block;color:#68767e;margin-top:10px}.main{min-width:0;padding:8px;background:linear-gradient(180deg,rgba(255,255,255,.01),transparent)}.page{display:none}.page.active{display:block}.overview-grid{display:grid;grid-template-columns:1.1fr .72fr 1.7fr 1fr;gap:8px}.panel{background:linear-gradient(180deg,#0d171d,#091319);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);min-width:0}.panel-head{min-height:38px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06);padding:8px 12px}.panel-head h2,.panel-head h3{margin:0;font-size:14px}.panel-head span,.panel-head small{color:var(--muted);font-size:10px}.status{font-size:11px!important;font-weight:800}.live-dot{color:var(--green)!important}.now-card{grid-column:1}.metrics{grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:7px}.metric{border:1px solid var(--line);border-radius:8px;background:#0d171d;padding:10px;text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:72px}.metric small{color:#a5afb5;font-size:9px}.metric strong{font-size:25px;line-height:1.05}.metric span{font-size:10px;color:#a6b0b5}.playout-card{grid-column:3}.key-card{grid-column:4;grid-row:1/3}.now-body{display:grid;grid-template-columns:90px 1fr;gap:11px;padding:10px}.cover{height:90px;border-radius:8px;background:radial-gradient(circle at 50% 40%,#253541,#121d24 50%,#0b1217);display:grid;place-items:center;border:1px solid #32414b;color:#fff;font-weight:900;letter-spacing:3px;font-size:20px}.now-copy h1{margin:1px 0 0;font-size:21px}.now-copy p{margin:0;color:#c2cbd0}.wave{height:21px;margin:9px 0;background:repeating-linear-gradient(90deg,var(--red) 0 2px,transparent 2px 5px);mask:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%);opacity:.9}.progress{height:4px;background:#223038;border-radius:9px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:var(--red)}.progress.big{height:8px;margin-top:20px}.time-row{display:flex;justify-content:space-between;font-size:10px;color:#c0c9cd;margin-top:5px}.rotation-chip{margin:0 10px 10px;border:1px solid #2b3941;background:#111d23;border-radius:6px;padding:8px 10px;font-size:10px}.rotation-chip b{float:right;color:#9da9af}.features{list-style:none;margin:0;padding:9px 12px 12px;display:grid;gap:8px;font-size:12px}.features li{color:#dce4e7}.table-wrap{overflow:auto}.table-wrap.tall{max-height:620px}table{border-collapse:collapse;width:100%;font-size:11px}th{text-align:left;color:#a5b0b6;font-size:9px;padding:7px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#0c171d;z-index:1}td{padding:7px;border-bottom:1px solid rgba(255,255,255,.055);white-space:nowrap}tr.onair{background:linear-gradient(90deg,rgba(239,52,45,.18),transparent)}.state-on{color:var(--green)}.state-next{color:var(--yellow)}.state-queued{color:var(--purple)}.chart-card{grid-column:1}.recent-card{grid-column:2}.meter-card{grid-column:3}.studios-card{grid-column:4}.recent-list{padding:8px 12px;display:grid;gap:8px}.recent-list div{display:flex;justify-content:space-between;gap:8px;color:#d7dfe2}.recent-list small{color:#85939a}.meter-card{padding-bottom:8px}.meter-line{display:grid;grid-template-columns:70px 1fr 58px;align-items:center;gap:8px;padding:8px 12px}.meter-line label{font-size:9px}.meter-line b{font-size:11px;text-align:right}.meter{height:11px;background:repeating-linear-gradient(90deg,#1f2d34 0 5px,transparent 5px 7px);position:relative;overflow:hidden}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#63d53d 0 62%,#f0ca40 78%,#ef342d 100%);transition:width .35s}.studios-card #studioList{padding:4px 12px 10px}.studio-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}.studio-row b{font-size:11px}.studio-row span{font-size:10px}.architecture-card{grid-column:1/4}.formats-card{grid-column:4}.architecture{padding:12px;display:grid;grid-template-columns:.8fr 36px 1.2fr 36px 1.15fr 36px .8fr;gap:8px;align-items:center}.arch-col{border:1px solid #35434a;border-radius:8px;padding:10px;min-height:100%}.arch-col h3{text-align:center;font-size:13px;margin:0 0 8px}.arch-box,.stream-box{border:1px solid #43525a;background:#111d23;border-radius:6px;padding:10px;margin:8px 0;display:flex;flex-direction:column;gap:3px;text-align:center}.arch-box span,.stream-box span,.arch-col>span{color:#a6b2b7;font-size:10px}.arch-box em{font-style:normal;color:var(--yellow);font-size:10px}.arch-box.blue{background:linear-gradient(180deg,#124a84,#18355b);border-color:#2e75b8}.arch-box.purple{background:linear-gradient(180deg,#44266c,#31204e);border-color:#6a3c96}.arch-box.green,.stream-box{border-color:#4b7349;background:linear-gradient(180deg,#12251b,#0f1d16)}.stream-box code{font-size:9px;color:#c6d2c8;word-break:break-all}.stream-box b{display:flex;justify-content:space-between}.stream-box.muted{opacity:.55}.arrow{text-align:center;font-size:28px;color:#44a9ff}.people{text-align:center;font-size:34px;color:#b8c8d0;margin:20px 0}.formats-card h4{color:var(--red);font-size:11px;padding:0 12px}.format-pills{display:flex;gap:7px;padding:12px;flex-wrap:wrap}.format-pills b{padding:8px 11px;border:1px solid var(--line);border-radius:5px;background:#18232a;color:#b9c3c7}.format-pills b.active{border-color:#4b724c;color:#dff6d4}.devices{display:grid;grid-template-columns:repeat(4,1fr);padding:6px 12px 14px;gap:8px}.devices span{text-align:center;font-size:27px}.devices small{display:block;font-size:9px;color:#bdc6ca}.reliability-card{grid-column:1/3}.url-card{grid-column:3/5}.reliability{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:16px}.reliability span{text-align:center;font-size:28px}.reliability b,.reliability small{display:block;font-size:10px}.reliability small{color:#8e9ca2}.url-card{padding-bottom:12px}.url-card code{display:block;color:#8dd66b;padding:14px 14px 6px;word-break:break-all}.url-card audio{width:100%;padding:4px 12px}.btn,.mini{border:1px solid #3b4a52;background:#142129;color:#e9f0f2;border-radius:5px;padding:9px 13px;cursor:pointer;font-weight:800}.mini{padding:5px 8px;font-size:10px}.btn:hover,.mini:hover{filter:brightness(1.15)}.danger{background:linear-gradient(#ef3b35,#b72120);border-color:#ff4942}.page-title{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:2px 0 8px;border:1px solid var(--line);border-radius:8px;background:#0b151b;padding:13px 16px}.page-title h1{margin:0;font-size:21px}.page-title p{margin:2px 0 0;color:var(--muted)}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.toolbar input,.toolbar select,.form-card input,.form-card select,.update-panel input{background:#081218;border:1px solid #33434c;color:#e8eef0;border-radius:5px;padding:9px}.split{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hero-now{padding:30px}.hero-now h2{font-size:32px;margin:0}.hero-now p{color:var(--muted)}.list{padding:8px}.list-item{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px;border-bottom:1px solid rgba(255,255,255,.06)}.list-item small{color:var(--muted);display:block}.bulkbar{display:flex;align-items:center;gap:9px;padding:10px;border-bottom:1px solid var(--line);flex-wrap:wrap}.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.form-card{padding:14px}.form-card h3{margin:0 0 14px}.form-card label{display:grid;gap:6px;margin:11px 0;color:#cbd4d7}.switch-row{grid-template-columns:1fr auto!important;align-items:center}.switch-row input{width:20px;height:20px}.timevoice-info{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid var(--line);color:#cbd3d7}.time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:10px}.time-slot{border:1px solid var(--line);border-radius:6px;background:#0c171d;padding:9px;display:grid;grid-template-columns:auto 1fr;gap:7px;align-items:center}.time-slot.configured{border-color:#416d43}.time-slot strong{font-size:15px}.time-slot small{color:var(--muted)}.time-slot .slot-actions{grid-column:1/-1;display:flex;gap:5px;flex-wrap:wrap}.time-slot input{display:none}.cards-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:8px;padding:8px}.card-item{border:1px solid var(--line);border-radius:7px;background:#0c171d;padding:12px}.card-item h3{margin:0 0 4px}.card-item p{color:var(--muted);margin:4px 0 12px}.card-item .actions{display:flex;gap:7px;flex-wrap:wrap}.status-card{padding:18px}.status-card strong{display:block;font-size:28px;margin:8px 0}.status-card code{display:block;color:#8bdc70;word-break:break-all;margin-bottom:12px}.jumbo{min-height:120px}.jumbo strong{font-size:38px}.summary-lines{display:grid;gap:9px}.summary-lines div{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06);padding:7px 0}.event-log{max-height:480px;overflow:auto;padding:8px}.event-row{display:grid;grid-template-columns:150px 120px 1fr;gap:10px;padding:7px;border-bottom:1px solid rgba(255,255,255,.05);font-size:11px}.event-row small{color:var(--muted)}.update-panel{padding:20px;display:grid;gap:14px;max-width:780px}.update-panel label{display:grid;gap:6px}.update-panel pre{white-space:pre-wrap;background:#061015;border:1px solid var(--line);padding:12px;border-radius:6px;min-height:60px}.toast{position:fixed;right:16px;bottom:16px;background:#16232a;border:1px solid #40515a;border-radius:7px;padding:12px 16px;z-index:100;opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none}.toast.error{border-color:#8b302d;color:#ffd5d3}.modal{position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:90;display:grid;place-items:center;padding:20px}.modal[hidden]{display:none}.modal-card{width:min(620px,100%);max-height:85vh;overflow:auto;background:#0b151b;border:1px solid #35454e;border-radius:9px;padding:20px;position:relative}.modal-close{position:absolute;right:10px;top:8px;background:none;border:0;color:white;font-size:28px;cursor:pointer}.modal-card label{display:grid;gap:5px;margin:10px 0}.modal-card input,.modal-card select{background:#081218;border:1px solid #33434c;color:white;padding:9px;border-radius:5px}canvas{width:100%;height:auto;display:block;padding:8px}audio{accent-color:var(--red)}@media(max-width:1250px){.overview-grid{grid-template-columns:1fr 1fr 1fr}.key-card{grid-column:3;grid-row:auto}.playout-card{grid-column:1/3}.architecture-card{grid-column:1/4}.formats-card{grid-column:3}.reliability-card{grid-column:1/3}.url-card{grid-column:1/4}.top-title{font-size:20px}.architecture{grid-template-columns:1fr;}.arrow{transform:rotate(90deg)}}@media(max-width:900px){.app-shell{grid-template-columns:70px 1fr}.sidebar{padding:8px 5px}.nav-btn span,.side-section,.sidebar-status{display:none}.nav-btn{justify-content:center;font-size:18px}.topbar{grid-template-columns:110px 1fr 120px}.top-title{font-size:15px}.brand strong{font-size:20px}.brand small{display:none}.overview-grid,.cards-3,.split{grid-template-columns:1fr}.now-card,.metrics,.playout-card,.key-card,.chart-card,.recent-card,.meter-card,.studios-card,.architecture-card,.formats-card,.reliability-card,.url-card{grid-column:1}.time-grid{grid-template-columns:repeat(2,1fr)}.reliability{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.app-shell{display:block}.topbar{position:static;display:flex;justify-content:space-between}.top-title{display:none}.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}.sidebar #nav{flex-direction:row}.nav-btn{min-width:44px}.main{padding:6px}.metrics{grid-template-columns:repeat(2,1fr)}.page-title{align-items:flex-start;flex-direction:column}.time-grid{grid-template-columns:1fr}.reliability{grid-template-columns:1fr}.event-row{grid-template-columns:1fr}.devices{grid-template-columns:repeat(2,1fr)}}