:root {
  /* ---- theme: Dark (default). Black and Light below override these. ---- */
  --bg: #121212;
  --surface: #1b1b1b;
  --surface-2: #242424;
  --surface-3: #303030;
  --text: #ffffff;
  --text-2: #b3b3b3;
  --text-3: #7c7c7c;
  --danger: #ff6b6b;
  --accent: #ffb547;
  --accent-ink: #1d1300;          /* text on an accent-colored button */
  --accent-text: var(--accent);   /* accent used as text/icons (darkened in Light for contrast) */
  --mini-bg: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  --tabs-bg: linear-gradient(to top, rgba(0,0,0,.98) 55%, rgba(0,0,0,.75));
  --overlay: rgba(0,0,0,.6);
  --search-bg: #fff;
  --search-text: #121212;
  --search-icon: #444;
  --toast-bg: #fff;
  --toast-text: #121212;
  --track-fill: var(--text);
  --track-empty: color-mix(in srgb, var(--text) 25%, transparent);
  --strong-btn-bg: #fff;          /* the big play button on the now-playing screen */
  --strong-btn-ink: #000;
  --kb-bg: #2b2b2d; --kb-key: #6a6a6e; --kb-key-down: #8e8e93; --kb-special: #46464a; --kb-text: #fff;
  --tabs-h: 56px;
  --mini-h: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Space under the tab labels: enough to clear the iPhone home bar, but not the full inset. */
  --tabs-pad: max(6px, calc(var(--safe-bottom) - 16px));
  --radius: 8px;
  color-scheme: dark;
}
/* ---- theme: Black (true black; great on iPhone OLED screens) ---- */
:root[data-theme="black"] {
  --bg: #000; --surface: #0c0c0c; --surface-2: #161616; --surface-3: #242424;
  --mini-bg: color-mix(in srgb, var(--accent) 14%, #121212);
}
/* ---- theme: Light ---- */
:root[data-theme="light"] {
  --bg: #f5f5f7; --surface: #ffffff; --surface-2: #ebebee; --surface-3: #dadade;
  --text: #111114; --text-2: #55555c; --text-3: #8b8b92; --danger: #d43c3c;
  --accent-text: color-mix(in srgb, var(--accent) 62%, #000);
  --mini-bg: color-mix(in srgb, var(--accent) 24%, #fff);
  --tabs-bg: linear-gradient(to top, rgba(250,250,252,.98) 55%, rgba(250,250,252,.82));
  --overlay: rgba(0,0,0,.35);
  --search-bg: #e4e4e8; --search-text: #111114; --search-icon: #666;
  --toast-bg: #111114; --toast-text: #fff;
  --strong-btn-bg: #111114; --strong-btn-ink: #fff;
  --kb-bg: #d1d3d9; --kb-key: #fff; --kb-key-down: #b4b8c0; --kb-special: #abb0ba; --kb-text: #111;
  color-scheme: light;
}
/* ---- accent colors ---- */
:root[data-accent="green"]  { --accent: #1ed760; --accent-ink: #03200e; }
:root[data-accent="blue"]   { --accent: #4ea1ff; --accent-ink: #001a33; }
:root[data-accent="purple"] { --accent: #a78bfa; --accent-ink: #190a3d; }
:root[data-accent="pink"]   { --accent: #ff6fae; --accent-ink: #3a0019; }
:root[data-accent="red"]    { --accent: #ff5c5c; --accent-ink: #2b0000; }
:root[data-accent="teal"]   { --accent: #2dd4bf; --accent-ink: #00261f; }
:root[data-accent="orange"] { --accent: #ff8a3d; --accent-ink: #2b1100; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body {
  font: 15px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* No long-press text highlighting on the app's controls. Deliberately NOT on body: in iOS
   home-screen mode, text boxes inside a "no selection" area get focus but no keyboard. */
button, a, img, svg, .tabs, .mini, .now, .track, .card, .quick, .lib-row, .sheet, .spun, .pl-hero,
.page-title, .section-title, .chip {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* While a full-screen view or sheet is open, keep the page behind it from scrolling. */
html.locked, html.locked body { overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { -webkit-user-select: auto; user-select: auto; }
a { color: inherit; text-decoration: none; }
img { display: block; }
svg { display: block; width: 24px; height: 24px; fill: currentColor; }
[hidden] { display: none !important; }

/* ---------- main content ----------
   The page itself scrolls. (A fixed, self-scrolling panel here stopped the iPhone keyboard from
   opening for the search box in home-screen mode.) */
#view {
  min-height: 100vh;
  padding: calc(var(--safe-top) + 12px) 16px calc(var(--tabs-h) + var(--mini-h) + var(--tabs-pad) + 24px);
}
.page-title { font-size: 26px; font-weight: 800; margin: 8px 0 16px; letter-spacing: -0.02em; }
.section-title { font-size: 20px; font-weight: 700; margin: 28px 0 12px; letter-spacing: -0.01em; }
.row-head { display: flex; align-items: center; justify-content: space-between; }
.empty { color: var(--text-2); text-align: center; padding: 48px 24px; }
.empty strong { display: block; color: var(--text); font-size: 18px; margin-bottom: 6px; }
.spinner-wrap { display: flex; justify-content: center; padding: 48px; }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--surface-3); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- home ---------- */
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick {
  display: flex; align-items: center; gap: 10px; height: 56px;
  background: var(--surface-2); border-radius: 6px; overflow: hidden;
  font-weight: 700; font-size: 13px; text-align: left;
}
.quick .cover { width: 56px; height: 56px; border-radius: 0; flex: none; }
.quick-artist .cover { width: 46px; height: 46px; margin-left: 5px; border-radius: 50%; }
.quick span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-right: 8px; }
.shelf { display: flex; gap: 14px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.card { flex: none; width: 140px; text-align: left; }
.card img, .card .cover { width: 140px; height: 140px; border-radius: 6px; margin-bottom: 8px; }
.card-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-sub { color: var(--text-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- covers ---------- */
.cover {
  background: var(--surface-3); border-radius: 4px; overflow: hidden;
  display: grid; place-items: center; color: var(--text-2); object-fit: cover;
}
.cover.mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.cover.mosaic img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.cover.liked { background: linear-gradient(135deg, #5b3df5, #c7a6ff); color: #fff; }
.cover svg { width: 40%; height: 40%; }

/* ---------- track rows ---------- */
.tracks { list-style: none; margin: 0; padding: 0; }
.track { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.track-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; }
.track-art { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; flex: none; background: var(--surface-3); }
.track-text { min-width: 0; flex: 1; }
.track-title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-sub { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 4px; align-items: center; }
.track-sub .liked-dot svg { width: 13px; height: 13px; color: var(--accent-text); }
.track.current .track-title { color: var(--accent-text); }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; color: var(--text-2); border-radius: 50%; flex: none; }
.icon-btn:active { background: var(--surface-2); }
.icon-btn.on { color: var(--accent-text); }

/* ---------- search ---------- */
.search-box {
  position: sticky; top: 0; z-index: 2;
  margin: 0 -16px 8px; padding: 8px 16px; background: var(--bg);
}
/* The input itself is the whole white bar, so any tap on it opens the iPhone keyboard. */
.search-input-wrap { position: relative; height: 46px; }
.search-input-wrap input {
  width: 100%; height: 100%; border: 0; outline: 0; border-radius: 8px; background: var(--search-bg); color: var(--search-text);
  font: inherit; font-size: 16px; padding: 0 44px 0 44px; -webkit-appearance: none; appearance: none;
}
.search-input-wrap input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-input-wrap > svg { position: absolute; left: 12px; top: 11px; color: var(--search-icon); pointer-events: none; }
.search-input-wrap .clear {
  position: absolute; right: 7px; top: 7px; color: var(--search-icon); width: 32px; height: 32px; display: grid; place-items: center;
}
.chips { display: flex; gap: 8px; margin-top: 12px; }
.chip {
  padding: 7px 14px; border-radius: 999px; background: var(--surface-2); font-size: 13px; font-weight: 600;
}
.chip.on { background: var(--accent); color: var(--accent-ink); }
.recent-q { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--text); width: 100%; text-align: left; }
.recent-q svg { color: var(--text-3); width: 20px; height: 20px; }

/* ---------- library ---------- */
.lib-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; width: 100%; text-align: left; }
.lib-row .cover { width: 64px; height: 64px; flex: none; }
.lib-row .lib-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-row .lib-sub { color: var(--text-2); font-size: 13px; }

/* ---------- playlist page ---------- */
.pl-hero { display: flex; flex-direction: column; align-items: center; padding-top: 8px; }
.pl-hero .cover { width: 220px; height: 220px; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.pl-head { width: 100%; margin-top: 18px; }
.pl-name { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 0; word-break: break-word; }
.pl-meta { color: var(--text-2); font-size: 13px; margin-top: 4px; }
.pl-actions { display: flex; align-items: center; gap: 6px; margin: 12px 0 8px; }
.pl-actions .spacer { flex: 1; }
.play-big {
  width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.play-big svg { width: 28px; height: 28px; }
.play-big:active { transform: scale(0.96); }
.back { width: 40px; height: 40px; display: grid; place-items: center; margin-left: -8px; }

/* ---------- artist & album pages ---------- */
.artist-hero {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  margin: calc(-12px - var(--safe-top)) -16px 0; height: calc(300px + var(--safe-top));
  padding: 0 16px 14px; background: var(--surface-2); overflow: hidden;
}
.artist-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.artist-hero::after { /* fade the photo into the page so the name stays readable */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 25%, transparent) 0%, transparent 35%,
    color-mix(in srgb, var(--bg) 55%, transparent) 75%, var(--bg) 100%);
}
.artist-hero > .artist-name { position: relative; z-index: 2; }
.artist-hero > .hero-back { z-index: 2; }
.hero-back {
  position: absolute; top: calc(var(--safe-top) + 10px); left: 12px; margin: 0;
  background: rgba(0,0,0,.45); border-radius: 50%; color: #fff;
}
.artist-name { margin: 0; font-size: clamp(34px, 11vw, 52px); font-weight: 900; letter-spacing: -0.03em; line-height: 1; word-break: break-word; }
.artist-meta { color: var(--text-2); font-size: 13px; margin-top: 8px; }
.pl-actions .chip { display: inline-flex; align-items: center; gap: 6px; }
.pl-actions .chip svg { width: 16px; height: 16px; }
.see-more { color: var(--text-2); font-size: 13px; font-weight: 700; padding: 10px 0; }
.artist-card img { border-radius: 50%; }
.artist-card { text-align: center; }
.artist-about {
  color: var(--text-2); line-height: 1.5; margin: 0; white-space: pre-line; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.artist-about.open { display: block; }
.cover.round { border-radius: 50%; }
.follow-btn {
  padding: 6px 16px; border-radius: 999px; border: 1px solid var(--text-3); color: var(--text);
  font-size: 13px; font-weight: 700; margin-right: 4px;
}
.follow-btn.on { border-color: var(--accent); color: var(--accent); }
.pl-by { margin-top: 4px; font-weight: 700; font-size: 14px; }
.link { font-weight: 700; }
.link:active { text-decoration: underline; }

/* ---------- settings ---------- */
.theme-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.theme-card { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.theme-preview {
  position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 12px; padding: 14% 12%;
  display: flex; flex-direction: column; gap: 8%; border: 2px solid var(--surface-3); overflow: hidden;
}
.theme-preview span { display: block; height: 12%; border-radius: 4px; }
.theme-preview i { position: absolute; right: 12%; bottom: 10%; width: 26%; aspect-ratio: 1; border-radius: 50%; }
.theme-card.on .theme-preview { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.theme-name { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; }
.theme-name svg { width: 16px; height: 16px; color: var(--accent-text); }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.swatch span {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #111;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.swatch span svg { width: 22px; height: 22px; }
.swatch.on { color: var(--text); font-weight: 700; }
.swatch.on span { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text); }
.settings-list { background: var(--surface); border-radius: 12px; overflow: hidden; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 14px 16px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--surface-2);
}
.settings-row:last-child { border-bottom: 0; }
.settings-row b { font-weight: 600; color: var(--text-2); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-row svg { width: 20px; height: 20px; color: var(--text-3); transform: rotate(180deg); }
.settings-row.danger { color: var(--danger); }

/* ---------- mini player ---------- */
.mini {
  position: fixed; left: 8px; right: 8px; z-index: 10;
  bottom: calc(var(--tabs-h) + var(--tabs-pad) + 4px);
  height: var(--mini-h); padding: 0 4px 0 8px; border-radius: var(--radius);
  background: var(--mini-bg); display: flex; align-items: center; gap: 4px; overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
  transition: background-color .4s;
}
.mini-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; height: 100%; }
.mini-art { width: 44px; height: 44px; border-radius: 4px; object-fit: cover; background: var(--surface-3); flex: none; }
.mini-text { min-width: 0; display: flex; flex-direction: column; }
.mini-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-artist { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .icon-btn { color: var(--text); }
.mini .icon-btn.on { color: var(--accent-text); }
.mini-progress { position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; background: var(--track-empty); border-radius: 2px; }
.mini-progress div { height: 100%; width: 0; background: var(--track-fill); border-radius: 2px; }

/* ---------- tabs ---------- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
  height: calc(var(--tabs-h) + var(--tabs-pad)); padding-bottom: var(--tabs-pad);
  display: flex; background: var(--tabs-bg);
}
.tabs a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10.5px; color: var(--text-3);
}
.tabs a.on { color: var(--text); }
.tab-icon svg { width: 25px; height: 25px; }

/* ---------- now playing ---------- */
.now {
  position: fixed; inset: 0; z-index: 20; overflow: hidden; overflow: clip;
  background: var(--bg);
  transform: translateY(100%); transition: transform .32s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
  padding: calc(var(--safe-top) + 8px) 24px calc(var(--safe-bottom) + 20px);
}
.now.open { transform: none; }
.now { touch-action: none; } /* our swipe-down-to-close handles touches here, not page scrolling */
.now input[type=range] { touch-action: auto; }
.now-bg { position: absolute; inset: -40px; z-index: -1; background-size: cover; background-position: center; filter: blur(40px) saturate(1.4); opacity: .55; }
.now-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 30%, transparent), color-mix(in srgb, var(--bg) 92%, transparent) 70%); }
.now-top { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.now-context { text-align: center; font-size: 12px; flex: 1; min-width: 0; }
.now-context small { display: block; color: var(--text-2); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.now-context div { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now .icon-btn { color: var(--text); }
.now-art-wrap { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 20px 0; }
.now-art { height: 100%; width: auto; max-width: 100%; max-height: 420px; aspect-ratio: 1; object-fit: cover; border-radius: 8px; box-shadow: 0 18px 50px rgba(0,0,0,.6); background: var(--surface-3); }
.now-info { display: flex; align-items: center; gap: 12px; }
.now-text { flex: 1; min-width: 0; }
.now-title, .now-artist { display: block; max-width: 100%; text-align: left; }
.now-title:active, .now-artist:active { text-decoration: underline; }
.now-title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-artist { color: var(--text-2); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-info .icon-btn svg { width: 28px; height: 28px; }
.scrub { margin-top: 18px; }
.scrub input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: none; margin: 0;
  --pct: 0%;
}
.scrub input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--track-fill) var(--pct), var(--track-empty) var(--pct));
}
.scrub input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--track-fill); margin-top: -4.5px; border: 0;
}
.scrub input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--track-empty); }
.scrub input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--track-fill); }
.scrub input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--track-fill); border: 0; }
.times { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; margin-top: 2px; }
.controls { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.controls .icon-btn svg { width: 26px; height: 26px; }
.controls .skip svg { width: 36px; height: 36px; }
.controls .skip { width: 56px; height: 56px; }
.controls .play-big { width: 68px; height: 68px; background: var(--strong-btn-bg); color: var(--strong-btn-ink); }
.controls .play-big svg { width: 32px; height: 32px; }
.controls .icon-btn.on { position: relative; }
.controls .icon-btn.on::after { content: ""; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.repeat-one { position: relative; }
.repeat-one b { position: absolute; font-size: 9px; font-weight: 800; top: 50%; left: 50%; transform: translate(-50%, -52%); }
.now-bottom { display: flex; justify-content: flex-end; margin-top: 14px; }
.play-big .spinner { width: 26px; height: 26px; border-color: rgba(0,0,0,.2); border-top-color: currentColor; }

/* ---------- sheets & dialogs ---------- */
.overlay { position: fixed; inset: 0; z-index: 30; background: var(--overlay); display: flex; flex-direction: column; justify-content: flex-end; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  background: var(--surface-2); border-radius: 14px 14px 0 0; max-height: 85dvh; overflow-y: auto;
  padding: 8px 0 calc(var(--safe-bottom) + 12px); animation: up .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes up { from { transform: translateY(100%); } }
.sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--surface-3); margin: 0 auto 10px; }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 4px 20px 14px; border-bottom: 1px solid var(--surface-3); margin-bottom: 6px; }
.sheet-head img { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; }
.sheet-head .t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-head .s { color: var(--text-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-head > div { min-width: 0; }
.sheet h3 { margin: 4px 20px 12px; font-size: 17px; }
.sheet-item { display: flex; align-items: center; gap: 16px; width: 100%; padding: 13px 20px; text-align: left; font-size: 16px; }
.sheet-item:active { background: var(--surface-3); }
.sheet-item svg { color: var(--text-2); }
.sheet-item.danger { color: var(--danger); }
.sheet-item.danger svg { color: var(--danger); }
.sheet-item .cover { width: 44px; height: 44px; }
.sheet .tracks { padding: 0 12px 0 20px; }
.sheet .queue-label { color: var(--text-2); font-size: 13px; font-weight: 700; margin: 14px 20px 4px; text-transform: uppercase; letter-spacing: .06em; }

.dialog {
  margin: auto 24px; background: var(--surface-2); border-radius: 14px; padding: 22px 20px 16px;
  animation: pop .2s; align-self: stretch;
}
.overlay.center { justify-content: center; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }
.dialog h3 { margin: 0 0 14px; font-size: 18px; text-align: center; }
.dialog p { color: var(--text-2); text-align: center; margin: -6px 0 16px; }
.dialog input {
  width: 100%; font: inherit; font-size: 18px; padding: 10px 2px; color: var(--text); background: none;
  border: 0; border-bottom: 2px solid var(--text-3); outline: 0; text-align: center; -webkit-user-select: text; user-select: text;
}
.dialog input:focus { border-color: var(--accent); }
.dialog input + input { margin-top: 14px; }
.dialog-error { color: var(--danger) !important; margin: 14px 0 0 !important; font-size: 14px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #e8336f)); color: var(--accent-ink); font-weight: 900; font-size: 16px;
}
.avatar.big { width: 52px; height: 52px; font-size: 22px; }
.dialog-actions { display: flex; gap: 10px; margin-top: 20px; }
.dialog-actions button { flex: 1; height: 46px; border-radius: 999px; font-weight: 700; background: var(--surface-3); }
.dialog-actions .primary { background: var(--accent); color: var(--accent-ink); }
.dialog-actions .danger { background: var(--danger); color: #1a0000; }

.toast {
  position: fixed; left: 50%; z-index: 40; bottom: calc(var(--tabs-h) + var(--mini-h) + var(--tabs-pad) + 20px);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--toast-bg); color: var(--toast-text); font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 8px;
  transition: opacity .2s, transform .2s; max-width: calc(100% - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- import ---------- */
.cover.spotify { background: linear-gradient(135deg, #2a6f4a, #63c58c); color: #fff; }
.steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 16px; }
.steps li { display: flex; gap: 14px; color: var(--text-2); line-height: 1.45; }
.steps li span {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--text);
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
}
.steps a { color: var(--accent-text); text-decoration: underline; }
.steps b { color: var(--text); }
.file-btn {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 50px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 16px; cursor: pointer;
}
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.hint { color: var(--text-3); font-size: 13px; line-height: 1.45; margin: 14px 0 0; }
.progress { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 8px; }
.progress div { height: 100%; background: var(--accent); transition: width .4s; }
.progress-text { color: var(--text-2); margin: 12px 0 8px; font-variant-numeric: tabular-nums; }

/* ---------- Spun (year in music) ---------- */
.spun-card {
  display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 22px; padding: 16px 18px; text-align: left;
  border-radius: 12px; overflow: hidden; color: #fff;
  background: radial-gradient(140% 120% at 100% 0%, #ffb547 0%, #c05a00 45%, #3b1c00 100%);
}
.spun-card small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; opacity: .85; }
.spun-card b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
.spun-card span { font-size: 13px; opacity: .85; }
.spun-card > div:first-child { flex: 1; min-width: 0; }
.cover.spun-cover { background: radial-gradient(circle at 50% 50%, #ffb547 0 18%, #222 19% 100%); }

.spun { position: fixed; inset: 0; z-index: 45; background: #000; color: #fff; overflow: hidden; }
.sp-loading { position: absolute; inset: 0; display: grid; place-items: center; }
.sp-stage { position: absolute; inset: 0; transition: background .5s; touch-action: manipulation; }
.sp-slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--safe-top) + 64px) 28px calc(var(--safe-bottom) + 40px);
  max-width: 520px; margin: 0 auto;
}
.sp-progress { position: absolute; z-index: 2; top: calc(var(--safe-top) + 10px); left: 12px; right: 12px; display: flex; gap: 4px; }
.sp-progress div { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.sp-progress i { display: block; height: 100%; width: 0; background: #fff; }
.sp-close { position: absolute; z-index: 3; top: calc(var(--safe-top) + 22px); right: 10px; width: 44px; height: 44px; display: grid; place-items: center; color: #fff; }
.sp-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.sp-center p, .sp-list-wrap p { margin: 0; font-size: 17px; line-height: 1.4; }
.sp-kicker { font-size: 15px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.sp-huge { font-size: clamp(44px, 13vw, 68px); line-height: .95; font-weight: 900; letter-spacing: -0.04em; margin: 4px 0; }
.sp-title { font-size: 30px; line-height: 1.1; font-weight: 900; letter-spacing: -0.02em; margin: 6px 0 0; word-break: break-word; }
.sp-number { font-size: clamp(64px, 20vw, 104px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.sp-big { font-size: 28px !important; font-weight: 800; margin-top: -4px !important; }
.sp-dim { opacity: .75; font-size: 15px !important; }
.sp-hint { opacity: .6; font-size: 13px !important; margin-top: 24px !important; }
.sp-art { width: min(64vw, 280px); aspect-ratio: 1; object-fit: cover; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.45); margin: 10px 0; }
.sp-art.round, .sp-list img.round { border-radius: 50%; }
.sp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 0 22px; height: 48px;
  border-radius: 999px; background: #fff; color: #111; font-weight: 800; font-size: 15px;
}
.sp-btn svg { width: 20px; height: 20px; }
.sp-btn.ghost { background: rgba(255,255,255,.15); color: #fff; }
.sp-years { display: flex; gap: 8px; margin-top: 10px; }
.sp-chip { padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.18); font-weight: 700; font-size: 14px; }
.sp-chip.on { background: #fff; color: #111; }

.sp-list-wrap .sp-title { margin-bottom: 18px; }
.sp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sp-list li { display: flex; align-items: center; gap: 14px; }
.sp-list b { width: 22px; font-size: 22px; font-weight: 900; opacity: .9; text-align: right; flex: none; }
.sp-list img { width: 56px; height: 56px; border-radius: 4px; object-fit: cover; flex: none; }
.sp-list li > div { min-width: 0; }
.sp-list .t { font-weight: 800; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-list .s { font-size: 14px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sp-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; width: 100%; margin: 18px 0 22px; }
.sp-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.sp-bar div { background: rgba(255,255,255,.85); border-radius: 3px 3px 0 0; animation: grow .8s cubic-bezier(.2,.8,.2,1) both; transform-origin: bottom; }
.sp-bar span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; font-size: 11px; opacity: .75; white-space: nowrap; }
@keyframes grow { from { transform: scaleY(0); } }

.sp-stats { gap: 28px; }
.sp-stats .sp-number { font-size: clamp(56px, 17vw, 88px); }
.sp-stats p { max-width: 280px; margin: 4px auto 0 !important; }

.sp-vinyl {
  width: 120px; height: 120px; border-radius: 50%; margin-bottom: 14px; animation: spin 3s linear infinite;
  background:
    radial-gradient(circle, #111 0 4%, transparent 4.5%),
    radial-gradient(circle, #ffb547 0 26%, transparent 27%),
    repeating-radial-gradient(circle, #1a1a1a 0 2px, #262626 2px 4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.sp-vinyl.small { width: 40px; height: 40px; margin: 0; flex: none; }

.sp-summary { display: flex; flex-direction: column; gap: 14px; }
.sp-card { background: linear-gradient(160deg, #ffb547, #e8336f); color: #1d0b00; border-radius: 16px; padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.sp-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sp-card-head b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
.sp-card-head span { font-size: 12px; font-weight: 700; opacity: .7; }
.sp-card h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.sp-card-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sp-card ol { margin: 0; padding-left: 18px; font-weight: 800; font-size: 14px; line-height: 1.5; }
.sp-card li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-card-foot { display: flex; gap: 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.15); }
.sp-card-foot b { font-size: 22px; font-weight: 900; }
.sp-actions { display: flex; flex-direction: column; gap: 4px; }
.sp-actions .sp-btn { margin-top: 6px; }

/* entrance animation, staggered */
.sp-a { animation: sp-in .6s cubic-bezier(.2,.8,.2,1) both; }
.sp-a:nth-child(2) { animation-delay: .12s; } .sp-a:nth-child(3) { animation-delay: .24s; }
.sp-a:nth-child(4) { animation-delay: .36s; } .sp-a:nth-child(5) { animation-delay: .48s; }
.sp-a:nth-child(6) { animation-delay: .6s; } .sp-a:nth-child(7) { animation-delay: .72s; }
@keyframes sp-in { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .sp-a, .sp-bar div, .sp-vinyl { animation: none; } }

/* ---------- on-screen keyboard (for iPhones that won't show their own in home-screen mode) ---------- */
#softkb {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; /* above dialogs and the sign-in screen */
  background: var(--kb-bg); padding: 8px 3px calc(var(--safe-bottom) + 6px);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  box-shadow: 0 -6px 20px rgba(0,0,0,.4); animation: up .2s cubic-bezier(.2,.8,.2,1);
}
.skb-row { display: flex; justify-content: center; gap: 6px; margin-bottom: 11px; padding: 0 3px; }
.skb-row:last-child { margin-bottom: 4px; }
.skb-key {
  flex: 1 1 0; max-width: 42px; height: 44px; border-radius: 6px; background: var(--kb-key); color: var(--kb-text);
  font-size: 22px; font-weight: 400; display: grid; place-items: center; box-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.skb-key.down { background: var(--kb-key-down); }
.skb-key.on { background: var(--kb-text); color: var(--kb-bg); } /* shift is on */
.skb-special { background: var(--kb-special); font-size: 16px; }
.skb-back { max-width: 52px; flex-grow: 1.4; font-size: 20px; }
.skb-wide { max-width: 96px; flex-grow: 2.2; font-size: 16px; }
.skb-space { max-width: none; flex-grow: 5; font-size: 16px; }
.skb-go { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
html.softkb-open .mini, html.softkb-open .tabs { display: none; }
/* Move centered dialogs and sign-in up so the keyboard doesn't cover their buttons. */
html.softkb-open .overlay.center { justify-content: flex-start; padding-top: calc(var(--safe-top) + 32px); }
html.softkb-open .overlay.center .dialog { margin-top: 0; margin-bottom: auto; }
html.softkb-open .signin { align-items: flex-start; padding-top: calc(var(--safe-top) + 32px); }
html.softkb-open .signin-logo { display: none; }
html.softkb-open #view { padding-bottom: 300px; }

/* ---------- sign in ---------- */
.signin {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--accent) 22%, var(--bg)) 0%, var(--bg) 60%);
  padding: calc(var(--safe-top) + 24px) 24px calc(var(--safe-bottom) + 24px);
}
.signin-box { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.signin-logo { width: 96px; height: 96px; border-radius: 22px; margin-bottom: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.signin h1 { margin: 0; font-size: 30px; letter-spacing: -0.02em; }
.signin p { color: var(--text-2); margin: 8px 0 26px; min-height: 1.4em; }
.signin p.error { color: var(--danger); }
.signin input {
  width: 100%; height: 50px; border-radius: 8px; border: 1px solid var(--surface-3); background: var(--surface);
  color: var(--text); font: inherit; font-size: 17px; padding: 0 14px; outline: 0; -webkit-user-select: text; user-select: text;
}
.signin input:focus { border-color: var(--accent); }
.signin input + input { margin-top: 10px; }
.signin-btn {
  width: 100%; height: 50px; margin-top: 14px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-weight: 800; font-size: 16px;
}
.signin-btn:disabled { opacity: .6; }
.signout { display: block; margin: 36px auto 0; color: var(--text-2); font-size: 14px; padding: 10px 16px; }

@media (min-width: 700px) {
  #view { padding-left: max(24px, calc(50% - 360px)); padding-right: max(24px, calc(50% - 360px)); }
  .mini { left: max(8px, calc(50% - 368px)); right: max(8px, calc(50% - 368px)); }
  .quick-grid { grid-template-columns: 1fr 1fr 1fr; }
}