/* ═══════════════════════════════════════════════════════════════════════════
   Liquid — the iOS 26 Apple Music look for JustVibeMe, phone and desktop.
   Loaded last: it owns the glass material, the floating bars, the buttons, the
   listening room, the account sheet, Radio and Liked Songs. liquid-glass.js
   adds .glass to the surfaces it refracts and sets --lg-filter on them.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --am: #fa2d48;
  --am-hi: #ff4f66;
  --am-soft: rgba(250, 45, 72, .16);
  --accent: var(--am);
  --accent-hover: var(--am-hi);
  --accent-soft: var(--am-soft);
  --green: var(--am);
  --glass-tint: rgba(30, 30, 34, .36);
  --glass-tint-hi: rgba(255, 255, 255, .1);
  --glass-rim:
    inset 0 0 0 .5px rgba(255, 255, 255, .16),
    inset 0 .5px 0 rgba(255, 255, 255, .28);
  --flat-rim: inset 0 0 0 .5px rgba(255, 255, 255, .08);
  --glass-drop: 0 14px 40px rgba(0, 0, 0, .42), 0 2px 8px rgba(0, 0, 0, .25);
  --spring: cubic-bezier(.32, 1.42, .48, 1);
  --smooth: cubic-bezier(.22, 1, .36, 1);
  --tabs-h: 62px;
  --mini-h: 56px;
  --dock-gap: 12px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

html {
  background:
    #000;
  background-attachment: fixed;
}
body { background: transparent; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(250, 45, 72, .4); }
.logo-accent, .immersive-brand > span { color: var(--am); }
.brand-mark { background: #ff5a70; }

/* ───────────────────────────── The material ───────────────────────────── */

.glass {
  border: 0 !important;
  background-color: var(--glass-tint);
  background-image: none;
  background-color: rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  backdrop-filter: blur(22px) saturate(190%);
}
html.lg-refract .glass {
  -webkit-backdrop-filter: var(--lg-filter, blur(22px)) brightness(1.06);
  backdrop-filter: var(--lg-filter, blur(22px)) brightness(1.06);
}
/* The old sheen layers fought the real glass; the refraction is the shine now. */
.player::before, .player::after, .mobile-tabs::before, .mobile-tabs::after { content: none !important; animation: none !important; }

/* Every glass control squishes like a drop when pressed. */
button.glass, .glass button, .green-button, .outline-button, .dark-button, .icon-btn, .main-play, .circle-button, .nav-button {
  transition: transform .45s var(--spring), background-color .2s, color .2s, box-shadow .25s, opacity .2s;
}
button.glass:active, .green-button:active, .outline-button:active, .dark-button:active, .circle-button:active, .main-play:active, #immersive .icon-btn:active { transform: scale(.92); transition-duration: .12s; }

/* ─────────────────────────────── Buttons ──────────────────────────────── */

/* Primary: the white "Play" capsule of Apple Music's album and playlist pages. */
.green-button, .dark-button, .auth-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 22px;
  border: 0 !important; border-radius: 999px;
  background: #fff !important; background-image: none !important;
  color: var(--am) !important;
  font-weight: 650; letter-spacing: -.01em;
}
.green-button svg, .dark-button svg { color: var(--am); width: 15px; height: 15px; }
.green-button:hover, .dark-button:hover, .auth-submit:hover { background: #e9e9ed !important; }
.auth-submit { width: 100%; color: #fff !important; background: var(--am) !important; }
.auth-submit:hover { background: var(--am-hi) !important; }

/* Secondary: clear glass capsules. */
.outline-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 0 18px;
  border: 0 !important; border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.12) !important; background-image: none !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  font-weight: 600;
}
.outline-button:hover { background-color: rgba(255,255,255,.18) !important; }
.outline-button svg { width: 15px; height: 15px; }
.small-link { color: var(--am); font-weight: 600; }
.small-link:hover { color: var(--am-hi); }
.icon-btn.liked, .icon-btn[aria-pressed="true"].player-like, #room-like[aria-pressed="true"] { color: var(--am); }
.icon-btn.liked svg, #player-like.liked svg, #room-like[aria-pressed="true"] svg { fill: currentColor; }
.toggle[aria-pressed="true"] { color: var(--am); }

/* ───────────────────────────── Range inputs ───────────────────────────── */

input[type=range] {
  -webkit-appearance: none; appearance: none;
  height: 5px; border-radius: 99px; cursor: pointer;
  background: linear-gradient(90deg, var(--range-fill, rgba(255,255,255,.92)) var(--pct, 0%), var(--range-rest, rgba(255,255,255,.2)) var(--pct, 0%));
  transition: height .3s var(--spring);
  accent-color: var(--am);
}
input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 100%; border: 0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: calc((5px - 13px) / 2); border: 0; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .2s, transform .3s var(--spring); }
input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; opacity: 0; }
input[type=range]::-moz-range-track { background: transparent; }
input[type=range]:hover::-webkit-slider-thumb, input[type=range]:focus-visible::-webkit-slider-thumb { opacity: 1; }
input[type=range]:hover::-moz-range-thumb { opacity: 1; }
/* Settings sliders keep an iOS knob. */
#account-dialog input[type=range] { height: 6px; --range-fill: var(--am); }
#account-dialog input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; opacity: 1; }
#account-dialog input[type=range]::-moz-range-thumb { width: 26px; height: 26px; opacity: 1; }

/* iOS switches. */
input[type=checkbox][role=switch] {
  -webkit-appearance: none; appearance: none; flex-shrink: 0;
  position: relative; width: 52px; height: 32px; margin: 0;
  border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(120, 120, 128, .36);
  transition: background .3s var(--smooth);
}
input[type=checkbox][role=switch]::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; border-radius: 99px;
  background: #fff;
  transition: transform .4s var(--spring), width .25s var(--smooth);
}
input[type=checkbox][role=switch]:active::before { width: 34px; }
input[type=checkbox][role=switch]:checked { background: #34c759; }
input[type=checkbox][role=switch]:checked::before { transform: translateX(20px); }
input[type=checkbox][role=switch]:checked:active::before { transform: translateX(14px); }
input[type=checkbox][role=switch]:disabled { opacity: .45; cursor: default; }

/* ──────────────────── Lens: the liquid selection pill ─────────────────── */

.has-lens { isolation: isolate; }
.has-lens:not(.mobile-tabs) { position: relative; }
.mobile-tabs { position: fixed !important; }
.has-lens > .lens {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  transition: transform .52s var(--spring), width .52s var(--spring), height .3s var(--smooth), opacity .25s, scale .35s var(--spring);
}
.has-lens > .lens.moving { transition: transform .17s var(--smooth), width .17s var(--smooth), height .17s, scale .2s; scale: 1 1.08; }
.has-lens > .lens.pressed { scale: 1.08; background: rgba(255,255,255,.2); }
.has-lens > .lens.off { opacity: 0; }
.has-lens > :not(.lens) { position: relative; z-index: 1; }
.has-lens > button { background: transparent !important; }

/* Segmented controls (radio variety, sign-in tabs). */
.filter-tabs, .auth-tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 0 !important; border-radius: 999px;
  background: rgba(118,118,128,.22) !important;
}
.filter-tabs button, .auth-tabs button { min-height: 34px; padding: 0 16px; border: 0 !important; border-radius: 999px; color: rgba(255,255,255,.72); font-weight: 600; font-size: 13px; }
.filter-tabs button[aria-pressed="true"], .filter-tabs button.active, .auth-tabs button[aria-selected="true"] { color: #fff; }
.filter-tabs > .lens, .auth-tabs > .lens { background: rgba(255,255,255,.2); }

/* ═══════════════════════════════ Desktop ════════════════════════════════ */

@media (min-width: 721px) {
  :root { --float: 12px; --player: 74px; }

  .sidebar {
    top: var(--float); left: var(--float); bottom: var(--float);
    width: calc(var(--sidebar) - var(--float));
    border-radius: 26px;
    padding-top: 20px;
    --glass-tint: rgba(28, 28, 32, .52);
  }
  .main-shell { margin-left: calc(var(--sidebar) + 4px); padding-bottom: calc(var(--player) + 40px); }
  .nav-button { border-radius: 12px; color: rgba(255,255,255,.82); }
  .nav-button svg { color: var(--am); }
  .nav-button:hover { background: rgba(255,255,255,.07); }
  .nav-button.active { background: rgba(255,255,255,.12) !important; color: #fff; }
  .saved-link, .user-button { border-radius: 14px; }
  .saved-art { background: #ff6b81 !important; color: #fff; }
  .user-button { background: rgba(255,255,255,.06); border: 0; }

  /* The bar above the content: a soft progressive blur instead of a hard band. */
  .topbar {
    background: rgba(0, 0, 0, 0.33);
    border: 0 !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, transparent);
    height: 72px;
  }
  .topbar:has(.search-box:focus-within) { -webkit-mask-image: none; mask-image: none; }
  .search-box { height: 40px; border-radius: 999px; padding: 0 14px; }
  .search-box input { background: transparent; }

  /* Floating glass player, over the content only. */
  .player {
    left: calc(var(--sidebar) + var(--float) + 4px); right: calc(var(--float) + 8px); bottom: calc(var(--float) + 4px);
    height: var(--player);
    border-radius: 24px;
    padding: 0 18px 0 13px;
    overflow: visible;
    --glass-tint: rgba(28, 28, 32, .55);
  }
  .player-center { position: static !important; transform: none !important; flex: 1 1 auto; width: auto !important; max-width: 560px; margin: 0 auto; }
  .player-like { margin: 0 8px 0 0 !important; }
  .volume-control { margin-left: 0 !important; flex-shrink: 0; }
  .current-art { top: 50% !important; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 11px; }
  .player-track-group { padding-left: 62px; display: flex; flex-direction: column; justify-content: center; }
  .player .transport { gap: 22px; margin-bottom: 4px; }
  .player .transport .icon-btn { color: #fff; width: 30px; height: 30px; }
  .player .transport .icon-btn svg { width: 18px; height: 18px; }
  .player .transport .toggle { color: rgba(255,255,255,.55); }
  .player .transport .toggle[aria-pressed="true"] { color: var(--am); }
  .player .main-play { width: 40px; height: 40px; color: #fff; background: transparent !important; background-image: none !important; border: 0; }
  .player .main-play:hover { background: rgba(255,255,255,.12) !important; }
  .player .main-play svg { width: 22px !important; height: 22px !important; }
  .player .main-play svg { width: 17px; height: 17px; }
  .play-progress { color: rgba(255,255,255,.5); }
  .play-progress input { height: 4px; }
  .play-progress input:hover { height: 7px; }
  .volume-control input { --range-fill: rgba(255,255,255,.85); }
}

/* ════════════════════════════════ Phone ═════════════════════════════════ */

@media (max-width: 720px) {
  .main-shell { padding-bottom: calc(var(--tabs-h) + var(--mini-h) + var(--dock-gap) * 3 + 30px + var(--safe-b)) !important; }

  .topbar {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 0 !important;
    -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent);
  }
  .mobile-profile .avatar { background: #ff6b81 !important; }

  /* The tab bar: one glass pill, a lens under the active tab. */
  .mobile-tabs {
    left: 14px !important; right: 14px !important;
    bottom: calc(var(--dock-gap) + var(--safe-b)) !important;
    height: var(--tabs-h) !important;
    display: grid !important; grid-template-columns: repeat(5, 1fr);
    padding: 4px !important; gap: 0 !important;
    border-radius: 999px !important;
    overflow: visible !important;
    --glass-tint: rgba(28, 28, 32, .5);
    transition: left .55s var(--spring), right .55s var(--spring), width .55s var(--spring), opacity .3s;
  }
  .mobile-tabs button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 0 !important; height: 100%;
    border-radius: 999px !important; padding: 0 !important;
    color: rgba(255,255,255,.9) !important;
    font-size: 10px !important; font-weight: 600; letter-spacing: -.01em;
    transition: color .25s, opacity .3s, transform .45s var(--spring);
  }
  .mobile-tabs button svg { width: 23px !important; height: 23px !important; stroke-width: 2; color: inherit !important; }
  .mobile-tabs button.active { color: var(--am) !important; }
  .mobile-tabs button.active svg { color: var(--am) !important; }
  .mobile-tabs button:active { transform: scale(.9); }

  /* The mini player: a glass pill floating above the tabs. */
  .player {
    left: 14px !important; right: 14px !important;
    bottom: calc(var(--tabs-h) + var(--dock-gap) * 2 - 4px + var(--safe-b)) !important;
    height: var(--mini-h) !important;
    border-radius: 999px !important;
    display: flex !important; flex-wrap: nowrap !important; align-items: center;
    gap: 4px !important; padding: 0 10px 0 7px !important;
    overflow: hidden !important;
    --glass-tint: rgba(30, 30, 34, .52);
    transition: left .55s var(--spring), right .55s var(--spring), bottom .55s var(--spring), height .4s var(--smooth);
  }
  .player-track-group { flex: 1; width: auto !important; min-width: 0; padding-left: 52px !important; display: flex; flex-direction: column; justify-content: center; }
  .player .current-art { left: 0; top: 50% !important; transform: translateY(-50%) !important; width: 42px !important; height: 42px !important; border-radius: 999px !important; }
  .player .current-track { height: auto !important; }
  .player .current-track strong { font-size: 14px; font-weight: 600; }
  .player-track-group > .artist-link { font-size: 12.5px !important; margin-top: 1px; color: rgba(255,255,255,.62) !important; }
  .player .player-center { position: static !important; transform: none !important; width: auto !important; order: 0 !important; margin: 0 !important; }
  .player .transport { display: flex !important; gap: 2px !important; margin: 0 !important; }
  .player .transport .toggle, .player .player-like, .player .play-progress, .player .volume-control { display: none !important; }
  .player .main-play, .player .transport #next, .player .transport #previous {
    display: grid !important; place-items: center;
    width: 42px !important; height: 42px !important;
    border-radius: 50%; color: #fff !important;
    background: transparent !important; background-image: none !important; border: 0 !important;
  }
  .player .main-play svg, .player .transport #next svg, .player .transport #previous svg { width: 21px !important; height: 21px !important; }
  .player .main-play:active, .player .transport #next:active, .player .transport #previous:active { background: rgba(255,255,255,.14) !important; }

  /* Scrolling down tucks the tabs into one circle beside the mini player. */
  body.dock-min .mobile-tabs { right: calc(100% - 14px - var(--tabs-h)) !important; grid-template-columns: 1fr; }
  body.dock-min .mobile-tabs button:not(.active) { opacity: 0; pointer-events: none; position: absolute; transform: scale(.6); }
  body.dock-min .mobile-tabs button.active span { display: none; }
  body.dock-min .mobile-tabs > .lens { opacity: 0; }
  body.dock-min .player { left: calc(14px + var(--tabs-h) + 8px) !important; bottom: calc(var(--dock-gap) + var(--safe-b)) !important; height: var(--tabs-h) !important; }
  body.dock-min .main-shell { padding-bottom: calc(var(--tabs-h) + 40px + var(--safe-b)) !important; }
}

/* ═══════════════════════════ The listening room ═════════════════════════ */

#immersive[open] {
  position: fixed; inset: 0; z-index: 100;
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  display: flex; flex-direction: column;
  background: #050506;
  color: #fff;
  overflow: clip;
  animation: room-rise .55s var(--smooth);
}
@keyframes room-rise { from { transform: translateY(6%) scale(.98); opacity: 0; } }
#immersive::backdrop { background: #000; }
#immersive .room-ambience {
  position: absolute; inset: -20%; z-index: 0;
  width: 140%; height: 140%; max-width: none; object-fit: cover;
  filter: blur(80px) saturate(1.9) brightness(.62);
  opacity: 1;
}
#immersive .room-veil { position: absolute; inset: 0; z-index: 0; background: rgba(0,0,0,.12); }
/* The hills own a band at the foot of the room; nothing else is laid out over it. */
#immersive { --hills-h: clamp(110px, 19vh, 200px); }
#immersive .room-hills { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; width: 100%; height: var(--hills-h); pointer-events: none; mix-blend-mode: plus-lighter; filter: blur(1.5px); }

#immersive .immersive-header {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; padding: 0 22px; border: 0 !important; background: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  flex-shrink: 0;
}
#immersive .immersive-brand { font: 700 18px/1 var(--font-display); letter-spacing: -.04em; }
#immersive .room-kicker { position: absolute; left: 50%; transform: translateX(-50%); font-size: 10.5px; letter-spacing: .16em; color: rgba(255,255,255,.6); }

/* Small glass circles: close, like, more. */
#immersive .icon-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  color: #fff;
  --glass-tint: rgba(255,255,255,.14);
}
#immersive .icon-btn svg { width: 19px; height: 19px; }
#immersive .icon-btn:hover { --glass-tint: rgba(255,255,255,.18); }
#immersive .icon-btn:disabled { opacity: .4; }

#immersive .immersive-layout {
  position: relative; z-index: 2;
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, min(44vw, 62vh)) minmax(320px, 430px);
  align-items: center; justify-content: center;
  gap: clamp(40px, 6vw, 110px);
  padding: 0 48px;
  margin-bottom: var(--hills-h) !important;
  max-height: calc(100dvh - 68px - var(--hills-h));
  width: auto; max-width: none; margin: 0;
}
#immersive .immersive-art { display: block; position: relative; margin: 0; padding: 0; width: 100%; }
#immersive .immersive-art > button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
#immersive #room-cover {
  display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 1; object-fit: cover;
  border-radius: 16px;
  transition: transform .7s var(--spring), box-shadow .5s;
}
/* Paused, the artwork sits back, as in the Music app. */
body:not(.is-playing) #immersive #room-cover { transform: scale(.86); }
#immersive .immersive-art > button > span, #immersive .art-footnote { display: none; }
#immersive.art-expanded .immersive-layout { grid-template-columns: minmax(0, min(70vw, 78vh)); }
#immersive.art-expanded .immersive-details { display: none; }
#immersive.art-expanded .immersive-art > button { cursor: zoom-out; }

#immersive .immersive-details {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "title like opts"
    "artist like opts"
    "album album album"
    "prog prog prog"
    "trans trans trans"
    "lyrt radio radio"
    "lyr lyr lyr"
    "next next next"
    "set set set";
  column-gap: 10px; align-items: center;
  margin: 0; padding: 0 !important;
  background: none !important; border: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-radius: 0; max-height: 100%; overflow: visible;
}
#immersive .immersive-details > .eyebrow { display: none; }
#immersive #room-title { grid-area: title; margin: 0; font: 700 clamp(22px, 2.2vw, 30px)/1.12 var(--font-display); letter-spacing: -.035em; color: #fff; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#immersive #room-artist { grid-area: artist; justify-self: start; margin-top: 3px; padding: 0; font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; color: rgba(255,255,255,.66); text-align: left; }
#immersive #room-artist:hover { color: #fff; }
#immersive #room-album { grid-area: album; margin: 6px 0 0; font-size: 12.5px; color: rgba(255,255,255,.42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#immersive .room-song-tools, #immersive .room-tool-actions { display: contents; }
#immersive #room-like { grid-area: like; }
#immersive #room-options { grid-area: opts; }

#immersive .room-progress { grid-area: prog; margin: 26px 0 0; }
#immersive #room-seek { width: 100%; height: 7px; --range-rest: rgba(255,255,255,.22); --range-fill: rgba(255,255,255,.9); }
#immersive #room-seek:hover, #immersive #room-seek:active { height: 12px; }
#immersive #room-seek::-webkit-slider-thumb { opacity: 0 !important; width: 1px; }
#immersive .room-progress > div { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; }

/* Transport: big plain glyphs, the way the Music app draws them. */
#immersive .room-transport { grid-area: trans; display: flex; align-items: center; justify-content: space-between; margin: 22px 0 6px; padding: 0 2px; }
#immersive .room-transport .icon-btn, #immersive .room-transport .main-play {
  width: 64px; height: 64px; border-radius: 50%;
  background: transparent !important; background-image: none !important;
  border: 0 !important; outline: 0; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: #fff;
}
#immersive .room-transport .icon-btn:hover, #immersive .room-transport .main-play:hover { background: rgba(255,255,255,.08) !important; }
#immersive .room-transport .icon-btn svg { width: 34px; height: 34px; }
#immersive .room-transport .main-play { width: 80px; height: 80px; }
#immersive .room-transport .main-play svg { width: 44px; height: 44px; }
#immersive #room-shuffle, #immersive #room-repeat { width: 44px; height: 44px; color: rgba(255,255,255,.5); }
#immersive #room-shuffle svg, #immersive #room-repeat svg { width: 20px; height: 20px; }
#immersive #room-shuffle[aria-pressed="true"], #immersive #room-repeat[aria-pressed="true"] { color: #fff; background: rgba(255,255,255,.16) !important; }

#immersive #room-lyrics-toggle { grid-area: lyrt; justify-self: start; }
#immersive #room-lyrics-toggle.on { color: #000; background-color: rgba(255,255,255,.92) !important; border: 0 !important; }
#immersive #room-radio { grid-area: radio; justify-self: end; width: auto; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 13px; }
#immersive #room-radio svg { color: var(--am); }

#immersive .room-lyrics {
  position: relative;
  grid-area: lyr; margin-top: 14px; max-height: min(22vh, 200px); overflow-y: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent);
  padding: 10px 0; background: none !important; border: 0 !important;
}
#immersive .room-lyrics::-webkit-scrollbar { display: none; }
#immersive .room-lyrics[hidden] { display: none; }
#immersive .lyric-line { font: 700 19px/1.32 var(--font-display); letter-spacing: -.02em; color: rgba(255,255,255,.34); padding: 5px 0; transition: color .4s, transform .5s var(--spring); transform-origin: left center; }
#immersive .lyric-line.active, #immersive .lyric-line.current, #immersive .room-lyrics[data-synced="0"] .lyric-line { color: #fff; }
#immersive .lyric-line.active, #immersive .lyric-line.current { transform: scale(1.03); }
#immersive .lyrics-note, #immersive .room-lyrics > p { font-size: 13px !important; font-weight: 500 !important; color: rgba(255,255,255,.45) !important; margin: 0; }

#immersive .room-next-card {
  grid-area: next; display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 10px 10px 10px 12px;
  border: 0 !important; border-radius: 16px;
  background: rgba(255,255,255,.08) !important;
}
#immersive .room-next-card img { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; }
#immersive .room-next-card > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#immersive .room-next-card span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); font-weight: 650; }
#immersive .room-next-card span.ready { color: var(--am); }
#immersive .room-next-card strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#immersive .room-next-card small { font-size: 12px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#immersive .room-settings-link { grid-area: set; justify-self: start; margin-top: 14px; font-size: 12.5px; color: rgba(255,255,255,.55); }
#immersive .room-settings-link:hover { color: #fff; }

@media (max-width: 1000px) and (min-width: 721px) {
  #immersive .immersive-layout { grid-template-columns: minmax(0, 40vw) minmax(300px, 1fr); gap: 40px; padding: 0 32px; }
}

/* Phone: artwork bleeds to the edges and melts into the album's color. */
@media (max-width: 720px) {
  #immersive .immersive-header { position: absolute; top: 0; left: 0; right: 0; height: calc(60px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 16px 0; }
  #immersive .immersive-brand, #immersive .room-kicker { display: none; }
  #immersive .immersive-header::before { content: ""; position: absolute; left: 50%; top: calc(8px + env(safe-area-inset-top, 0px)); width: 38px; height: 5px; margin-left: -19px; border-radius: 99px; background: rgba(255,255,255,.4); }
  #immersive #room-close { order: -1; }
  #immersive .immersive-layout {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: 0 0 28px;
    max-height: none; margin-bottom: var(--hills-h) !important;
    overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent);
  }
  #immersive .immersive-layout::-webkit-scrollbar { display: none; }
  #immersive .immersive-art { flex-shrink: 0; }
  #immersive .immersive-art > button { cursor: default; }
  #immersive #room-cover {
    width: 100%; max-height: 58dvh; aspect-ratio: auto; height: min(100vw, 58dvh);
    border-radius: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
    mask-image: linear-gradient(180deg, #000 62%, transparent);
  }
  body:not(.is-playing) #immersive #room-cover { transform: none; filter: brightness(.82); }
  #immersive .immersive-details { margin-top: -64px; padding: 0 24px !important; position: relative; }
  #immersive #room-title { font-size: 22px; -webkit-line-clamp: 1; white-space: normal; }
  #immersive #room-artist { font-size: 18px; }
  #immersive .icon-btn { width: 36px; height: 36px; }
  #immersive .icon-btn svg { width: 17px; height: 17px; }
  #immersive .room-progress { margin-top: 18px; }
  #immersive .room-transport { margin: 12px -6px 0; }
  #immersive .room-transport .icon-btn { width: 58px; height: 58px; }
  #immersive .room-transport .icon-btn svg { width: 32px; height: 32px; }
  #immersive .room-transport .main-play { width: 76px; height: 76px; }
  #immersive .room-transport .main-play svg { width: 42px; height: 42px; }
  #immersive #room-shuffle, #immersive #room-repeat { width: 40px; height: 40px; }
  #immersive .room-lyrics { max-height: 30dvh; }
  #immersive .room-next-card, #immersive .room-settings-link { display: none; }
  #immersive.art-expanded .immersive-details { display: grid !important; }
  #immersive { --hills-h: calc(84px + var(--safe-b)); }
  #immersive .room-lyrics { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

/* ═════════════════════════════ Account sheet ════════════════════════════ */

#account-dialog::backdrop { background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); }
#account-dialog[open] {
  width: min(600px, calc(100vw - 32px)); max-height: min(860px, 90dvh);
  border: 0 !important; border-radius: 32px; padding: 0;
  color: #fff;
  background: rgba(24, 24, 28, .74) !important; background-image: none !important; background-color: rgba(255, 255, 255, 0.04) !important;
  -webkit-backdrop-filter: blur(48px) saturate(180%); backdrop-filter: blur(48px) saturate(180%);
  animation: sheet-in .5s var(--spring);
}
@keyframes sheet-in { from { transform: translateY(24px) scale(.97); opacity: 0; } }
#account-dialog .account-close { position: absolute; top: 18px; right: 18px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.75); border: 0 !important; display: grid; place-items: center; }
#account-dialog .account-close svg { width: 15px; height: 15px; }
#account-dialog .account-header { display: flex; align-items: center; gap: 16px; padding: 30px 28px 18px !important; border: 0 !important; background: none !important; }
#account-dialog .account-avatar { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font: 700 26px/1 var(--font-display); color: #fff; background: #ff5a70 !important; }
#account-dialog .account-header .eyebrow { font-size: 10.5px; letter-spacing: .12em; color: rgba(255,255,255,.5); }
#account-dialog .account-header h2 { margin: 3px 0 2px; font: 700 26px/1.1 var(--font-display); letter-spacing: -.04em; }
#account-dialog .account-header p:not(.eyebrow) { font-size: 13px; color: rgba(255,255,255,.6); margin: 0; }
#account-dialog .settings-scroll { padding: 4px 20px 24px; overflow-y: auto; scrollbar-width: thin; }

/* Inset grouped lists, as in iOS Settings. */
#account-dialog .settings-section {
  margin: 0 0 22px !important; padding: 0 !important;
  border: 0 !important; background: none !important;
}
#account-dialog .settings-section-head { display: flex; justify-content: space-between; padding: 0 16px 7px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: rgba(255,255,255,.48); border: 0; background: none; }
#account-dialog .settings-section > :not(.settings-section-head),
#account-dialog #radio-settings-body > * {
  background: rgba(255,255,255,.07);
}
#account-dialog .settings-section > :not(.settings-section-head):first-of-type, #account-dialog .settings-section-head + * { border-top-left-radius: 18px; border-top-right-radius: 18px; }
#account-dialog .settings-section > :last-child { border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; }
#account-dialog #radio-settings-body { background: none !important; border-radius: 18px; overflow: hidden; }
#account-dialog #radio-settings-body > * { margin: 0 !important; border-radius: 0 !important; border: 0 !important; }
#account-dialog .settings-row, #account-dialog .account-identity, #account-dialog .account-summary {
  margin: 0 !important; padding: 15px 16px !important;
  border: 0 !important; border-radius: 0;
  position: relative;
}
#account-dialog .settings-section > :not(.settings-section-head) + :not(.settings-section-head)::before, #account-dialog .radio-account > * + *::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: rgba(255,255,255,.12);
}
#account-dialog .account-identity { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
#account-dialog .account-identity small { display: block; font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.45); }
#account-dialog .account-identity strong { display: block; margin: 2px 0; font-size: 16px; }
#account-dialog .account-identity span { font-size: 12.5px; color: rgba(255,255,255,.55); }
#account-dialog .settings-row label { font-size: 15px; font-weight: 550; color: #fff; }
#account-dialog .settings-row p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.52); }
#account-dialog .settings-toggle-row { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; }
#account-dialog .settings-row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
#account-dialog .settings-row-head output { font-size: 14px; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }
#account-dialog .settings-slider-row input[type=range] { width: 100%; }
#account-dialog .settings-slider-row p { margin-top: 10px; }
#account-dialog .settings-name-row { display: grid; gap: 10px; }
#account-dialog .name-field { display: flex; gap: 8px; }
#account-dialog .name-field input, #account-dialog input[type=text], #account-dialog input:not([type]) {
  flex: 1; min-width: 0; height: 42px; padding: 0 14px;
  border: 0 !important; border-radius: 12px;
  background: rgba(118,118,128,.24) !important; color: #fff; font-size: 15px; outline: none;
}
#account-dialog .account-top-artists { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
#account-dialog .account-top-artists img { border-radius: 50%; }
#account-dialog #account-listening-summary { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.62); }
#account-dialog .outline-button { min-height: 36px; padding: 0 16px; font-size: 13.5px; }
#account-dialog #sign-out { color: var(--am); }

@media (max-width: 720px) {
  #account-dialog[open] {
    width: 100vw; max-width: 100vw; height: auto; max-height: calc(100dvh - 18px);
    margin: auto 0 0; border-radius: 30px 30px 0 0;
    animation: sheet-up .5s var(--smooth);
  }
  @keyframes sheet-up { from { transform: translateY(100%); } }
  #account-dialog .account-header { padding: 26px 22px 14px !important; }
  #account-dialog .account-header::before { content: ""; position: absolute; left: 50%; top: 8px; width: 38px; height: 5px; margin-left: -19px; border-radius: 99px; background: rgba(255,255,255,.3); }
  #account-dialog .settings-scroll { padding: 4px 14px calc(26px + var(--safe-b)); }
  #account-dialog .name-field { flex-direction: column; }
}

/* ════════════════════════════════ Radio ═════════════════════════════════ */

#radio-content .radio-hero {
  border: 0 !important; border-radius: 30px; overflow: hidden;
  background:
    #120a0e !important;
}
#radio-content .radio-hero-copy h1 { color: #fff; }
#radio-content .radio-hero-copy h1 em {
  font-style: normal;
  color: transparent !important;
  background: #ff8fa0;
  -webkit-background-clip: text; background-clip: text;
}
#radio-content .radio-hero-copy p { color: rgba(255,255,255,.75); }
#radio-content .radio-orbit i { border-color: rgba(255,255,255,.16) !important; }
#radio-content .radio-orbit span {
  background: var(--am) !important;
  color: #fff !important;
}
#radio-content .radio-orbit small, #radio-content .radio-frequency { color: rgba(255,255,255,.5); }
#radio-content .radio-frequency b { color: #fff; }
#radio-content .radio-tuning { border: 0 !important; }
#radio-content .radio-tuning h2 { font: 700 21px/1.2 var(--font-display); letter-spacing: -.03em; }
#radio-content #radio-seeds > *, #radio-content .radio-basis button {
  border: 0 !important; border-radius: 16px !important;
  background: rgba(255,255,255,.07) !important;
}
#radio-content .radio-song, #radio-content #radio-songs > * { border-radius: 14px; transition: background .2s; }
#radio-content #radio-songs > *:hover { background: rgba(255,255,255,.06); }
#radio-content .radio-song-context, #radio-content .radio-song small { color: rgba(255,255,255,.5); }
.radio-home-card {
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
}
.radio-home-card span, .radio-home-card small, .radio-home-card b { color: rgba(255,255,255,.85) !important; }
.radio-nav-dot { background: var(--am) !important; }

@media (max-width: 720px) {
  #radio-content .radio-hero { border-radius: 26px; }
  #radio-content .filter-tabs { display: flex; width: 100%; }
  #radio-content .filter-tabs button { flex: 1; padding: 0 8px; font-size: 12.5px; }
}

/* ═════════════════════════ Liked Songs & lists ══════════════════════════ */

.collection-hero, .collection-header, .liked-hero {
  border: 0 !important; border-radius: 30px !important;
}
body[data-view="liked"] .collection-hero, body[data-view="liked"] .collection-header, body[data-view="liked"] .liked-hero {
  background:
    #13090d !important;
}
.liked-emblem, .collection-art, .liked-art {
  border-radius: 18px !important;
  background: #ff8094 !important;
  color: #fff !important;
}
.liked-emblem > svg, .collection-art svg, .liked-art svg { color: #fff !important; fill: #fff; }
.track-row { border-radius: 12px; border-color: transparent !important; transition: background .2s; }
.track-row:hover { background: rgba(255,255,255,.06) !important; }
.track-row.playing .track-index, .track-row.playing .track-title { color: var(--am) !important; }
.track-art { border-radius: 8px !important; }
#collection-filter, .collection-filter input, .collection-tools input, .collection-tools select {
  border: 0 !important; border-radius: 999px !important; background: rgba(118,118,128,.22) !important; color: #fff;
}
.empty-state, .collection-empty {
  border: 0 !important; border-radius: 24px !important;
  background: rgba(255,255,255,.04) !important;
}

/* Cards and shelves: softer corners, a lift on hover. */
.shelf-row img, .album-grid img, .library-grid img, .mix-grid img { border-radius: 12px; }
.am-hero { border-radius: 30px !important; border: 0 !important; }
.hero-tag, .am-hero .eyebrow { color: var(--am) !important; }

/* ═══════════════════════════════ Sign in ════════════════════════════════ */

.auth-panel input {
  height: 46px; border: 0 !important; border-radius: 14px !important;
  background: rgba(118,118,128,.22) !important; color: #fff;
}
.auth-panel input:focus { outline: none; }
.auth-tabs { display: flex; width: 100%; }
.auth-tabs button { flex: 1; }
.auth-guest { color: var(--am) !important; font-weight: 600; }

/* ═══════════════════════════ General dialogs ════════════════════════════ */

#dialog[open] {
  border: 0 !important; border-radius: 28px;
  background: rgba(24,24,28,.78) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  animation: sheet-in .45s var(--spring);
}
#dialog::backdrop { background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.toast {
  border: 0 !important; border-radius: 999px !important;
  background: rgba(30,30,34,.7) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
}

@media (prefers-reduced-motion: reduce) {
  #immersive[open], #account-dialog[open], #dialog[open] { animation: none; }
  .has-lens > .lens, .mobile-tabs, .player, #immersive #room-cover { transition: none !important; }
}

.liked-emblem > svg { fill: rgba(255,255,255,.9) !important; transform: none !important; }
.liked-emblem i { display: none; }
@media (max-width: 720px) {
  .collection-hero { align-items: center !important; text-align: center; padding: 26px 20px 24px !important; }
  .collection-hero > .collection-art, .liked-emblem { width: 168px !important; height: 168px !important; }
  .collection-hero h1 { font-size: 28px !important; }
}

#account-dialog .settings-section::before { content: none !important; }
#account-dialog .settings-section { overflow: visible !important; }
#account-dialog .settings-section-head { border: 0 !important; background: none !important; padding: 0 16px 7px !important; font-size: 11.5px !important; letter-spacing: .04em !important; }
#account-dialog .settings-section-head > span:last-child { font-size: 10.5px !important; color: rgba(255,255,255,.35) !important; }
#account-dialog .radio-account { padding: 0 !important; border: 0 !important; border-radius: 18px !important; overflow: hidden; background: rgba(255,255,255,.07) !important; }
#account-dialog .radio-account > * { position: relative; display: block; width: 100%; margin: 0 !important; padding: 14px 16px !important; text-align: left; border: 0 !important; border-radius: 0 !important; background: none !important; }
#account-dialog .radio-account > .settings-toggle-row { display: flex !important; }
#account-dialog .radio-account > [hidden] { display: none !important; }
#account-dialog #radio-taste-summary { font-size: 12.5px; color: rgba(255,255,255,.55); }
#account-dialog #radio-feedback-manage { font-size: 15px; color: var(--am); font-weight: 550; }
#account-dialog .radio-reset span { display: block; font-size: 15px; color: #ff453a; font-weight: 550; }
#account-dialog .radio-reset small { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(255,255,255,.5); }
#account-dialog .radio-reset:hover, #account-dialog #radio-feedback-manage:hover { background: rgba(255,255,255,.05) !important; }
#account-dialog .account-identity > div { padding: 0 !important; border: 0 !important; background: none !important; }
#account-dialog .settings-row { border-bottom: 0 !important; }

#immersive #room-close { background-color: var(--glass-tint) !important; background-image: none !important; background-color: rgba(255,255,255,.09) !important; color: #fff !important; border: 0 !important; }

/* Flat, Apple Music style: no bevels anywhere outside the floating glass. */
.icon-btn, .circle-button, .filter-tabs button, .auth-tabs button, .main-nav .nav-button, .mobile-profile .avatar { background-image: none !important; }
.mobile-profile .avatar { background: #ff5a70 !important; }

/* Short phones (iPhone SE, small Android): smaller art and controls so the
   title and transport sit on the first screen above the hills. */
@media (max-width: 720px) and (max-height: 740px) {
  #immersive { --hills-h: calc(64px + var(--safe-b)); }
  #immersive #room-cover { height: min(100vw, 46dvh); max-height: 46dvh; }
  #immersive .immersive-details { margin-top: -54px; }
  #immersive #room-title { font-size: 20px; }
  #immersive #room-artist { font-size: 16px; }
  #immersive .room-progress { margin-top: 12px; }
  #immersive .room-transport { margin-top: 6px; }
  #immersive .room-transport .icon-btn { width: 52px; height: 52px; }
  #immersive .room-transport .icon-btn svg { width: 28px; height: 28px; }
  #immersive .room-transport .main-play { width: 66px; height: 66px; }
  #immersive .room-transport .main-play svg { width: 36px; height: 36px; }
}
@media (max-width: 380px) {
  .mobile-tabs button { font-size: 9.5px !important; }
  .mobile-tabs button svg { width: 21px !important; height: 21px !important; }
  #immersive .immersive-details { padding: 0 18px !important; }
  #account-dialog .account-header h2 { font-size: 22px; }
}
@media (max-height: 760px) and (min-width: 721px) {
  #immersive { --hills-h: clamp(80px, 14vh, 120px); }
  #immersive .immersive-header { height: 56px; }
}

/* ═════════════════════════════ Lyrics mode ══════════════════════════════
   The lyrics button turns the room into the Music app's lyrics view. */

#immersive .room-lyrics .lyrics-pad { height: 34%; flex-shrink: 0; }
#immersive .lyric-line {
  padding: 9px 0; margin: 0;
  font: 800 clamp(24px, 2.5vw, 36px)/1.2 var(--font-display); letter-spacing: -.025em;
  color: rgba(255,255,255,.34);
  filter: blur(calc(var(--d, 0) * .55px));
  transform: scale(.97); transform-origin: left center;
  transition: color .45s var(--smooth), filter .45s var(--smooth), transform .7s var(--spring);
  cursor: default; text-wrap: balance;
}
#immersive .room-lyrics[data-synced="1"] .lyric-line { cursor: pointer; }
#immersive .room-lyrics[data-synced="1"] .lyric-line:hover { color: rgba(255,255,255,.6); }
#immersive .lyric-line.active { color: #fff; filter: none; transform: scale(1); }
#immersive .room-lyrics[data-synced="0"] .lyric-line { color: rgba(255,255,255,.88); filter: none; transform: none; font-size: clamp(20px, 2vw, 28px); }
#immersive .lyric-break { display: flex; gap: 7px; height: 0; padding: 0; overflow: hidden; transition: height .4s var(--smooth), padding .4s; }
#immersive .lyric-break.active { height: 22px; padding: 14px 0; }
#immersive .lyric-break i { width: 11px; height: 11px; border-radius: 50%; background: #fff; opacity: .35; animation: lyric-dot 1.6s ease-in-out infinite; }
#immersive .lyric-break i:nth-child(2) { animation-delay: .25s; }
#immersive .lyric-break i:nth-child(3) { animation-delay: .5s; }
@keyframes lyric-dot { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
#immersive .room-lyrics .lyrics-note { margin: auto 0; padding: 30% 0; font: 700 20px/1.3 var(--font-display) !important; color: rgba(255,255,255,.55) !important; }

#immersive.lyrics-mode .room-lyrics {
  grid-area: lyr; display: flex; flex-direction: column;
  min-height: 0; height: 100%; max-height: none; margin: 0; padding: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent);
}
#immersive.lyrics-mode .immersive-details { display: contents !important; }
#immersive.lyrics-mode #room-album, #immersive.lyrics-mode .room-next-card, #immersive.lyrics-mode .room-settings-link { display: none !important; }
#immersive.lyrics-mode .immersive-art { grid-area: art; }
#immersive.lyrics-mode #room-title { grid-area: title; }
#immersive.lyrics-mode #room-artist { grid-area: artist; }
#immersive.lyrics-mode .room-progress { grid-area: prog; }
#immersive.lyrics-mode .room-transport { grid-area: trans; }

@media (min-width: 721px) {
  #immersive.lyrics-mode .immersive-layout {
    --art: min(30vw, 42vh);
    height: calc(100dvh - 68px - var(--hills-h)); max-height: none;
    grid-template-columns: calc(var(--art) - 104px) 46px 46px minmax(320px, 620px);
    grid-template-rows: 1fr auto auto auto auto auto auto 1fr;
    grid-template-areas:
      ". . . lyr"
      "art art art lyr"
      "title like opts lyr"
      "artist like opts lyr"
      "prog prog prog lyr"
      "trans trans trans lyr"
      "lyrt radio radio lyr"
      ". . . lyr";
    column-gap: 6px; align-items: center; justify-content: center;
  }
  #immersive.lyrics-mode .immersive-art { margin-bottom: 22px; }
  #immersive.lyrics-mode #room-cover { width: var(--art); }
  #immersive.lyrics-mode .room-lyrics { margin-left: clamp(40px, 6vw, 110px); align-self: stretch; }
  #immersive.lyrics-mode #room-title { font-size: 22px; }
  #immersive.lyrics-mode #room-artist { font-size: 17px; }
  #immersive.lyrics-mode .room-transport .icon-btn { width: 54px; height: 54px; }
  #immersive.lyrics-mode .room-transport .main-play { width: 66px; height: 66px; }
  #immersive.lyrics-mode #room-lyrics-toggle, #immersive.lyrics-mode #room-radio { margin-top: 10px; }
}

@media (max-width: 720px) {
  #immersive.lyrics-mode .immersive-layout {
    display: grid !important;
    height: calc(100dvh - var(--hills-h)); max-height: none; overflow: hidden;
    -webkit-mask-image: none; mask-image: none;
    padding: calc(58px + env(safe-area-inset-top, 0px)) 22px 10px;
    grid-template-columns: 54px minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
    grid-template-areas:
      "art title like opts"
      "art artist like opts"
      "lyr lyr lyr lyr"
      "prog prog prog prog"
      "trans trans trans trans"
      "lyrt radio radio radio";
    column-gap: 12px;
  }
  #immersive.lyrics-mode .immersive-art { width: 54px; align-self: center; }
  #immersive.lyrics-mode #room-cover { width: 54px; height: 54px; max-height: none; border-radius: 9px; -webkit-mask-image: none; mask-image: none; transform: none !important; filter: none !important; }
  #immersive.lyrics-mode #room-title { font-size: 17px; -webkit-line-clamp: 1; align-self: end; }
  #immersive.lyrics-mode #room-artist { font-size: 15px; margin: 0; align-self: start; }
  #immersive.lyrics-mode .room-lyrics { margin: 14px -22px 0; padding: 0 22px; }
  #immersive.lyrics-mode .lyric-line { font-size: 27px; }
  #immersive.lyrics-mode .room-progress { margin-top: 8px; }
  #immersive.lyrics-mode .room-transport { margin: 4px -6px 0; }
  #immersive.lyrics-mode .room-transport .icon-btn { width: 52px; height: 52px; }
  #immersive.lyrics-mode .room-transport .main-play { width: 64px; height: 64px; }
  #immersive.lyrics-mode .room-transport .main-play svg { width: 36px; height: 36px; }
  #immersive.lyrics-mode #room-lyrics-toggle, #immersive.lyrics-mode #room-radio { margin-top: 2px; }
}
@media (max-width: 720px) and (max-height: 740px) {
  #immersive.lyrics-mode .lyric-line { font-size: 23px; }
}

/* ══════════════════════ Top bar: no repeated titles ═════════════════════ */

.topbar-context { display: none !important; }
@media (min-width: 721px) { .topbar { justify-content: flex-end; } }

/* ═══════════════════════ The logo, as a drop of glass ═══════════════════ */

.logo { gap: 10px; -webkit-tap-highlight-color: transparent; }
.brand-mark {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  border-radius: 31%;
  background: transparent !important;
  transition: transform .6s var(--spring), border-radius .6s var(--spring), box-shadow .4s;
}
.brand-mark::before {
  content: ""; position: absolute; z-index: 0; left: -30%; top: -60%; width: 90%; height: 110%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  opacity: .55; transform: translate(0, 0) rotate(-18deg);
  transition: transform .8s var(--smooth), opacity .4s;
}
.brand-mark::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
}
.brand-mark i { position: relative; z-index: 1; border-radius: 9px; background: #fff; transform-origin: center; }
.logo:hover .brand-mark, .logo:focus-visible .brand-mark { animation: drop-wobble 1.8s var(--smooth) infinite; }
.logo:hover .brand-mark::before { opacity: .8; }
.logo:active .brand-mark { animation: none; transform: scale(.82, .9); border-radius: 46%; transition-duration: .12s; }
.logo:hover .brand-mark i, body.is-playing .brand-mark i { animation: eq-bar 1s ease-in-out infinite alternate; }
.brand-mark i:nth-child(2) { animation-delay: -.35s !important; }
.brand-mark i:nth-child(3) { animation-delay: -.7s !important; }
.brand-mark i:nth-child(4) { animation-delay: -.15s !important; }
@keyframes eq-bar { from { transform: scaleY(.45); } to { transform: scaleY(1.15); } }
@keyframes drop-wobble {
  0%, 100% { border-radius: 31%; transform: scale(1.06); }
  25% { border-radius: 42% 26% 38% 30% / 30% 40% 28% 38%; transform: scale(1.09, 1.03) rotate(-2deg); }
  50% { border-radius: 28% 40% 30% 42% / 38% 28% 42% 30%; transform: scale(1.03, 1.09) rotate(2deg); }
  75% { border-radius: 36% 30% 44% 28% / 28% 42% 30% 40%; transform: scale(1.08, 1.05); }
}
.brand-name {
  background: #fff;
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  transition: background-position 1.1s var(--smooth);
}
.brand-name .logo-accent { color: var(--am) !important; -webkit-text-fill-color: var(--am); }
.logo:hover .brand-name { background-position: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .logo:hover .brand-mark, .logo:hover .brand-mark i, body.is-playing .brand-mark i { animation: none; }
}

/* ═══════════════════ The player, laid out as the Music app ═══════════════════
   Title and artist with favorite and ⋯, progress with time left, back / play /
   forward, volume, then Lyrics · another device · Playing Next. */

#immersive .room-legacy, #immersive #room-radio { display: none !important; }
#immersive .immersive-details {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-areas:
    "title like opts"
    "artist like opts"
    "album album album"
    "prog prog prog"
    "trans trans trans"
    "vol vol vol"
    "bot bot bot" !important;
}
#immersive .room-volume { grid-area: vol; }
#immersive .room-bottom { grid-area: bot; }
#immersive .room-queue { grid-area: lyr; }
#immersive .room-lyrics { grid-area: lyr; }

/* Favorite and ⋯: small translucent circles; a favorite fills white. */
#immersive #room-like, #immersive #room-options { width: 32px; height: 32px; background-color: rgba(255,255,255,.16) !important; background-image: none !important; -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important; }
#immersive #room-like svg, #immersive #room-options svg { width: 16px; height: 16px; }
#immersive #room-like.on { background-color: #fff !important; color: var(--am) !important; }
#immersive #room-like.on svg { fill: currentColor; }

/* Transport: back, play, forward — big plain glyphs, evenly spread. */
#immersive .room-transport { justify-content: space-evenly !important; margin: 18px 0 8px !important; }
#immersive .room-transport .icon-btn svg { width: 38px !important; height: 38px !important; }
#immersive .room-transport .main-play svg { width: 46px !important; height: 46px !important; }
#immersive #room-prev svg { transform: none; }

/* Volume */
#immersive .room-volume { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; color: rgba(255,255,255,.6); }
#immersive .room-volume svg { width: 18px; height: 18px; flex-shrink: 0; }
#immersive .room-volume input { flex: 1; height: 7px; --range-rest: rgba(255,255,255,.2); --range-fill: rgba(255,255,255,.85); }
#immersive .room-volume input:hover { height: 11px; }
#immersive .room-volume input::-webkit-slider-thumb { opacity: 0 !important; width: 1px; }

/* Bottom row */
#immersive .room-bottom { display: flex; align-items: center; justify-content: space-around; margin-top: 12px; }
#immersive .room-tab { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0 !important; border-radius: 12px; background: none !important; color: rgba(255,255,255,.7); transition: color .2s, background .2s, transform .4s var(--spring); }
#immersive .room-tab svg { width: 24px; height: 24px; }
#immersive .room-tab:hover { color: #fff; }
#immersive .room-tab:active { transform: scale(.88); }
#immersive .room-tab.on, #immersive .room-tab[aria-pressed="true"] { color: #000; background: rgba(255,255,255,.9) !important; }
#immersive .room-tab:disabled { opacity: .3; }

/* Playing Next */
#immersive .room-queue { display: flex; flex-direction: column; min-height: 0; }
#immersive .room-queue[hidden] { display: none; }
#immersive .room-queue-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0 10px; }
#immersive .room-queue-head h3 { margin: 0; font: 700 19px/1.2 var(--font-display); letter-spacing: -.02em; }
#immersive .room-queue-modes { display: flex; gap: 8px; }
#immersive .room-mode { display: grid; place-items: center; width: 52px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; transition: background .2s, color .2s, transform .4s var(--spring); }
#immersive .room-mode svg { width: 18px; height: 18px; }
#immersive .room-mode.on { background: rgba(255,255,255,.9); color: #000; }
#immersive .room-mode:active { transform: scale(.9); }
#immersive .room-queue-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent); mask-image: linear-gradient(180deg, #000 88%, transparent); }
#immersive .room-queue-list::-webkit-scrollbar { display: none; }
#immersive .room-queue-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 4px; border: 0; border-radius: 10px; background: none; color: #fff; text-align: left; }
#immersive .room-queue-row:hover { background: rgba(255,255,255,.08); }
#immersive .room-queue-row img { width: 44px; height: 44px; border-radius: 7px; object-fit: cover; background: rgba(255,255,255,.08); }
#immersive .room-queue-row span { min-width: 0; display: flex; flex-direction: column; }
#immersive .room-queue-row strong { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#immersive .room-queue-row small { font-size: 13px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#immersive .room-queue-empty { margin: 20px 0; color: rgba(255,255,255,.55); font-size: 14px; }

/* Lyrics or Playing Next open: the panel takes the room. */
#immersive:is(.lyrics-mode, .queue-mode) .immersive-details { display: contents !important; }
#immersive:is(.lyrics-mode, .queue-mode) #room-album { display: none !important; }
#immersive:is(.lyrics-mode, .queue-mode) .immersive-art { grid-area: art; }
#immersive:is(.lyrics-mode, .queue-mode) #room-title { grid-area: title; }
#immersive:is(.lyrics-mode, .queue-mode) #room-artist { grid-area: artist; }
#immersive:is(.lyrics-mode, .queue-mode) #room-like { grid-area: like; }
#immersive:is(.lyrics-mode, .queue-mode) #room-options { grid-area: opts; }
#immersive:is(.lyrics-mode, .queue-mode) .room-progress { grid-area: prog; }
#immersive:is(.lyrics-mode, .queue-mode) .room-transport { grid-area: trans; }

@media (min-width: 721px) {
  #immersive:is(.lyrics-mode, .queue-mode) .immersive-layout {
    --art: min(30vw, 40vh);
    display: grid;
    height: calc(100dvh - 68px - var(--hills-h)); max-height: none;
    grid-template-columns: calc(var(--art) - 84px) 38px 38px minmax(320px, 620px) !important;
    grid-template-rows: 1fr auto auto auto auto auto auto auto 1fr !important;
    grid-template-areas:
      ". . . lyr"
      "art art art lyr"
      "title like opts lyr"
      "artist like opts lyr"
      "prog prog prog lyr"
      "trans trans trans lyr"
      "vol vol vol lyr"
      "bot bot bot lyr"
      ". . . lyr" !important;
    column-gap: 4px; align-items: center; justify-content: center;
  }
  #immersive:is(.lyrics-mode, .queue-mode) .immersive-art { margin-bottom: 20px; }
  #immersive:is(.lyrics-mode, .queue-mode) #room-cover { width: var(--art); }
  #immersive:is(.lyrics-mode, .queue-mode) :is(.room-lyrics, .room-queue) { margin-left: clamp(40px, 6vw, 110px); align-self: stretch; height: 100%; }
  #immersive:is(.lyrics-mode, .queue-mode) .room-transport .icon-btn svg { width: 32px !important; height: 32px !important; }
  #immersive:is(.lyrics-mode, .queue-mode) .room-transport .main-play svg { width: 40px !important; height: 40px !important; }
  #immersive:is(.lyrics-mode, .queue-mode) .room-queue { padding-top: 6vh; }
}

@media (max-width: 720px) {
  #immersive { --hills-h: calc(46px + var(--safe-b)); }
  #immersive .immersive-layout { overflow: hidden !important; -webkit-mask-image: none !important; mask-image: none !important; padding-bottom: 6px !important; }
  #immersive .immersive-details { margin-top: -58px; padding: 0 26px !important; flex: 1; align-content: end; }
  #immersive #room-cover { height: min(118vw, 60dvh) !important; max-height: 60dvh !important; }
  #immersive #room-album { display: none; }
  #immersive .room-progress { margin-top: 20px !important; }
  #immersive .room-transport { margin: 10px 0 6px !important; }
  #immersive .room-transport .icon-btn, #immersive .room-transport .main-play { width: 72px !important; height: 64px !important; }
  #immersive .room-bottom { margin-top: 10px; justify-content: space-between; padding: 0 6px; }

  #immersive:is(.lyrics-mode, .queue-mode) .immersive-layout {
    display: grid !important;
    height: calc(100dvh - var(--hills-h)); max-height: none;
    padding: calc(58px + env(safe-area-inset-top, 0px)) 24px 6px !important;
    grid-template-columns: 54px minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto !important;
    grid-template-areas:
      "art title like opts"
      "art artist like opts"
      "lyr lyr lyr lyr"
      "prog prog prog prog"
      "trans trans trans trans"
      "vol vol vol vol"
      "bot bot bot bot" !important;
    column-gap: 12px;
  }
  #immersive:is(.lyrics-mode, .queue-mode) .immersive-details { margin: 0; padding: 0 !important; }
  #immersive:is(.lyrics-mode, .queue-mode) .immersive-art { width: 54px; align-self: center; }
  #immersive:is(.lyrics-mode, .queue-mode) #room-cover { width: 54px !important; height: 54px !important; max-height: none !important; border-radius: 9px; -webkit-mask-image: none; mask-image: none; transform: none !important; filter: none !important; }
  #immersive:is(.lyrics-mode, .queue-mode) #room-title { font-size: 17px !important; -webkit-line-clamp: 1; align-self: end; margin: 0; }
  #immersive:is(.lyrics-mode, .queue-mode) #room-artist { font-size: 15px !important; margin: 0; align-self: start; }
  #immersive:is(.lyrics-mode, .queue-mode) :is(.room-lyrics, .room-queue) { margin: 14px -24px 0; padding: 0 24px; min-height: 0; height: 100%; }
  #immersive:is(.lyrics-mode, .queue-mode) .room-progress { margin-top: 8px !important; }
  #immersive:is(.lyrics-mode, .queue-mode) .room-transport { margin: 4px 0 2px !important; }
  #immersive:is(.lyrics-mode, .queue-mode) .room-transport .icon-btn, #immersive:is(.lyrics-mode, .queue-mode) .room-transport .main-play { height: 56px !important; }
  #immersive:is(.lyrics-mode, .queue-mode) .room-transport .icon-btn svg { width: 32px !important; height: 32px !important; }
  #immersive:is(.lyrics-mode, .queue-mode) .room-transport .main-play svg { width: 38px !important; height: 38px !important; }
}
@media (max-width: 720px) and (max-height: 740px) {
  #immersive { --hills-h: calc(30px + var(--safe-b)); }
  #immersive #room-cover { height: min(100vw, 44dvh) !important; max-height: 44dvh !important; }
  #immersive .room-progress { margin-top: 12px !important; }
  #immersive .room-transport { margin: 2px 0 0 !important; }
  #immersive .room-transport .icon-btn, #immersive .room-transport .main-play { height: 54px !important; }
  #immersive .room-volume { margin: 4px 0 0; }
  #immersive .room-bottom { margin-top: 4px; }
}

/* ═══════════════ Logo and avatars: design C, pure Apple ═══════════════ */
.brand-mark {
  width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important;
  display: inline-grid !important; place-items: center; overflow: visible !important;
  background: none !important; border-radius: 0 !important;
  color: #ff375f; transform-origin: 40% 80%;
}
.brand-mark::before, .brand-mark::after { content: none !important; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-mark i { display: none !important; }
.logo, .mobile-brand { gap: 7px !important; }
.brand-name, .mobile-brand .brand-name {
  background: none !important; color: #fff !important; -webkit-text-fill-color: #fff;
  font: 700 21px/1 var(--font-display) !important; letter-spacing: -.04em !important;
}
.brand-name .logo-accent { color: rgba(255,255,255,.72) !important; -webkit-text-fill-color: rgba(255,255,255,.72); font-weight: 400; }
.logo:hover .brand-mark, .mobile-brand:hover .brand-mark, .logo:focus-visible .brand-mark { animation: note-wobble 1.4s var(--smooth) infinite; }
.logo:active .brand-mark, .mobile-brand:active .brand-mark { animation: none; transform: scale(.82, .9); transition: transform .12s; }
body.is-playing .brand-mark { animation: note-beat 1.2s ease-in-out infinite; }
@keyframes note-wobble {
  0%, 100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-9deg) scale(1.12, 1.04); }
  50% { transform: rotate(6deg) scale(1.04, 1.12); }
  75% { transform: rotate(-3deg) scale(1.08); }
}
@keyframes note-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .brand-mark { animation: none !important; } }

/* Avatars: the grey Apple account silhouette. */
.avatar, .account-avatar {
  position: relative; overflow: hidden;
  font-size: 0 !important; color: transparent !important;
  background: #a1a1a6 !important; border: 0 !important;
}
.avatar::after, .account-avatar::after {
  content: ""; position: absolute; inset: 14% 8% -6%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8.6' r='4.6' fill='%23e5e5ea'/%3E%3Cpath d='M2.6 24c0-5.3 4.2-8.9 9.4-8.9s9.4 3.6 9.4 8.9z' fill='%23e5e5ea'/%3E%3C/svg%3E") center bottom / contain no-repeat;
}
.mobile-profile { background: none !important; }
.mobile-profile .avatar { width: 34px !important; height: 34px !important; }