/* ═══════════════════════════════════════════════════════════════════════════
   Apple Music, finished. Loaded after every other stylesheet and owns the
   final look of each page. House rules: flat colours only (no gradients),
   no shadows, neutral hairlines instead of coloured borders, nothing moves on
   hover. The only motion is a press (:active) and the liquid glass itself.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --am: #fa2d48;
  --am-hi: #ff4d64;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --bg: #141414;
  --bg-elevated: #1c1c1e;
  --bg-grouped: #2c2c2e;
  --fill: rgba(118, 118, 128, .24);
  --fill-2: rgba(118, 118, 128, .32);
  --sep: rgba(84, 84, 88, .55);
  --label-2: rgba(235, 235, 245, .6);
  --label-3: rgba(235, 235, 245, .3);
  --hairline: rgba(255, 255, 255, .1);
}

/* ─────────────────────────── One background everywhere ───────────────────── */

html { background: var(--bg) !important; }
body { background: transparent !important; }
.main-shell, main, #home-content, #results-content, #library-content, #artist-content,
#album-content, #downloads-content, #radio-content, #am-page, .collection-hero, .liked-hero,
.dl-hero, body[data-view] .collection-hero { background: transparent !important; background-image: none !important; }
body { font-family: var(--font-text); letter-spacing: -.01em; }
h1, h2, h3, .am-title, .brand-name { font-family: var(--font-display); }

/* Nothing moves on hover. */
.logo:hover .brand-mark, .mobile-brand:hover .brand-mark, .logo:focus-visible .brand-mark,
.logo:hover .brand-mark i, body.is-playing .brand-mark, body.is-playing .brand-mark i { animation: none !important; transform: none !important; }
.am-mix-play, .am-card-play { transform: none !important; }
.am-tile:hover img, .am-category:hover, .am-station-hero:hover { filter: none !important; }

/* Pressing still answers, the way iOS does. */
.am-tile:active img, .am-category:active, .am-station-hero:active, .am-mix-card:active .am-mix-art { transform: scale(.97); transition: transform .12s; }

/* ──────────────────────────────── Sidebar (Mac) ───────────────────────────── */

@media (min-width: 721px) {
  .sidebar { --glass-tint: rgba(28, 28, 30, .78); background-color: rgba(28, 28, 30, .78) !important; }
  .side-label { color: var(--label-3) !important; font-size: 11px !important; letter-spacing: .02em !important; text-transform: none; font-weight: 600; }
  .nav-button, .saved-link {
    display: flex !important; align-items: center; gap: 10px !important;
    min-height: 32px; margin: 0 !important; padding: 6px 10px !important;
    border-radius: 8px !important; background: none !important;
    color: rgba(255, 255, 255, .88) !important; font-size: 14px !important; font-weight: 500 !important;
  }
  .nav-button:hover, .saved-link:hover { background: rgba(255, 255, 255, .06) !important; }
  .nav-button.active, .saved-link.active { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
  .nav-button svg, .library-nav .nav-button svg { width: 20px !important; height: 20px !important; color: var(--am) !important; }
  /* Liked Songs and Downloaded are plain rows with a red glyph, like the rest. */
  .saved-link small { display: none !important; }
  .saved-link .saved-art, .saved-link .dl-art {
    width: 20px !important; height: 20px !important; border-radius: 0 !important;
    background: none !important; color: var(--am) !important;
  }
  .saved-link .saved-art svg { width: 20px !important; height: 20px !important; fill: none !important; }
  .saved-link > span:last-child { display: block; }
  .playlist-link { font-size: 14px !important; color: rgba(255, 255, 255, .88) !important; border-radius: 8px !important; padding: 6px 10px !important; }
  .playlist-link::before { background: var(--fill-2) !important; }
  .user-button { background: none !important; border: 0 !important; }
  .user-button:hover { background: rgba(255, 255, 255, .06) !important; }
}

/* ───────────────────────── Large titles and section heads ─────────────────── */

.am-h2, .section-title h2, .am-section > h2 { font: 700 22px/1.2 var(--font-display) !important; letter-spacing: -.02em !important; }

/* ───────────────────────────── Back buttons ─────────────────────────────── */

.am-back, .am-nav-back, #album-content .artist-back {
  width: 36px !important; height: 36px !important; border-radius: 50% !important;
  background: var(--fill) !important; color: #fff !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important; backdrop-filter: blur(20px) saturate(160%) !important;
}
.am-back svg, .am-nav-back svg { width: 20px !important; height: 20px !important; }
@media (max-width: 720px) { .am-nav-back { width: 44px !important; height: 44px !important; background: rgba(44, 44, 46, .72) !important; } }

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

/* Play is red; secondary actions are grey fills with red labels. */
.green-button, #collection-tools .green-button, .am-actions .green-button, .dl-tools .green-button {
  background: var(--am) !important; color: #fff !important; border-radius: 12px !important;
}
.green-button svg, #collection-tools .green-button svg, .am-actions .green-button svg, .dl-tools .green-button svg { color: #fff !important; }
.green-button:hover { background: var(--am-hi) !important; }
.outline-button, .am-actions .outline-button, #collection-tools .outline-button, .dl-tools .outline-button {
  background: var(--fill) !important; color: var(--am) !important; border-radius: 12px !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.outline-button svg { color: var(--am) !important; }
.outline-button:hover { background: var(--fill-2) !important; }
#immersive .outline-button { color: #fff !important; }
.green-button:disabled, .outline-button:disabled { opacity: .45; }

/* ───────────────── Liked Songs, Downloaded, playlists: the header ───────────── */

.collection-hero { padding: 0 !important; border-radius: 0 !important; }
.liked-emblem, .collection-art, .liked-art { border-radius: 12px !important; }
.liked-hero .liked-emblem { background: var(--am) !important; }
.liked-hero .liked-emblem > svg { width: 42% !important; height: 42% !important; fill: #fff !important; color: #fff !important; }
.dl-emblem { background: var(--bg-grouped) !important; }
.dl-emblem svg { width: 40% !important; height: 40% !important; color: var(--am) !important; }
.collection-hero h1 { font-size: clamp(28px, 3vw, 40px) !important; }
.collection-hero > div > p:not(.eyebrow) { color: var(--label-2) !important; }

@media (min-width: 721px) {
/* The toolbar: Play · Shuffle on the left, then filter, sort, download, ⋯. */
#collection-tools { gap: 10px !important; }
#collection-tools .green-button, #collection-tools > .outline-button:not(.dl-button):not(#playlist-more),
.dl-tools .green-button, .dl-tools .outline-button, .am-actions .green-button, .am-actions #album-shuffle {
  min-width: 150px; height: 44px; min-height: 44px !important; font-size: 15px !important; font-weight: 600 !important;
}
#collection-tools .inline-search {
  display: flex !important; align-items: center; gap: 6px; margin-left: auto;
  width: 220px; height: 36px; padding: 0 10px !important;
  border: 0 !important; border-radius: 10px !important; background: var(--fill) !important;
}
#collection-tools .inline-search svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--label-2); }
#collection-tools .inline-search input, #collection-filter {
  flex: 1; min-width: 0; width: auto !important; height: 100% !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; outline: none;
  background: none !important; color: #fff; font-size: 14px;
}
#collection-tools .inline-search input::placeholder { color: var(--label-2); }
#collection-tools select, #collection-sort {
  -webkit-appearance: none; appearance: none;
  height: 36px; padding: 0 32px 0 12px !important;
  border: 0 !important; border-radius: 10px !important; outline: none;
  background: var(--fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23ebebf5' stroke-opacity='.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 10px center / 14px no-repeat !important;
  color: #fff; font-size: 14px; cursor: pointer;
}
select option { background: var(--bg-elevated); color: #fff; }
#collection-tools .dl-button, #collection-tools #playlist-more, #album-content .am-actions .dl-button {
  width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important;
  padding: 0 !important; border-radius: 50% !important; background: var(--fill) !important; color: var(--am) !important;
}
#collection-tools .dl-button svg, #collection-tools #playlist-more svg, #album-content .am-actions .dl-button svg { width: 20px !important; height: 20px !important; color: var(--am) !important; }
#album-content .am-actions .dl-button { width: 44px !important; height: 44px !important; }
}

/* ───────────────────────────── Song lists ──────────────────────────────── */

.track-row { position: relative; border-radius: 8px !important; background: none !important; }
.track-row::after { content: ""; position: absolute; left: 66px; right: 8px; bottom: 0; height: .5px; background: var(--sep); }
#album-tracks .track-row::after { left: 42px; }
.track-row:hover { background: rgba(255, 255, 255, .06) !important; }
.track-row .artist-link { color: var(--label-2) !important; }
.track-row .track-time { color: var(--label-3) !important; }
.track-row .add-track, .track-row [data-options] { color: var(--am) !important; }
.am-song::after { background: var(--sep) !important; }
.am-song-text small, .am-tile small { color: var(--label-2) !important; }

/* ───────────────────────────── Empty states ────────────────────────────── */

.empty-state, .collection-empty, .dl-empty { background: none !important; border-radius: 0 !important; }
.dl-empty svg { color: var(--label-3) !important; }
.dl-restore { background: var(--bg-elevated) !important; border-radius: 14px !important; }

/* ─────────────────────────────── Home ─────────────────────────────────── */

/* Top Picks: the photo, then a flat block of the mix colour. */
.am-mix-art { border-radius: 14px !important; }
.am-mix-art img { height: 62% !important; -webkit-mask-image: none !important; mask-image: none !important; }
.am-mix-art > span:first-of-type { color: #fff !important; }
.am-tile img, .am-card-art, .shelf-row img { border-radius: 8px !important; }

/* ─────────────────────────────── Search ───────────────────────────────── */

main > #search-form.search-box, body.search-in-page main > #search-form {
  display: flex !important; width: 100% !important; max-width: none; height: 38px !important;
  margin: -4px 0 26px !important; padding: 0 10px !important;
  border-radius: 10px !important; background: var(--fill) !important;
}
main > #search-form svg { width: 17px !important; height: 17px !important; }
main > #search-form input { font-size: 16px !important; }
@media (min-width: 721px) {
  main > #search-form:focus-within .am-search-cancel { display: none !important; }
}
.am-recent button { border-bottom: .5px solid var(--sep) !important; font-size: 16px; }
.am-recent button svg:first-child { color: var(--label-2) !important; }
/* Browse Categories: flat colour, title bottom-left, a cover tilted into the corner. */
.am-categories { gap: 12px !important; }
.am-category { border-radius: 12px !important; padding: 12px 14px !important; }
.am-category::after { content: none !important; }
.am-category strong { font: 700 17px/1.15 var(--font-display) !important; letter-spacing: -.01em; max-width: 58% !important; }
.am-cat-art { border-radius: 6px !important; width: 50% !important; right: -4% !important; bottom: -8% !important; }
.top-result { background: var(--bg-elevated) !important; border-radius: 14px !important; }
#search-tabs { background: var(--fill) !important; border-radius: 9px !important; padding: 2px !important; }
#search-tabs button { border-radius: 7px !important; }
#search-tabs button[aria-pressed="true"] { background: #636366 !important; }

/* ──────────────────────────────── Radio ───────────────────────────────── */

.am-station-hero { border-radius: 16px !important; }
.am-station-hero::before { content: none !important; }
.am-station-hero .am-live { background: #fff !important; }
.am-station-art > span { background: var(--am) !important; }

/* ─────────────────────────────── Library ──────────────────────────────── */

.am-lib-list {
  background: none !important; border-radius: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-top: .5px solid var(--sep);
}
.am-lib-list button { padding: 12px 4px !important; font-size: 19px !important; border-bottom: .5px solid var(--sep) !important; border-radius: 0 !important; }
.am-lib-list button + button::before { content: none !important; }
.am-lib-list button:hover { background: rgba(255, 255, 255, .04) !important; }
.am-lib-ico { width: 28px !important; color: var(--am) !important; }
.am-lib-ico svg { width: 26px !important; height: 26px !important; }
.am-tile-liked { background: var(--am) !important; }
.am-tile-liked svg { fill: #fff; color: #fff; }
.am-tile-plain { background: var(--bg-grouped) !important; }
.am-tile-new { background: var(--bg-elevated) !important; }
.am-artist-row + .am-artist-row::before { background: var(--sep) !important; }

/* ───────────────────────── Floating glass: player and tabs ─────────────── */

/* Clear, calm glass: a darker tint so busy artwork behind never turns to noise,
   and a hairline rim (neutral) where the light catches the edge. */
.glass { background-color: rgba(30, 30, 32, .62) !important; }
.player.glass, .mobile-tabs.glass { background-color: rgba(28, 28, 30, .66) !important; outline: .5px solid rgba(255, 255, 255, .12); outline-offset: -.5px; }
.sidebar.glass { outline: .5px solid rgba(255, 255, 255, .08); outline-offset: -.5px; }
.player .current-track strong { font-weight: 600; }
.player-track-group > .artist-link { color: var(--label-2) !important; }

/* ──────────────────────────── Full-screen player ───────────────────────── */

#immersive .immersive-brand, #immersive .room-kicker { display: none !important; }
#immersive #room-cover { border-radius: 12px; }
#immersive #room-artist { color: var(--label-2) !important; }
#immersive .room-tab.on, #immersive .room-tab[aria-pressed="true"] { background: rgba(255, 255, 255, .22) !important; color: #fff !important; }
#immersive .room-mode.on { background: rgba(255, 255, 255, .3); color: #fff; }

/* iPhone: the artwork is a card, not a bleed into a fade. */
@media (max-width: 720px) {
  #immersive:not(.lyrics-mode):not(.queue-mode) .immersive-art {
    display: flex; justify-content: center;
    padding: calc(64px + env(safe-area-inset-top, 0px)) 26px 0;
  }
  #immersive:not(.lyrics-mode):not(.queue-mode) #room-cover {
    width: min(calc(100vw - 52px), 48dvh) !important; height: min(calc(100vw - 52px), 48dvh) !important; max-height: none !important;
    aspect-ratio: 1; object-fit: cover; border-radius: 12px !important;
    -webkit-mask-image: none !important; mask-image: none !important;
    transition: transform .6s var(--spring);
  }
  body:not(.is-playing) #immersive:not(.lyrics-mode):not(.queue-mode) #room-cover { transform: scale(.86); filter: none; }
  #immersive:not(.lyrics-mode):not(.queue-mode) .immersive-details { margin-top: 26px !important; align-content: start; }
  #immersive #room-like, #immersive #room-options { width: 32px !important; height: 32px !important; }
}

/* ─────────────────────── Song menu (matches the Music app) ─────────────── */

.am-menu {
  width: 300px; padding: 0; overflow-y: auto;
  border: 0; border-radius: 20px;
  outline: .5px solid rgba(255, 255, 255, .1); outline-offset: -.5px;
  background: rgba(34, 34, 36, .8);
  -webkit-backdrop-filter: blur(50px) saturate(170%); backdrop-filter: blur(50px) saturate(170%);
}
.am-menu-head { gap: 12px; padding: 14px 16px; }
.am-menu-head img { width: 42px; height: 42px; border-radius: 6px; }
.am-menu-head strong { font-size: 15px; font-weight: 600; }
.am-menu-head small { font-size: 13px; color: var(--label-2); }
.am-menu-group { padding: 0; border-top: .5px solid rgba(255, 255, 255, .14); }
.am-menu-item {
  min-height: 46px; padding: 0 18px 0 18px; border-radius: 0;
  font-size: 15.5px; font-weight: 500; letter-spacing: -.01em;
  touch-action: manipulation;
}
.am-menu-item svg { width: 20px; height: 20px; color: rgba(255, 255, 255, .92); }
.am-menu-item:hover, .am-menu-item:focus-visible { background: rgba(255, 255, 255, .08); }
.am-menu-item.on svg { color: var(--am); }
.am-menu-item.tapped { transform: none !important; background: rgba(255, 255, 255, .16) !important; }
.am-menu-back, .am-menu-back span { color: var(--am); }
/* Phone: the same menu as an action sheet. */
.am-menu.sheet { left: 8px; right: 8px; width: auto; border-radius: 26px; padding: 0; }
.am-menu.sheet .am-menu-item { min-height: 52px; padding: 0 20px; font-size: 17px; }
.am-menu.sheet .am-menu-head { padding: 16px 20px; }
.am-menu.sheet::backdrop { background: rgba(0, 0, 0, .4); }
/* Browsers without the Popover API: the menu and banner are shown by class. */
.am-scrim { display: none; }
@supports not selector(:popover-open) {
  .am-menu, #am-hud { display: none; }
  .am-menu.is-open { display: block; z-index: 1001; opacity: 1; transform: none; }
  .am-menu.is-open:not(.sheet) { position: fixed; }
  #am-hud.is-open { display: flex; z-index: 1002; }
  .am-scrim.is-open { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .4); }
}
#am-hud { outline: .5px solid rgba(255, 255, 255, .1); outline-offset: -.5px; background: rgba(34, 34, 36, .82); }
.am-hud-icon { background: none; }

/* ───────────────────────── Dialogs (playlist, versions) ─────────────────── */

#dialog[open] { background: var(--bg-elevated) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 16px; }
#dialog .dialog-close { background: var(--fill) !important; }
#dialog input, #dialog select, #dialog textarea { background: var(--fill) !important; border-radius: 10px; }
@media (max-width: 720px) { #dialog[open] { border-radius: 16px 16px 0 0 !important; } }

/* ═════════════════════════ Settings (iOS grouped list) ═════════════════════ */

#account-dialog::backdrop { background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: none; backdrop-filter: none; }
#account-dialog.ios-settings[open] {
  display: flex; flex-direction: column;
  width: min(560px, calc(100vw - 32px)); max-height: min(820px, 88dvh);
  padding: 0; border: 0 !important; border-radius: 16px;
  background: var(--bg-elevated) !important; background-image: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: #fff; overflow: hidden;
}
#account-dialog .ios-nav {
  position: relative; flex-shrink: 0;
  display: grid; grid-template-columns: 80px 1fr 80px; align-items: center;
  height: 54px; padding: 0 8px;
  border-bottom: .5px solid var(--sep);
}
#account-dialog .ios-nav h2 { margin: 0; text-align: center; font: 600 17px/1 var(--font-text) !important; letter-spacing: -.02em; }
#account-dialog .ios-done, #account-dialog .account-close.ios-done {
  position: static !important; justify-self: end;
  width: auto !important; height: 36px !important; padding: 0 10px !important;
  border-radius: 8px !important; background: none !important;
  color: var(--am) !important; font: 600 17px/1 var(--font-text); letter-spacing: -.02em;
}
#account-dialog .settings-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 20px 30px !important; scrollbar-width: thin; }

#account-dialog .ios-group {
  margin: 0; padding: 0; border-radius: 12px; overflow: hidden;
  background: var(--bg-grouped);
}
#account-dialog .ios-group-title {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 26px 16px 7px; font: 400 13px/1.3 var(--font-text); letter-spacing: 0;
  text-transform: uppercase; color: var(--label-2);
}
#account-dialog .ios-group-title span { text-transform: none; color: var(--label-3); }
#account-dialog .ios-footnote { margin: 7px 16px 0; font-size: 13px; line-height: 1.35; color: var(--label-2); }
#account-dialog .ios-footnote:empty { display: none; }

#account-dialog .ios-row, #account-dialog #radio-settings-body .settings-row {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 48px; margin: 0 !important; padding: 11px 16px !important;
  border: 0 !important; border-radius: 0 !important; background: none !important;
}
#account-dialog .ios-row + .ios-row::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--sep);
}
#account-dialog .ios-row label, #account-dialog .settings-toggle-row label { font-size: 17px !important; font-weight: 400 !important; letter-spacing: -.02em; color: #fff; }
#account-dialog .settings-toggle-row { justify-content: space-between; }
#account-dialog .settings-toggle-row > div { flex: 1; min-width: 0; }
#account-dialog .settings-toggle-row p { margin: 2px 0 0; font-size: 13px; color: var(--label-2); }

/* Profile card */
#account-dialog .ios-profile { gap: 14px !important; min-height: 76px; }
#account-dialog .ios-profile .account-avatar { width: 56px !important; height: 56px !important; flex-shrink: 0; border-radius: 50%; }
#account-dialog .ios-profile > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#account-dialog .ios-profile strong { margin: 0 !important; font-size: 19px !important; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#account-dialog .ios-profile span { font-size: 13px !important; color: var(--label-2) !important; }
#account-dialog .ios-pill, #account-dialog #sign-out {
  flex-shrink: 0; height: 32px; min-height: 32px !important; padding: 0 14px !important;
  border: 0 !important; border-radius: 999px !important;
  background: var(--fill) !important; color: var(--am) !important;
  font-size: 15px !important; font-weight: 600;
}

/* Name field */
#account-dialog .ios-field-row label { flex-shrink: 0; width: 70px; }
#account-dialog .ios-field-row input {
  flex: 1; min-width: 0; height: 30px !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; outline: none;
  background: none !important; color: var(--label-2); font-size: 17px; text-align: right;
}
#account-dialog .ios-field-row input:focus { color: #fff; }
#account-dialog .ios-link { flex-shrink: 0; padding: 0 0 0 4px; border: 0; background: none; color: var(--am); font-size: 17px; font-weight: 600; }

/* Your Listening */
#account-dialog .account-summary { padding: 14px 0 !important; }
#account-dialog .account-top-artists { display: flex; gap: 16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
#account-dialog .account-top-artists::-webkit-scrollbar { display: none; }
#account-dialog .account-artist { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; flex-shrink: 0; padding: 0; border: 0; background: none; color: #fff; }
#account-dialog .account-artist img, #account-dialog .account-artist-fallback { width: 64px !important; height: 64px !important; border-radius: 50%; object-fit: cover; background: var(--fill); }
#account-dialog .account-artist b { width: 100%; font-size: 12px; font-weight: 500; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#account-dialog .account-top-artists:empty { display: none; }
#account-dialog .account-summary:has(.account-top-artists:empty) { display: none; }

/* Sliders */
#account-dialog .ios-slider-row { flex-direction: column; align-items: stretch; gap: 12px; padding: 13px 16px 16px !important; }
#account-dialog .ios-row-head { display: flex; justify-content: space-between; align-items: baseline; }
#account-dialog .ios-row-head output { font-size: 17px; color: var(--label-2); font-variant-numeric: tabular-nums; }
#account-dialog input[type=range] { width: 100%; height: 4px !important; --range-fill: var(--am); --range-rest: var(--fill-2); }
#account-dialog input[type=range]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; opacity: 1; background: #fff; }
#account-dialog input[type=range]::-moz-range-thumb { width: 28px; height: 28px; opacity: 1; background: #fff; }

/* Radio: radio.js renders this block; it becomes rows of the group. */
#account-dialog #radio-settings-body { background: none !important; border-radius: 0 !important; overflow: visible !important; }
#account-dialog #radio-settings-body > * { background: none !important; }
#account-dialog .radio-account { padding: 0 !important; border-radius: 0 !important; background: none !important; overflow: visible !important; }
#account-dialog .radio-account > * { position: relative; display: block; width: 100%; min-height: 48px; margin: 0 !important; padding: 13px 16px !important; text-align: left; border: 0 !important; border-radius: 0 !important; background: none !important; }
#account-dialog .radio-account > * + *::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--sep); }
#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: 15px; color: var(--label-2); }
#account-dialog #radio-feedback-manage { font-size: 17px !important; font-weight: 400 !important; color: var(--am) !important; }
#account-dialog .radio-reset span { font-size: 17px !important; font-weight: 400 !important; color: #ff453a !important; }
#account-dialog .radio-reset small { font-size: 13px !important; color: var(--label-2) !important; }
#account-dialog .radio-account > button:hover { background: rgba(255, 255, 255, .04) !important; }

@media (max-width: 720px) {
  #account-dialog.ios-settings[open] {
    width: 100vw; max-width: 100vw; max-height: calc(100dvh - 12px);
    margin: auto 0 0; border-radius: 14px 14px 0 0;
  }
  #account-dialog .settings-scroll { padding: 16px 16px calc(30px + env(safe-area-inset-bottom, 0px)) !important; }
  #account-dialog .account-header::before { content: none; }
}

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

@media (max-width: 720px) {
  /* The avatar belongs to the large title and scrolls away with it. */
  body.am-root #am-nav { position: absolute !important; }
  body.am-root #am-nav .am-nav-back { display: none; }

  /* Mini player, as on iPhone: rounded-square art, title and artist, play and forward. */
  .player .current-art { width: 40px !important; height: 40px !important; border-radius: 8px !important; }
  .player .current-art img { border-radius: 8px; }
  /* Previous, play and next, as on iPhone. */
  .player .transport #previous { display: grid !important; }
  .player .main-play svg { width: 22px !important; height: 22px !important; }
  .player .transport #next svg { width: 24px !important; height: 24px !important; }

  /* Tucked tab bar: on a page that is not a tab, the circle shows Home. */
  body.dock-min .mobile-tabs:not(:has(button.active)) button:first-of-type {
    opacity: 1; pointer-events: auto; position: static; transform: none;
  }
  body.dock-min .mobile-tabs:not(:has(button.active)) button:first-of-type span { display: none; }

  /* Play is red on every collection page, Shuffle and Download are grey circles. */
  #collection-tools .green-button, #album-content .am-actions .green-button, .am-detail .am-actions .green-button,
  .dl-tools .green-button, #am-page > .am-actions .green-button { background: var(--am) !important; color: #fff !important; border-radius: 999px !important; }
  #collection-tools .green-button svg, #album-content .am-actions .green-button svg, .am-detail .am-actions .green-button svg,
  .dl-tools .green-button svg, #am-page > .am-actions .green-button svg { color: #fff !important; }
  #collection-shuffle, #album-shuffle, [data-am-shuffle-list], [data-dl-shuffle],
  #collection-tools .dl-button, #album-content .am-actions .dl-button, #collection-tools #playlist-more { background: var(--fill) !important; }
  #collection-shuffle svg, #album-shuffle svg, [data-am-shuffle-list] svg, [data-dl-shuffle] svg,
  #collection-tools .dl-button svg, #album-content .am-actions .dl-button svg, #playlist-more svg { color: var(--am) !important; }
}

/* The lens is driven frame by frame (liquid-glass.js); CSS only colours it. */
.has-lens > .lens, .has-lens > .lens.moving, .has-lens > .lens.pressed { scale: none !important; }
.has-lens > .lens.pressed { background: rgba(255, 255, 255, .2); }
.mobile-tabs { touch-action: pan-y; }
.mobile-tabs > .lens { background: rgba(255, 255, 255, .12); }
#account-dialog .account-avatar, .mobile-profile .avatar, .user-button .avatar { background: #8e8e93 !important; }
/* Focus rings stay visible for the keyboard, in neutral white. */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid rgba(255, 255, 255, .55) !important; outline-offset: 2px; }
#account-dialog .ios-done:focus:not(:focus-visible) { outline: none !important; }
#immersive #room-lyrics-toggle.on, #immersive #room-lyrics-toggle[aria-pressed="true"],
#immersive #room-queue-toggle.on, #immersive #room-queue-toggle[aria-pressed="true"] { background-color: rgba(255, 255, 255, .22) !important; color: #fff !important; }
/* `hidden` always wins over the layout rules that force a display value. */
#collection-tools[hidden], #collection-tools [hidden], .dl-tools[hidden], .am-actions[hidden], #search-form[hidden] { display: none !important; }

/* Surfaces that used to be pure black follow the page background. */
#artist-content .artist-hero { background: transparent !important; }
::-webkit-scrollbar-thumb { border-color: var(--bg) !important; }
:root { --paper: var(--bg); --side: var(--bg); }

/* ── Tap targets (iPhone audit) ── */
.section-title .small-link { width: 32px !important; height: 32px !important; }
.page-footer a { display: inline-block; padding: 6px 0; }
@media (max-width: 720px) {
  /* As on iPhone, a tap anywhere on the mini player's song opens the player. */
  .player-track-group { position: relative; align-self: stretch; }
  .player .current-track { position: absolute !important; inset: 0; width: 100%; z-index: 1; }
  .player .current-track > span { position: absolute; left: 52px; top: 9px; right: 0; text-align: left; }
  .player-track-group > .artist-link { pointer-events: none; position: relative; z-index: 0; margin-top: 21px !important; }
}

/* ── Album and artist pages take a soft, flat colour from their artwork ──
   One even wash over the whole window (no gradient, no edge), fading in. */
#page-glow {
  display: block !important; position: fixed !important; inset: 0 !important; height: auto !important;
  z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--page-tint, #141414) 24%, #141414) !important;
  opacity: 0; transition: opacity .6s var(--smooth), background-color .6s var(--smooth);
}
#page-glow.on { opacity: 1; }

/* Big player: the artwork's colours, softened. */
#immersive .room-ambience { filter: blur(90px) saturate(1.25) brightness(.5) !important; }
#immersive .room-veil { background: rgba(20, 20, 20, .28) !important; }

/* ── Radio: the big station cards show real artwork, edge to edge ── */
.am-station-hero { isolation: isolate; background: var(--g1) !important; }
.am-hero-art { position: absolute !important; inset: 0 !important; z-index: -1; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; object-fit: cover; }
.am-station-hero:has(.am-hero-art)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .42); }

/* ── Genre and category tiles: the cover fills the tile ── */
.am-category { isolation: isolate; background: var(--g1, #2c2c2e) !important; }
.am-cat-art {
  position: absolute !important; inset: 0 !important; z-index: -2 !important;
  width: 100% !important; height: 100% !important; aspect-ratio: auto !important;
  border-radius: 0 !important; transform: none !important; object-fit: cover; margin: 0 !important; padding: 0 !important; max-width: none !important;
}
.am-category:has(.am-cat-art)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .38); }
.am-category strong, .am-category small { max-width: 100% !important; }

/* ── Stations for You: the radio badge sits on the circle, not clipped by it ── */
.am-station-art { overflow: visible !important; background: none !important; }
.am-station-art img { border-radius: 50% !important; }
.am-station-art > span { right: 4% !important; bottom: 4% !important; outline: 3px solid var(--bg); }

/* ── Search field: one pill, no focus box drawn inside it ── */
#search-form input:focus-visible, .inline-search input:focus-visible, #account-dialog .ios-field-row input:focus-visible { outline: none !important; }
#search-form:focus-within { outline: 2px solid rgba(255, 255, 255, .35); outline-offset: 0; }

/* ── Album page: Play, Shuffle and Download on one line ── */
.am-actions { align-items: center !important; }
.am-actions > * { margin: 0 !important; }

/* ── Full-screen player, lyrics / Playing Next on a wide screen ──
   The lyrics column must not stretch the grid's rows: it scrolls inside its
   own area, so the title, controls and the Lyrics button stay on screen. */
@media (min-width: 721px) {
  #immersive:is(.lyrics-mode, .queue-mode) .immersive-layout { overflow: hidden; }
  #immersive:is(.lyrics-mode, .queue-mode) .immersive-layout {
    --art: max(160px, min(28vw, calc(100dvh - 68px - var(--hills-h) - 290px))) !important;
    height: calc(100dvh - 68px - var(--hills-h)) !important; max-height: none !important; margin-bottom: 0 !important;
    row-gap: 0 !important;
  }
  #immersive:is(.lyrics-mode, .queue-mode) #room-title { font-size: 19px !important; -webkit-line-clamp: 1 !important; white-space: nowrap; text-overflow: ellipsis; display: block !important; }
  #immersive:is(.lyrics-mode, .queue-mode) #room-artist { font-size: 16px !important; margin-top: 0 !important; }
  #immersive:is(.lyrics-mode, .queue-mode) #room-cover { width: var(--art) !important; height: var(--art) !important; }
  #immersive:is(.lyrics-mode, .queue-mode) .immersive-art { margin-bottom: 14px !important; }
  #immersive:is(.lyrics-mode, .queue-mode) .room-progress { margin-top: 14px !important; }
  #immersive:is(.lyrics-mode, .queue-mode) .room-transport { margin: 8px 0 2px !important; }
  #immersive:is(.lyrics-mode, .queue-mode) :is(.room-lyrics, .room-queue) {
    grid-row: 1 / -1 !important; align-self: stretch !important;
    height: auto !important; min-height: 0 !important; max-height: 100% !important; overflow-y: auto; contain: size;
  }
  #immersive:is(.lyrics-mode, .queue-mode) #room-title { align-self: end; }
  #immersive:is(.lyrics-mode, .queue-mode) #room-artist { align-self: start; }
}
#immersive #room-artist { min-height: 28px; }
.liked-emblem, .dl-emblem, .collection-art, .am-tile-art { border: 0 !important; }
.am-feature { margin-bottom: 30px !important; }
@media (max-width: 720px) {
  #collection-tools .inline-search, #collection-tools select, #collection-tools > label { display: none !important; }
  #collection-tools #collection-shuffle, #album-content #album-shuffle, [data-dl-shuffle] { font-size: 0 !important; color: var(--am) !important; }
}
.small-link { min-height: 32px; display: inline-flex; align-items: center; padding: 0 4px; }
.side-label .icon-btn, #new-playlist { width: 28px !important; height: 28px !important; }

/* ── Search: artists ── */
/* Names get a full line box, so letters with descenders (g, y, j) are not cut off. */
.search-artist-chip span { line-height: 1.35 !important; height: auto !important; padding: 1px 2px 2px !important; font-size: 13.5px; font-weight: 600 !important; }
/* All: one row that scrolls sideways through every artist. */
#search-artists:not(.as-list) { grid-auto-columns: 132px !important; gap: 14px !important; padding-bottom: 6px; scroll-snap-type: x mandatory; }
#search-artists:not(.as-list) .search-artist-chip { scroll-snap-align: start; }
/* Artists filter: the full list, as in the Music app. */
#search-artists.as-list { display: flex !important; flex-direction: column; overflow: visible; margin-bottom: 20px !important; }
#search-artists.as-list .search-artist-chip {
  position: relative; flex-direction: row !important; align-items: center; gap: 14px !important;
  width: 100% !important; min-height: 68px; padding: 6px 30px 6px 4px !important; text-align: left;
  border-radius: 10px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 5 7 7-7 7' fill='none' stroke='%23ebebf5' stroke-opacity='.3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 8px center / 16px no-repeat !important;
}
#search-artists.as-list .search-artist-chip::after { content: ""; position: absolute; left: 74px; right: 0; bottom: 0; height: .5px; background: var(--sep); }
#search-artists.as-list .search-artist-chip:hover { background-color: rgba(255, 255, 255, .05) !important; }
#search-artists.as-list .search-artist-chip img { width: 56px !important; height: 56px !important; flex-shrink: 0; }
#search-artists.as-list .search-artist-chip span { max-width: none !important; font-size: 17px !important; font-weight: 500 !important; }

/* Banner glyphs are white, as in iOS; a favourite keeps its red heart. */
#am-hud .am-hud-icon { color: #fff !important; width: 24px; height: 24px; }
#am-hud .am-hud-icon:has(use[href="#g-heart-fill"]) { color: var(--am) !important; }
#am-hud { padding: 12px 20px 12px 14px; font-weight: 600; }
/* iPhone: focusing search makes room for Cancel instead of pushing the page wider. */
@media (max-width: 720px) {
  body.search-in-page main > #search-form.search-box:focus-within { width: calc(100% - 72px) !important; position: relative !important; overflow: visible !important; }
  body.search-in-page main > #search-form:focus-within .am-search-cancel { display: block; position: absolute; right: -72px; width: 64px; text-align: right; padding: 0; }
}
/* Search sections share their container with Liked, playlists and Downloaded:
   a hidden section must stay hidden whatever layout rule it has. */
#search-artists[hidden], #search-albums-section[hidden], #search-tabs[hidden], #search-spotlight[hidden],
#search-discovery[hidden], #search-results[hidden], #result-status[hidden], #category-empty[hidden], #collection-header[hidden] { display: none !important; }

/* ═════════════════════ Liquid glass, closer to iOS 26 ═════════════════════
   The bars are clearer (content shows through, bent at the rim by
   liquid-glass.js, with a thin specular line where the light catches the
   edge). A press squishes the bar like a drop and it springs back. */
.player.glass, .mobile-tabs.glass { background-color: rgba(28, 28, 30, .5) !important; outline-color: rgba(255, 255, 255, .08); }
html.lg-refract .player.glass, html.lg-refract .mobile-tabs.glass {
  -webkit-backdrop-filter: var(--lg-filter, blur(14px)) brightness(.96) !important; backdrop-filter: var(--lg-filter, blur(14px)) brightness(.96) !important;
}
.player, .mobile-tabs { transition-property: left, right, bottom, height, width, opacity, transform !important; transition-duration: .55s !important; transition-timing-function: var(--spring) !important; }
.player:active:not(:has(input:active)), .mobile-tabs:active { transform: scale(.985, .97); transition-duration: .18s !important; }

/* The tab lens: a soft pill at rest; pressed, a lifted drop that magnifies. */
.mobile-tabs > .lens { background: rgba(255, 255, 255, .1) !important; }
.mobile-tabs > .lens.lifted {
  z-index: 2 !important; background: rgba(255, 255, 255, .06) !important;
  -webkit-backdrop-filter: var(--lens-filter, brightness(1.1)); backdrop-filter: var(--lens-filter, brightness(1.1));
  outline: .5px solid rgba(255, 255, 255, .22); outline-offset: -.5px;
}
.mobile-tabs:has(> .lens.lifted) > button { pointer-events: auto; }

/* iPhone player: the artwork card sits in the middle at every width. */
@media (max-width: 720px) {
  #immersive:not(.lyrics-mode):not(.queue-mode) .immersive-art > button { display: flex !important; justify-content: center; width: 100%; }
  #immersive:not(.lyrics-mode):not(.queue-mode) #room-cover { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .player:active, .mobile-tabs:active { transform: none; } }

/* ── Type: Apple Music's SF Pro where the system has it (iPhone, iPad, Mac);
   elsewhere Inter, whose optical sizes switch to Inter Display at large
   sizes, the closest open match to SF Pro Display. Tracking follows Apple's
   scale: tighter as text grows. ── */
:root {
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI Variable Display", system-ui, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", system-ui, sans-serif;
}
html, body, button, input, select, textarea { font-family: var(--font-text) !important; font-optical-sizing: auto; font-feature-settings: "ss03" 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, .am-title, .am-h2, .brand-name, .am-mix-art strong, .am-station-hero strong, .am-category strong,
#view-title::before, #room-title, .collection-hero h1, #album-title, #artist-name { font-family: var(--font-display) !important; font-optical-sizing: auto; }
body { letter-spacing: -.008em; }
.am-title, body[data-view] .intro h1, body[data-view] #view-title::before, .collection-hero h1, #album-title, #artist-name { letter-spacing: -.022em !important; font-weight: 700 !important; }
.am-h2, .section-title h2, .am-section > h2 { letter-spacing: -.018em !important; }
small, .am-tile small, .am-song-text small { letter-spacing: -.004em; }


/* ── Top Picks for You, as in the Music app ──
   A small grey caption above each card; the card is the artwork as a clean
   square with a flat band of its colour underneath, holding the mix name and
   the artists in it. */
#mix-grid { padding-top: 2px; }
.am-mix-card { display: flex !important; flex-direction: column; gap: 7px; }
.am-mix-art {
  position: relative; display: flex !important; flex-direction: column; justify-content: flex-start !important; gap: 0 !important;
  aspect-ratio: auto !important; padding: 0 !important; margin-top: 22px;
  overflow: visible !important; border-radius: 12px !important;
  background: var(--mix-a) !important;
}
.am-mix-art img {
  position: relative !important; inset: auto !important; display: block;
  width: 100% !important; height: auto !important; aspect-ratio: 1; object-fit: cover;
  border-radius: 12px 12px 0 0 !important; margin: 0 !important;
}
.am-mix-art > span:first-of-type {
  position: absolute !important; top: -22px !important; left: 2px !important;
  font: 500 13px/1.3 var(--font-text) !important; letter-spacing: -.005em !important; text-transform: none !important;
  color: var(--label-2) !important;
}
.am-mix-art strong {
  padding: 12px 14px 2px; font: 700 17px/1.2 var(--font-display) !important; letter-spacing: -.02em !important; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.am-mix-art small {
  padding: 0 14px 14px; min-height: calc(2 * 1.35em + 14px);
  font: 400 13px/1.35 var(--font-text) !important; color: rgba(255, 255, 255, .78) !important;
}
.am-mix-art { container-type: inline-size; }
/* Play sits on the artwork's corner: the artwork is as tall as the card is wide. */
.am-mix-art .am-mix-play { position: absolute !important; top: calc(100cqw - 50px) !important; bottom: auto !important; right: 12px !important; }
@media (max-width: 720px) { #mix-grid { grid-auto-columns: 62vw !important; } }

/* ── Top Picks: the whole card is the photo; the mix name, its artists and
   Play sit on a floating liquid-glass caption (am-ui.js groups them in
   .amui-cap; am-glass.js draws the glass, bending the photo behind it). ── */
html:not(.x):not(.y) body .am-mix-art.amui-photo {
  display: block !important; aspect-ratio: 10 / 13 !important; overflow: hidden !important;
  background: #1c1c1e !important; isolation: isolate;
}
html:not(.x):not(.y) body .am-mix-art.amui-photo::after { content: none !important; }
html:not(.x):not(.y) body .am-mix-art.amui-photo > img {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important;
  object-fit: cover; border-radius: 0 !important; opacity: 1 !important; filter: none !important; z-index: 0 !important;
  -webkit-mask-image: none !important; mask-image: none !important;
}
/* The "Made for You" label above the card, as before (outside the clipped photo). */
html:not(.x):not(.y) body .am-mix-card:has(.amui-photo) { position: relative; padding-top: 22px !important; }
html:not(.x):not(.y) body .am-mix-art.amui-photo { margin-top: 0 !important; }
html:not(.x):not(.y) body .am-mix-card > .amui-kicker {
  position: absolute; top: 0; left: 2px; font: 500 13px/1.3 var(--font-text); letter-spacing: -.005em; color: var(--label-2);
}
html:not(.x):not(.y) body .amui-cap {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 22px;
  background: transparent;
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
}
html:not(.x):not(.y) body .amui-cap-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html:not(.x):not(.y) body .amui-cap strong {
  position: static !important; padding: 0 !important; margin: 0 !important; color: #fff !important;
  font: 700 17px/1.2 var(--font-display) !important; letter-spacing: -.02em !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
html:not(.x):not(.y) body .amui-cap small {
  position: static !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; color: rgba(255, 255, 255, .82) !important;
  font: 400 13px/1.3 var(--font-text) !important; display: block !important; -webkit-line-clamp: unset !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
html:not(.x):not(.y) body .amui-cap .am-mix-play {
  position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
  display: grid !important; place-items: center; flex: none; width: 44px !important; height: 44px !important; border-radius: 50% !important;
  background: #fff !important; color: #000 !important; opacity: 1 !important; transform: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  transition: transform .3s var(--amui-ease) !important;
}
html:not(.x):not(.y) body .amui-cap .am-mix-play::before, html:not(.x):not(.y) body .amui-cap .am-mix-play::after { content: none !important; }
html:not(.x):not(.y) body .am-mix-card:active .amui-cap .am-mix-play { transform: scale(.92) !important; }
html:not(.x):not(.y) body .amui-cap .am-mix-play svg { width: 18px !important; height: 18px !important; margin-left: 2px; color: #000 !important; }
@media (max-width: 720px) {
  html:not(.x):not(.y) body .amui-cap { left: 8px; right: 8px; bottom: 8px; padding: 10px 10px 10px 14px; border-radius: 20px; gap: 10px; }
  html:not(.x):not(.y) body .amui-cap strong { font-size: 15px !important; }
  html:not(.x):not(.y) body .amui-cap small { font-size: 12px !important; }
  html:not(.x):not(.y) body .amui-cap .am-mix-play { width: 38px !important; height: 38px !important; }
}

/* ═══════════════════════════ Smooth on phones ═══════════════════════════ */

/* The floating bars' edge light, as a still image layer (liquid-glass.js
   draws it once per size), so scrolling never has to redraw it. */
html .player.glass::after, html .mobile-tabs.glass::after {
  content: "" !important; display: block !important; position: absolute; inset: 0; z-index: 3;
  border-radius: inherit; pointer-events: none;
  background: var(--lg-rim, none) center / 100% 100% no-repeat !important;
  animation: none !important; transform: none !important; filter: none !important; opacity: 1 !important;
}
/* While something scrolls under them on a touch screen, the bars use a plain
   GPU blur, then take their bend back when the page settles. */
html.lg-refract .player.glass.lg-moving, html.lg-refract .mobile-tabs.glass.lg-moving {
  -webkit-backdrop-filter: blur(6px) saturate(1.5) brightness(.96) !important; backdrop-filter: blur(6px) saturate(1.5) brightness(.96) !important;
}
/* Each bar is its own composited layer, and its insides never cause layout
   work for the page around it. */
.player, .mobile-tabs { will-change: transform; contain: layout style; }
.mobile-tabs > .lens { will-change: transform, width; }

/* Long pages: sections well off screen are not rendered until they come near. */
#home-feed > section, #artist-albums-section, #search-albums-section, .am-section:not(:first-child) {
  content-visibility: auto; contain-intrinsic-size: auto 320px;
}

/* Big player on phones: the blurred artwork behind it is drawn at a quarter
   of the size and scaled up. It looks the same (it is a blur) but the GPU
   blurs 1/16 of the pixels, so the slow drift costs almost nothing. */
#immersive .room-ambience { will-change: transform; }
@media (max-width: 720px) {
  #immersive .room-ambience {
    inset: 37.5% !important; width: 25% !important; height: 25% !important;
    scale: 4.4; filter: blur(22px) saturate(1.25) brightness(.5) !important;
  }
}
@media (prefers-reduced-motion: reduce) { #immersive .room-ambience { animation: none !important; } }

/* ── Full-screen player without a visualizer, as in Apple Music ──
   The band that was kept free for the beat wave goes back to the player:
   just a little breathing room above the screen's edge. */
#immersive, #immersive[open] { --hills-h: 28px !important; }
@media (max-width: 720px) {
  #immersive, #immersive[open] { --hills-h: calc(18px + env(safe-area-inset-bottom, 0px)) !important; }
}
#immersive .room-hills { display: none !important; }
/* iPhone: like Apple Music, extra height is shared between the progress bar,
   playback controls, volume and bottom row instead of piling up underneath. */
@media (max-width: 720px) {
  #immersive:not(.lyrics-mode):not(.queue-mode) .immersive-details {
    grid-template-rows: auto auto auto minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    align-content: stretch !important; align-items: center;
  }
  #immersive:not(.lyrics-mode):not(.queue-mode) :is(.room-progress, .room-transport, .room-volume, .room-bottom) { margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* The Previous icon is drawn pointing back; an old rule rotated it, which
   made it point forward. */
.prev svg, #previous svg { transform: none !important; }
@media (max-width: 720px) {
  .player .main-play, .player .transport #next, .player .transport #previous { width: 38px !important; height: 42px !important; }
  .player .transport #previous svg, .player .transport #next svg { width: 22px !important; height: 22px !important; }
}
@media (max-width: 720px) {
  /* The title ends where the buttons begin, and long titles end in "…". */
  .player .current-track > span { width: auto !important; max-width: none !important; right: 6px !important; overflow: hidden; }
  .player .current-track strong, .player-track-group > .artist-link { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ── iPhone and iPad: volume belongs to the side buttons (ios.js adds
   .system-volume where a web page cannot set it), and Crossfade, which needs
   that control, is not offered. ── */
html.system-volume .volume-control, html.system-volume #immersive .room-volume,
html.system-volume #account-dialog .ios-row:has(#account-volume),
html.system-volume #account-dialog .ios-row:has(#crossfade) { display: none !important; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ═══════════════════ Sign in · Create account · Welcome ═══════════════════
   As in Apple Music: the app icon, one large title, fields grouped in one
   rounded block (iOS), a red button, a quiet way out. Desktop adds a wall of
   album covers beside the form. */
.am-auth { position: fixed; inset: 0; z-index: 200; display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr); background: var(--bg) !important; overflow: hidden; }
.am-auth[hidden] { display: none !important; }
.am-auth .auth-visual { position: relative; overflow: hidden; background: #000 !important; display: block !important; padding: 0 !important; }
.am-auth .auth-visual::before, .am-auth .auth-visual::after { content: none !important; }
.am-auth .auth-wall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 6px; padding: 6px; }
.am-auth .auth-wall img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; transform: none !important; }
.am-auth .auth-visual-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-width: none !important; padding: 40px 48px 48px; background: rgba(0, 0, 0, .72); }
.am-auth .auth-visual-copy .auth-app-icon { width: 44px; height: 44px; border-radius: 11px; margin-bottom: 18px; }
.am-auth .auth-visual-copy h2 { margin: 0; font: 700 clamp(40px, 4.4vw, 64px)/1.02 var(--font-display) !important; letter-spacing: -.035em !important; color: #fff; }
.am-auth .auth-visual-copy h2 em { font-style: normal; color: var(--am); }
.am-auth .auth-visual-copy p { margin: 14px 0 0; max-width: 440px; font-size: 17px; line-height: 1.4; color: var(--label-2); }

.am-auth .auth-panel { display: flex !important; align-items: center; justify-content: center; padding: 40px 24px !important; background: var(--bg) !important; border: 0 !important; overflow-y: auto; }
.am-auth .auth-panel-inner { width: min(380px, 100%); display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.auth-app-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 15px; background: var(--am); color: #fff; }
.auth-app-icon svg { width: 58%; height: 58%; }
.am-auth .auth-app-icon-lg { width: 76px; height: 76px; border-radius: 18px; margin: 0 auto 22px; }
.am-auth h1 { margin: 0 !important; font: 700 28px/1.15 var(--font-display) !important; letter-spacing: -.025em !important; color: #fff; }
.am-auth .auth-lead { margin: 8px 0 26px !important; font-size: 15px !important; line-height: 1.4; color: var(--label-2) !important; }

.am-auth .auth-tabs { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 !important; padding: 2px !important; margin: 0 0 18px; border-radius: 9px !important; background: var(--fill) !important; }
.am-auth .auth-tabs button { min-height: 32px; padding: 0 !important; border-radius: 7px !important; font-size: 13px !important; font-weight: 600 !important; color: #fff !important; background: none !important; }
.am-auth .auth-tabs > .lens { border-radius: 7px !important; background: #636366 !important; }

.am-auth .auth-form { display: flex !important; flex-direction: column; gap: 12px !important; }
.am-auth .auth-form[hidden] { display: none !important; }
.am-auth .auth-group { border-radius: 12px; overflow: hidden; background: var(--bg-elevated); }
.am-auth .auth-group input {
  display: block; width: 100%; height: 50px !important; margin: 0 !important; padding: 0 16px !important;
  border: 0 !important; border-radius: 0 !important; outline: none !important;
  background: none !important; color: #fff; font-size: 17px !important; letter-spacing: -.02em;
}
.am-auth .auth-group input + label + input, .am-auth .auth-group input + input { border-top: .5px solid var(--sep) !important; }
.am-auth .auth-group input::placeholder { color: var(--label-3); }
.am-auth .auth-group:focus-within { outline: 2px solid rgba(255, 255, 255, .25); outline-offset: 0; }
.am-auth .auth-error { min-height: 0; margin: 0 !important; font-size: 13px; line-height: 1.35; color: #ff453a !important; text-align: left; }
.am-auth .auth-error:empty { display: none; }
.am-auth .auth-submit { height: 50px; margin-top: 4px !important; border: 0 !important; border-radius: 12px !important; background: var(--am) !important; color: #fff !important; font-size: 17px !important; font-weight: 600 !important; letter-spacing: -.02em; }
.am-auth .auth-submit:hover { background: var(--am-hi) !important; }
.am-auth .auth-submit:disabled { opacity: .6; }
.am-auth .auth-guest { margin: 18px auto 0 !important; min-height: 44px; padding: 0 12px; background: none !important; border: 0; color: var(--am) !important; font-size: 17px !important; font-weight: 400 !important; }
.am-auth .auth-note { margin: 18px 0 0 !important; font-size: 12px !important; line-height: 1.4; color: var(--label-3) !important; }

/* Phones: just the form, centred, under the status bar and above the home indicator. */
@media (max-width: 860px) {
  .am-auth { grid-template-columns: 1fr; overflow-y: auto; }
  .am-auth .auth-visual { display: none !important; }
  .am-auth .auth-panel { align-items: flex-start; padding: calc(56px + env(safe-area-inset-top, 0px)) 20px calc(28px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 860px) and (min-height: 760px) { .am-auth .auth-panel { align-items: center; padding-top: calc(24px + env(safe-area-inset-top, 0px)) !important; } }

/* ── Install JustVibeMe (install.js): an iOS-style card above the player ── */
.am-install {
  position: fixed; z-index: 150; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: min(420px, calc(100vw - 24px)); padding: 18px;
  border-radius: 22px; color: #fff;
  background: rgba(36, 36, 38, .92); outline: .5px solid rgba(255, 255, 255, .12); outline-offset: -.5px;
  -webkit-backdrop-filter: blur(40px) saturate(170%); backdrop-filter: blur(40px) saturate(170%);
  transform: translate(-50%, 24px); opacity: 0; transition: transform .45s var(--spring), opacity .25s;
}
.am-install.in { transform: translate(-50%, 0); opacity: 1; }
.am-install[hidden] { display: none; }
@media (max-width: 720px) { .am-install { bottom: calc(var(--tabs-h) + var(--mini-h) + var(--dock-gap) * 3 + var(--safe-b)); } }
.am-install-head { display: flex; gap: 14px; align-items: center; }
.am-install-icon { width: 54px; height: 54px; border-radius: 13px; flex-shrink: 0; }
.am-install-head strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.am-install-head span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--label-2); }
.am-install-steps { margin: 14px 0 0; padding: 12px 14px 12px 34px; border-radius: 12px; background: rgba(255, 255, 255, .06); font-size: 15px; line-height: 1.45; }
.am-install-steps li + li { margin-top: 6px; }
.am-install-steps b { font-weight: 600; }
.am-install-glyph { width: 19px; height: 19px; vertical-align: -4px; color: #0a84ff; }
.am-install-actions { display: flex; gap: 10px; margin-top: 14px; }
.am-install-actions button { flex: 1; height: 44px; border: 0; border-radius: 12px; font-size: 17px; font-weight: 600; }
.am-install-go { background: var(--am); color: #fff; }
.am-install-later { background: var(--fill); color: #fff; }
#account-dialog .ios-install-row { width: 100%; border: 0; color: var(--am); font-size: 17px; text-align: left; cursor: pointer; }

/* ── Settings on iPhone (Home Screen app runs under the status bar) ──
   A sheet with a definite height that starts below the status bar / Dynamic
   Island, laid out as a grid (header + scrolling list), which Safari sizes
   reliably; the list scrolls with momentum and never drags the page behind. */
@media (max-width: 720px) {
  #account-dialog.ios-settings[open] {
    display: grid !important; grid-template-rows: auto minmax(0, 1fr);
    position: fixed; inset: auto 0 0 0; margin: 0 !important;
    width: 100vw; max-width: 100vw;
    height: calc(100dvh - env(safe-area-inset-top, 0px) - 10px); max-height: none;
    border-radius: 14px 14px 0 0;
  }
  @supports not (height: 100dvh) {
    #account-dialog.ios-settings[open] { height: calc(100vh - env(safe-area-inset-top, 0px) - 10px); }
  }
  #account-dialog .ios-nav { height: 56px; }
  #account-dialog .settings-scroll {
    min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 16px 16px calc(32px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #account-dialog .ios-group-title { margin: 22px 12px 7px; }
  #account-dialog .ios-profile { flex-wrap: nowrap; }
  #account-dialog .ios-profile > div { min-width: 0; }
  #account-dialog .ios-field-row input { min-width: 0; font-size: 17px; }   /* 16px+ stops iOS zooming in */
}
/* Small iPhones (SE): a little tighter so more fits. */
@media (max-width: 720px) and (max-height: 700px) {
  #account-dialog .ios-profile { min-height: 64px; }
  #account-dialog .ios-profile .account-avatar { width: 46px !important; height: 46px !important; }
  #account-dialog .account-artist img, #account-dialog .account-artist-fallback { width: 54px !important; height: 54px !important; }
}

/* ── Liquid glass where the backdrop cannot be bent (Safari on iPhone/iPad/Mac,
   Firefox): the same see-through frosted material and edge light, so the bars
   look like glass everywhere, not flat. ── */
html:not(.lg-refract) .player.glass, html:not(.lg-refract) .mobile-tabs.glass {
  background-color: rgba(30, 30, 32, .46) !important;
  -webkit-backdrop-filter: blur(18px) saturate(185%) brightness(1.04) !important;
  backdrop-filter: blur(18px) saturate(185%) brightness(1.04) !important;
}

/* ── The progress line under a finger (ios.js): a generous invisible touch
   area around a thin line, which thickens while held, as in Apple Music. ── */
#seek, #room-seek { touch-action: none; }
@media (pointer: coarse) {
  #immersive #room-seek {
    box-sizing: content-box !important; height: 7px !important; padding: 14px 0 !important; margin: -14px 0 !important;
    background-clip: content-box !important; transition: height .25s var(--spring), padding .25s var(--spring), margin .25s var(--spring) !important;
  }
  #immersive #room-seek.held { height: 13px !important; padding: 11px 0 !important; margin: -11px 0 !important; }
}

/* Full-screen player, phones. In a Home Screen app the strip under the home
   indicator lies outside fixed boxes and shows the page's own background (the
   grey bar under the player). While the player is open the page itself takes
   the player's colour, so the colour runs to the bottom edge of the screen. */
html:has(#immersive[open]) { background: var(--art-tint, #161616) !important; }
/* iPhone: a web page cannot read or set the system volume (iOS ignores the
   audio element's volume), so the slider would do nothing; the side buttons
   set the volume, as with any music app. Beats the iOS 26 layer's display. */
html.system-volume:not(.x) body #immersive:not(.g26a):not(.g26b):not(.g26c) .room-volume { display: none !important; }
/* Home Screen app on iOS 26: the strip under the home indicator lies outside
   the area a web app can draw in, and iOS fills it with the page's background
   colour (the artwork colour while the player is open, above). The player's
   lower edge settles into exactly that colour, so the two meet without a seam. */
html:not(.x) body #immersive:not(.g26a):not(.g26b):not(.g26c)[open]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: linear-gradient(to bottom, transparent, var(--art-tint, #161616));
  pointer-events: none; z-index: 0;
}

/* ═══════════════════════════ Reference pages ═══════════════════════════
   Apple Music on iOS 26, as on the reference screens (am-ui.js builds the
   extra pieces). Artist and album pages take a strong, even colour from
   their artwork; the artist photo fades into it. Round glass buttons, a
   white Play, glass capsules and cards. Selectors start with
   `html:not(.x):not(.y) body` so they win over every older layer, the
   iOS 26 one included, without depending on load order. */

:root { --amui-ease: cubic-bezier(.32, .72, 0, 1); --amui-glass: rgba(255, 255, 255, .13);
  --amui-rim: inset 0 1px .5px rgba(255, 255, 255, .3), inset 0 0 0 .5px rgba(255, 255, 255, .1); }

/* The artwork colour fills the window on artist and album pages. */
html:not(.x):not(.y) body:is([data-amui-view="artist"], [data-amui-view="album"]) #page-glow {
  background: var(--amui-tint, color-mix(in srgb, var(--page-tint, #2c2c2e) 50%, #0e0e0e)) !important; opacity: 1 !important;
}

/* ── Artist ── */
html:not(.x):not(.y) body #artist-content .artist-back,
html:not(.x):not(.y) body #artist-content .artist-hero .eyebrow,
html:not(.x):not(.y) body #artist-description { display: none !important; }
html:not(.x):not(.y) body #artist-content .artist-hero {
  position: relative !important; display: block !important; height: min(118vw, 470px) !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  overflow: hidden !important; background: none !important;
}
html:not(.x):not(.y) body #artist-content .artist-hero > img {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important;
  margin: 0 !important; border-radius: 0 !important; object-fit: cover !important; object-position: 50% 22% !important;
  filter: none !important; box-shadow: none !important; opacity: 1 !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0, 0, 0, .55) 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0, 0, 0, .55) 72%, transparent 100%);
}
html:not(.x):not(.y) body #artist-content .artist-hero > div {
  position: absolute !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 16px !important;
  width: auto !important; max-width: none !important; padding: 0 20px 4px !important; margin: 0 !important;
  background: none !important; text-align: center !important; transform: none !important;
}
html:not(.x):not(.y) body #artist-name {
  margin: 0 !important; max-width: 100%; color: #fff !important; overflow-wrap: anywhere;
  font: 700 34px/1.08 var(--font-display) !important; letter-spacing: -.022em !important;
  text-shadow: 0 1px 24px rgba(0, 0, 0, .28);
}
.amui-round-row { display: flex; align-items: center; justify-content: center; gap: 26px; }
html:not(.x):not(.y) body .amui-round {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: #fff;
  background: var(--amui-glass); box-shadow: var(--amui-rim);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
}
html:not(.x):not(.y) body .amui-round svg { width: 21px; height: 21px; }
html:not(.x):not(.y) body #amui-artist-star[aria-pressed="true"] { color: #fff; }
html:not(.x):not(.y) body #artist-play {
  position: static !important; display: grid !important; place-items: center !important; width: 64px !important; height: 64px !important;
  min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important;
  background: #fff !important; color: #000 !important; box-shadow: 0 6px 22px rgba(0, 0, 0, .2) !important; opacity: 1 !important;
}
html:not(.x):not(.y) body #amui-artist-info { order: 0; }
html:not(.x):not(.y) body #artist-play { order: 1 !important; }
html:not(.x):not(.y) body #amui-artist-star { order: 2; }
html:not(.x):not(.y) body #artist-play svg { width: 27px !important; height: 27px !important; margin-left: 3px; color: #000 !important; }

/* The latest release, on glass */
#amui-release { padding: 22px 16px 2px; }
#amui-release:empty { display: none; }
html:not(.x):not(.y) body .amui-release {
  display: flex; align-items: center; gap: 14px; max-width: 600px; padding: 12px; border-radius: 22px; cursor: pointer;
  background: rgba(255, 255, 255, .09); box-shadow: var(--amui-rim);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
}
.amui-release img { flex: none; width: 92px; height: 92px; border-radius: 8px; object-fit: cover; }
.amui-release-text { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; text-align: left; }
.amui-release-text small { font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .62); }
.amui-release-text strong {
  font-size: 16px; line-height: 1.25; font-weight: 600; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html:not(.x):not(.y) body .amui-release-add {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  margin-right: 4px; color: #fff; background: rgba(255, 255, 255, .14);
}
html:not(.x):not(.y) body .amui-release-add svg { width: 16px; height: 16px; }

/* Top Songs: album and year under each title, no times */
html:not(.x):not(.y) body #am-artist-top { padding-top: 6px; }
html:not(.x):not(.y) body #am-artist-top .am-song-time { display: none !important; }

/* ── Share and ⋯, top right (phones; the back button sits top left) ── */
#amui-top { display: none; }
@media (max-width: 720px) {
  html:not(.x):not(.y) body:is([data-amui-view="artist"], [data-amui-view="album"]) #amui-top {
    position: fixed; z-index: 46; top: calc(10px + env(safe-area-inset-top, 0px)); right: 14px;
    display: flex; align-items: center; height: 44px; padding: 0 2px; border-radius: 22px;
    background: rgba(40, 40, 44, .5); box-shadow: var(--amui-rim);
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  }
  #amui-top button { display: grid; place-items: center; width: 46px; height: 44px; padding: 0; border: 0; border-radius: 22px; color: #fff; background: none; }
  #amui-top svg { width: 21px; height: 21px; }
  html:not(.x):not(.y) body #am-nav .am-nav-back { box-shadow: var(--amui-rim); }
  html:not(.x):not(.y) body #artist-content .artist-hero { margin: 0 calc(50% - 50vw) !important; }
}

/* ── Album ── */
html:not(.x):not(.y) body #album-content .album-hero {
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0 !important;
  height: auto !important; min-height: 0 !important; padding: 8px 20px 4px !important; margin: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; text-align: center !important;
}
html:not(.x):not(.y) body #album-image {
  position: static !important; width: min(64vw, 300px) !important; height: auto !important; aspect-ratio: 1; max-width: none !important;
  margin: 0 0 20px !important; border-radius: 10px !important; object-fit: cover; box-shadow: 0 18px 44px rgba(0, 0, 0, .34) !important;
  -webkit-mask-image: none !important; mask-image: none !important; filter: none !important;
}
html:not(.x):not(.y) body #album-content .album-hero > div {
  position: static !important; display: flex !important; flex-direction: column !important; align-items: center !important;
  width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; background: none !important;
}
html:not(.x):not(.y) body #album-content .album-hero .eyebrow { display: none !important; }
html:not(.x):not(.y) body #album-title { margin: 0 !important; color: #fff !important; font: 700 24px/1.15 var(--font-display) !important; letter-spacing: -.02em !important; }
html:not(.x):not(.y) body #album-artist { margin: 4px 0 0 !important; padding: 0 !important; color: rgba(255, 255, 255, .86) !important; font: 400 18px/1.3 var(--font-text) !important; }
html:not(.x):not(.y) body #album-meta { margin: 4px 0 0 !important; color: rgba(255, 255, 255, .58) !important; font: 500 12px/1.3 var(--font-text) !important; letter-spacing: 0 !important; text-transform: none !important; }
html:not(.x):not(.y) body #album-content .am-actions {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 20px !important;
  width: auto !important; margin: 18px 0 8px !important; padding: 0 !important;
}
html:not(.x):not(.y) body #album-content .am-actions > :is(#album-shuffle, .dl-button) {
  display: grid !important; place-items: center !important; width: 44px !important; height: 44px !important; min-width: 0 !important;
  padding: 0 !important; border: 0 !important; border-radius: 50% !important; color: #fff !important;
  background: var(--amui-glass) !important; box-shadow: var(--amui-rim) !important;
}
html:not(.x):not(.y) body #album-content .am-actions > :is(#album-shuffle, .dl-button) svg { width: 20px !important; height: 20px !important; color: #fff !important; }
html:not(.x):not(.y) body #album-shuffle { order: 0; }
html:not(.x):not(.y) body #album-content .am-actions .dl-button { order: 2; }
html:not(.x):not(.y) body #album-play {
  order: 1; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
  height: 44px !important; min-width: 128px !important; padding: 0 28px !important; border: 0 !important; border-radius: 22px !important;
  background: #fff !important; color: #000 !important; box-shadow: none !important; font: 600 17px/1 var(--font-text) !important;
}
html:not(.x):not(.y) body #album-play svg { width: 16px !important; height: 16px !important; color: #000 !important; }
/* Numbered tracks with hairlines, as on an album in the Music app */
html:not(.x):not(.y) body #album-tracks { padding: 0 0 0 20px !important; }
html:not(.x):not(.y) body #album-tracks .track-row {
  display: grid !important; grid-template-columns: 26px minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important;
  min-height: 50px !important; padding: 0 8px 0 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: inset 0 -.5px 0 rgba(255, 255, 255, .13) !important;
}
html:not(.x):not(.y) body #album-tracks :is(.track-art, .track-time, [data-save], .artist-link) { display: none !important; }
html:not(.x):not(.y) body #album-tracks .track-index { color: rgba(255, 255, 255, .55) !important; font: 400 15px/1 var(--font-text) !important; text-align: left !important; }
html:not(.x):not(.y) body #album-tracks .track-title { color: #fff !important; font: 400 16px/1.3 var(--font-text) !important; }
html:not(.x):not(.y) body #album-tracks [data-options] { color: #fff !important; }

/* ── The New tab ── */
html:not(.x):not(.y) body #amui-new { padding-bottom: 24px; }
@media (max-width: 720px) { html:not(.x):not(.y) body.am-root #amui-new .am-title { padding-right: 52px; } }
/* Columns only for the full bar; collapsed, the one tab left is centred. */
html:not(.x):not(.y) body:not(.dock-min) .mobile-tabs > button[data-view="home"] { grid-column: 1 !important; }
html:not(.x):not(.y) body:not(.dock-min) .mobile-tabs > button[data-view="new"] { grid-column: 2 !important; }
html:not(.x):not(.y) body:not(.dock-min) .mobile-tabs > button[data-view="radio"] { grid-column: 3 !important; }
html:not(.x):not(.y) body:not(.dock-min) .mobile-tabs > button[data-view="library"] { grid-column: 4 !important; }

/* ── Mini player before the first song: "Not Playing" ── */
.amui-no-art { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .12); }
.amui-no-art svg { width: 18px; height: 18px; }

/* ── Downloads: Delete All ── */
html:not(.x):not(.y) body .dl-remove-all {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 600px; height: 48px;
  margin: 14px 0 8px; padding: 0 16px; border: 0; border-radius: 14px;
  background: rgba(118, 118, 128, .2); color: #ff453a; font: 500 17px/1 var(--font-text);
}
html:not(.x):not(.y) body .dl-remove-all svg { width: 19px; height: 19px; color: #ff453a; }
.am-confirm, .amui-info { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: center; }
.am-confirm h2, .amui-info h2 { margin: 0; color: #fff; font: 600 20px/1.25 var(--font-display); letter-spacing: -.01em; }
.am-confirm p { margin: 0 0 8px; color: rgba(235, 235, 245, .6); font-size: 14px; line-height: 1.45; }
html:not(.x):not(.y) body .am-confirm button {
  height: 50px; padding: 0 16px; border: 0; border-radius: 14px; background: rgba(118, 118, 128, .24); color: #fff;
  font: 600 17px/1 var(--font-text);
}
html:not(.x):not(.y) body .am-confirm .am-confirm-danger { color: #ff453a; }
.amui-info img { width: 128px; height: 128px; margin: 4px auto 6px; border-radius: 50%; object-fit: cover; }
.amui-info dl { margin: 6px 0 0; border-radius: 14px; background: rgba(118, 118, 128, .2); text-align: left; }
.amui-info dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 16px; box-shadow: inset 0 -.5px 0 rgba(255, 255, 255, .1); }
.amui-info dl > div:last-child { box-shadow: none; }
.amui-info dt { color: #fff; font-size: 16px; }
.amui-info dd { margin: 0; min-width: 0; color: rgba(235, 235, 245, .6); font-size: 16px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Presses: every control answers the finger on the iOS curve ── */
html:not(.x):not(.y) body :is(.amui-round, #artist-play, #amui-top button, .amui-release-add, #album-shuffle, #album-play,
  #album-content .am-actions .dl-button, .dl-remove-all, .am-confirm button, .amui-release, .am-tile, .am-category, .am-song, .track-row) {
  transition: transform .34s var(--amui-ease), background-color .2s ease, opacity .2s ease;
}
html:not(.x):not(.y) body :is(.amui-round, #amui-top button, .amui-release-add, #album-shuffle, #album-content .am-actions .dl-button):active { transform: scale(.88); transition-duration: .12s; }
html:not(.x):not(.y) body :is(#artist-play, #album-play, .dl-remove-all, .am-confirm button):active { transform: scale(.94); transition-duration: .12s; }
html:not(.x):not(.y) body :is(.amui-release, .am-tile, .am-category):active { transform: scale(.97); transition-duration: .12s; }
html:not(.x):not(.y) body :is(.am-song, .track-row):active { background-color: rgba(255, 255, 255, .06) !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.x):not(.y) body :is(.amui-round, #artist-play, #amui-top button, .amui-release-add, #album-shuffle, #album-play,
    #album-content .am-actions .dl-button, .dl-remove-all, .am-confirm button, .amui-release, .am-tile, .am-category, .am-song, .track-row) { transition: none; transform: none !important; }
}

/* ── Desktop: same pages, kept to a comfortable width ── */
@media (min-width: 721px) {
  html:not(.x):not(.y) body #artist-content .artist-hero { height: min(46vw, 440px) !important; border-radius: 0 0 0 0 !important; }
  html:not(.x):not(.y) body #artist-name { font-size: 44px !important; }
  #amui-release { padding-left: 0; padding-right: 0; }
}

/* ── Now Playing, as on the reference screens ──
   Favorite is a white star on glass (filled when on). In the queue, Shuffle
   and Repeat are wide glass pills above the list; a pill turns light when on. */
html:not(.x):not(.y) body #immersive:not(.g26a):not(.g26b) #room-like:is(.on, .liked) { background-color: rgba(255, 255, 255, .16) !important; color: #fff !important; }
html:not(.x):not(.y) body #immersive:not(.g26a):not(.g26b) .room-queue-head { display: flex !important; flex-direction: column-reverse !important; align-items: stretch !important; gap: 14px !important; }
html:not(.x):not(.y) body #immersive:not(.g26a):not(.g26b) .room-queue-head h3 { font: 700 17px/1.2 var(--font-display) !important; color: #fff !important; text-align: left; }
html:not(.x):not(.y) body #immersive:not(.g26a):not(.g26b) .room-queue-modes { display: flex !important; justify-content: center !important; gap: 12px !important; width: 100% !important; }
html:not(.x):not(.y) body #immersive:not(.g26a):not(.g26b) .room-queue-modes .room-mode {
  display: grid !important; place-items: center !important; flex: 0 0 auto !important; width: 76px !important; height: 36px !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 18px !important; color: #fff !important; opacity: 1 !important;
  background: rgba(255, 255, 255, .2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important;
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .35), inset 0 0 0 .5px rgba(255, 255, 255, .12) !important;
  transition: background-color .25s ease, color .25s ease, transform .3s var(--amui-ease) !important;
}
html:not(.x):not(.y) body #immersive:not(.g26a):not(.g26b) .room-queue-modes .room-mode svg { width: 20px !important; height: 20px !important; opacity: 1 !important; }
html:not(.x):not(.y) body #immersive:not(.g26a):not(.g26b) .room-queue-modes .room-mode:is([aria-pressed="true"], .on) {
  background: rgba(255, 255, 255, .9) !important; color: rgba(0, 0, 0, .82) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .12) !important;
}
html:not(.x):not(.y) body #immersive:not(.g26a):not(.g26b) .room-queue-modes .room-mode:active { transform: scale(.93) !important; }

/* ── Liquid glass: one material for every round button and pill ──
   As iOS 26 draws it: what is behind is blurred and its colour lifted, a
   bright specular line runs along the top lip, a softer bounce light along
   the bottom, light pools inside the rim, and the piece floats a little off
   the page. A press makes the glass swell and catch more light. Buttons that
   are "on" turn to a milky white glass with dark glyphs. */
:root {
  /* Clear glass: barely any frost, so what is behind stays visible; the
     piece is read from its thick, bright lip. */
  --lq-fill: linear-gradient(160deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, .02) 70%, rgba(255, 255, 255, .1) 100%);
  --lq-fill-press: linear-gradient(160deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, .08) 70%, rgba(255, 255, 255, .18) 100%);
  --lq-blur: blur(5px) saturate(115%);
  --lq-edge:
    inset 1.5px 1.5px .5px -.5px rgba(255, 255, 255, .9),
    inset -1.5px -1.5px .5px -.5px rgba(255, 255, 255, .6),
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    inset 2px 3px 6px -3px rgba(255, 255, 255, .45),
    inset -3px -5px 10px -5px rgba(255, 255, 255, .4),
    inset 0 0 16px rgba(255, 255, 255, .06),
    0 8px 20px -6px rgba(0, 0, 0, .42),
    0 0 0 .5px rgba(0, 0, 0, .18);
  --lq-on: linear-gradient(180deg, rgba(255, 255, 255, .97) 0%, rgba(240, 240, 245, .86) 100%);
}
html:not(.x):not(.y) body :is(.amui-round, .amui-release-add, #album-content .am-actions > #album-shuffle,
  #album-content .am-actions > .dl-button, #am-nav .am-nav-back),
html:not(.x):not(.y) body #immersive:not(.g26a):not(.g26b) :is(.room-queue-modes .room-mode, #room-like, #room-options) {
  position: relative; isolation: isolate; overflow: hidden; border: 0 !important;
  background: var(--lq-fill) !important; color: #fff !important;
  -webkit-backdrop-filter: var(--lq-blur) !important; backdrop-filter: var(--lq-blur) !important;
  box-shadow: var(--lq-edge) !important;
  transition: transform .42s cubic-bezier(.3, 1.5, .5, 1), background .25s ease, color .25s ease !important;
}
/* The sheen: light caught on the upper curve of the glass. */
html:not(.x):not(.y) body :is(.amui-round, .amui-release-add, #album-content .am-actions > #album-shuffle,
  #album-content .am-actions > .dl-button, #am-nav .am-nav-back)::before,
html:not(.x):not(.y) body #immersive:not(.g26a):not(.g26b) :is(.room-queue-modes .room-mode, #room-like, #room-options)::before {
  content: "" !important; display: block !important; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  /* A lens sheen high on the left, and light gathered by the curve at the
     bottom right, where real glass focuses it. */
  background:
    radial-gradient(55% 45% at 28% 18%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%),
    radial-gradient(60% 50% at 78% 100%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 70%) !important;
  opacity: var(--lq-sheen, .9); transition: opacity .25s ease;
}
/* am-glass.js draws the glass into this canvas (refraction, rim light). */
/* Pinned over the whole button: bar layouts (grids, flex rows) must never
   treat it as one of their items. */
html:not(.x):not(.y) body canvas.lq-canvas.lq-canvas {
  position: absolute !important; inset: 0 !important; z-index: -1 !important; display: block !important;
  width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important; transform: none !important; grid-area: auto !important;
  border-radius: inherit !important; pointer-events: none !important; opacity: 1 !important;
}
/* The tab bubble's red copy of the tabs (am-glass.js); the real tabs stay
   white, so the colour changes exactly at the glass edge. */
.lq-ink { position: absolute; left: 0; top: 0; z-index: 1; transform-origin: 0 0; pointer-events: none; }
html:not(.x):not(.y) body .lq-ink, html:not(.x):not(.y) body .lq-ink * { color: var(--am, #fa2d48) !important; pointer-events: none !important; transition: none !important; }
/* The bar shows the white copy; the real buttons stay as unseen tap areas
   (collapsed, the one real tab shows as before). */
html:not(.x):not(.y) body .mobile-tabs.lq-ink-on > button > :is(svg, span) { transition: opacity .25s ease !important; }
html:not(.x):not(.y) body:not(.dock-min) .mobile-tabs.lq-ink-on > button > :is(svg, span) { opacity: 0 !important; }
html:not(.x):not(.y) body .mobile-tabs > .lq-ink-base {
  position: absolute !important; left: 0 !important; top: 0 !important; margin: 0 !important; padding: 0 !important;
  z-index: 2 !important; transform: none !important; grid-area: auto !important; pointer-events: none !important;
}
html:not(.x):not(.y) body .lq-ink-base, html:not(.x):not(.y) body .lq-ink-base * { color: #fff !important; }
/* Collapsing, the red copy fades rather than popping away. */
html:not(.x):not(.y) body .lq-ink { opacity: 1; transition: opacity .25s ease !important; }
html:not(.x):not(.y) body.dock-min .lq-ink { opacity: 0; }
/* No dark band behind the bottom bars: the glass sits straight on the page. */
html:not(.x):not(.y) body .g26-edge { display: none !important; }
/* The Search field is the same glass capsule as the mini player and tab bar. */
html:not(.x):not(.y) body #search-form.search-box { border-radius: 999px !important; min-height: 44px !important; }
/* The chosen option has no fill of its own: the glass bubble behind it and
   its red label mark it. */
html:not(.x):not(.y) body #search-tabs { background: transparent !important; }
html:not(.x):not(.y) body #search-tabs > button,
html:not(.x):not(.y) body #search-tabs > button[aria-pressed="true"] { background: none !important; box-shadow: none !important; }
/* Glass switches (Search's All / Songs / Artists / Albums and the like): the
   chosen option's label turns red, the others stay white. */
html:not(.x):not(.y) body .filter-tabs > button { color: rgba(255, 255, 255, .85) !important; background: none !important; transition: color .25s ease !important; }
html:not(.x):not(.y) body .filter-tabs > button:is([aria-pressed="true"], .active) { color: var(--am, #fa2d48) !important; }
/* Clear glass shows the photo through it, so the glyph carries a soft shadow. */
[data-lq="r"] > svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
html:not(.x):not(.y) body :is(.amui-round, .amui-release-add, #album-content .am-actions > #album-shuffle,
  #album-content .am-actions > .dl-button, #am-nav .am-nav-back):active,
html:not(.x):not(.y) body #immersive:not(.g26a):not(.g26b) :is(.room-queue-modes .room-mode, #room-like, #room-options):active {
  transform: scale(1.07) !important; background: var(--lq-fill-press) !important; transition-duration: .16s !important;
}
html:not(.x):not(.y) body :is(.amui-round, .amui-release-add, #am-nav .am-nav-back):active::before,
html:not(.x):not(.y) body #immersive:not(.g26a):not(.g26b) :is(.room-queue-modes .room-mode, #room-like, #room-options):active::before { opacity: var(--lq-sheen, 1); }
/* On: the glass stays clear; only the glyph turns the accent red. */
html:not(.x):not(.y) body #immersive:not(.g26a):not(.g26b) #room-queue .room-queue-modes .room-mode:is([aria-pressed="true"], .on),
html:not(.x):not(.y) body #amui-release .amui-release-add.added {
  color: var(--am, #fa2d48) !important;
}
/* The capsule takes the same glass, but stays fixed top right; its own
   buttons sit on that glass, so they stay clear. */
html:not(.x):not(.y) body #amui-top#amui-top {
  background: var(--lq-fill) !important; box-shadow: var(--lq-edge) !important;
  -webkit-backdrop-filter: var(--lq-blur) !important; backdrop-filter: var(--lq-blur) !important;
}
html:not(.x):not(.y) body #amui-top button { background: none !important; box-shadow: none !important; }
html:not(.x):not(.y) body #amui-top button:active { background: rgba(255, 255, 255, .16) !important; transform: scale(.92); }
/* The release card: the same glass, lighter. */
html:not(.x):not(.y) body .amui-release {
  background: linear-gradient(180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .06) 60%, rgba(255, 255, 255, .09) 100%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(190%) !important; backdrop-filter: blur(22px) saturate(190%) !important;
  box-shadow: inset 0 1.25px .5px -.5px rgba(255, 255, 255, .6), inset 0 -1px .5px -.5px rgba(255, 255, 255, .22),
    inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 14px 30px -14px rgba(0, 0, 0, .4) !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not(.x):not(.y) body :is(.amui-round, .amui-release-add, #am-nav .am-nav-back):active,
  html:not(.x):not(.y) body #immersive:not(.g26a):not(.g26b) :is(.room-queue-modes .room-mode, #room-like, #room-options):active { transform: none !important; }
}

/* Collection pages (Liked Songs, playlists, Recently Played): no "Find in
   this collection" field or sort menu, as in the Music app. Play, Shuffle,
   Download and the playlist menu stay. */
#collection-tools .inline-search, #collection-tools #collection-sort { display: none !important; }

/* Shelf titles' › sits level with the title: the title's 12px bottom margin
   is matched, and there is no grey circle behind it on hover. */
.section-title > .small-link { margin-bottom: 12px !important; background-color: transparent !important; transform: none !important; }