/* ═══════════════════════════════════════════════════════════════════════════
   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; }
.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; } }

/* ═══════════════════════════ 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; }
}