:root { --bg:#071019; --panel:#101b25; --text:#f4f7f9; --muted:#92a2af; --accent:#ff5d3b; --cyan:#40d9d0; }
* { box-sizing:border-box; }
html, body { margin:0; width:100%; min-height:100%; background:var(--bg); color:var(--text); font-family:Arial, Helvetica, sans-serif; overflow-x:hidden; }
body { background:radial-gradient(circle at 82% 6%, #183041 0, transparent 30%), linear-gradient(145deg,#071019,#0b1822 60%,#081119); }
.app { width:100%; min-height:100vh; padding:22px 44px 18px; }
.topbar { height:50px; display:flex; align-items:flex-start; justify-content:space-between; }
.brand { font-size:24px; font-weight:800; letter-spacing:-1px; }
.brand-mark { display:inline-block; width:13px; height:22px; margin-right:10px; border-radius:3px; vertical-align:-4px; background:linear-gradient(var(--accent) 0 46%,transparent 46% 54%,var(--cyan) 54%); }
.topbar-right { display:flex; align-items:center; gap:20px; font-size:18px; }
.status { color:var(--cyan); font-size:11px; font-weight:bold; letter-spacing:1.5px; border:1px solid rgba(64,217,208,.35); padding:5px 8px; border-radius:12px; }
.player-shell { position:relative; height:54vh; min-height:330px; max-height:530px; border-radius:16px; overflow:hidden; background:linear-gradient(135deg,#183544,#0c151d 65%); box-shadow:0 18px 55px rgba(0,0,0,.36); }
#player { width:100%; height:100%; object-fit:cover; background:#05090c; display:none; }
#officialPlayer { width:100%; height:100%; border:0; background:#05090c; display:none; }
.video-fallback { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:radial-gradient(circle at center,#254a58 0,#132936 38%,#0c151e 76%); }
.video-fallback h1 { margin:14px 0 5px; font-size:36px; }
.video-fallback p { margin:0 0 18px; color:#b8c7d0; }
.signal-icon { display:grid; place-items:center; width:74px; height:74px; padding-left:5px; color:#071019; font-size:28px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 10px rgba(64,217,208,.12); }
#playButton { padding:12px 22px; color:white; font-weight:bold; border:0; border-radius:6px; background:var(--accent); cursor:pointer; }
.player-gradient { position:absolute; inset:auto 0 0; height:38%; pointer-events:none; background:linear-gradient(transparent,rgba(2,7,11,.92)); }
.now-playing { position:absolute; left:28px; right:28px; bottom:20px; display:flex; align-items:center; gap:11px; font-size:14px; }
.now-playing strong { margin-left:5px; font-size:21px; }
.now-playing span:last-child { color:#aab7c0; }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(255,93,59,.17); }
.close-official { position:absolute; top:12px; right:12px; z-index:5; display:none; padding:9px 13px; color:white; font-weight:bold; border:1px solid rgba(255,255,255,.35); border-radius:6px; background:rgba(5,10,14,.82); cursor:pointer; }
.channel-section { padding-top:22px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:14px; }
.eyebrow { color:var(--cyan); font-size:10px; font-weight:bold; letter-spacing:1.8px; }
h2 { margin:3px 0 0; font-size:23px; }
.remote-hint, footer { color:var(--muted); font-size:12px; }
.channel-list { display:flex; gap:14px; overflow:hidden; padding:4px; }
.channel { flex:1; min-width:160px; height:105px; text-align:left; color:white; border:2px solid transparent; border-radius:11px; padding:14px; background:linear-gradient(145deg,#142634,#0d1922); cursor:pointer; transition:transform .12s,border-color .12s; }
.channel .number { color:#708492; font-size:11px; }
.channel strong { display:block; margin:12px 0 5px; font-size:16px; }
.channel small { color:#91a3af; }
.channel.selected, .channel:focus { outline:none; border-color:var(--accent); transform:translateY(-3px); box-shadow:0 8px 24px rgba(255,93,59,.15); }
footer { display:flex; justify-content:space-between; padding-top:15px; }
footer b { color:#dce4e9; }
@media (max-width:760px) { .app{padding:16px}.player-shell{min-height:300px}.remote-hint{display:none}.channel-list{overflow-x:auto}.channel{min-width:180px}.now-playing span:last-child{display:none} }