:root{
  --bg:#080c1a;
  --bg-2:#0d1428;
  --surface:rgba(255,255,255,.045);
  --surface-hi:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.09);
  --line-hi:rgba(255,255,255,.18);
  --text:#eef3ff;
  --muted:#8e9cc4;
  --accent:#5b8cff;
  --accent-2:#25e0b0;
  --hot:#ff5f86;
  --radius:16px;
  --player-h:78px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100%;
  color:var(--text);
  background:var(--bg);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--player-h) + 28px);
}
/* soft aurora wash, fixed so it doesn't scroll away */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 8% -8%,  rgba(91,140,255,.30), transparent 62%),
    radial-gradient(52vw 45vh at 100% 2%, rgba(37,224,176,.20), transparent 58%),
    radial-gradient(48vw 42vh at 62% 108%,rgba(255,95,134,.16), transparent 60%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);
}
a{color:inherit}
::selection{background:rgba(91,140,255,.35)}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:14px;
  padding:12px clamp(14px,3vw,30px);
  background:rgba(8,12,26,.72);
  backdrop-filter:saturate(170%) blur(16px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;flex:none}
.brand-mark{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:15px;color:#04122b;
  background:linear-gradient(140deg,var(--accent-2),var(--accent));
  box-shadow:0 6px 18px rgba(91,140,255,.4);
}
.brand-name{font-size:17px;white-space:nowrap;letter-spacing:-.2px}
.search-wrap{flex:1;min-width:0;position:relative}
#search{
  width:100%;padding:12px 15px 12px 40px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);
  color:var(--text);font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s;
}
.search-wrap::before{
  content:"⌕";position:absolute;left:14px;top:50%;transform:translateY(-52%);
  color:var(--muted);font-size:17px;pointer-events:none;
}
#search::placeholder{color:#7583ab}
#search:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(91,140,255,.16)}
.topbar-cta{
  flex:none;text-decoration:none;font-weight:700;font-size:14px;
  padding:10px 16px;border-radius:12px;color:#fff;
  background:linear-gradient(140deg,var(--accent),#3f6fe0);
  box-shadow:0 8px 22px rgba(91,140,255,.34);
  transition:transform .15s, box-shadow .15s;
}
.topbar-cta:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(91,140,255,.44)}
@media (max-width:640px){ .brand-name{display:none} .topbar-cta{padding:10px 13px;font-size:13px} }

/* ---------- layout ---------- */
main{max-width:1200px;margin:0 auto;padding:0 clamp(14px,3vw,30px)}

.hero{padding:46px 0 22px;max-width:780px}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:600;
  color:#bfe9dd;background:rgba(37,224,176,.1);border:1px solid rgba(37,224,176,.3);
}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--accent-2);
  box-shadow:0 0 0 0 rgba(37,224,176,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(37,224,176,0)}100%{box-shadow:0 0 0 0 rgba(37,224,176,0)}}
.hero h1{
  margin:0 0 12px;font-size:clamp(29px,5.4vw,50px);line-height:1.08;letter-spacing:-1.3px;font-weight:820;
  background:linear-gradient(180deg,#ffffff 30%,#a9bde8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{margin:0;color:var(--muted);font-size:clamp(15px,1.7vw,17.5px);max-width:60ch}
.hero-sub strong{color:var(--text);font-weight:700}

.panel{margin:34px 0}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-head h2{margin:0;font-size:20px;letter-spacing:-.3px}
.link-btn{background:none;border:0;color:var(--accent);cursor:pointer;font-size:14px;padding:4px;font-weight:600}
.link-btn:hover{color:#8fb2ff}
.empty{color:var(--muted);margin:12px 2px}

/* ---------- station cards ---------- */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(244px,1fr))}
.card{
  position:relative;display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:13px;border-radius:var(--radius);cursor:pointer;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  backdrop-filter:blur(6px);
  transition:transform .16s cubic-bezier(.2,.7,.3,1),background .16s,border-color .16s,box-shadow .16s;
}
.card::after{ /* sheen on hover */
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.07) 50%,transparent 65%);
  transition:opacity .2s;
}
.card:hover{background:var(--surface-hi);border-color:var(--line-hi);transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.34)}
.card:hover::after{opacity:1}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card.active{border-color:rgba(91,140,255,.65);background:rgba(91,140,255,.12);
  box-shadow:0 0 0 1px rgba(91,140,255,.25),0 12px 30px rgba(91,140,255,.16)}

.card-ico{
  flex:none;width:46px;height:46px;border-radius:12px;position:relative;overflow:hidden;
  display:grid;place-items:center;font-size:15px;font-weight:800;color:#04122b;
  background:linear-gradient(145deg,var(--accent-2),var(--accent));
}
.card-ico img{width:100%;height:100%;object-fit:cover;display:block}
.card-ico img[hidden]{display:none}

.card-txt{min-width:0;flex:1}
.card-t{font-weight:660;font-size:14.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-s{color:var(--muted);font-size:12.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:5px;margin-top:1px}
.flag{font-size:13px;line-height:1}

/* equaliser shown on the playing card */
.eq{display:none;align-items:flex-end;gap:2.5px;height:16px;flex:none;margin-left:2px}
.card.active .eq{display:flex}
.eq i{width:3px;background:var(--accent-2);border-radius:2px;animation:bounce .9s ease-in-out infinite}
.eq i:nth-child(1){height:7px;animation-delay:-.5s}
.eq i:nth-child(2){height:14px;animation-delay:-.25s}
.eq i:nth-child(3){height:9px}
@keyframes bounce{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.paused .eq i{animation-play-state:paused;opacity:.45}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:999px;cursor:pointer;font-size:13.5px;font-weight:550;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  transition:border-color .15s,background .15s,transform .15s;
}
.chip:hover{border-color:var(--accent);background:var(--surface-hi);transform:translateY(-1px)}
.chip .n{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}

/* ---------- skeletons ---------- */
.sk{height:72px;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 70%);
  background-size:220% 100%;animation:shimmer 1.3s infinite}
@keyframes shimmer{to{background-position:-220% 0}}

/* ---------- app callout ---------- */
.applink{margin:40px 0;padding:1px;border-radius:20px;
  background:linear-gradient(135deg,rgba(91,140,255,.6),rgba(37,224,176,.45),rgba(255,95,134,.35))}
.applink-inner{
  background:linear-gradient(180deg,#0e1730,#0b1226);
  border-radius:19px;padding:28px clamp(18px,3.2vw,34px);
}
.applink h2{margin:0 0 10px;font-size:22px;letter-spacing:-.3px}
.applink p{margin:0 0 16px;color:var(--muted);max-width:64ch}
.applink strong{color:var(--text)}
.btn-primary{
  display:inline-block;text-decoration:none;font-weight:750;
  padding:13px 22px;border-radius:13px;color:#fff;
  background:linear-gradient(140deg,var(--accent),#3f6fe0);
  box-shadow:0 10px 26px rgba(91,140,255,.34);
  transition:transform .15s,box-shadow .15s;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(91,140,255,.44)}
.applink-note{margin:13px 0 0;font-size:12.5px;color:var(--muted)}

/* ---------- ads ---------- */
.ad-slot{margin:26px 0;border:1px dashed var(--line);border-radius:14px;
  display:grid;place-items:center;color:#5a688f;font-size:12px;background:rgba(255,255,255,.012)}
.ad-leaderboard{min-height:90px}
.ad-rect{min-height:250px}

/* ---------- footer ---------- */
.footer{max-width:1200px;margin:52px auto 0;padding:24px clamp(14px,3vw,30px) 12px;
  border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.footer-links{display:flex;gap:10px;flex-wrap:wrap}
.footer-links a{color:var(--accent);text-decoration:none}
.footer-links a:hover{text-decoration:underline}

/* ---------- player ---------- */
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;gap:13px;
  height:var(--player-h);
  padding:0 clamp(12px,3vw,24px);padding-bottom:env(safe-area-inset-bottom);
  background:rgba(10,15,32,.9);
  backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--line-hi);
  box-shadow:0 -12px 34px rgba(0,0,0,.46);
  animation:slideUp .25s cubic-bezier(.2,.8,.3,1);
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.np-art{
  flex:none;width:48px;height:48px;border-radius:11px;overflow:hidden;
  display:grid;place-items:center;font-weight:800;color:#04122b;font-size:15px;
  background:linear-gradient(145deg,var(--accent-2),var(--accent));
}
.np-art img{width:100%;height:100%;object-fit:cover}
.player-btn{
  flex:none;width:48px;height:48px;border-radius:50%;cursor:pointer;border:0;color:#04122b;font-size:16px;
  background:linear-gradient(145deg,var(--accent-2),var(--accent));
  box-shadow:0 8px 20px rgba(37,224,176,.28);
  transition:transform .14s;
}
.player-btn:hover{transform:scale(1.06)}
.player-btn.ghost{background:none;color:var(--muted);border:1px solid var(--line);box-shadow:none;
  width:40px;height:40px;font-size:14px}
.player-btn.ghost:hover{color:var(--text);border-color:var(--line-hi)}
.player-meta{flex:1;min-width:0}
.player-title{font-weight:700;font-size:14.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-sub{color:var(--muted);font-size:12.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-state{flex:none;font-size:11.5px;color:var(--muted);min-width:68px;text-align:right;
  font-variant-numeric:tabular-nums}
.player-state.live{color:var(--accent-2);font-weight:650}
.player-vol{flex:none;width:106px;accent-color:var(--accent)}
@media (max-width:760px){ .player-vol{display:none} .player-state{min-width:0} }
@media (max-width:520px){ .np-art{display:none} }

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}