:root{--bg:#000;--bg-soft:#050805;--panel:#060a06;--green:#3f6;--green-dim:#1f8f3e;--green-deep:#0a3a1a;--amber:#ffb000;--amber-dim:#6b4a00;--red:#ff3b30;--ink:#bfffd2;--mono:"Courier New", "Courier", ui-monospace, "SFMono-Regular", monospace;--glow:0 0 4px #3f69, 0 0 10px #33ff6640;--scan:#00000047}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--green);font-family:var(--mono);-webkit-font-smoothing:none;font-smooth:never;text-rendering:optimizespeed;margin:0;padding:0}body{background-image:radial-gradient(120% 80% at 50% 0,#33ff660d,#0000 60%),radial-gradient(120% 120% at 50% 120%,#ffb0000a,#0000 55%);overflow:hidden}::selection{background:var(--green);color:#001a08}button,input,select{font-family:var(--mono);color:var(--green)}.app{grid-template:"top top""stage guide"minmax(0,1fr)/minmax(0,1fr) 384px;gap:0;height:100vh;display:grid}.topbar{border-bottom:1px solid var(--green-deep);background:linear-gradient(#030503,#0000);flex-wrap:wrap;grid-area:top;justify-content:space-between;align-items:center;gap:16px;padding:12px 20px;display:flex}.brand{align-items:baseline;gap:10px;display:flex}.logo{letter-spacing:3px;color:var(--green);text-shadow:var(--glow);font-size:clamp(20px,3.4vw,30px);font-weight:700;position:relative}.logo:after{content:"SPOOOOL";color:#ff005059;mix-blend-mode:screen;z-index:-1;position:absolute;top:0;left:1.5px}.logo-tv{letter-spacing:2px;color:#001a08;background:var(--amber);border-radius:3px;padding:0 8px;font-size:clamp(20px,3.4vw,30px);font-weight:700;animation:6s infinite flickerSoft;box-shadow:0 0 10px #ffb00080}.tagline{color:var(--green-dim);letter-spacing:1px;text-transform:uppercase;font-size:11px}.readout{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.pill{border:1px solid var(--green-deep);color:var(--green);letter-spacing:1px;background:#33ff660a;border-radius:2px;padding:4px 9px;font-size:11px}.pill-dim{color:var(--green-dim);border-color:#0b220f}.clock{color:var(--amber);letter-spacing:2px;text-shadow:0 0 6px #ffb00080;padding:4px 6px;font-weight:700}.stage{flex-direction:column;grid-area:stage;gap:14px;min-height:0;padding:22px 22px 16px;display:flex}.screen{flex:1;justify-content:center;align-items:center;width:100%;min-height:0;margin:0 auto;display:flex;position:relative}.crt{aspect-ratio:16/9;background:#000;border-radius:18px/12px;width:100%;max-width:calc(177.78dvh - 408.894px);height:100%;margin:0 auto;animation:7s infinite flicker;position:relative;overflow:hidden;box-shadow:0 0 0 2px #0c160c,0 0 0 10px #050805,0 0 0 11px #111,0 24px 60px #000c,inset 0 0 120px #000000e6,inset 0 0 40px #33ff660f}.crt .layer{object-fit:contain;filter:saturate(1.05)contrast(1.04)brightness(1.02);opacity:0;pointer-events:none;z-index:0;background:#000;width:100%;height:100%;position:absolute;inset:0}.crt .layer.active{opacity:1;z-index:1}.scanlines{pointer-events:none;background:repeating-linear-gradient(to bottom, var(--scan) 0px, var(--scan) 1px, transparent 1px, transparent 3px);mix-blend-mode:multiply;opacity:.55;z-index:3;animation:8s linear infinite scanDrift;position:absolute;inset:0}.vignette{pointer-events:none;z-index:2;border-radius:inherit;position:absolute;inset:0;box-shadow:inset 0 0 140px 20px #000000bf}.glass{pointer-events:none;z-index:4;background:radial-gradient(120% 90% at 30% 8%,#ffffff0f,#0000 45%);position:absolute;inset:0}.screen[data-status=LIVE] .scanlines,.screen[data-status=LIVE] .vignette,.screen[data-status=LIVE] .glass{display:none}.osd{z-index:5;letter-spacing:1px;text-shadow:var(--glow);pointer-events:none;align-items:center;gap:8px;font-size:13px;display:flex;position:absolute}.osd-tl{flex-wrap:wrap;max-width:70%;top:14px;left:16px}.osd-tr{top:14px;right:16px}.ch{border:1px solid var(--green-dim);color:var(--amber);background:#0000008c;border-radius:2px;padding:2px 7px;font-weight:700}.osd-name{color:var(--ink);text-transform:uppercase;background:#00000080;padding:2px 6px}.osd-meta{color:var(--green-dim);font-size:11px}.status{background:#0000008c;border-radius:2px;padding:3px 8px;font-weight:700}.status .dot{font-size:10px}.status-LIVE{color:var(--green)}.status-LIVE .dot{animation:1.4s steps(2,start) infinite blink}.status-TUNING{color:var(--amber)}.status-NO-SIGNAL{color:var(--red);text-shadow:0 0 6px #ff3b3099}.status-STANDBY{color:var(--green-dim)}.controls{border:1px solid var(--green-deep);pointer-events:auto;background:#0000008c;border-radius:3px;align-items:center;gap:10px;padding:5px 10px;top:auto;bottom:14px;left:16px}.ctl-btn{cursor:pointer;filter:drop-shadow(0 0 4px #3f66);background:0 0;border:0;padding:0;font-size:16px;line-height:1}.vol{appearance:none;background:var(--green-deep);cursor:pointer;border-radius:2px;outline:none;width:92px;height:4px}.vol::-webkit-slider-thumb{appearance:none;background:var(--green);width:12px;height:12px;box-shadow:var(--glow);cursor:pointer;border-radius:50%}.vol::-moz-range-thumb{background:var(--green);width:12px;height:12px;box-shadow:var(--glow);cursor:pointer;border:0;border-radius:50%}.sound-prompt{z-index:6;color:var(--amber);border:1px solid var(--amber);font-family:var(--mono);letter-spacing:2px;cursor:pointer;text-shadow:0 0 8px #ffb00080;background:#000000b8;border-radius:3px;align-items:center;gap:10px;padding:9px 16px;font-size:14px;font-weight:700;animation:1.8s ease-in-out infinite soundPulse;display:flex;position:absolute;bottom:16%;left:50%;transform:translate(-50%)}.sound-prompt:hover{background:#ffb00026}.sp-ico{font-size:16px}.cc-ctl{pointer-events:auto;align-items:center;gap:8px;top:auto;bottom:14px;right:16px}.cc-btn{border:1px solid var(--green-deep);color:var(--green-dim);font-family:var(--mono);letter-spacing:1px;cursor:pointer;background:#0000008c;border-radius:3px;padding:4px 9px;font-size:12px;font-weight:700}.cc-btn.on{color:#001a08;background:var(--green);box-shadow:var(--glow)}.cc-lang{border:1px solid var(--green-deep);color:var(--green);font-family:var(--mono);cursor:pointer;background:#0009;border-radius:3px;outline:none;padding:3px 4px;font-size:12px}.subtitle{z-index:6;text-align:center;color:#fff;max-width:86%;font-family:var(--mono);letter-spacing:.5px;text-shadow:0 1px 3px #000,0 0 8px #000c;pointer-events:none;background:#000000a8;border-radius:3px;padding:5px 12px;font-size:clamp(14px,2.4vw,20px);font-weight:700;line-height:1.3;position:absolute;bottom:58px;left:50%;transform:translate(-50%)}@keyframes soundPulse{0%,to{box-shadow:0 0 14px #ffb00033}50%{box-shadow:0 0 26px #ffb00073}}.noise{z-index:1;background:#020302;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.noise .bars{opacity:.6;background:repeating-linear-gradient(115deg,#33ff660d 0 2px,#0000 2px 6px);animation:1.4s linear infinite roll;position:absolute;inset:-50% -10%}.noise .msg{z-index:2;color:var(--amber);letter-spacing:4px;text-shadow:0 0 10px #ffb00080;font-weight:700;animation:3s infinite flickerSoft;position:relative}.nowbar{border:1px solid var(--green-deep);background:#33ff6608;border-radius:3px;flex-wrap:wrap;align-items:baseline;gap:12px;min-height:38px;padding:8px 12px;display:flex}.now-name{color:var(--ink);letter-spacing:1px;text-shadow:var(--glow);text-transform:uppercase;font-weight:700}.now-meta{color:var(--green-dim);letter-spacing:1px;font-size:12px}.now-hint{color:var(--amber-dim);letter-spacing:1px;margin-left:auto;font-size:11px}.guide-panel{border-left:1px solid var(--green-deep);background:linear-gradient(#040604,#020302);flex-direction:column;grid-area:guide;min-height:0;display:flex}.tabs{border-bottom:1px solid var(--green-deep);gap:0;display:flex}.tabs button{border:0;border-right:1px solid var(--green-deep);letter-spacing:2px;cursor:pointer;color:var(--green-dim);background:0 0;flex:1;padding:11px 8px;font-size:12px;transition:background .12s,color .12s}.tabs button:last-child{border-right:0}.tabs button:hover{color:var(--green);background:#33ff660d}.tabs button.on{color:#001a08;background:var(--green);text-shadow:none;font-weight:700}.filters{border-bottom:1px solid var(--green-deep);flex-direction:column;gap:8px;padding:12px;display:flex}.search{border:1px solid var(--green-dim);letter-spacing:1px;background:#000;border-radius:2px;outline:none;width:100%;padding:8px 10px}.search::placeholder{color:var(--green-deep)}.search:focus{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber-dim), 0 0 8px #ffb00040}.selects{grid-template-columns:1fr 1fr;gap:8px;display:grid}.selects select{border:1px solid var(--green-dim);cursor:pointer;background:#000;border-radius:2px;outline:none;width:100%;padding:7px 6px;font-size:12px}.selects select:focus{border-color:var(--amber)}.chk{color:var(--ink);letter-spacing:.5px;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font-size:12px;display:flex}.chk input{appearance:none;border:1px solid var(--green-dim);cursor:pointer;background:#000;place-content:center;width:14px;height:14px;display:grid}.chk input:checked{background:var(--green);border-color:var(--green);box-shadow:var(--glow)}.chk input:checked:after{content:"✓";color:#001a08;font-size:11px;font-weight:700}.guide{scrollbar-width:thin;scrollbar-color:var(--green-dim) #000;flex:1;min-height:0;overflow-y:auto}.guide::-webkit-scrollbar{width:8px}.guide::-webkit-scrollbar-thumb{background:var(--green-deep)}.guide-empty,.guide-more{color:var(--green-dim);letter-spacing:1px;text-align:center;padding:16px;font-size:12px}.guide-more{border-top:1px dashed var(--green-deep);color:var(--amber-dim)}.item{cursor:pointer;border-bottom:1px solid #081008;grid-template-columns:26px 40px 1fr auto auto;align-items:center;gap:10px;padding:9px 12px;transition:background .1s;display:grid}.item:hover{background:#33ff660f}.item.active{box-shadow:inset 3px 0 0 var(--amber);background:#ffb00014}.item-no{color:var(--green-dim);text-align:right;font-size:12px}.logo-wrap{background:#000;border:1px solid #0c1c0c;border-radius:2px;place-items:center;width:40px;height:28px;display:grid;overflow:hidden}.logo-wrap img{object-fit:contain;filter:saturate(.9);max-width:100%;max-height:100%}.logo-fallback{color:var(--green-dim);font-size:11px;font-weight:700}.item-text{min-width:0}.item .nm{color:var(--ink);white-space:nowrap;text-overflow:ellipsis;letter-spacing:.5px;font-size:13px;overflow:hidden}.item.active .nm{color:var(--amber);text-shadow:0 0 6px #ffb00066}.item .ct{color:var(--green-dim);white-space:nowrap;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.5px;font-size:10.5px;overflow:hidden}.live-dot{border-radius:50%;width:8px;height:8px}.live-dot.ok{background:var(--green);box-shadow:0 0 6px var(--green)}.live-dot.no{background:var(--red);box-shadow:0 0 6px var(--red)}.star{cursor:pointer;color:var(--amber);text-shadow:0 0 6px #ffb00059;background:0 0;border:0;padding:2px 4px;font-size:16px;line-height:1}.star:hover{transform:scale(1.15)}@keyframes flicker{0%,to{opacity:1}3%{opacity:.96}6%{opacity:1}72%{opacity:1}74%{opacity:.94}76%{opacity:1}}@keyframes flickerSoft{0%,to{opacity:1}48%{opacity:.85}50%{opacity:.7}52%{opacity:.9}}@keyframes scanDrift{0%{background-position-y:0}to{background-position-y:3px}}@keyframes roll{0%{transform:translateY(0)}to{transform:translateY(6px)}}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:.25}}@media (width<=880px){.app{grid-template:"top""stage""guide"1fr/1fr;height:auto;min-height:100dvh;overflow:auto}body{overflow:auto}.crt{max-width:100%}.stage{padding:14px}.guide-panel{border-left:0;border-top:1px solid var(--green-deep)}.guide{max-height:60vh}}@media (prefers-reduced-motion:reduce){.crt,.logo-tv,.scanlines,.noise .bars,.noise .msg,.status-LIVE .dot,.sound-prompt{animation:none!important}}