/* ─────────────────────────── Large-screen layout ─────────────────────────── */

/* Apple Music's desktop Listen Now is a clean two-column shell (sidebar +
   content). The fixed "Playing Next" rail is intentionally gone. */
:root { --room: 0px; }
.listening-panel { display: none !important; }
.main-shell { margin-right: 0; }
.mobile-brand, .mobile-profile { display: none; }

/* ──────────────────────────── Phone redesign ─────────────────────────────── */

@media (max-width: 720px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 0 16px;
    background: rgba(8, 8, 10, .5);
    backdrop-filter: blur(42px) saturate(180%);
    -webkit-backdrop-filter: blur(42px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .mobile-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font: 700 17px/1 var(--font-display);
    letter-spacing: -.045em;
  }
  .mobile-brand .brand-mark { width: 27px; height: 27px; border-radius: 7px; margin: 0; }
  .mobile-brand .brand-mark i { width: 2px; }
  .mobile-brand .brand-mark i:nth-child(1) { height: 6px; }
  .mobile-brand .brand-mark i:nth-child(2) { height: 11px; }
  .mobile-brand .brand-mark i:nth-child(3) { height: 8px; }
  .mobile-brand .brand-mark i:nth-child(4) { height: 4px; }
  .topbar-context { display: none; }
  .search-box { display: none; }
  .mobile-profile {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-left: auto;
    padding: 0;
    border-radius: 50%;
  }
  .mobile-profile .avatar { width: 32px; height: 32px; font-size: 11px; background: #3be07a; }

  body[data-view="search"] .topbar {
    height: 112px;
    align-items: flex-start;
    padding-top: 13px;
    background: rgba(8, 8, 10, .62);
  }
  body[data-view="search"] .search-box {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 58px;
    display: flex;
    width: auto;
    height: 42px;
  }
  body[data-view="search"] .mobile-brand { visibility: hidden; }

  main { padding: 6px 16px 0; }
  .intro { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; margin: 8px 0 17px; padding: 0 2px; text-align: left; }
  .intro .eyebrow { font-size: 9px; letter-spacing: .12em; }
  h1 { font-size: 25px; line-height: 1.1; letter-spacing: -.052em; }
  #view-subtitle { margin-top: 5px; font-size: 12px; line-height: 1.45; }

  .am-hero {
    display: block;
    min-height: 424px;
    margin-bottom: 30px;
    border-radius: 22px;
    border-color: rgba(255,255,255,.1);
    background: #111;
  }
  .hero-backdrop { display: none; }
  .am-hero-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    padding: 0;
  }
  .am-hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    opacity: .92;
    transform: none;
  }
  .am-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0,0,0,.08);
    pointer-events: none;
  }
  .am-hero-copy { position: absolute; inset: auto 0 0; z-index: 2; padding: 22px; }
  .hero-tag { font-size: 9px; letter-spacing: .13em; }
  .am-hero h2 { margin-top: 9px; font-size: 32px; line-height: 1.02; }
  #hero-subtitle { margin-top: 9px; max-width: 100%; color: rgba(255,255,255,.76); font-size: 12px; line-height: 1.45; }
  .hero-actions { margin-top: 15px; gap: 8px; }
  .hero-actions .green-button, .hero-actions .outline-button { padding: 9px 16px; font-size: 12px; }
  .hero-byline, .hero-number { display: none; }

  .shelves { margin-bottom: 30px; }
  .section-title { align-items: flex-end; gap: 10px; margin-bottom: 12px; }
  .section-title h2 { font-size: 19px; }
  .shelf-sub { font-size: 11px; line-height: 1.35; }
  .shelf-action { font-size: 11px; }
  .shelf-row { grid-auto-columns: 142px; gap: 14px; padding-bottom: 4px; }
  .artist-strip { grid-auto-columns: 92px; gap: 13px; padding-bottom: 4px; }
  .am-card h3 { margin-top: 7px; font-size: 12px; }
  .am-card p { font-size: 10.5px; }
  .am-card p + p { display: none; }
  .am-badge { top: 6px; left: 6px; font-size: 7px; padding: 2px 5px; }
  .am-mix-art { border-radius: 14px; }
  .am-mix-art strong { font-size: 17px; }
  .am-mix-art small { font-size: 9px; }
  .mix-grid { gap: 10px; }
  .personal-home-grid { gap: 12px; }
  .radio-home-card { min-height: 180px; border-radius: 16px; padding: 18px; }
  .radio-home-card strong { font-size: 30px; }
  .personal-picks > article { padding: 7px 3px; }
  .personal-picks img { width: 42px; height: 42px; }

  /* Apple Music Library: compact three-column covers and category chips. */
  .library-feature { grid-template-columns: 1fr; gap: 9px; margin: 4px 0 20px; }
  .library-feature-card { min-height: 92px; padding: 14px 15px; border-radius: 16px; }
  .library-feature-card > span:first-child { width: 42px; height: 42px; border-radius: 12px; }
  .library-feature-card > span:first-child svg { width: 22px; height: 22px; }
  .library-feature-card strong { font-size: 17px; }
  .library-feature-card p { margin-top: 3px; font-size: 10.5px; }
  .browse-toolbar { margin: 16px 0; gap: 8px; }
  .library-grid, .album-grid, .cover-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px 9px; }
  .library-grid { margin-bottom: 22px; }
  .collection-card strong { margin-top: 6px; font-size: 11px; }
  .collection-card small { font-size: 9.5px; }
  .search-results .track-row { padding-left: 2px; }
  .search-artist-strip { grid-template-columns: 1fr 1fr; }
  .search-artist-chip { padding: 9px; gap: 8px; }
  .search-artist-chip img { width: 36px; height: 36px; }
  .browse-moods { grid-template-columns: 1fr 1fr; gap: 10px; }
  .browse-mood { min-height: 150px; padding: 16px; border-radius: 14px; }
  .browse-mood strong { margin-top: 12px; font-size: 19px; }
  .browse-mood > span { margin-top: 10px; font-size: 9px; }
  .top-result { padding: 14px; gap: 14px; }
  .top-result > img { width: 62px; height: 62px; }
  .top-result h3 { font-size: 17px; }

  /* Floating pill player, matching the iOS mini-player reference. */
  .player {
    left: 8px;
    right: 8px;
    bottom: calc(var(--tabs) + 18px);
    height: var(--player);
    padding: 7px 10px;
    border-radius: 22px;
  }
  .player-track-group { width: calc(100% - 96px); padding-left: 47px; }
  .current-art { width: 38px; height: 38px; border-radius: 10px; }
  .current-track strong { font-size: 12px; }
  .player-track-group > .artist-link { margin-top: 3px; font-size: 10.5px; }
  .transport { gap: 14px; }
  .transport .icon-btn { width: 30px; height: 30px; }
  .main-play { width: 34px; height: 34px; }
  .main-play svg { width: 16px; height: 16px; }

  .mobile-tabs { border-radius: 22px; }
  .mobile-tabs button { font-size: 9px; gap: 2px; }
  .mobile-tabs button svg { width: 21px; height: 21px; }
  .mobile-tabs button.active { background: rgba(255, 255, 255, .08); color: #fff; }
  .mobile-tabs button.active svg { color: var(--accent); }

  /* Full-screen now playing: artwork on top, details underneath. */
  #immersive .immersive-header { height: 64px; padding: 0 18px; }
  #immersive .immersive-brand { font-size: 19px; }
  #immersive .immersive-layout {
    width: 100%;
    min-height: 0;
    padding: 12px 18px 26px;
    gap: 20px;
    grid-template-columns: 1fr;
    align-content: center;
  }
  #immersive .immersive-art { max-width: 100%; width: 100%; margin: 0; }
  #immersive .immersive-art > button { width: 100%; }
  #immersive .immersive-art > button > img {
    width: 100%;
    max-height: 43dvh;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 20px;
  }
  #immersive .immersive-details {
    width: 100%;
    max-width: none;
    padding: 0;
    border: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #immersive .immersive-details > .eyebrow { display: none; }
  #room-title { font-size: 28px; line-height: 1.1; }
  #room-artist { font-size: 15px; }
  #room-album { font-size: 11px; }
  .room-beat { height: 22px; margin-top: 12px; }
  .room-song-tools { margin-top: 12px; }
  .room-song-tools .icon-btn { width: 34px; height: 34px; }
  .room-radio-button { padding: 8px 14px; font-size: 11px; }
  .room-progress { margin-top: 10px; }
  .room-transport { margin-top: 16px; gap: 10px; }
  .room-transport .main-play { width: 50px; height: 50px; }
  .room-transport .icon-btn { width: 34px; height: 34px; }
  .room-next-card { display: none; }
  .room-settings-link, .art-footnote { display: none; }
}


:root {
  --glass-bg: rgba(34, 34, 37, .46);
  --glass-bg-strong: rgba(24, 24, 26, .66);
  --glass-border: rgba(255, 255, 255, .14);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .16);
  --glass-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  --tabs: 0px;
  --art-accent: #f0f0f2;
  --art-tint: #161616;
  --art-glow: #b9b9c0;
  --art-glass: rgba(255, 255, 255, .08);
}

body {
  background:
    #000;
  background-attachment: fixed;
}

/* Image fallbacks keep a shelf visually complete when a provider omits art. */
.am-art-fallback { display: grid; place-items: center; width: 100%; height: 100%; background: var(--art-a, #0e5a30); color: rgba(255, 255, 255, .88); font: 700 clamp(24px, 2.4vw, 34px)/1 var(--font-display); letter-spacing: -.04em; }
.artist-card img { height: auto; }

/* Chrome, panels, dialogs: translucent layers with a crisp specular edge. */
.sidebar {
  background:
    rgba(44, 44, 48, .38);
  backdrop-filter: blur(62px) saturate(185%);
  -webkit-backdrop-filter: blur(62px) saturate(185%);
  border-right: 1px solid var(--glass-border);
}
.topbar {
  background:
    rgba(10, 10, 12, .38);
  backdrop-filter: blur(62px) saturate(185%);
  -webkit-backdrop-filter: blur(62px) saturate(185%);
  border-bottom: 1px solid var(--glass-border);
}
.search-box {
  background: rgba(255, 255, 255, .085);
  border-color: rgba(255, 255, 255, .1);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.user-button {
  background: rgba(255, 255, 255, .075);
  border-color: var(--glass-border);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.player {
  background: rgba(42, 42, 45, .46);
  backdrop-filter: blur(62px) saturate(190%);
  -webkit-backdrop-filter: blur(62px) saturate(190%);
  border-top: 1px solid var(--glass-border);
}
.listening-panel {
  background: rgba(32, 32, 35, .36);
  backdrop-filter: blur(62px) saturate(185%);
  -webkit-backdrop-filter: blur(62px) saturate(185%);
  border-left: 1px solid var(--glass-border);
}
dialog {
  background:
    rgba(48, 48, 51, .7);
  backdrop-filter: blur(62px) saturate(185%);
  -webkit-backdrop-filter: blur(62px) saturate(185%);
  border: 1px solid var(--glass-border);
}
dialog::backdrop { background: rgba(0, 0, 0, .52); backdrop-filter: blur(24px) saturate(120%); }
.auth-panel {
  background:
    rgba(16, 16, 18, .68);
  backdrop-filter: blur(62px) saturate(185%);
  -webkit-backdrop-filter: blur(62px) saturate(185%);
  border-left: 1px solid var(--glass-border);
}
.auth-tabs { background: rgba(255, 255, 255, .055); border: 1px solid var(--glass-border); }
.auth-tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .16); }
.auth-form input { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .08); }
.outline-button {
  background: rgba(255, 255, 255, .055);
  border-color: var(--glass-border);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.green-button, .dark-button {
  background: #3be07a;
}
.filter-tabs { background: rgba(255, 255, 255, .045); border: 1px solid var(--glass-border); border-radius: 980px; padding: 4px; }
.inline-search, select { background: rgba(255, 255, 255, .065); border-color: var(--glass-border); }

/* Account settings become layered iOS-style cards. */
#account-dialog { background: rgba(48, 48, 51, .7); }
.account-header .account-avatar { background: #3be07a; }
.account-identity {
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--glass-border);
}
.account-summary {
  margin: 0 0 20px;
  padding: 15px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
}
.account-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-summary-head small { color: var(--muted-2); font-size: 8.5px; letter-spacing: .14em; font-weight: 600; }
.account-summary-head span { color: var(--muted); font-size: 10px; }
.account-top-artists { display: flex; gap: 12px; overflow-x: auto; margin-top: 12px; padding-bottom: 2px; scrollbar-width: none; }
.account-top-artists::-webkit-scrollbar { display: none; }
.account-artist { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 62px; flex-shrink: 0; }
.account-artist img, .account-artist-fallback { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #3a3a3d; color: var(--muted); font-size: 15px; font-weight: 600; }
.account-artist b { max-width: 62px; overflow: hidden; color: var(--muted); font-size: 9.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.account-artist:hover b { color: var(--text); }
#account-listening-summary { margin-top: 10px; color: var(--muted-2); font-size: 10.5px; line-height: 1.5; }
.settings-card { margin: 0 0 18px; }
.settings-heading { border-top: 1px solid var(--glass-border); }
.radio-account {
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 15px 16px;
  background: rgba(255, 255, 255, .035);
  margin-top: 18px;
}
.radio-account h3 { font-size: 13px; }
.radio-account p { color: var(--muted-2); }
.account-footer { border-top-color: var(--glass-border); }

/* The full-screen player: glass details panel, beat wave, full transport. */
#immersive .immersive-header {
  background: rgba(10, 10, 12, .22);
  backdrop-filter: blur(34px) saturate(160%);
  -webkit-backdrop-filter: blur(34px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
#immersive .immersive-details {
  max-width: 500px;
  padding: 30px;
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  background: rgba(44, 44, 47, .42);
  backdrop-filter: blur(62px) saturate(185%);
  -webkit-backdrop-filter: blur(62px) saturate(185%);
}
#immersive .immersive-art > button > img { border-radius: 22px; }
#immersive .room-ambience { filter: blur(120px) saturate(1.55); opacity: .46; }
#room-title { letter-spacing: -.055em; }
#room-album { margin-top: 4px; }
#immersive .room-next-card, #immersive .room-settings-link { display: none; }
.room-beat { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin: 20px 0 2px; }
.room-beat i {
  flex: 1;
  min-width: 2px;
  height: 24%;
  border-radius: 3px;
  background: #3be07a;
  opacity: .55;
  transform-origin: bottom;
  animation: room-beat .9s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.is-playing .room-beat i { animation-play-state: running; }
.room-beat i:nth-child(3n) { height: 58%; animation-duration: .72s; }
.room-beat i:nth-child(4n) { height: 40%; animation-duration: 1.05s; }
.room-beat i:nth-child(5n) { height: 76%; animation-duration: .64s; }
.room-beat i:nth-child(7n) { height: 32%; animation-duration: 1.2s; }
.room-beat i:nth-child(2n) { animation-delay: -.35s; }
.room-beat i:nth-child(3n) { animation-delay: -.6s; }
.room-beat i:nth-child(5n) { animation-delay: -.15s; }
@keyframes room-beat {
  from { height: 12%; opacity: .38; transform: scaleY(.72); }
  to { height: 92%; opacity: .95; transform: scaleY(1); }
}
.room-song-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.room-song-tools .icon-btn { width: 38px; height: 38px; border: 1px solid var(--glass-border); background: rgba(255,255,255,.055); }
.room-radio-button { gap: 8px; padding: 9px 16px; font-size: 12px; }
.room-radio-button svg { width: 16px; height: 16px; color: var(--accent); }
.room-progress { margin-top: 14px; }
.room-transport { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.room-transport .icon-btn { width: 38px; height: 38px; border: 1px solid var(--glass-border); background: rgba(255,255,255,.055); backdrop-filter: blur(18px); }
.room-transport .icon-btn:hover { background: rgba(255,255,255,.12); }
.room-transport .toggle[aria-pressed="true"] { color: var(--accent); background: rgba(30,215,96,.16); border-color: rgba(255, 255, 255, .1); }
.room-transport .main-play { width: 54px; height: 54px; }
.room-transport .main-play svg { width: 23px; height: 23px; }
.room-next-card { margin-top: 20px; background: rgba(255,255,255,.045); border: 1px solid var(--glass-border); }
.room-settings-link { display: inline-block; margin-top: 18px; }

@media (max-width: 720px) {
  :root { --player: 86px; --tabs: 56px; }
  .main-shell { padding-bottom: calc(var(--player) + var(--tabs) + 36px); }
  .player {
    left: 8px;
    right: 8px;
    bottom: calc(var(--tabs) + 18px);
    height: var(--player);
    flex-wrap: nowrap;
    padding: 8px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    background: rgba(44, 44, 47, .5);
    backdrop-filter: blur(60px) saturate(190%);
    -webkit-backdrop-filter: blur(60px) saturate(190%);
  }
  .player-track-group { width: calc(100% - 100px); padding-left: 48px; }
  .current-art { width: 40px; height: 40px; top: 50%; transform: translateY(-50%); border-radius: 9px; }
  .current-track { height: 20px; }
  .player-center { position: static; transform: none; width: auto; margin-left: auto; order: 0; }
  .transport { gap: 16px; margin: 0; }
  .transport .toggle, .transport .prev, .player-like, .play-progress, .volume-control { display: none; }
  .mobile-tabs {
    left: 8px;
    right: 8px;
    bottom: 8px;
    height: var(--tabs);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    background: rgba(44, 44, 47, .5);
    backdrop-filter: blur(60px) saturate(190%);
    -webkit-backdrop-filter: blur(60px) saturate(190%);
    padding: 4px 6px;
  }
  .mobile-tabs button { color: rgba(245,245,247,.62); }
  .mobile-tabs button.active { color: #fff; background: rgba(30, 215, 96, .18); }
  .mobile-tabs button.active svg { color: var(--accent); }
  .am-hero-art { justify-content: center; }
  #immersive .immersive-details { padding: 22px 18px; border-radius: 22px; }
  .room-transport { gap: 9px; }
  .room-transport .main-play { width: 48px; height: 48px; }
  .room-transport .icon-btn { width: 34px; height: 34px; }
  .room-beat { height: 24px; margin-top: 14px; }
}

@media (max-width: 720px) {
  #immersive .immersive-details {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #immersive .immersive-art > button > img { max-height: 43dvh; border-radius: 20px; }
  .room-next-card, .room-settings-link, .art-footnote { display: none; }
  .room-transport .main-play { width: 50px; height: 50px; }
  .player { border-radius: 22px; }
  .mobile-tabs { border-radius: 22px; }
  .topbar { background: rgba(8, 8, 10, .5); }
}

/* ─────────────────────── 3D liquid glass + settings ─────────────────────── */

/* Build depth with a bright top bevel, a dark lower bevel, and a soft outer
   shadow so glass controls read as physical objects rather than flat panels. */
.player, .mobile-tabs, .topbar, .sidebar {
  background-clip: padding-box;
}
.player, .mobile-tabs {
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(255, 255, 255, .34);
  outline: 1px solid rgba(255, 255, 255, .05);
  outline-offset: -3px;
  background-image:
    none;
  background-color:
    var(--art-glass, rgba(94, 92, 230, .06));
}
.player:before, .mobile-tabs:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.07);
  mix-blend-mode: screen;
  opacity: .7;
}
.player:after, .mobile-tabs:after {
  content: "";
  position: absolute;
  top: -70%;
  bottom: -70%;
  left: -35%;
  width: 42%;
  z-index: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.12);
  transform: skewX(-18deg);
  filter: blur(8px);
  animation: liquid-sheen 9s ease-in-out infinite;
  opacity: .45;
}
.player > *, .mobile-tabs > * { position: relative; z-index: 1; }
@keyframes liquid-sheen {
  0%, 100% { transform: translateX(-30%) skewX(-18deg); opacity: .08; }
  45% { opacity: .34; }
  60% { transform: translateX(360%) skewX(-18deg); opacity: .04; }
}

/* Glass buttons get a wet-looking bevel. */
.green-button, .dark-button, .outline-button, .main-play, .circle-button {
  border: 1px solid rgba(255, 255, 255, .24);
}
.green-button, .dark-button {
  border-color: rgba(255, 255, 255, .35);
  background-image: none;
  background-color: var(--art-glow, #b9b9c0);
}
.outline-button { background-image: none; background-color: rgba(255, 255, 255, 0.07); }
.main-play { background-image: none; background-color: var(--art-glow, #b9b9c0); }

/* Settings dialog: grouped iOS-like cards, sorted Account → Listening →
   Playback → Radio. */
#account-dialog:not([open]) { display: none !important; }
#account-dialog {
  width: 640px;
  max-height: 88dvh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(42, 42, 45, .96);
}
body:has(#account-dialog[open]) { overflow: hidden; }
body:has(#account-dialog[open]) .player,
body:has(#account-dialog[open]) .mobile-tabs,
body:has(#account-dialog[open]) .sidebar { opacity: 0; pointer-events: none; }
#account-dialog .account-close { top: 20px; right: 20px; }
#account-dialog .account-header {
  margin: 0;
  padding: 26px 30px 20px;
  gap: 16px;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, .025);
  flex-shrink: 0;
}
#account-dialog .account-header h2 { font-size: 25px; }
#account-dialog .account-avatar { width: 54px; height: 54px; font-size: 22px; }
.settings-scroll {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 13px;
  padding: 16px 22px 24px;
  overflow: auto;
  scrollbar-width: thin;
}
.settings-section {
  position: relative;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 16px;
  background:
    rgba(26, 26, 29, .55);
  overflow: hidden;
}
.settings-section:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.03);
  mix-blend-mode: screen;
}
.settings-section > * { position: relative; z-index: 1; }
.settings-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 2px 10px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.settings-section-head > span:last-child { color: var(--muted-2); font-size: 9px; letter-spacing: .09em; }
.settings-row {
  padding: 13px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .065);
}
.settings-section > .settings-row:last-child, .settings-section > *:last-child { border-bottom: 0; }
.settings-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-row-head label, .settings-toggle-row label { color: var(--text); font-size: 13px; font-weight: 500; }
.settings-row-head output { color: var(--muted); font-size: 11px; }
.settings-row p { margin-top: 4px; color: var(--muted-2); font-size: 10.5px; line-height: 1.45; }
.settings-slider-row .settings-row-head { min-height: 18px; margin-bottom: 3px; }
.settings-slider-row input[type="range"] { display: block; width: 100%; margin: 10px 0 5px !important; height: 4px; }
.settings-slider-row p { margin-top: 5px !important; }
.settings-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.settings-toggle-row > div { min-width: 0; }
.settings-toggle-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  position: relative;
  width: 50px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 30px;
  background: rgba(120, 120, 128, .32);
  cursor: pointer;
  transition: background .2s;
}
.settings-toggle-row input[type="checkbox"]:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.settings-toggle-row input[type="checkbox"]:checked { background: #ff5268; }
.settings-toggle-row input[type="checkbox"]:checked:before { transform: translateX(20px); }
.settings-toggle-row input[type="checkbox"]:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#profile-form.settings-row { padding-top: 15px; }
#profile-form > label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 10.5px; }
.settings-name-row .name-field { display: flex; gap: 9px; }
.settings-name-row input { flex: 1; min-width: 0; background: rgba(255, 255, 255, .07); border: 1px solid var(--glass-border); border-radius: 10px; padding: 10px 12px; color: var(--text); }
.settings-name-row .outline-button { border-radius: 10px; }
#profile-feedback { min-height: 16px; margin-top: 5px; color: #30d158; font-size: 10px; }
#account-dialog .account-identity {
  margin: 12px 0 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .12);
}
#account-dialog .account-identity strong { font-size: 12px; }
#account-dialog .account-summary {
  margin: 4px 0 6px;
  padding: 4px 0 12px;
  border: 0;
  border-radius: 0;
  background: none;
}
#account-dialog .account-top-artists { margin-top: 2px; gap: 14px; }
#account-dialog .account-artist img, #account-dialog .account-artist-fallback { width: 42px; height: 42px; }
#account-dialog #account-listening-summary { margin-top: 11px; }
.radio-account { border: 0; border-radius: 0; padding: 0; background: none; margin: 0; }
.radio-account #radio-taste-summary { padding: 12px 2px; color: var(--muted); font-size: 11px; }
.radio-account .settings-row { padding-left: 2px; padding-right: 2px; }
#radio-feedback-manage { margin: 11px 2px 13px; color: var(--accent); font-size: 11.5px; }
#radio-hidden-list { padding: 0 2px 12px; }
#radio-hidden-list div { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 11px; }
#radio-hidden-list .small-link { color: var(--accent); }

/* Mobile settings: full-screen sheet with the same sorted groups. */
@media (max-width: 720px) {
  #account-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    align-self: flex-end;
    margin: 0;
  }
  #account-dialog .account-header { padding: 22px 20px 16px; }
  #account-dialog .account-header h2 { font-size: 23px; }
  #account-dialog .account-avatar { width: 46px; height: 46px; font-size: 19px; }
  .settings-scroll { padding: 13px 14px 24px; gap: 11px; }
  .settings-section { padding: 0 13px; border-radius: 15px; }
  .settings-row { padding: 12px 0; }
  .settings-row-head label, .settings-toggle-row label { font-size: 12.5px; }
  .settings-toggle-row input[type="checkbox"] { width: 46px; height: 28px; }
  .settings-toggle-row input[type="checkbox"]:before { width: 22px; height: 22px; }
  .settings-toggle-row input[type="checkbox"]:checked:before { transform: translateX(18px); }
}

/* 3D beat wave driven by the live analyser. */
.room-beat {
  perspective: 520px;
  transform-style: preserve-3d;
  transform: rotateX(9deg);
  transform-origin: bottom center;
}
.room-beat i {
  background: #fff;
  border-radius: 3px 3px 1px 1px;
  transform-origin: bottom center;
}
.room-beat.beat-live i {
  animation: none !important;
  transition: height .075s linear, opacity .075s linear, transform .12s ease-out;
  will-change: height;
}

.radio-reset {
  display: block;
  width: 100%;
  margin: 2px 0 6px;
  padding: 12px 2px 4px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: var(--accent);
  text-align: left;
  font-size: 12px;
  font-weight: 600;
}
.radio-reset small { display: block; margin-top: 4px; color: var(--muted-2); font-size: 10px; font-weight: 400; line-height: 1.4; }
.radio-reset:hover { color: #3be07a; }
.radio-reset-link { color: var(--muted-2) !important; font-size: 10px !important; }
.radio-reset-link:hover { color: var(--accent) !important; }
.room-tool-actions { display: flex; align-items: center; gap: 8px; }
.version-warning { color: #ff9aa7 !important; font-size: 9.5px !important; }

/* Larger, more forgiving touch targets on phones. */
@media (max-width: 720px) {
  .mobile-tabs button { min-height: 48px; }
  .transport .icon-btn { width: 34px; height: 34px; }
  .main-play { width: 38px; height: 38px; }
  .room-song-tools .icon-btn { width: 42px; height: 42px; }
  .room-radio-button { min-height: 42px; }
  .room-transport .icon-btn { width: 40px; height: 40px; }
  .room-transport .main-play { width: 56px; height: 56px; }
  .settings-toggle-row input[type="checkbox"] { min-width: 50px; }
  #immersive .immersive-layout { min-height: calc(100dvh - 64px); align-content: center; justify-content: center; }
  .track-row { grid-template-columns: 38px minmax(0, 1fr) 38px 26px; gap: 9px; }
  .track-index { display: none; }
  .track-row .add-track { display: none; }
  .track-main { gap: 2px; }
  .track-title { font-size: 13px; }
  .track-row .artist-link { font-size: 11px; }
  .crafted-cover { padding: 10px; }
  .crafted-cover > small { display: none; }
  .crafted-cover > strong { font-size: 12px; line-height: 1.16; letter-spacing: -.02em; }
  .crafted-cover > em { font-size: 5.5px; letter-spacing: .06em; }
  .crafted-cover > i { width: 120px; height: 120px; bottom: -68px; right: -38px; }
  .hero-tag {
    display: inline-flex;
    width: max-content;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 6px;
    background: rgba(0, 0, 0, .4);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
  }
}

/* ────────────────────────── Liquid view transitions ────────────────────────── */
/* Every content view fades + rises in like a glass sheet being revealed. Uses
   only opacity + transform so it stays GPU-composited at 60fps. */
#home-content, #results-content, #library-content, #artist-content, #album-content {
  animation: view-in .34s cubic-bezier(.22,.9,.26,1) both;
}
@keyframes view-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Tab + filter + nav buttons ease their active glass state instead of snapping. */
.mobile-tabs button, .nav-button, .main-nav .nav-button, .filter-tabs button {
  transition: background .28s cubic-bezier(.22,.9,.26,1), color .28s cubic-bezier(.22,.9,.26,1), box-shadow .28s cubic-bezier(.22,.9,.26,1);
}

/* Settings switch glows softly when on, matching the liquid red accent. */
.settings-toggle-row input[type="checkbox"] { transition: background .22s ease, box-shadow .22s ease; }

@media (prefers-reduced-motion: reduce) {
  #home-content, #results-content, #library-content, #artist-content, #album-content { animation: none; }
}

/* ────────────────────────── iPhone SE + short screens ────────────────────────── */
@media (max-width: 380px) {
  main { padding: 4px 12px 0; }
  .intro { margin: 6px 0 14px; }
  h1 { font-size: 23px; }
  .am-hero { min-height: 396px; border-radius: 20px; }
  .am-hero h2 { font-size: 29px; }
  .shelf-row { grid-auto-columns: 128px; gap: 12px; }
  .mix-grid { gap: 8px; }
  .player { left: 6px; right: 6px; }
  .mobile-tabs { left: 6px; right: 6px; bottom: 6px; }
  .mobile-tabs button { font-size: 8.5px; }
}

@media (max-width: 720px) and (max-height: 700px) {
  #immersive .immersive-layout { padding: 8px 16px 14px; gap: 12px; }
  #immersive .immersive-art > button > img { max-height: 34dvh; }
  .room-transport { margin-top: 8px; gap: 8px; }
  .room-beat { height: 18px; margin-top: 8px; }
  #room-title { font-size: 24px; }
}

/* ───────────────────────────── Lyrics (always on) ───────────────────────────── */
.room-lyrics {
  margin-top: 16px;
  max-height: 32vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
  padding: 12px 6px 4px 2px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.lyric-line {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted, rgba(255, 255, 255, .4));
  padding: 5px 2px;
  transition: color .3s ease, font-size .3s ease, font-weight .3s ease;
}
.lyric-line.active {
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}
.lyrics-note { color: var(--muted, rgba(255, 255, 255, .4)); font-size: 13px; font-style: italic; }
#room-lyrics-toggle.on {
  color: var(--accent, #3be07a);
  background: rgba(30, 215, 96, .16);
  border-color: rgba(255, 255, 255, .1);
}
#room-lyrics[hidden] { display: none; }

@media (max-width: 720px) {
  .room-lyrics { max-height: 26vh; margin-top: 12px; }
  .lyric-line.active { font-size: 17px; }
}