:root{--brand-primary:#0B1C39;--brand-accent:#E6B31E;--bg:#050711;--text:#ffffff;--muted:#c9d1d9}
*{box-sizing:border-box;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.hidden{display:none}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:linear-gradient(90deg,var(--brand-primary),#050a18);box-shadow:0 2px 10px rgba(0,0,0,.3)}
.brand-left{display:flex;align-items:center;gap:12px}
.logo{width:140px;height:auto;border-radius:0}
.spin{animation:spin 14s linear infinite}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.titles{display:flex;flex-direction:column}
.brand{margin:0;font-size:24px}
.tagline{margin:0;font-size:13px;color:var(--brand-accent)}
.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nav-link{color:#dbe6ff;text-decoration:none;padding:6px 10px;border-radius:10px;font-size:14px;font-weight:600}
.nav-link:hover,.nav-link.active{background:rgba(230,179,30,.12);color:#fff}
.nav-cta{padding:8px 12px;border-radius:999px;border:1px solid var(--brand-accent);background:var(--brand-accent);color:#000;text-decoration:none;font-weight:800}
.nav-cta:hover{filter:brightness(1.08)}
.adbar{position:sticky;top:64px;z-index:40;background:#0b1028;border-bottom:1px solid #1b2346;overflow:hidden}
.adbar-track{display:flex;gap:24px;padding:8px 10px;animation:adscroll 26s linear infinite}
@keyframes adscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ad-slide{display:flex;align-items:center;gap:10px;padding:6px 12px;border:1px solid #2a345e;border-radius:999px;background:linear-gradient(90deg,#0d1230,#12193a);text-decoration:none;color:#fdf7d5;white-space:nowrap}
.ad-slide img{height:30px}
.ad-slide span{font-size:16px;font-weight:700}
.ticker{position:relative;overflow:hidden;border-block:1px solid #1b2346;background:#0e1428}
.ticker-track{display:inline-block;white-space:nowrap;animation:scroll 40s linear infinite;padding:10px 0;color:#fcefb6;font-size:18px;letter-spacing:0.04em}
.ticker-track span{display:inline-block;margin-right:40px}
.ticker-sheen{position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(230,179,30,.15),transparent);pointer-events:none;animation:sheen 4.5s linear infinite}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sheen{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
main{max-width:1200px;margin:24px auto;padding:0 16px;display:grid;gap:24px}
section{background:#0f1220;border:1px solid #1b2346;border-radius:12px;padding:16px}
h2{margin-top:0;color:var(--brand-accent)}
.live-head{display:flex;justify-content:space-between;align-items:center}
.onair{display:flex;align-items:center;gap:8px;font-weight:700;color:#ff6b6b;background:rgba(255,0,0,.08);border:1px solid rgba(255,0,0,.2);padding:6px 10px;border-radius:999px}
.dot{width:10px;height:10px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 0 0 rgba(255,59,59,.7);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,59,.6)}70%{box-shadow:0 0 0 12px rgba(255,59,59,0)}100%{box-shadow:0 0 0 0 rgba(255,59,59,0)}}
.player-card{border:1px dashed #29325b;border-radius:10px;padding:12px}
.live-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
@media(max-width:900px){.live-layout{grid-template-columns:1fr}}
.go-live{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.showlen{display:flex;flex-direction:column;font-size:12px}
.timer{border:1px solid #2d335c;border-radius:8px;padding:4px 8px;font-weight:800}
.lead{margin:.3rem 0 0}
.music-controls{display:flex;align-items:center;gap:10px;margin-top:10px}
.music-label{font-size:13px}
#musicVol{width:140px}
.yt-wrapper{position:relative;width:100%;padding-top:56.25%;border-radius:12px;overflow:hidden;border:1px solid #1b2346;background:#050814}
.yt-wrapper iframe{position:absolute;inset:0;width:100%;height:100%}
.yt-fallback{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);font-size:12px;padding:6px 10px;text-align:center}
.btn{padding:8px 14px;border-radius:999px;border:none;background:var(--brand-accent);color:#000;font-weight:700;cursor:pointer}
.btn-ghost{background:transparent;color:#e5e7eb;border:1px solid #3b425f}
.bouncy{animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.continent-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.continent-tabs button{background:#0c1733;color:var(--brand-accent);border:1px solid var(--brand-accent);padding:6px 12px;border-radius:20px;font-size:13px;cursor:pointer}
.continent-tabs button.active,.continent-tabs button:hover{background:var(--brand-accent);color:#000}
.focus-row{display:grid;grid-template-columns:1.4fr .9fr;gap:14px}
@media(max-width:900px){.focus-row{grid-template-columns:1fr}}
.region-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.region-pill{background:#161b35;border:1px solid #2b356b;border-radius:999px;padding:6px 10px;font-size:13px;cursor:pointer}
.region-pill:hover{border-color:var(--brand-accent);color:var(--brand-accent)}
#alertList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.alert{opacity:0;transform:translateY(6px);transition:.3s;background:linear-gradient(90deg,#12193a,#171e45);border:1px solid #223064;padding:8px 10px;border-radius:8px;font-size:13px;position:relative}
.alert:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(#f9e694,#E6B31E,#f9e694)}
.alert.show{opacity:1;transform:translateY(0)}
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.insight-grid{grid-template-columns:1fr}}
.insight-card{background:#10163a;border:1px solid #223064;border-radius:12px;padding:12px;position:relative}
.insight-card .tag{position:absolute;top:8px;right:8px;background:linear-gradient(90deg,#f7e6a9,#E6B31E);color:#000;padding:3px 7px;border-radius:999px;font-size:11px;font-weight:700}
.insight-card h4{margin:20px 0 6px}
.sponsor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.sponsor-grid{grid-template-columns:repeat(2,1fr)}}
.sponsor-card{background:#0b1028;border:1px solid #1b2346;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;text-decoration:none;color:#fff;gap:8px;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.sponsor-card:hover{border-color:var(--brand-accent);transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,.35)}
.sponsor-card img{max-width:100%;height:120px;object-fit:contain}
.sponsor-name{font-size:17px;font-weight:800;color:var(--brand-accent);text-align:center}
.sponsor-sub{font-size:12px;color:#c9d1d9;text-align:center}
.sponsor-marquee{margin-top:14px;overflow:hidden;border-radius:12px;border:1px solid #1b2346;background:#0c1430}
.marquee-track{display:flex;gap:30px;animation:marq 30s linear infinite;padding:10px}
.marquee-track img{height:64px}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.drawer{position:fixed;top:0;right:-360px;width:340px;height:100vh;background:#0b0f20;border-left:1px solid #1b2346;transition:right .25s ease;z-index:60;display:flex;flex-direction:column}
.drawer.open{right:0}
.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #1b2346}
.drawer-list{list-style:none;margin:0;padding:12px;display:flex;flex-direction:column;gap:10px;overflow:hidden;max-height:calc(100vh - 120px);position:relative}
.drawer-item{background:#10163a;border:1px solid #223064;border-radius:8px;padding:8px 10px;display:flex;justify-content:space-between;font-size:13px;cursor:pointer}
footer{padding:14px 20px;text-align:center;font-size:12px;color:var(--muted);border-top:1px solid #111827;background:#050816}
.ad-status{margin-left:8px;padding:4px 8px;border-radius:999px;border:1px solid #2d335c;background:#0d1230;font-size:12px}
.ad-status.live{border-color:#ffb21a;background:#251a00;color:#ffd780}


/* Alternating colors for alerts */
#alertList .alert:nth-child(odd){
  background: linear-gradient(90deg,#12193a,#171e45);
}
#alertList .alert:nth-child(even){
  background: linear-gradient(90deg,#221b3f,#293463);
}

/* Alternating colors for insights */
.insight-card:nth-child(odd){
  background:#10163a;
}
.insight-card:nth-child(even){
  background:#151b42;
}


/* Live state highlighting */
body.live-on .onair{
  color:#ff3b3b;
  font-weight:900;
  text-shadow:0 0 10px rgba(255,0,0,0.8);
  border-color:rgba(255,0,0,0.8);
}
body.live-on #metricSegment{
  color:#ff3b3b;
  font-weight:800;
}


/* Vertical headlines: alternating colors */
.drawer-item:nth-child(3n+1){
  background:linear-gradient(90deg,#10163a,#182252);
}
.drawer-item:nth-child(3n+2){
  background:linear-gradient(90deg,#151936,#243463);
}
.drawer-item:nth-child(3n+3){
  background:linear-gradient(90deg,#1a143e,#2b285f);
}


/* On-Air Commercial strip under Live Updates */
.live-ads{
  margin-top:14px;
  padding:10px 12px;
  border-radius:14px;
  background:radial-gradient(circle at top left,#1b2347,#050816);
  border:1px solid rgba(255,215,122,0.35);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.live-ads h3{
  margin:0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:#ffd875;
}
.live-ad-video{
  margin-top:4px;
}
.live-ad-video video{
  display:block;
  width:100%;
  max-height:260px;
  border-radius:12px;
  background:#000;
}