.live-nav{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#e5172f;color:#fff;font:700 12px/1 Poppins,sans-serif;letter-spacing:.12em;text-decoration:none;box-shadow:0 0 0 0 rgba(229,23,47,.6);animation:livepulse 1.6s infinite}
.live-nav[hidden]{display:none}.live-nav i,.status i{width:8px;height:8px;border-radius:50%;background:#fff;display:inline-block}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(229,23,47,.55)}70%{box-shadow:0 0 0 12px rgba(229,23,47,0)}100%{box-shadow:0 0 0 0 rgba(229,23,47,0)}}
.live-page{background:radial-gradient(1200px 600px at 80% -10%,rgba(124,92,255,.18),transparent 60%),radial-gradient(900px 500px at 0% 0%,rgba(46,230,140,.12),transparent 60%),#05050a}
.live-main{padding:120px 0 80px;min-height:100vh}
.live-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.live-head h1{font-size:clamp(34px,5.4vw,64px);line-height:1.04;margin:10px 0 0}
.status{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;font:700 13px/1 Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(255,255,255,.18);background:rgba(20,20,32,.7);white-space:nowrap}
.status.off i{background:#6b6f80}.status.on{background:#e5172f;border-color:#ff5466;animation:livepulse 1.6s infinite}
.player{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;display:grid;place-items:center}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player.is-live{box-shadow:0 0 0 1px rgba(229,23,47,.5),0 30px 80px -20px rgba(229,23,47,.35)}
.offline{text-align:center;max-width:560px;padding:32px 24px}.offline[hidden]{display:none}
.offline h2{font-size:clamp(24px,3.2vw,36px);margin:18px 0 10px}.offline p{color:var(--mute);margin:0 0 24px;line-height:1.6}
.offline .cta{justify-content:center}
.ring{width:132px;height:132px;margin:0 auto;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(46,230,140,.18),transparent 70%);box-shadow:0 0 0 1px rgba(157,255,207,.25),0 0 60px rgba(46,230,140,.25)}
.ring img{width:104px;height:104px;border-radius:50%}
.live-title{margin:16px 0 0;color:#ff8a96}
.uploads{margin-top:64px}.uploads h2{font-size:clamp(24px,3vw,34px);margin:0 0 20px}
.ugrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:26px}
.vid{display:block;border-radius:18px;overflow:hidden;text-decoration:none;color:var(--wh);transition:transform .3s}.vid:hover{transform:translateY(-4px)}
.vid img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.vid span{display:block;padding:12px 14px 16px;font-weight:600;font-size:15px;line-height:1.35}
@media(max-width:900px){.live-main{padding:88px 0 56px}.live-head{flex-direction:column;align-items:flex-start;gap:14px}
 .player{aspect-ratio:auto;min-height:0;border-radius:18px}.player.is-live{aspect-ratio:16/9}
 .offline{padding:30px 18px}.offline .cta{grid-template-columns:1fr}.ugrid{grid-template-columns:1fr 1fr;gap:12px}.vid span{font-size:13px;padding:10px}
 .live-nav{padding:6px 10px;margin-left:auto}}
@media(max-width:420px){.ugrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.live-nav,.status.on{animation:none}}
.streams{position:relative;margin-top:64px;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,#0d0c18,#07070d)}
.storm{position:relative;height:220px;background:radial-gradient(600px 200px at 30% 0%,rgba(160,150,255,.16),transparent 70%),linear-gradient(180deg,#141226,#0b0b14)}
.storm svg{position:absolute;inset:0;width:100%;height:100%}
.storm:after{content:"";position:absolute;inset:0;background:radial-gradient(500px 220px at 28% 30%,rgba(220,230,255,.5),transparent 70%);opacity:0;animation:flash 7s infinite}
.storm .bolt{opacity:0;animation:bolt 7s infinite;filter:drop-shadow(0 0 6px #b9c8ff)}
@keyframes flash{0%,88%,100%{opacity:0}89%{opacity:.9}90%{opacity:.1}91.5%{opacity:.6}93%{opacity:0}}
@keyframes bolt{0%,88%,100%{opacity:0}89%{opacity:1}90%{opacity:.2}91.5%{opacity:1}93%{opacity:0}}
.storm .cap{position:absolute;right:14px;bottom:10px;font-size:10px;opacity:.6}
.streams-in{padding:28px 32px 32px}.streams-in h2{font-size:clamp(24px,3vw,34px);margin:8px 0 20px}
.wlist{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.wlist li{padding:16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.wlist b{display:block;font-size:16px;margin-bottom:4px}.wlist span{color:var(--mute);font-size:14px;line-height:1.5}
.wlist .wx{border-color:rgba(160,170,255,.35);background:linear-gradient(180deg,rgba(124,120,255,.12),rgba(255,255,255,.03))}
.safety{margin:0;padding:14px 16px;border-radius:14px;background:rgba(255,200,60,.07);border:1px solid rgba(255,200,60,.25);font-size:14px;line-height:1.55}.safety a{color:#ffd76a}
@media(max-width:900px){.storm{height:150px}.streams-in{padding:22px 18px 22px}.wlist{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.storm:after,.storm .bolt{animation:none}}
.h-dot{display:none;width:.32em;height:.32em;border-radius:50%;background:#ff2238;vertical-align:.18em;margin-right:.28em;box-shadow:0 0 10px 3px rgba(255,34,56,.85),0 0 30px 8px rgba(255,34,56,.45);animation:okwblink 1s steps(1,end) infinite}
.is-live .h-dot{display:inline-block}
.status.on i{width:11px;height:11px;background:#fff;box-shadow:0 0 8px 2px #fff;animation:okwblink 1s steps(1,end) infinite}