:root{
  --bg:#040806;--panel:rgba(8,22,14,.72);--panel2:rgba(12,33,21,.82);--line:rgba(52,211,153,.18);
  --text:#f1f5f9;--muted:#94a3b8;--dim:#64748b;--green:#22c55e;--green2:#34d399;--gold:#f5c542;--red:#ef4444;--blue:#60a5fa;
  --shadow:0 20px 70px rgba(0,0,0,.5),0 0 80px rgba(34,197,94,.08);--font:'Outfit',system-ui,sans-serif;--mono:'JetBrains Mono',monospace
}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:var(--font);background:#030806;color:var(--text);overflow:hidden;background-image:url('/assets/dark_background.png');background-size:cover;background-position:center}body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 25% 10%,rgba(34,197,94,.16),transparent 32%),linear-gradient(180deg,rgba(3,8,6,.45),rgba(3,8,6,.94));pointer-events:none}.noise{position:fixed;inset:0;opacity:.025;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.bg-orb{position:fixed;border-radius:50%;filter:blur(60px);pointer-events:none}.orb-one{width:360px;height:360px;left:-120px;top:-100px;background:rgba(34,197,94,.18)}.orb-two{width:460px;height:460px;right:-140px;bottom:-170px;background:rgba(245,197,66,.10)}
.shell{position:relative;height:100%;padding:24px;display:flex;flex-direction:column;gap:18px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border:1px solid var(--line);background:rgba(4,14,8,.62);backdrop-filter:blur(18px);border-radius:24px;box-shadow:var(--shadow)}.brand{display:flex;align-items:center;gap:13px}.brand-logo{width:48px;height:48px;border-radius:14px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(34,197,94,.25))}.brand-title{font-weight:900;font-size:1.35rem;letter-spacing:2px;text-transform:uppercase;background:linear-gradient(135deg,var(--green2),var(--gold));-webkit-background-clip:text;color:transparent}.brand-sub{font-size:.68rem;color:var(--muted);letter-spacing:1.8px;text-transform:uppercase}.status-strip{display:flex;align-items:center;gap:10px}.pill{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:1px;padding:8px 12px;border-radius:99px;border:1px solid var(--line);background:rgba(34,197,94,.08);color:var(--green2)}.pill.live{color:#fecaca;background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.24)}.pill.live i{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px rgba(239,68,68,.12)}.clock{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px}.player-card,.side-card{min-height:0;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(18px);border-radius:28px;box-shadow:var(--shadow);overflow:hidden}.player-card{display:flex;flex-direction:column}.player-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:18px 20px}.eyebrow{margin:0 0 4px;font-size:.62rem;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:800}.player-head h1,.side-header h2{margin:0;font-size:1.32rem}.player-head p:last-child{margin:4px 0 0;color:var(--muted);font-size:.8rem}.ghost-btn{border:1px solid var(--line);background:rgba(34,197,94,.08);color:var(--text);padding:9px 13px;border-radius:13px;font-weight:800;cursor:pointer}.ghost-btn:hover{background:rgba(34,197,94,.16)}.video-frame{position:relative;flex:1;min-height:320px;background:#000;margin:0 20px;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}#video-container,#main-video{width:100%;height:100%}#main-video{background:#000;object-fit:contain}.loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;background:rgba(0,0,0,.58);transition:.25s}.loading.hidden{opacity:0;pointer-events:none}.spinner{width:48px;height:48px;border-radius:50%;border:3px solid rgba(34,197,94,.16);border-top-color:var(--green2);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading strong{letter-spacing:1px;text-transform:uppercase}.loading span{font-size:.78rem;color:var(--muted)}.player-footer{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 20px}.metric{border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.18);border-radius:16px;padding:10px 12px}.metric span{display:block;font-size:.58rem;color:var(--dim);letter-spacing:1.5px;text-transform:uppercase}.metric strong{font-size:.82rem;color:var(--green2)}
.side-card{display:flex;flex-direction:column;padding:16px;gap:14px}.side-banner{height:96px;border-radius:20px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.06);flex-shrink:0}.side-banner img{width:100%;height:100%;object-fit:cover}.side-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,14,8,.92),rgba(4,14,8,.18))}.side-banner div{position:absolute;z-index:1;left:15px;bottom:13px;display:flex;flex-direction:column}.side-banner strong{font-size:.98rem}.side-banner span{font-size:.62rem;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase}.side-header{display:flex;align-items:center;justify-content:space-between}.count{font-family:var(--mono);font-weight:800;color:var(--green2);padding:6px 10px;border-radius:12px;background:rgba(34,197,94,.09);border:1px solid var(--line)}.channel-list{display:flex;flex-direction:column;gap:9px}.channel-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.035);cursor:pointer;transition:.2s}.channel-card:hover,.channel-card.active{border-color:rgba(52,211,153,.35);background:rgba(34,197,94,.09)}.channel-card img{width:44px;height:44px;border-radius:12px;object-fit:cover}.channel-card strong{display:block;font-size:.88rem}.channel-card span{display:block;font-size:.62rem;color:var(--muted);margin-top:2px}.channel-card .tag{margin-left:auto;font-family:var(--mono);font-size:.56rem;color:var(--blue);padding:5px 8px;border-radius:9px;border:1px solid rgba(96,165,250,.18);background:rgba(96,165,250,.08)}.log-box{margin-top:auto;max-height:160px;overflow:auto;padding:11px;border-radius:16px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.05);font-family:var(--mono)}.log-line{font-size:.58rem;line-height:1.55;color:var(--muted)}.log-line.ok{color:var(--green2)}.log-line.err{color:#fca5a5}.log-line.info{color:#93c5fd}
@media(max-width:900px){body{overflow:auto}.shell{min-height:100%;height:auto;padding:12px}.topbar{border-radius:18px;align-items:flex-start}.status-strip{display:none}.grid{display:flex;flex-direction:column}.side-card{order:-1}.video-frame{min-height:260px;margin:0 12px}.player-head,.player-footer{padding-left:12px;padding-right:12px}.player-footer{grid-template-columns:1fr}.brand-sub{display:none}}