:root { color-scheme: dark; --cyan: #27dbe8; --muted: #9eb0bd; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: #f4f8fb; font-family: Inter, system-ui, sans-serif; background: radial-gradient(circle at 50% 0%, #12333e, #05090f 55%); }
.page { min-height: 100vh; display: grid; place-items: center; padding: 28px 18px; }
.channel-card { width: min(980px, 100%); padding: clamp(24px, 5vw, 52px); text-align: center; border: 1px solid rgba(39,219,232,.3); border-radius: 24px; background: rgba(5,15,23,.9); box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.logo { width: 104px; height: 104px; object-fit: contain; padding: 8px; border-radius: 20px; background: rgba(16,35,48,.9); }
.live-label { margin-top: 20px; color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.live-label span { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: #2fe1a6; box-shadow: 0 0 14px #2fe1a6; }
h1 { margin: 10px 0 0; font-size: clamp(30px, 6vw, 56px); line-height: 1.05; }
.subtitle { margin: 10px 0 28px; color: var(--muted); font-size: 18px; }
.player-shell { overflow: hidden; border: 1px solid rgba(39,219,232,.35); border-radius: 16px; background: #020609; }
video { display: block; width: 100%; aspect-ratio: 16 / 9; }
.status { margin: 12px 0 0; color: #9fe8c9; font-size: 13px; }