/* ── 518RADIO UI 2.0 ─────────────────────────────────────────────────────────
   Same concept, new look. Layered on top of index.css — fonts and the black/
   cream palette are untouched; this only changes surfaces, edges, depth and
   spacing. Every rule skips the candy takeover so that reskin stays intact.
   Remove the <link> to ui2.css in index.html to go straight back to 1.0. */

body:not(.candy-takeover){
  --ui2-hair: color-mix(in srgb, var(--ink) 10%, transparent);
  --ui2-hair-strong: color-mix(in srgb, var(--ink) 16%, transparent);
  --ui2-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 40px -22px rgba(0,0,0,.30);
  background:
    radial-gradient(1100px 520px at 50% -8%, color-mix(in srgb, var(--card) 85%, transparent) 0%, transparent 62%),
    var(--bg);
  background-attachment: fixed;
}
body.dark-theme:not(.candy-takeover){
  --ui2-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 20px 44px -22px rgba(0,0,0,.85);
}
/* the vibe theme keeps its color wash — layer it back over the 2.0 base */
body.rainbow-theme:not(.candy-takeover){
  background:
    radial-gradient(circle at 12% 8%, #ff2d9233 0%, transparent 45%),
    radial-gradient(circle at 88% 15%, #ffb02033 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, #00e0c633 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, #7c5cff33 0%, transparent 45%),
    var(--bg);
  background-attachment: fixed;
}

/* cards: hairline edge + soft deep shadow instead of the heavy outline */
body:not(.candy-takeover) .card{
  border: 1px solid var(--ui2-hair);
  border-radius: 28px;
  box-shadow: var(--ui2-shadow);
}

/* section labels: rounded pills */
body:not(.candy-takeover) .tag{
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 11px;
  letter-spacing: .16em;
  top: -11px;
  border-width: 1px;
}

/* top action buttons: soft chips */
body:not(.candy-takeover) .sb-pill{
  border: 1px solid var(--ui2-hair-strong);
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--card);
  box-shadow: 0 2px 10px -6px rgba(0,0,0,.25);
}

/* LIVE RADIO: pill with lift */
body:not(.candy-takeover) .modes button{
  border-radius: 999px;
  border-width: 1px;
}
body:not(.candy-takeover) .modes button.on{
  box-shadow: 0 12px 26px -14px rgba(0,0,0,.65);
}

/* stations: floating chips instead of a boxed segmented bar */
body:not(.candy-takeover) .st-pills{
  border: none;
  gap: 8px;
  height: 46px;
  padding: 0 2px;
  align-items: center;
}
body:not(.candy-takeover) .st-pill{
  border: 1px solid var(--ui2-hair-strong);
  border-radius: 999px;
  height: 36px;
  padding: 0 16px;
  background: var(--card);
}
body:not(.candy-takeover) .st-pill:first-child{ border-left: 1px solid var(--ui2-hair-strong); }
body:not(.candy-takeover) .st-pill.on{
  border-color: var(--acc);
  box-shadow: 0 8px 18px -10px var(--acc);
}

/* play button: deeper presence */
body:not(.candy-takeover) .playbtn{
  border-width: 1.5px;
  box-shadow: 0 12px 28px -14px rgba(0,0,0,.45);
}

/* song list: clean rounded tiles, no divider lines */
body:not(.candy-takeover) .row{
  border-top-color: transparent;
  border-radius: 16px;
  margin: 2px 0;
}
body:not(.candy-takeover) .row.active{
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

/* bottom nav: hairline glass */
body:not(.candy-takeover) .nav{
  border: 1px solid var(--ui2-hair);
  border-radius: 26px;
}
body:not(.candy-takeover) .nav .sep{ background: var(--ui2-hair-strong); }

/* blog + feed cards share the softer edge */
body:not(.candy-takeover) .blog-card{
  border-radius: 22px;
  border-color: var(--ui2-hair);
  box-shadow: var(--ui2-shadow);
}

/* selected station keeps its color (must out-rank the chip background above) */
body:not(.candy-takeover) .st-pill.on{
  background: var(--acc);
  color: #fff;
}
/* give the station chips room under the "518 STATIONS" label */
body:not(.candy-takeover) #stationsCard{
  padding-top: 18px;
  padding-bottom: 6px;
}