/* RiftCaster — warm "ember at home" dark theme */
:root {
  --bg: #121110;
  --bg-2: #181614;
  --surface: #1f1c19;
  --surface-2: #29251f;
  --surface-3: #342f28;
  --line: #3a342c;
  --text: #f5efe6;
  --muted: #a89e90;
  --faint: #978d7f;
  --accent: #ff9d3d;
  --accent-2: #ffb766;
  --accent-ink: #1d1206;
  --danger: #ff6b5b;
  --ok: #7fd18b;
  --warn: #f2c43d; /* works, but wants a hand (the ! kind) */
  /* Colours of the record that is playing (set by theme.js); amber until something plays. */
  --art-1: #ff9d3d;
  --art-2: #a63d12;
  --art-ink: #1d1206;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --sidebar: 240px;
  --nowpane: 320px;
  --player-h: 84px;
  --tabbar-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; -webkit-font-smoothing: antialiased; }
body { overflow: hidden; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; font-weight: 700; }
img { display: block; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; box-shadow: 0 0 0 4px rgba(18,17,16,.9); }

.icon { display: inline-flex; width: 20px; height: 20px; flex: none; }
.icon svg { width: 100%; height: 100%; }

/* ---------- Layout ---------- */
.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr) 0; grid-template-rows: 1fr auto; height: 100dvh; }
body.np-visible .app { grid-template-columns: var(--sidebar) minmax(0, 1fr) var(--nowpane); }
.sidebar { grid-row: 1; grid-column: 1; background: #0c0b0a; padding: 16px 12px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; border-right: 1px solid #1d1a17; }
.main { grid-row: 1; grid-column: 2; overflow-y: auto; overflow-x: hidden; position: relative; background: linear-gradient(180deg, var(--bg-2) 0, var(--bg) 340px); }
.view { --view-pt: 24px; --view-px: 32px; padding: var(--view-pt) var(--view-px) 48px; max-width: 1400px; margin: 0 auto; min-height: 100%; container: view / inline-size; }
.playerbar { grid-row: 2; grid-column: 1 / -1; }
.tabbar { display: none; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; padding: 4px 10px 0; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 8px; color: var(--muted); font-weight: 600; }
.nav-link:hover { color: var(--text); background: var(--surface); }
.nav-link.active { color: var(--text); background: var(--surface-2); }
.nav-link .badge { margin-left: auto; }
.side-section { display: flex; flex-direction: column; min-height: 0; flex: 1; border-top: 1px solid #1d1a17; padding-top: 14px; }
.side-title { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; font-weight: 700; padding: 0 12px 8px; }
.side-playlists { overflow-y: auto; display: flex; flex-direction: column; }
.side-playlists a { padding: 7px 12px; color: var(--muted); border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.side-playlists a:hover, .side-playlists a.active { color: var(--text); background: var(--surface); }

.badge { background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 7px; min-width: 20px; text-align: center; }

/* ---------- Common bits ---------- */
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.spacer { flex: 1; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.link:hover { text-decoration: underline; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; transition: transform .08s, background .15s; }
.btn:hover { background: var(--surface-3); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.primary:hover { background: var(--accent-2); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: var(--surface); }
.btn.danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn.small { height: 32px; padding: 0 12px; font-size: 13px; }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn .icon { width: 20px; height: 20px; }
.btn.small .icon { width: 18px; height: 18px; }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--muted); transition: color .15s, background .15s, transform .08s; }
.icon-btn:hover { color: var(--text); background: var(--surface-2); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.small { width: 28px; height: 28px; }
.icon-btn.small .icon { width: 20px; height: 20px; }
.icon-btn.on { color: var(--accent); }
.icon-btn.liked { color: var(--accent); }

.play-fab { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 28%, transparent); transition: transform .1s, background .15s; }
.play-fab:hover { background: var(--accent-2); transform: scale(1.04); }
.play-fab .icon { width: 26px; height: 26px; }

.input { width: 100%; height: 44px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); padding: 0 14px; color: var(--text); }
.input:focus { outline: none; border-color: var(--accent); }
.label { font-size: 13px; color: var(--muted); font-weight: 600; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px); background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; }
.notice { display: flex; align-items: center; gap: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--k) 14%, transparent), color-mix(in srgb, var(--k) 4%, transparent)); border: 1px solid color-mix(in srgb, var(--k) 30%, transparent); border-radius: var(--radius-lg); padding: 12px 16px; margin-bottom: 24px; }
.notice .icon { color: var(--k); }
/* One notice family: every message (page notices, pop-ups, the bars pinned up top, Home's fold-in) is this tinted
   pill, and its kind sets the colour — the theme's accent for "just so you know" (it follows the theme and the album
   colours), green for done, yellow ! for "works, but wants a hand", red X for "down", grey while getting ready. A
   notice with a warning / check / fail icon takes that kind by itself. */
.notice, .toast, .update-bar, .offline-banner, .attn { --k: var(--accent); }
.k-fix, .notice.warn, .notice:has(> .icon[data-i="warning"]), .attn:not(.busy) { --k: var(--warn); }
.k-ok, .notice.ok, .notice:has(> .icon[data-i="check"]) { --k: var(--ok); }
.k-down, .notice.down, .notice:has(> .icon[data-i="fail"]) { --k: var(--danger); }
.k-work, .notice[data-busy="1"], .attn.busy { --k: var(--muted); }
/* Floating ones (pop-ups, the bars pinned up top) sit over the page: the same tint, on a solid card. */
.toast, .update-bar, .offline-banner { background: linear-gradient(90deg, color-mix(in srgb, var(--k) 16%, transparent), color-mix(in srgb, var(--k) 6%, transparent)), var(--surface-2); border: 1px solid color-mix(in srgb, var(--k) 34%, transparent); }
.notice .btn .icon { color: inherit; } /* an icon on a button inside a notice takes the button's colour (orange on orange vanished) */
.notice p { margin: 0; flex: 1; min-width: 200px; }
.notice { flex-wrap: wrap; }
.notice > .btn { flex: none; margin-left: auto; }

.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.page-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.section { margin-bottom: 32px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
.section-head h2 { font-size: 20px; font-weight: 700; }
.section-head a { color: var(--muted); font-size: 13px; font-weight: 700; }
.section-head a:hover { color: var(--text); }

.tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.chip { height: 34px; padding: 0 14px; border-radius: 999px; background: var(--surface-2); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.chip > .icon { width: 16px; height: 16px; }
.chip:hover { background: var(--surface-3); }
.chip.active { background: var(--text); color: var(--bg); }

.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty > .icon { width: 48px; height: 48px; color: var(--faint); margin-bottom: 12px; } /* only the big header icon, not icons inside the buttons below */
.empty h2 { color: var(--text); font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.empty p { max-width: 460px; margin: 0 auto 18px; line-height: 1.5; }

.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--accent); animation: spin .8s linear infinite; margin: 60px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Covers & grids ---------- */
.cover { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, var(--surface-3), var(--surface)); display: flex; align-items: center; justify-content: center; flex: none; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover .placeholder { width: 40%; height: 40%; color: var(--faint); }
.cover.round { border-radius: 50%; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.grid.scroll { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 170px; overflow-x: auto; overflow-y: hidden; padding: 12px 12px 18px; margin: -12px -12px -12px; scrollbar-width: none; align-items: start; }
/* Side-scrolling rows run all the way to the pane's edge (under the page padding) and fade out there in a thin band,
   instead of being cut off at the padding. The extra right padding means the last tile clears the fade when scrolled to the end. */
.grid.scroll { margin-right: calc(-1 * var(--view-px, 32px)); padding-right: var(--view-px, 32px); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent); }
.grid.scroll::-webkit-scrollbar { display: none; }
.tile { display: flex; flex-direction: column; gap: 10px; padding: 12px; margin: -12px; border-radius: 12px; transition: background .2s; position: relative; min-width: 0; }
.tile:hover { background: var(--surface); }
.tile .cover { box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.tile-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-sub { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.tile .tile-play { position: absolute; right: 20px; top: calc(100% - 100px); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; width: 46px; height: 46px; }
.tile:hover .tile-play { opacity: 1; transform: none; }
.tag-needs { position: absolute; left: 20px; top: 20px; background: rgba(0,0,0,.7); color: var(--accent); font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; backdrop-filter: blur(6px); }

.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 34px; }
.quick a, .quick button { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: var(--radius-sm); overflow: hidden; font-weight: 700; text-align: left; height: 60px; transition: background .2s; }
.quick a:hover, .quick button:hover { background: var(--surface-2); }
.quick .cover { width: 60px; height: 60px; border-radius: 0; }
.quick .q-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), #c2571c); color: var(--accent-ink); }

/* ---------- Hero (album / artist / playlist pages) ---------- */
.hero { display: flex; align-items: flex-end; gap: 28px; margin-bottom: 26px; }
.hero .cover { width: 220px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.hero-text { min-width: 0; flex: 1; }
.hero-kind { font-size: 13px; font-weight: 700; color: var(--muted); }
.hero h1 { font-size: clamp(28px, 6.5cqi, 56px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; margin: 6px 0 12px; word-break: break-word; }
.hero-meta { color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hero-meta a { color: var(--text); font-weight: 700; }
.hero-meta .dot::before { content: "•"; margin: 0 2px; }
.actions { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.actions-note { display: flex; align-items: center; min-width: 0; margin-left: 8px; }
.actions-note:empty { display: none; }
@media (max-width: 720px) { .actions-note { margin-left: 0; flex-basis: 100%; } }

/* ---------- Track list ---------- */
.tracks { display: flex; flex-direction: column; }
.track { display: grid; grid-template-columns: 34px minmax(0, 3fr) minmax(0, 2fr) 36px 52px 36px; align-items: center; gap: 12px; padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; min-height: 44px; position: relative; }
.track:focus-visible { outline-offset: -2px; }
.track:hover { background: var(--surface); }
.track.playing .t-title { color: var(--accent); } /* (the accent is kept readable against the page; the raw cover colour isn't) */
.track.playing { background: color-mix(in srgb, var(--art-1) 10%, transparent); }
.track.playing:hover { background: color-mix(in srgb, var(--art-1) 16%, transparent); }
.t-num { color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; position: relative; }
.t-num .icon { width: 18px; height: 18px; display: none; }
.track:hover .t-num .n { display: none; }
.track:hover .t-num .icon { display: inline-flex; }
.track.playing .t-num .n { color: var(--accent); }
.t-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.t-main .cover { width: 36px; border-radius: 4px; }
.t-text { min-width: 0; }
.t-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-artist { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.t-album { color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-album:hover { color: var(--text); text-decoration: underline; }
.t-dur { color: var(--muted); font-size: 13px; text-align: left; font-variant-numeric: tabular-nums; } /* times start under the Time header */
.t-like, .t-more { opacity: 0; }
.track:hover .t-like, .track:focus-within .t-like, .t-like.liked, .track:hover .t-more, .track:focus-within .t-more { opacity: 1; }
.t-flag { display: inline-flex; color: var(--accent); width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.t-dl { color: var(--ok); width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.tracks.no-album .track { grid-template-columns: 34px minmax(0, 1fr) 52px 132px 36px; }
.tracks.no-album .t-album { display: none; }
.track-head { color: var(--muted); font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--line); cursor: default; min-height: 36px; margin-bottom: 8px; }
.track-head:hover { background: none; }

.list-rows { display: flex; flex-direction: column; gap: 4px; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius); }
.list-row:hover { background: var(--surface); }
.list-row .cover { width: 56px; }
.list-row .cover.round { width: 56px; }

/* ---------- Search ---------- */
.search-box { position: relative; max-width: 560px; margin-bottom: 26px; }
.search-box .icon { position: absolute; left: 14px; top: 13px; color: var(--muted); width: 20px; height: 20px; }
.search-box .input { height: 48px; padding-left: 44px; border-radius: 999px; font-size: 16px; background: var(--surface-2); }

/* ---------- Player bar ---------- */
.playerbar { height: var(--player-h); background: linear-gradient(90deg, color-mix(in srgb, var(--art-1) 14%, #0c0b0a), #0c0b0a 55%, color-mix(in srgb, var(--art-2) 8%, #0c0b0a)); border-top: 1px solid #1d1a17; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(320px, 2fr) minmax(180px, 1fr); align-items: center; padding: 0 16px; gap: 16px; transition: background .8s; }
.pb-now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pb-now .cover { width: 56px; border-radius: 6px; cursor: pointer; }
.pb-text { min-width: 0; cursor: pointer; }
.pb-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-artist { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.pb-center { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pb-controls { display: flex; align-items: center; gap: 8px; }
.pb-controls .icon-btn.small { width: 36px; height: 36px; }
.pb-controls .icon-btn.small .icon { width: 24px; height: 24px; }
.pb-controls .icon-btn.on { color: var(--art-1); }
.pb-play { width: 38px; height: 38px; border-radius: 50%; background: var(--text); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; transition: transform .08s; }
.pb-play:hover { transform: scale(1.06); }
.pb-play .icon { width: 24px; height: 24px; }
.pb-progress { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 640px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pb-progress span { width: 40px; text-align: center; }
.pb-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.pb-center { min-width: 0; }
.pb-quality { font-size: 11px; color: var(--faint); margin-right: 6px; white-space: nowrap; }
/* Narrower windows: nothing is dropped — the quality label moves onto its own line above the icons, the icon row
   keeps lyrics, mini player, speakers, volume and the Now-playing button, and the volume slider gets shorter. */
@media (max-width: 1240px) and (min-width: 761px) {
  .pb-right { flex-wrap: wrap; row-gap: 2px; justify-content: flex-end; }
  .pb-quality { flex-basis: 100%; text-align: right; margin-right: 2px; }
  .playerbar { grid-template-columns: minmax(150px, 1fr) minmax(300px, 2fr) minmax(250px, 1fr); }
}
@media (max-width: 1040px) and (min-width: 761px) { .pb-right .range.volume { max-width: 64px; } .pb-progress span { width: 34px; } }
@media (max-width: 1320px) and (min-width: 761px) { body.np-visible .pb-right .range.volume { max-width: 64px; } }
@media (max-width: 900px) and (min-width: 761px) { .pb-progress span { width: 34px; } }
.pb-mini-progress { display: none; }

.range { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--text) var(--p, 0%), var(--surface-3) var(--p, 0%)); cursor: pointer; }
.range:hover { background: linear-gradient(to right, var(--art-1) var(--p, 0%), var(--surface-3) var(--p, 0%)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--text); opacity: 0; transition: opacity .15s; }
.range:hover::-webkit-slider-thumb, .range:active::-webkit-slider-thumb { opacity: 1; }
.range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--text); }
.range.volume { max-width: 100px; }

/* ---------- Full-screen player ---------- */
.fullplayer { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
.fullplayer.grow { animation: grow .22s cubic-bezier(.2,.8,.2,1); }
@keyframes grow { from { transform: scale(.3); opacity: 0; } }
.fullplayer.fp-in-up { animation: fpInUp .28s cubic-bezier(.2,.8,.2,1); }
.fullplayer.fp-in-right { animation: fpInRight .28s cubic-bezier(.2,.8,.2,1); }
.fullplayer.fp-out-up { animation: fpInUp .24s cubic-bezier(.4,0,.8,.4) reverse forwards; }
.fullplayer.fp-out-right { animation: fpInRight .24s cubic-bezier(.4,0,.8,.4) reverse forwards; }
@keyframes fpInUp { from { transform: translateY(100%); opacity: .6; } }
@keyframes fpInRight { from { transform: translateX(100%); opacity: .6; } }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
.fp-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(60px) saturate(1.3) brightness(.45); transform: scale(1.2); z-index: 0; }
.fp-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; padding: max(16px, env(safe-area-inset-top)) 24px max(24px, var(--safe-b)); max-width: 560px; width: 100%; margin: 0 auto; }
.fp-top { display: flex; align-items: center; justify-content: space-between; }
.fp-top .label { font-size: 13px; color: var(--text); opacity: .8; text-align: center; }
.fp-art { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 18px 0; }
.fp-art .cover { width: min(100%, 52vh); box-shadow: 0 24px 60px rgba(0,0,0,.55); border-radius: 12px; }
.fp-info { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fp-info .t { min-width: 0; flex: 1; }
.fp-title { font-size: 24px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-artist { color: rgba(255,255,255,.75); font-size: 16px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-artist a:hover { text-decoration: underline; }
.fp-progress .range { width: 100%; height: 5px; background: linear-gradient(to right, var(--text) var(--p, 0%), rgba(255,255,255,.2) var(--p, 0%)); }
.fp-progress .range::-webkit-slider-thumb { opacity: 1; width: 14px; height: 14px; }
.fp-times { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.7); margin-top: 8px; font-variant-numeric: tabular-nums; }
.fp-controls { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
.fp-controls .icon-btn { width: 52px; height: 52px; color: var(--text); }
.fp-controls .icon-btn .icon { width: 28px; height: 28px; }
.fp-controls .icon-btn.side .icon { width: 24px; height: 24px; }
.fp-controls .icon-btn.side { color: rgba(255,255,255,.7); }
.fp-controls .icon-btn.on { color: var(--art-1); }
.fp-play { width: 72px; height: 72px; border-radius: 50%; background: var(--text); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; }
.fp-play .icon { width: 32px; height: 32px; }
.fp-bottom { display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.65); font-size: 12px; }
.fp-queue { flex: 1; overflow-y: auto; margin: 10px -10px; }
.fp-queue h3 { font-size: 15px; margin: 14px 10px 6px; color: var(--muted); }
.q-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.q-row:hover { background: rgba(255,255,255,.06); }
.q-row .cover { width: 44px; border-radius: 4px; }
.q-row.current .t-title { color: var(--art-1); }

/* ---------- Menus, modals, toasts ---------- */
.menu-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0); transition: background .2s; }
.menu-backdrop.open { background: rgba(0,0,0,.45); }
.menu { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface-2); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 6px 8px calc(14px + var(--safe-b)); display: flex; flex-direction: column; box-shadow: 0 -10px 40px rgba(0,0,0,.4); animation: rise .2s ease-out; max-height: 80vh; overflow-y: auto; transition: transform .16s ease-out; }
.sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 6px auto 10px; }
.menu.popover { right: auto; bottom: auto; width: 240px; border-radius: var(--radius); padding: 6px; animation: none; box-shadow: 0 16px 40px rgba(0,0,0,.6); border: 1px solid var(--line); }
.menu-backdrop:has(.popover).open { background: transparent; }
.menu-item { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 10px 14px; border-radius: var(--radius-sm); text-align: left; font-weight: 600; font-size: 16px; }
.menu.popover .menu-item { padding: 8px 12px; min-height: 40px; font-size: 14px; }
.menu-item:hover { background: var(--surface-3); }
.menu-item .icon { width: 20px; height: 20px; color: var(--muted); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger .icon { color: var(--danger); }

.modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); width: 100%; max-width: 440px; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.modal.wide { max-width: 760px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 6px 20px; }
.modal-head h2 { font-size: 20px; }
.modal-body { padding: 8px 20px 20px; overflow-y: auto; }

/* Passing messages (ui.js toast): a dark card like the app's notices, an icon for the kind, readable at any length. */
.toast { position: fixed; left: 50%; bottom: calc(var(--player-h) + 16px); transform: translate(-50%, 20px); display: flex; align-items: flex-start; gap: 10px;
  width: max-content; max-width: min(440px, calc(100vw - 32px)); padding: 11px 16px 11px 12px; border-radius: 14px;
  color: var(--text); box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  font-weight: 500; font-size: 14px; line-height: 1.4; text-align: left; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 100; }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; cursor: default; }
.toast-icon { flex: none; width: 20px; height: 20px; display: grid; place-items: center; color: var(--k); }
.toast-icon .icon { width: 18px; height: 18px; }
.toast-text { min-width: 0; overflow-wrap: anywhere; padding-top: 1px; }
.toast-text b { font-weight: 700; }

.offline-banner { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: calc(100% - 24px); max-width: 1100px; margin: 8px auto 0; padding: 8px 14px; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.3); color: var(--text); font-size: 13px; }
.offline-banner[hidden] { display: none; }
.offline-banner .icon { width: 18px; height: 18px; flex: none; color: var(--k); }
.offline-banner span { flex: 1; min-width: 0; } .offline-banner .d { color: var(--muted); }

/* ---------- Auth ---------- */
.auth { position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 28px 20px; overflow-y: auto; background: radial-gradient(ellipse at 50% 0%, rgba(255,157,61,.18), transparent 60%), var(--bg); }
.auth-card { width: 100%; max-width: 400px; margin: auto 0; display: flex; flex-direction: column; gap: 16px; }
.auth-card .logo { width: 72px; height: 72px; border-radius: 18px; margin: 0 auto 4px; box-shadow: 0 12px 40px rgba(255,140,40,.25); }
.auth-card h1 { text-align: center; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.auth-card .sub { text-align: center; color: var(--muted); margin: -8px 0 6px; line-height: 1.5; }
.auth-card .btn { height: 48px; }
.form-error { color: var(--danger); font-size: 14px; min-height: 18px; }
.hint { color: var(--faint); font-size: 12px; line-height: 1.5; }

/* ---------- Review / tagging ---------- */
.prop-card { display: flex; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; }
.prop-card .covers { display: flex; align-items: center; gap: 8px; flex: none; }
.prop-card .covers .cover { width: 64px; }
.prop-card .arrow { color: var(--faint); }
.prop-list { display: flex; flex-direction: column; gap: 10px; }
.status-pill { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-3); color: var(--muted); text-transform: capitalize; }
.status-pill.applied { background: rgba(127,209,139,.15); color: var(--ok); }
.status-pill.pending { background: rgba(255,157,61,.15); color: var(--accent); }
.status-pill.rejected, .status-pill.undone { background: var(--surface-3); color: var(--faint); }

.compare { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 22px; }
.compare > div { background: var(--surface); padding: 10px 12px; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.compare .h { background: var(--surface-2); font-size: 13px; font-weight: 700; color: var(--muted); }
.compare .k { color: var(--muted); font-weight: 600; }
.compare .changed { color: var(--accent-2); font-weight: 700; }
.cover-compare { display: flex; gap: 24px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.cover-compare figure { margin: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.cover-compare .cover { width: 160px; }
.cover-compare figcaption { font-size: 13px; color: var(--muted); font-weight: 700; }

.tchange { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); align-items: start; }
.tchange:last-child { border-bottom: 0; }
.tchange input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); margin-top: 2px; }
.tchange .file { font-size: 12px; color: var(--faint); margin-bottom: 6px; overflow-wrap: anywhere; }
.diff { display: grid; grid-template-columns: 80px 1fr; gap: 3px 10px; font-size: 14px; }
.diff .k { color: var(--muted); font-size: 12px; font-weight: 600; padding-top: 2px; }
.diff .old { color: var(--faint); text-decoration: line-through; margin-right: 8px; }
.diff .new { color: var(--accent-2); font-weight: 600; }
.diff .same { color: var(--text); }
.tchange.unmatched { opacity: .55; }
.sticky-actions { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 30%); padding: 26px 0 8px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }

.cand { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.cand .cover { width: 60px; }
.cand-list { display: flex; flex-direction: column; gap: 8px; }
.score { font-size: 12px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.progress-bar { height: 6px; background: var(--surface-3); border-radius: 6px; overflow: hidden; }
.progress-bar > div { height: 100%; background: var(--accent); transition: width .3s; }
/* Making a lossless download into MP3 as it's filed: the same bar, with a slow sheen moving through it. */
.progress-bar.converting > div { background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, white) 50%, var(--accent) 100%) 0 0 / 200% 100%; animation: conv-sheen 1.6s linear infinite; }
@keyframes conv-sheen { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .progress-bar.converting > div { animation: none; } }

/* ---------- Settings ---------- */
.settings { display: flex; flex-direction: column; gap: 16px; max-width: none; }
.settings h2 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.setting-row { display: grid; grid-template-columns: 1fr 240px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.setting-row:first-of-type { border-top: 0; }
.setting-row p { margin: 3px 0 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.folder { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border-radius: 8px; padding: 8px 8px 8px 12px; font-size: 14px; }
.folder .p { flex: 1; overflow-wrap: anywhere; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.folder .warn { color: var(--danger); font-size: 12px; font-weight: 700; }
code, .mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; background: var(--surface-2); padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere; }
.steps { margin: 6px 0 0; padding-left: 20px; line-height: 1.7; color: var(--muted); }
.steps b { color: var(--text); }

/* ---------- Phones & small tablets ---------- */
@media (max-width: 760px) {
  /* minmax(0, …): nothing in the top bar or a page may make the app wider than the screen (it would cut off the right edge) */
  .app, body.np-visible .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .sidebar, .nowpane { display: none !important; }
  /* The desktop app keeps the Now-playing pane even this narrow: a slim column on the right, above the player bar,
     shown and hidden with the Now-playing button. (Phones don't do this — the pane becomes the expanded player there.) */
  body.desktop-app.np-visible .app { grid-template-columns: minmax(0, 1fr) clamp(200px, 44vw, 300px); grid-template-rows: auto minmax(0, 1fr) auto auto; }
  body.desktop-app.np-visible .nowpane { display: flex !important; grid-column: 2; grid-row: 1 / 3; min-height: 0; border-left: 1px solid rgba(255,255,255,.08); }
  body.desktop-app.np-visible .playerbar, body.desktop-app.np-visible .tabbar { grid-column: 1 / -1; }
  body.desktop-app.np-visible .np-inner { padding: 12px 12px 0; gap: 8px; }
  body.desktop-app.np-visible .np-art .cover { width: 100%; }
  .phone-head { display: flex; grid-row: 1; grid-column: 1; }
  .main { grid-column: 1; grid-row: 2; }
  .view { --view-pt: 16px; --view-px: 16px; padding: 16px 16px 28px; }
  .playerbar { grid-row: 3; grid-column: 1; height: auto; margin: 0 8px 6px; border-radius: var(--radius); border: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--art-1) 28%, var(--surface-2)), color-mix(in srgb, var(--art-2) 18%, var(--surface-2))); display: flex; flex-direction: column; align-items: stretch; padding: 0; gap: 0; position: relative; overflow: hidden; touch-action: pan-y; will-change: transform; }
  .pb-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; }
  .pb-now .cover { width: 42px; border-radius: 5px; }
  .pb-center, .hide-sm { display: none !important; }
  .pb-now { flex: 1; }
  .pb-right { gap: 0; }
  .pb-mini-progress { display: block; height: 2px; background: rgba(255,255,255,.12); margin: 0 8px; }
  /* The desktop app squeezed narrow: phone layout, but the player keeps its buttons and sits flush like the wide bar. */
  body.desktop-app .playerbar { margin: 0; border-radius: 0; border-top: 1px solid rgba(255,255,255,.08); }
  body.desktop-app .pb-center { display: flex !important; flex-direction: row; }
  body.desktop-app .pb-progress { display: none; }
  body.desktop-app .pb-controls { gap: 2px; }
  body.desktop-app .pb-controls .icon-btn.small { width: 32px; height: 32px; }
  body.desktop-app .pb-play { width: 34px; height: 34px; }
  body.desktop-app .pb-right .show-sm, body.desktop-app .pb-right .pb-play-sm { display: none !important; }
  body.desktop-app .pb-now { flex: 1 1 0; min-width: 0; }
  body.desktop-app .pb-center { flex: 0 0 auto; }
  body.desktop-app .pb-right { flex: 1 1 0; justify-content: flex-end; gap: 4px; }
  /* …and the same two-row right side as a narrow desktop window: quality label above, all the icons below. */
  body.desktop-app .pb-right { flex-wrap: wrap; row-gap: 0; justify-content: flex-end; }
  body.desktop-app .pb-right [aria-label="Mini player"], body.desktop-app .pb-right [aria-label="Play on another speaker"], body.desktop-app .pb-right .pb-pane { display: inline-flex !important; }
  /* top line: the volume slider (the quality label is left out here; it's in the full player) */
  body.desktop-app .pb-right .pb-quality { display: none !important; }
  /* one line while it fits; the volume slider drops to a second line only when the window gets too narrow */
  body.desktop-app .pb-right .row { display: inline-flex !important; flex: 0 0 auto; justify-content: flex-end; gap: 4px !important; order: 9; margin-left: 6px; }
  body.desktop-app .pb-right .row .range.volume { max-width: 84px; }
  body.desktop-app .pb-right .icon-btn.small { width: 26px; height: 26px; }
  body.desktop-app .pb-mini-progress { margin: 0; }
  body.desktop-app .tabbar { padding-top: 0; }
  .pb-mini-progress > div { height: 100%; background: var(--text); width: 0; }
  .tabbar { display: flex; grid-row: 4; grid-column: 1; background: linear-gradient(transparent, var(--bg) 35%); padding: 4px 0 calc(4px + var(--safe-b)); }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); padding: 6px 0; position: relative; }
  .tab .icon { width: 24px; height: 24px; }
  .tab.active { color: var(--text); }
  .tab .badge { position: absolute; top: 0; left: calc(50% + 6px); font-size: 10px; padding: 1px 5px; min-width: 16px; }
  .toast { bottom: calc(var(--tabbar-h) + 78px + var(--safe-b)); }
  body:has(#playerbar[hidden]) .toast { bottom: calc(var(--tabbar-h) + 16px + var(--safe-b)); }

  .page-head h1 { font-size: 26px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
  .grid.scroll { grid-auto-columns: 140px; }
  .tile .tile-play { display: none; }
  .quick { grid-template-columns: 1fr 1fr; gap: 8px; }
  .quick a, .quick button { height: 52px; font-size: 13px; gap: 10px; }
  .quick .cover, .quick .q-icon { width: 52px; height: 52px; }

  .hero { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .hero .cover { width: min(64vw, 260px); }
  .hero-meta { justify-content: center; }
  .hero h1 { font-size: 26px; margin: 4px 0 8px; }
  .actions { justify-content: center; }

  .track, .tracks.no-album .track { grid-template-columns: minmax(0, 1fr) 40px 40px; gap: 4px; padding: 6px 4px; min-height: 56px; }
  .t-num, .t-album, .t-dur { display: none !important; }
  .t-like, .t-more { opacity: 1; }
  .t-main .cover { width: 44px; }
  .track.playing .t-eq-sm { display: inline-flex; }
  .track-head { display: none; }

  .compare { grid-template-columns: 90px 1fr 1fr; }
  .setting-row { grid-template-columns: 1fr; }
  .prop-card { flex-wrap: wrap; }
}

@media (min-width: 761px) {
  .pb-row { display: contents; }
  .show-sm { display: none !important; }
}
.flip { transform: rotate(180deg); }

/* Touch screens have no hover: don't leave buttons highlighted after a tap. */
@media (hover: none) {
  .icon-btn:hover, .btn.ghost:hover, .tile:hover, .track:hover, .list-row:hover { background: transparent; }
  .btn:hover { background: var(--surface-2); }
  .btn.primary:hover { background: var(--accent); }
}

/* ---------- Sync calibration ---------- */
.cal-page { max-width: 880px; }
.cal { display: flex; flex-direction: column; gap: 18px; }
.cal-stage { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 7; max-width: 100%; background: #0d0c0b; }
.cal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cal-start { position: absolute; inset: 0; margin: auto; width: max-content; height: 56px; display: inline-flex; align-items: center; gap: 10px; padding: 0 24px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 16px; box-shadow: 0 10px 30px rgba(255, 140, 40, .3); }
.cal-start:hover { background: var(--accent-2); }
.cal-help { margin: 0; padding-left: 22px; color: var(--muted); line-height: 1.7; }
.cal-help b { color: var(--text); }
.cal-controls { display: flex; align-items: center; justify-content: center; gap: 22px; }
.cal-btn { width: 76px; height: 76px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); font-size: 38px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; user-select: none; transition: transform .06s, background .15s; }
.cal-btn:hover { background: var(--surface-3); }
.cal-btn:active { transform: scale(.94); background: var(--accent); color: var(--accent-ink); }
.cal-readout { display: flex; flex-direction: column; align-items: center; min-width: 150px; }
.cal-value { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cal-label { font-size: 13px; color: var(--muted); font-weight: 700; }
.cal-hint { text-align: center; color: var(--faint); font-size: 13px; margin: -6px 0 0; }
.cal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .cal-stage { aspect-ratio: 4 / 3; }
  .cal-btn { width: 68px; height: 68px; }
  .cal-actions { justify-content: stretch; }
  .cal-actions .btn { flex: 1; }
}

/* ---------- Get music, downloads, inbox, organizer ---------- */
.gm-search { display: flex; gap: 10px; align-items: center; max-width: 720px; margin-bottom: 26px; flex-wrap: wrap; }
.gm-search .btn { height: 48px; }
.gm-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-3); color: var(--muted); white-space: nowrap; }
.gm-pill.ok { background: rgba(127, 209, 139, .14); color: var(--ok); }
.gm-pill.warn { background: rgba(255, 107, 91, .14); color: #ff9a8c; }
.gm-pill.accent { background: rgba(255, 157, 61, .16); color: var(--accent); }
.tag-needs.ok { color: var(--ok); }
.gm-initials { background: linear-gradient(135deg, #3a2a18, #6b3f17); color: var(--accent-2); font-size: 34px; font-weight: 800; letter-spacing: .02em; }
.gm-track { grid-template-columns: 34px minmax(0, 1fr) 52px 0 150px !important; }
.gm-owned { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 600; margin-left: 6px; }
.gm-owned .icon { width: 14px; height: 14px; }
.gm-owned.warn { color: #ffb08a; }
.gm-get-track .icon { width: 16px; height: 16px; }
.gm-jobhead { display: flex; gap: 18px; align-items: center; margin-bottom: 22px; }
.gm-jobhead .cover { width: 96px; }
.gm-jobtitle { font-size: 28px; font-weight: 800; margin: 2px 0 4px; }
.gm-source { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 10px; }
.gm-source.best { border-color: rgba(255, 157, 61, .55); box-shadow: 0 0 0 1px rgba(255, 157, 61, .25) inset; }
.gm-source-main { flex: 1; min-width: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.gm-source-main > .btn { align-self: flex-start; }
.gm-source-act { flex: none; }
.gm-folder { display: flex; align-items: center; gap: 6px; font-size: 14px; max-width: 100%; }
.gm-folder .icon { width: 16px; height: 16px; color: var(--muted); flex: none; }
.gm-warn, .gm-ok { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; color: color-mix(in srgb, var(--text) 88%, transparent); line-height: 1.4; }
.gm-warn .icon { color: var(--warn); } .gm-ok .icon { color: var(--ok); } .gm-warn.down .icon { color: var(--danger); }
.gm-warn .icon, .gm-ok .icon { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.warn-text { color: #ffb08a; }
.gm-files { display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: 6px; }
.gm-file { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 8px; border-radius: 6px; background: var(--surface-2); min-width: 0; }
.gm-file > :last-child { flex: none; white-space: nowrap; }
.gm-job { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 14px; }
.gm-job > .cover { width: 64px; }
.gm-job-body { flex: 1; min-width: 0; }
.gm-job-act { flex: none; }
.gm-folder-icon { width: 64px; }
.gm-folder-icon .icon { width: 30px; height: 30px; color: var(--muted); }
.gm-dest { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; margin: 2px 0 4px; }
.gm-dest .icon { width: 15px; height: 15px; color: var(--accent); flex: none; }
.gm-org summary { cursor: pointer; }
.gm-move { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; padding: 6px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.gm-move:first-of-type { margin-top: 10px; }
.page-head .spacer { flex: 1; }
@media (max-width: 760px) {
  .gm-search .btn { width: 100%; }
  .gm-source { flex-direction: column; }
  .gm-source-act, .gm-source-act .btn { width: 100%; }
  .gm-job { flex-wrap: wrap; align-items: flex-start; }
  /* Phones: the title, status and file list get the row's width next to the cover; the buttons go on their own line
     under them instead of squeezing the text to a few letters. */
  .gm-job-body { flex: 1 1 calc(100% - 66px); }
  .gm-job-act { flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; }
  .gm-job-act:empty { display: none; }
  .gm-job .gm-files { margin-left: -66px; width: calc(100% + 66px); } /* a long file list uses the full width, under the cover too */
  .gm-job > .cover, .gm-folder-icon { width: 52px; }
  .gm-track { grid-template-columns: minmax(0, 1fr) 0 136px !important; }
  .gm-track .t-dur, .gm-gap { display: none; }
  .tab span:not(.badge):not(.icon) { font-size: 10px; }
}

/* ===================================================================== */
/* Toggles, segmented buttons, small shared pieces                        */
/* ===================================================================== */
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; justify-self: end; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .slider { position: absolute; inset: 0; background: var(--surface-3); border-radius: 999px; transition: background .15s; cursor: pointer; }
.switch .slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; border-radius: 50%; background: var(--text); transition: transform .15s; }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(18px); background: var(--accent-ink); }
.switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg-btn { height: 34px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.seg-btn .icon { width: 18px; height: 18px; }
.seg-btn.on { background: var(--text); color: var(--bg); }
.chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-x { margin-left: 6px; margin-right: -6px; opacity: .6; display: inline-flex; }
.chip-x .icon { width: 16px; height: 16px; }
.chip-ic { width: 16px; height: 16px; margin-right: 6px; }
.tile-why { font-size: 12px; color: var(--faint); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-x { position: absolute; right: 18px; top: 18px; z-index: 2; background: rgba(0,0,0,.6); border-radius: 50%; opacity: 0; }
.tile:hover .tile-x { opacity: 1; }
.home-bell { position: relative; }
.home-bell .badge { position: absolute; top: 2px; right: 0; font-size: 10px; padding: 1px 5px; min-width: 16px; }
.icon-btn.on, .icon-btn.small.on { color: var(--accent); }

/* Mix tiles get a label on the cover */
.mix-cover { position: relative; }
.mix-cover::after { content: ""; position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(160deg, rgba(255,157,61,.0) 30%, rgba(18,17,16,.85)); }
.mix-label { position: absolute; left: 10px; bottom: 10px; right: 10px; z-index: 1; font-weight: 800; font-size: 17px; line-height: 1.1; text-shadow: 0 2px 8px rgba(0,0,0,.6); }

/* ===================================================================== */
/* Lyrics (full player, stage lyrics mode, Singer view)                  */
/* ===================================================================== */
.fp-lyrics { flex: 1; min-height: 0; display: flex; padding: 8px 0; overflow: hidden; }
.lyrics { position: relative; display: flex; flex-direction: column; width: 100%; min-height: 0; flex: 1; }
.lyrics-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 12% 4px 45%; scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 80%, transparent); }
.lyrics-body::-webkit-scrollbar { display: none; }
.lyric-line { margin: 0 0 16px; font-size: 24px; font-weight: 800; line-height: 1.3; color: rgba(255,255,255,.38); cursor: pointer; transition: color .25s, transform .25s, opacity .25s; transform-origin: left center; }
.lyric-line:hover { color: rgba(255,255,255,.6); }
.lyric-line.past { color: rgba(255,255,255,.55); }
.lyric-line.on { color: rgba(255,255,255,.5); transform: scale(1.04); }
/* Laid out a little narrower than the panel, so the current line's 4% growth fills it instead of running past the edge
   (scaling doesn't re-wrap). The same for every line, so lines wrap the same whether current or not. */
.lyrics-body .lyric-line { max-width: calc(100% / 1.04); }
.lyric-line.past:has(+ .lyric-line.on) { opacity: .75; }
.lw { --p: 0%; }
.lyric-line.on .lw, .lyric-line.past .lw {
  background: linear-gradient(90deg, #fff var(--p), rgba(255,255,255,.45) var(--p));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* text painted through its background shows only inside the word's box: heavy stage letters (and accents, tails)
     reach past it and were cut off. A little room around each word, given back with margins so nothing moves. */
  padding: .16em .08em; margin: -.16em -.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.lyric-line.past .lw { --p: 100% !important; background: none; color: rgba(255,255,255,.55); }
.lyrics.big .lyric-line { font-size: clamp(30px, 4.4vw, 64px); margin-bottom: .45em; }
.lyrics.big .lyric-line.on .lw { background: linear-gradient(90deg, var(--accent-2) var(--p), rgba(255,255,255,.5) var(--p)); -webkit-background-clip: text; background-clip: text; }
.lyrics-plain p { margin: 0 0 10px; font-size: 20px; font-weight: 700; color: rgba(255,255,255,.8); line-height: 1.35; }
.lyrics-msg { text-align: center; color: rgba(255,255,255,.7); margin: auto; padding: 30px 10px; }
.lyrics-msg p { margin: 0 0 8px; }
/* A message (no lyrics, couldn't reach the library) isn't scrolling text: no fade over its last button. */
.lyrics-body:has(> .lyrics-msg) { -webkit-mask-image: none; mask-image: none; padding-top: 0; padding-bottom: 0; display: flex; }
.lyrics-tools { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 6px; color: rgba(255,255,255,.7); font-size: 12px; }
.lyrics-tools .icon-btn { font-size: 20px; font-weight: 700; width: 34px; height: 34px; }
.lyrics-offset { min-width: 62px; text-align: center; font-variant-numeric: tabular-nums; }
.fp-tools { display: flex; gap: 2px; align-items: center; }
.fp-q { display: flex; flex-direction: column; gap: 2px; }
.fp-sleep { color: var(--accent); font-weight: 700; }

/* ===================================================================== */
/* Karaoke controller page                                               */
/* ===================================================================== */
/* Karaoke / Party: heading stays at the left edge; the intro line and cards sit centred in an 820px column. */
.karaoke-page .page-head { flex-wrap: wrap; }
.karaoke-page > p, .karaoke-page > .card, .karaoke-page > .stack, .karaoke-page > .party-body { max-width: 820px; margin-left: auto; margin-right: auto; }
.karaoke-page .card { margin-bottom: 16px; }
.k-display-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.k-now { display: flex; align-items: center; gap: 12px; }
.k-now .cover { width: 56px; border-radius: 6px; }
.k-controls { display: flex; align-items: center; gap: 14px; }
.k-syncpad { background: var(--surface-2); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.k-syncpad .btn:not(.small) { min-width: 56px; font-size: 22px; font-weight: 800; }
.k-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.k-choice { text-align: left; background: var(--surface-2); border: 2px solid transparent; border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.k-choice span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.k-choice.on { border-color: var(--accent); background: rgba(255,157,61,.08); }
.k-choice:disabled { opacity: .5; cursor: not-allowed; }
.stage-code-input { font-size: 30px; letter-spacing: .25em; text-align: center; height: 60px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .k-choices { grid-template-columns: 1fr; } }

/* ===================================================================== */
/* Stage display                                                         */
/* ===================================================================== */
body.stage-only { overflow: hidden; }
body.stage-open > :not(.stage):not(.toast-wrap):not(.modal-backdrop) { visibility: hidden; }
.stage { position: fixed; inset: 0; z-index: 200; background: #05030a; color: #fff; overflow: hidden; outline: none; font-family: var(--font); user-select: none; }
.stage-bg, .stage-layer, .stage-vhs { position: absolute; inset: 0; }
.stage-layer { display: flex; align-items: center; justify-content: center; z-index: 2; }
.stage-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s; filter: saturate(1.15) brightness(.62); }
.stage-bg video.on { opacity: 1; }
.bg-art-img { position: absolute; inset: -10%; background: center/cover no-repeat #1a0f05; filter: blur(42px) brightness(.45) saturate(1.3); animation: kenburns 40s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1.25) translate(2%, -2%); } }
.stage-bg canvas { width: 100%; height: 100%; display: block; }
.bg-retro { background: linear-gradient(#12002b, #3b0a4d 55%, #ff4f8b 56%, #12002b 57%); }
.retro-sky { position: absolute; inset: 0 0 45% 0; display: flex; justify-content: center; align-items: flex-end; }
.retro-sun { width: 34vmin; height: 34vmin; border-radius: 50%; margin-bottom: -10vmin; background: linear-gradient(#ffd23f, #ff6b3d 60%, #ff2e88); -webkit-mask-image: linear-gradient(#000 55%, transparent 55% 59%, #000 59% 67%, transparent 67% 71%, #000 71% 79%, transparent 79% 83%, #000 83%); mask-image: linear-gradient(#000 55%, transparent 55% 59%, #000 59% 67%, transparent 67% 71%, #000 71% 79%, transparent 79% 83%, #000 83%); filter: drop-shadow(0 0 40px rgba(255,80,140,.6)); }
.retro-grid { position: absolute; left: -50%; right: -50%; bottom: 0; height: 46%; transform: perspective(300px) rotateX(62deg); transform-origin: bottom; background-image: linear-gradient(rgba(255,70,200,.8) 2px, transparent 2px), linear-gradient(90deg, rgba(255,70,200,.8) 2px, transparent 2px); background-size: 60px 60px; animation: grid 1.4s linear infinite; }
@keyframes grid { to { background-position: 0 60px; } }
.bg-waves { background: #0b0420; }
.waves-a, .waves-b { position: absolute; inset: -40%; background: radial-gradient(circle at 30% 30%, rgba(255,91,170,.55), transparent 40%), radial-gradient(circle at 70% 60%, rgba(70,120,255,.55), transparent 42%), radial-gradient(circle at 40% 80%, rgba(255,170,60,.45), transparent 40%); filter: blur(30px); animation: drift 22s ease-in-out infinite alternate; }
.waves-b { animation-duration: 31s; animation-direction: alternate-reverse; opacity: .7; }
@keyframes drift { from { transform: rotate(0) scale(1); } to { transform: rotate(40deg) scale(1.2); } }
.stage-vhs { z-index: 3; pointer-events: none; display: none; }
.stage.vhs-on .stage-vhs { display: block; background: repeating-linear-gradient(rgba(0,0,0,.18) 0 2px, transparent 2px 4px); animation: vhsflick .12s steps(2) infinite; }
.stage.vhs-on .stage-vhs::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.05), transparent 3%, transparent 97%, rgba(255,255,255,.04)); animation: vhsroll 7s linear infinite; }
@keyframes vhsflick { 50% { opacity: .85; } }
@keyframes vhsroll { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
.stage.vhs-on .k-title { text-shadow: 2px 0 rgba(255,0,80,.55), -2px 0 rgba(0,200,255,.55), 0 4px 18px rgba(0,0,0,.8); }
.stage.vhs-on .k-line { filter: drop-shadow(2px 0 rgba(255,0,80,.6)) drop-shadow(-2px 0 rgba(0,200,255,.6)) drop-shadow(0 3px 0 rgba(0,0,0,.9)); }
.stage-osd { position: absolute; z-index: 4; left: 5vw; top: 5vh; font: 800 clamp(22px, 3.2vw, 46px)/1 ui-monospace, "Consolas", monospace; color: #9cff6e; text-shadow: 2px 2px 0 #000; opacity: 0; transition: opacity .3s; letter-spacing: .05em; }
.stage-osd.on { opacity: 1; }
.stage-corner { position: absolute; z-index: 4; right: 2.4vw; bottom: 2vh; font-size: clamp(12px, 1.2vw, 18px); color: rgba(255,255,255,.45); font-weight: 700; }
.stage-fs, .stage-exit { position: absolute; z-index: 5; top: 16px; height: 40px; padding: 0 12px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; opacity: .55; }
.stage-fs { right: 16px; width: 40px; padding: 0; justify-content: center; }
.stage-exit { left: 16px; }
.stage-fs:hover, .stage-exit:hover, .stage-fs:focus-visible, .stage-exit:focus-visible { opacity: 1; }
.stage-idle { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2.4vh; padding: 20px; }
.stage-logo { width: clamp(64px, 9vw, 120px); border-radius: 22%; }
.stage-brand { font-size: clamp(28px, 4vw, 60px); font-weight: 800; letter-spacing: -.02em; }
.stage-brand span { color: var(--accent); }
.stage-code-label { font-size: clamp(16px, 1.8vw, 28px); color: rgba(255,255,255,.75); max-width: 30em; }
.stage-code { font-size: clamp(64px, 12vw, 190px); font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 40px rgba(255,157,61,.5); margin-top: 1vh; }
.stage-unlock { background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: clamp(16px, 1.8vw, 26px); padding: .7em 1.3em; border-radius: 999px; display: inline-flex; align-items: center; gap: .5em; }
.stage-unlock.floating { position: absolute; bottom: 8vh; left: 50%; transform: translateX(-50%); z-index: 5; }
.stage-small-btn { color: rgba(255,255,255,.65); display: inline-flex; gap: 6px; align-items: center; font-weight: 700; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); }
.stage-card { text-align: center; }
.stage-card-kicker { color: var(--accent); font-weight: 800; font-size: clamp(16px, 2vw, 30px); }
.stage-card-title { font-size: clamp(36px, 6vw, 96px); font-weight: 800; margin-top: 1vh; }
.stage-card-artist { font-size: clamp(20px, 2.6vw, 40px); color: rgba(255,255,255,.75); }
.stage-prep { margin-top: 4vh; font-size: clamp(16px, 1.6vw, 24px); color: rgba(255,255,255,.7); }
.stage-lyrics-mode { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(200px, 28vw) 1fr; gap: 4vw; padding: 7vh 6vw; align-items: center; }
.stage-now img { width: 100%; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.stage-now-title { font-size: clamp(22px, 2.4vw, 40px); font-weight: 800; margin-top: 18px; }
.stage-now-artist { font-size: clamp(16px, 1.6vw, 26px); color: rgba(255,255,255,.7); }
.stage-lyrics-mode .lyrics { height: 86vh; }
@media (max-aspect-ratio: 1/1) { .stage-lyrics-mode { grid-template-columns: 1fr; } .stage-now { display: none; } }
.stage-cal { position: absolute; inset: 0; z-index: 6; background: rgba(5,3,10,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4vh 4vw; gap: 10px; text-align: center; }
.stage-cal h2 { font-size: clamp(24px, 3vw, 44px); }
.stage-cal p { color: rgba(255,255,255,.75); max-width: 40em; margin: 0 0 10px; }
.stage-cal .cal { width: min(900px, 92vw); }

/* Classic two-line karaoke */
.k-stage { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 6vw 12vh; }
.k-title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: opacity .8s, transform .8s; z-index: 1; padding: 0 6vw; }
.k-title.gone { opacity: 0; transform: scale(.96); pointer-events: none; }
.k-title-song { font-size: clamp(44px, 7.5vw, 130px); font-weight: 900; letter-spacing: -.02em; line-height: 1.02; color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.7); }
.k-title-artist { font-size: clamp(22px, 3vw, 50px); font-weight: 700; color: var(--accent-2); margin-top: 1.5vh; }
.k-title-singer { margin-top: 5vh; font-size: clamp(20px, 2.4vw, 40px); font-weight: 800; background: rgba(0,0,0,.45); padding: .35em 1em; border-radius: 999px; }
.k-title-singer span { color: rgba(255,255,255,.65); font-weight: 600; }
.k-lines { display: flex; flex-direction: column; gap: 2.2vh; position: relative; }
.k-line { min-height: 1.25em; font-size: clamp(34px, 5vw, 86px); font-weight: 900; line-height: 1.15; letter-spacing: -.01em; color: #fff; filter: drop-shadow(0 3px 0 rgba(0,0,0,.9)) drop-shadow(0 6px 16px rgba(0,0,0,.6)); transition: opacity .3s; }
.k-line:nth-child(2) { text-align: left; }
.k-line:nth-child(3) { text-align: right; }
.k-line.empty { opacity: 0; }
.kw { --p: 0%; background: linear-gradient(90deg, var(--accent) var(--p), #fff var(--p)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-stage.titling .k-lines { opacity: 0; }
.k-lines { transition: opacity .6s; }
.k-dots { position: absolute; top: -6vh; left: 0; display: flex; gap: 1.6vw; opacity: 0; transition: opacity .3s; }
.k-dots.on { opacity: 1; }
.k-notes { top: -9vh; gap: 1.2vw; }
.k-notes .kn { --p: 0%; font-size: clamp(30px, 4.2vw, 72px); font-weight: 900; line-height: 1; background: linear-gradient(90deg, var(--accent) var(--p), rgba(255,255,255,.28) var(--p)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(0,0,0,.9)) drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 45%, transparent)); display: inline-block; animation: note-bob 1.6s ease-in-out infinite; }
.k-notes .kn:nth-child(2) { animation-delay: .2s; } .k-notes .kn:nth-child(3) { animation-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .k-notes .kn { animation: none; } }
.k-plain { margin: auto; font-size: clamp(18px, 2vw, 30px); color: rgba(255,255,255,.75); text-align: center; }
.k-next { position: absolute; right: 4vw; top: 6vh; background: rgba(0,0,0,.55); padding: .6em 1.1em; border-radius: 14px; font-size: clamp(16px, 1.8vw, 28px); backdrop-filter: blur(8px); }
.k-next-label { color: var(--accent); font-weight: 800; font-size: .75em; }

/* Singer view (teleprompter) */
.singer { position: fixed; inset: 0; z-index: 150; background: #000; display: flex; flex-direction: column; padding: max(10px, env(safe-area-inset-top)) 14px max(14px, var(--safe-b)); }
.singer-top { display: flex; align-items: center; gap: 6px; }
.singer-title { flex: 1; font-weight: 700; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.singer-body { flex: 1; min-height: 0; display: flex; }
.singer .lyrics.big .lyric-line { font-size: calc(clamp(30px, 8.5vw, 72px) * var(--singer-scale, 1)); }
.singer.mirror .singer-body { transform: scaleX(-1); }

/* ===================================================================== */
/* Car mode                                                              */
/* ===================================================================== */
body.car-on #playerbar, body.car-on #tabbar, body.car-on #sidebar { display: none !important; }
.car { position: fixed; inset: 0; z-index: 120; background: #000; display: flex; flex-direction: column; padding: max(14px, env(safe-area-inset-top)) 20px max(18px, var(--safe-b)); gap: 18px; }
.car-top { display: flex; justify-content: space-between; align-items: center; }
.car-exit { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--muted); padding: 10px 4px; }
.car-clock { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.car-now { display: flex; gap: 20px; align-items: center; flex: 1; min-height: 0; }
.car-art { width: min(38vw, 42vh); flex: none; }
.car-art .cover { border-radius: 14px; }
.car-text { flex: 1; min-width: 0; }
.car-title { font-size: clamp(26px, 5vw, 46px); font-weight: 800; line-height: 1.1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.car-artist { font-size: clamp(16px, 3vw, 24px); color: var(--muted); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car-progress { height: 6px; background: var(--surface-3); border-radius: 6px; margin-top: 20px; overflow: hidden; }
.car-progress > div { height: 100%; background: var(--accent); }
.car-controls { display: flex; justify-content: space-around; align-items: center; }
.car-btn { width: 84px; height: 84px; border-radius: 50%; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; }
.car-btn .icon { width: 40px; height: 40px; }
.car-btn.main { width: 110px; height: 110px; background: var(--accent); color: var(--accent-ink); }
.car-btn.main .icon { width: 52px; height: 52px; }
.car-btn.on { color: var(--accent); }
.car-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.car-tile { background: var(--surface-2); border-radius: 16px; height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 15px; }
@media (max-width: 600px) and (orientation: portrait) {
  .car-now { flex-direction: column; text-align: center; }
  .car-art { width: min(70vw, 34vh); }
  .car-tile { height: 64px; font-size: 13px; }
}

/* ===================================================================== */
/* Notifications, wishlist, recap                                        */
/* ===================================================================== */
.notif.unread { background: rgba(255,157,61,.06); }
.notif-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--accent); flex: none; }
.wish { margin-bottom: 12px; display: flex; flex-direction: column; gap: 12px; }
.wish-main { display: flex; align-items: center; gap: 12px; }
.wish-main .cover, .wish-main img { width: 64px; height: 64px; border-radius: 6px; flex: none; object-fit: cover; }
.wish-opts { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.recap-hero { background: linear-gradient(135deg, #ff9d3d, #ff3d7a 60%, #6b3dff); color: #fff; border-radius: var(--radius-lg); padding: 28px; margin-bottom: 18px; }
.recap-personality .k { font-size: 13px; font-weight: 700; opacity: .85; }
.recap-personality .v { font-size: 38px; font-weight: 900; letter-spacing: -.02em; }
.recap-personality p { margin: 4px 0 0; opacity: .9; }
.recap-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.recap-stat .n { font-size: 30px; font-weight: 900; }
.recap-stat .l { font-size: 13px; opacity: .85; }
.recap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }
.recap-list ol { margin: 8px 0 0; padding-left: 22px; }
.recap-list li { margin: 8px 0; }
.recap-row { display: flex; align-items: center; gap: 10px; }
.recap-row .cover { width: 40px; border-radius: 4px; flex: none; }
.recap-bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; margin-top: 12px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.bar-col .bar { width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; }
.bar-col span { font-size: 11px; color: var(--muted); }
@media (max-width: 760px) { .recap-stats { grid-template-columns: repeat(2, 1fr); } .recap-personality .v { font-size: 30px; } }

/* ===================================================================== */
/* Review feedback: compact Get music header, one-line import actions     */
/* ===================================================================== */
@media (max-width: 760px) {
  .gm-head { margin-bottom: 12px; }
  .gm-inbox-btn { width: 44px; padding: 0; justify-content: center; position: relative; }
  .gm-inbox-btn .badge { position: absolute; top: -4px; right: -4px; font-size: 10px; padding: 1px 5px; min-width: 16px; }
  .gm-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px; scrollbar-width: none; }
  .gm-tabs::-webkit-scrollbar { display: none; }
  .gm-tabs .chip { flex: none; height: 32px; }
  .gm-search { gap: 8px; margin-bottom: 14px; }
  .gm-search-btn { width: 46px; padding: 0; justify-content: center; flex: none; }
  .gm-import-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .gm-import-hint { text-align: center; }
  .gm-import-btns { display: flex; gap: 10px; }
  .gm-import-btns .btn { flex: 1; justify-content: center; }
}
.gm-import-btns { display: flex; gap: 10px; }
@media (max-width: 760px) {
  .gm-search { flex-wrap: nowrap !important; }
  .page-head.row.between { flex-wrap: nowrap; }
  .page-head.row.between h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24px; }
}
@media (max-width: 760px) {
  .gm-tabs { margin: 0 0 12px; padding: 0; max-width: 100%; }
  .gm-search .search-box { min-width: 0; }
  .gm-search .search-box input { min-width: 0; width: 100%; }
  .page-head.row.between > .row { flex-wrap: nowrap; flex: none; }
}
#main { overflow-x: hidden; }
@media (max-width: 760px) {
  .gm-search .gm-search-btn { flex: 0 0 48px !important; width: 48px !important; min-width: 0; padding: 0; }
  .gm-search .search-box { flex: 1 1 auto !important; }
}

.setup-opt { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin: 6px 0 4px; }
.setup-opt input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.setup-opt .hint { margin: 0; }
.stage-cal { background: #05030a; overflow-y: auto; justify-content: flex-start; padding-top: 3vh; }
.stage-cal h2 { font-size: clamp(20px, 2.4vw, 36px); }
.stage-cal .cal { width: min(760px, 92vw); }
.stage-cal ol, .stage-cal ul { text-align: left; }
/* Review round 4 */
.stage-code-label { white-space: nowrap; }
.k-display-btns { flex-wrap: nowrap; }
.k-display-btns .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 10px; white-space: nowrap; gap: 6px; }
.k-display-btns .btn .icon { width: 18px; height: 18px; }
.singer .stage-bg { position: absolute; inset: 0; z-index: 0; }
.singer-shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,.6)); }
.singer.vhs-on .singer-shade { background: repeating-linear-gradient(rgba(0,0,0,.6) 0 2px, rgba(0,0,0,.42) 2px 4px); }
.singer-top, .singer-body { position: relative; z-index: 1; }
.singer .lyric-line { filter: drop-shadow(0 2px 6px rgba(0,0,0,.85)); }
.singer.mirror .stage-bg { transform: scaleX(-1); }
/* Car mode, round 4 */
.car { overflow: hidden; }
.car-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; }
.car-bg .bg-art-img { filter: blur(48px) brightness(.38) saturate(1.35); }
.car > :not(.car-bg) { position: relative; z-index: 1; }
.car-top { gap: 12px; }
.car-clock { margin-left: auto; }
.car-top-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.1); font-weight: 700; }
.car-top-btn.on { background: var(--accent); color: var(--accent-ink); }
.car-art { display: block; }
.car-link { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.75); font-size: clamp(15px, 2.6vw, 21px); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 0; }
.car-link .icon { width: 18px; height: 18px; flex: none; }
.car-link.car-artist { color: #fff; font-weight: 700; }
.car-source { color: var(--accent-2); font-weight: 700; }
.car-now.lyrics-on { flex-direction: column; align-items: stretch; gap: 10px; }
.car-lyrics { flex: 1; min-height: 0; display: flex; }
.car-lyrics .lyrics.big .lyric-line { font-size: clamp(26px, 6vw, 52px); }
.car-text.small .car-title { font-size: 20px; }
.car-text.small .car-progress { margin-top: 10px; }
.car-btn { background: rgba(255,255,255,.12); }
.car-tile { background: rgba(255,255,255,.1); backdrop-filter: blur(10px); }
.car-tile.on { color: var(--accent); }
.k-note { margin-top: 3vh; max-width: 40em; font-size: clamp(14px, 1.4vw, 22px); color: rgba(255,255,255,.8); background: rgba(0,0,0,.45); padding: .5em 1em; border-radius: 12px; }
.car-exit { white-space: nowrap; font-size: 15px; }
.car-clock { white-space: nowrap; }
@media (max-width: 420px) { .car-exit > span:not(.icon), .car-top-btn > span:not(.icon) { display: none; } .car-top-btn { width: 48px; padding: 0; justify-content: center; } }
@media (max-width: 600px) and (orientation: portrait) { .car-link { justify-content: center; } }
.car-exit .icon { width: 26px; height: 26px; }
@media (max-width: 760px) { .k-display-btns { gap: 6px; } .k-display-btns .btn { font-size: 14px; padding: 0 8px; gap: 4px; height: 44px; } }
@media (max-width: 360px) { .k-display-btns .btn .icon { display: none; } }
/* Review round 5: display buttons as equal tiles on phones, so labels never overflow */
@media (max-width: 760px) {
  .k-display-btns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
  .k-display-btns .btn { flex-direction: column; height: auto; min-height: 64px; padding: 10px 4px; gap: 4px; font-size: 13px; line-height: 1.15; white-space: normal; text-align: center; border-radius: 14px; }
  .k-display-btns .btn .icon { display: inline-flex !important; width: 22px; height: 22px; }
}
.k-ready-pill { height: 18px; font-size: 10.5px; padding: 0 7px; margin-right: 6px; vertical-align: 1px; }
.k-ready-list { max-height: 420px; overflow-y: auto; }
/* Car mode lyrics layout */
.car-now.lyrics-on { gap: 12px; }
.car-mini { display: flex; align-items: center; gap: 14px; text-align: left; }
.car-mini .car-art { width: 76px; flex: none; }
.car-mini .car-art .cover { border-radius: 8px; }
.car-mini-text { min-width: 0; flex: 1; }
.car-mini-text .car-title { font-size: 22px; -webkit-line-clamp: 1; }
.car-mini-text .car-link { justify-content: flex-start !important; margin-top: 2px; padding: 2px 0; font-size: 15px; }
.car-now.lyrics-on > .car-progress { margin-top: 0; }
.car-now.lyrics-on .car-lyrics { flex: 1; min-height: 0; }
/* Singer view: song title on top, lyrics start below it */
.singer-top .spacer { flex: 1; }
.singer-head { position: relative; z-index: 1; text-align: center; padding: 4px 8px 10px; }
.singer-song { font-size: calc(clamp(26px, 7vw, 48px) * var(--singer-scale, 1)); font-weight: 900; line-height: 1.1; letter-spacing: -.01em; filter: drop-shadow(0 2px 6px rgba(0,0,0,.8)); }
.singer-sub { margin-top: 4px; color: rgba(255,255,255,.75); font-weight: 600; font-size: 15px; }
.singer .lyrics-body { padding-top: 12px; -webkit-mask-image: linear-gradient(#000, #000 82%, transparent); mask-image: linear-gradient(#000, #000 82%, transparent); }

/* ===================================================================== */
/* Desktop app: mini player and drag-and-drop                            */
/* ===================================================================== */
.mini { display: none; }
body.mini-on #app, body.mini-on #auth, body.mini-on #fullplayer, body.mini-on #nowplaying { display: none !important; }
body.mini-on { background: #141210; }
body.mini-on .mini { display: block; height: 100vh; position: relative; overflow: hidden; }
.mini-drag { position: absolute; inset: 0; -webkit-app-region: drag; z-index: 1; }
.mini-art { position: absolute; inset: 0; opacity: 1; transition: opacity .35s; z-index: 0; }
/* "Accent colour" mode follows the Appearance setting, scaled down: Low = a flat tint, Medium = the two-colour wash,
   High = the cover blurred the way the main window does it (Crisp / Blur / Blur zoom), just with smaller blur radii. */
body.mini-accent .mini-art { opacity: 0; }
body.mini-accent .mini { background: color-mix(in srgb, var(--art-1) 28%, #141210); }
.art-mode body.mini-accent .mini { background: linear-gradient(135deg, color-mix(in srgb, var(--art-1) 55%, #141210), color-mix(in srgb, var(--art-2) 40%, #141210)); }
.art-high body.mini-accent .mini-art { opacity: 1; }
.art-high body.mini-accent .mini-art .cover img { filter: blur(14px) saturate(1.4) brightness(.5); transform: scale(1.15); }
.art-high.art-zoom body.mini-accent .mini-art .cover img { filter: blur(10px) saturate(1.5) brightness(.5); transform: scale(1.9); }
.art-high.art-crisp body.mini-accent .mini-art .cover img { filter: blur(3px) saturate(1.2) brightness(.45); transform: scale(1.08); }
.mini-art .cover { width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; }
.mini-art .cover img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(1.1); }
.mini-body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding-bottom: 4px; pointer-events: none; }
.mini-controls { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.mini-btn { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text); -webkit-app-region: no-drag; background: rgba(0,0,0,.25); }
.mini-btn:hover { background: rgba(255,255,255,.18); }
.mini-btn.mini-main { background: var(--text); color: var(--bg); width: 44px; height: 44px; }
.mini-btn.mini-main:hover { background: #fff; }
.mini-text { text-align: center; max-width: 92%; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.mini-title { font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-artist { color: rgba(255,255,255,.75); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-restore { position: absolute; top: 4px; right: 4px; z-index: 3; width: 26px; height: 26px; opacity: 0; transition: opacity .35s; color: rgba(255,255,255,.8); }
.mini-restore .icon { width: 16px; height: 16px; }
.mini-restore { opacity: .85; } /* always there: the way back to the full window */
.mini:hover .mini-restore { opacity: 1; }
.mini-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.12); z-index: 3; }
.mini-progress > div { height: 100%; background: var(--art-1); }
body.dropping::after { content: "Drop music files or folders to add them"; position: fixed; inset: 12px; z-index: 300; border: 3px dashed var(--accent); border-radius: 18px; background: rgba(18, 17, 16, .82); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: var(--accent); pointer-events: none; }

/* Remote access card */
.ok-text { color: var(--ok); }
.remote-name { display: flex; align-items: center; gap: 4px; background: var(--surface-2, #1f1c18); border: 1px solid var(--line, #2c2823); border-radius: 12px; padding: 0 12px; min-width: 0; }
.remote-name .input { border: 0; background: transparent; padding-left: 2px; padding-right: 2px; min-width: 0; flex: 1; box-shadow: none; }
.remote-name span { font-size: 14px; white-space: nowrap; }
.remote-url { display: flex; gap: 16px; align-items: center; }
.remote-qr { width: 132px; height: 132px; border-radius: 12px; background: #fff; padding: 6px; flex: none; }
.remote-link { font-weight: 700; font-size: 17px; color: var(--accent); word-break: break-all; }
.remote-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.remote-facts dt { color: var(--faint, #6f675d); }
.remote-facts dd { margin: 0; color: var(--muted); }
.remote-lan summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: 14px; }
.remote-lan[open] summary { margin-bottom: 6px; }
@media (max-width: 520px) { .remote-url { flex-direction: column; align-items: flex-start; } .remote-facts { grid-template-columns: 1fr; gap: 2px; } .remote-facts dd { margin-bottom: 6px; } }

/* Install banner (phones) */
.install-banner { position: fixed; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top)); z-index: 60; display: flex; gap: 12px; align-items: flex-start; padding: 14px 12px 14px 14px; border-radius: var(--radius-lg); background: var(--surface-2, #1f1c18); border: 1px solid var(--line); box-shadow: 0 16px 48px rgba(0,0,0,.5); transform: translateY(-140%); transition: transform .3s ease; max-width: 520px; margin: 0 auto; }
.install-banner.on { transform: none; }
.install-icon { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.install-text { display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.45; color: var(--muted); min-width: 0; flex: 1; }
.install-text b { color: var(--text); }
.install-text > b:first-child { font-size: 15px; }
.install-close { flex: none; margin: -4px -2px 0 0; }

/* Home: library bar and loading tiles */
.library-bar { flex-wrap: wrap; margin-bottom: 22px; }
.library-bar p { line-height: 1.5; }
.library-bar .bar-path { display: block; margin-top: 2px; }
.library-bar code { font-size: 12px; word-break: break-all; color: var(--faint); background: none; padding: 0; }
@media (max-width: 640px) { .library-bar { padding: 10px 14px; gap: 10px; font-size: 14px; margin-bottom: 18px; } .library-bar p { min-width: 0; flex: 1 1 calc(100% - 44px); } .library-bar > .row { margin-left: 34px; } .library-bar .btn.small { height: 34px; padding: 0 14px; } }
.tile-skeleton { pointer-events: none; }
.tile-skeleton .skel-cover { aspect-ratio: 1; border-radius: var(--radius, 12px); background: var(--surface-2); animation: skel 1.4s ease-in-out infinite; }
.tile-skeleton .skel-line { height: 12px; border-radius: 6px; background: var(--surface-2); margin-top: 10px; width: 80%; animation: skel 1.4s ease-in-out infinite; }
.tile-skeleton .skel-line.short { width: 50%; }
@keyframes skel { 50% { opacity: .45; } }

/* Home discover rows */
.artist-tile .cover.round { position: relative; overflow: hidden; display: grid; place-items: center; aspect-ratio: 1; }
.artist-tile .cover.round img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.artist-tile { text-align: center; }
.song-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-auto-columns: minmax(280px, 340px); gap: 4px 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px;  overflow-y: hidden;}
.song-grid::-webkit-scrollbar { display: none; }
.song-cell { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 10px; text-align: left; min-width: 0; color: inherit; background: none; border: 0; cursor: pointer; }
.song-cell:hover { background: var(--surface-2); }
.song-cell .cover { width: 48px; height: 48px; flex: none; border-radius: 6px; }
.song-rank { width: 20px; flex: none; text-align: right; color: var(--faint); font-weight: 700; font-size: 14px; }
.song-text { min-width: 0; flex: 1; }
.song-title { font-weight: 700; }
.song-owned { color: var(--accent); flex: none; }
.genre-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 96px); grid-auto-columns: 170px; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px;  overflow-y: hidden;}
.genre-grid::-webkit-scrollbar { display: none; }
.genre-tile { border-radius: var(--radius); padding: 14px; display: flex; align-items: flex-end; color: #fff; font-weight: 800; font-size: 18px; text-shadow: 0 1px 8px rgba(0,0,0,.35); transition: transform .12s; }
.genre-tile:hover { transform: scale(1.02); }
.genre-hero { border-radius: var(--radius-lg, 18px); padding: 56px 24px 24px; margin-bottom: 24px; color: #fff; }
.genre-hero h1 { font-size: 44px; font-weight: 800; margin: 4px 0 0; }
@media (max-width: 640px) { .song-grid { grid-auto-columns: 82%; } .genre-grid { grid-auto-columns: 140px; grid-template-rows: repeat(2, 84px); } .genre-hero h1 { font-size: 34px; } }
.format-wrap { display: flex; gap: 6px; margin-right: 10px; }
.format-pick { height: 40px; border: 0; color: var(--text); cursor: pointer; padding-right: 30px; appearance: none; -webkit-appearance: none; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a89e90'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center / 18px; font-family: inherit; }
.format-pick:disabled { opacity: .5; }

.naming-note { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.naming-note code { font-size: 13px; color: var(--text); word-break: break-word; }
.naming-note code span { color: var(--faint); }

/* Soulseek health */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.stat-value { font-size: 22px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-label { font-weight: 700; font-size: 13px; margin-top: 2px; }
.stat-sub { color: var(--faint); font-size: 12px; margin-top: 2px; }
.slsk-note { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--muted); }
.slsk-note .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.slsk-note.warn { background: rgba(255, 107, 91, .1); color: #ffb0a5; }
.slsk-note.warn .icon { color: #ff8a7a; }
.slsk-note.ok .icon { color: var(--ok); }
.slsk-note.info .icon { color: var(--accent); }
.slsk-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.slsk-row { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.slsk-row:last-child { border-bottom: 0; }
@media (max-width: 640px) { .slsk-row { grid-template-columns: minmax(0, 1fr) auto; } .stat-value { font-size: 19px; } }

/* Sideways rows on a computer: drag to scroll, ‹ › buttons, columns that fit exactly */
.section-head { display: flex; align-items: center; gap: 8px; }
.section-head h2 { flex: 1; min-width: 0; }
.row-nav { display: flex; gap: 4px; }
.row-nav-btn:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .grid.scroll, .song-grid, .genre-grid { cursor: grab; }
  .dragging { cursor: grabbing; user-select: none; }
  .dragging * { pointer-events: none; }
  .song-grid { grid-auto-columns: calc((100% - 2 * 18px) / 3); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1500px) { .song-grid { grid-auto-columns: calc((100% - 3 * 18px) / 4); } }
@media (hover: hover) and (pointer: fine) and (max-width: 900px) { .song-grid { grid-auto-columns: calc((100% - 18px) / 2); } }

/* Feedback */
.side-feedback { margin-top: auto; width: 100%; text-align: left; flex: none; }
.sidebar .icon { width: 20px; height: 20px; }
.fb-form .seg { align-self: flex-start; }
.fb-include { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; }
.fb-include input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.fb-preview { max-height: 240px; overflow: auto; background: #0c0b0a; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 12px; line-height: 1.45; color: var(--muted); white-space: pre-wrap; word-break: break-word; margin: 6px 0 0; }
.fb-preview.tall { max-height: 60vh; }
.fb-list { display: flex; flex-direction: column; gap: 8px; }
.fb-item { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.fb-item.done { opacity: .55; }
.fb-text { margin: 0; white-space: pre-wrap; line-height: 1.5; word-break: break-word; }

/* In library: green = on this album, yellow = you have it from a different album */
.gm-pill.amber { background: rgba(242, 196, 61, .16); color: #f2c43d; }
.gm-owned.other { color: #f2c43d; }
.gm-owned.other.prefer { color: #f2c43d; font-style: italic; }
.gm-owned.low { color: #ffb08a; }
.tag-needs.have { background: rgba(242, 196, 61, .92); color: #1d1606; }

/* Get it / Search variants on album tiles (inside the cover, bottom right) */
.cover .tile-actions { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; z-index: 2; }
.tile:hover .tile-actions, .tile:focus-within .tile-actions { opacity: 1; transform: none; }
@media (hover: none) { .cover .tile-actions { opacity: 1; transform: none; } }
.tile-act { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(18, 17, 16, .82); color: var(--text); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.tile-act:first-child { background: var(--accent); color: #1d1206; border: 0; }
.tile-act .icon { width: 18px; height: 18px; }
.tile-act:disabled { opacity: .5; }
/* An album tile that's downloading: faded, coming back from the bottom up as it arrives (--fill 0..1, moved frame by
   frame from getit.js so every cover of it stays smooth), status on it. At the top the edge line goes too. */
.cover .tile-veil, .cover .tile-dim { position: absolute; inset: 0; z-index: 1; pointer-events: none; will-change: transform;
  transform: translateY(calc(var(--fill, 0) * -100%)); transition: opacity .5s ease, border-color .3s ease; }
/* Two plain layers that slide up together (no backdrop filter: phones redraw those badly while they move, and the
   picture under them would flicker or break): one takes the colour out, one darkens and carries the edge line. */
.cover .tile-veil { background: #808080; mix-blend-mode: saturation; }
.cover .tile-dim { background: rgba(14, 13, 12, .5); border-bottom: 2px solid var(--accent); }
.cover.tile-top .tile-dim { border-bottom-color: transparent; }
/* The wave on the edge line while the fill stands still (getit.js waveLayer): it rides the line (same slide as the
   fade), swells from the middle every 2 s, faint bars echo it, and the straight line fades in while it's low. */
.cover .tile-edge { position: absolute; inset: 0; z-index: 1; pointer-events: none; will-change: transform; transform: translateY(calc(var(--fill, 0) * -100%)); }
.cover .tile-wave { position: absolute; left: 0; right: 0; bottom: -22px; height: 44px; opacity: 0; transition: opacity .3s ease; color: var(--accent); }
.cover.tile-wave-on .tile-wave { opacity: 1; }
.tile-wave .tw-swell { position: absolute; inset: 0; transform-origin: 50% 50%; }
.tile-wave svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tile-wave path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tile-wave .tw-bars { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 5px; opacity: .35; }
.tile-wave .tw-bars i { display: block; width: 2.5px; height: 30px; border-radius: 2px; background: currentColor; transform: scaleY(.1); transform-origin: center; }
.cover.tile-wave-on .tw-swell { animation: tw-swell 2s cubic-bezier(.2, .7, .3, 1) infinite; }
.cover.tile-wave-on .tw-bars i { animation: tw-ripple 2s cubic-bezier(.2, .7, .3, 1) infinite; }
.cover.tile-wave-on .tile-dim { animation: tw-line 2s linear infinite; }
@keyframes tw-swell { 0% { transform: scaleY(.16); } 9% { transform: scaleY(1); } 55% { transform: scaleY(.28); } 100% { transform: scaleY(.16); } }
@keyframes tw-ripple { 0% { transform: scaleY(.1); } 10% { transform: scaleY(var(--amp)); } 48% { transform: scaleY(calc(var(--amp) * .25)); } 100% { transform: scaleY(.1); } }
@keyframes tw-line { 0% { border-bottom-color: color-mix(in srgb, var(--accent) 90%, transparent); } 5%, 42% { border-bottom-color: transparent; } 62% { border-bottom-color: color-mix(in srgb, var(--accent) 85%, transparent); } 100% { border-bottom-color: color-mix(in srgb, var(--accent) 90%, transparent); } }
/* Added: the veil and the status fade away. */
.cover.tile-done .tile-veil, .cover.tile-done .tile-dim { opacity: 0; transition: opacity .7s ease; }
.cover.tile-done .tile-status { opacity: 0; transform: translateY(4px); transition: opacity .6s ease .2s, transform .6s ease .2s; }
.cover.tile-done .tile-status .spinner { display: none; }
.cover.tile-getting .own-veil { display: none; } /* the download's own fade says how much there is */
.cover.tile-getting .tile-actions { display: none; }
.cover .tile-status { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; display: flex; align-items: center; justify-content: flex-start; gap: 7px; font-variant-numeric: tabular-nums;
  padding: 6px 10px; border-radius: 999px; background: rgba(18, 17, 16, .84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0,0,0,.45); color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.2; }
.cover .tile-status-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; } /* fills the pill: its width is the room there is (getit.js fitsWhole measures against it) */
.cover .tile-status .rg { flex: none; width: 15px; height: 15px; }
.cover .tile-status .rg svg { width: 15px; height: 15px; }
.cover .tile-status .rg-fill { transition: none; } /* moved frame by frame with the cover */
.cover .tile-status .rg-track { stroke: rgba(255, 255, 255, .28); }
.cover .tile-status .rg-fill { stroke-linecap: butt; } /* square ends: at 90% the gap really is a tenth (round ends ate into it) */
.rg.spin svg { animation: rg-spin 1s linear infinite; }
.rg.wait .rg-fill { stroke-dashoffset: 31.5 !important; } /* a quarter arc, turning: looking, in line */
/* "You have 3 songs" says nothing while the rest are coming in, or once they're all in: only a partial album keeps it. */
.tile:has(.cover.tile-getting) .tag-needs.have, .tile:has(.cover.tile-got) .tag-needs.have, .cover.tile-got .tile-actions { display: none; }
@keyframes rg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rg.spin svg { animation-duration: 3s; } }

.follow-list { display: flex; flex-direction: column; gap: 2px; }
.follow-row { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.follow-row:last-child { border-bottom: 0; }
.follow-auto { height: 36px; }

/* Duplicates & library health */
.dup-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.dup-group { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.dup-copy { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; cursor: pointer; }
.dup-copy:hover { background: var(--surface-2); }
.dup-copy input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.dup-copy-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dup-copy-main a { font-weight: 600; }
.dup-skip { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.health-card { margin-bottom: 12px; }
.health-card .row > .icon { color: var(--accent); }
.health-card.ok .row > .icon { color: var(--ok); }
.health-items { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.health-item { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; min-width: 0; }
.health-item:last-child { border-bottom: 0; }

/* Smart playlists */
.smart-rules { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.smart-rule { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border-radius: 10px; background: var(--surface-2); width: 100%; }
.small-select { height: 36px; width: auto; padding: 0 10px; }
.small-num { height: 36px; width: 84px; padding: 0 10px; }
.smart-text { height: 36px; width: 180px; padding: 0 10px; }
.smart-preview { padding: 12px; border-radius: 12px; border: 1px solid var(--line, rgba(127,127,127,.2)); display: flex; flex-direction: column; gap: 8px; }
.smart-sample { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; }
.smart-summary { margin-top: 6px; max-width: 60ch; }
.q-auto-head { margin-top: 14px; font-size: 13px; color: var(--muted, #999); font-weight: 600; }
.q-keep { display: flex; gap: 10px; align-items: center; padding: 14px 4px 6px; cursor: pointer; }

/* Your week */
.week-card { display: flex; flex-wrap: wrap; gap: 16px 28px; padding: 18px; border-radius: 16px; background: var(--surface-2); align-items: center; }
.week-stats { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.week-stat { display: flex; flex-direction: column; }
.week-stat b { font-size: 26px; line-height: 1.1; }
.week-stat span { font-size: 13px; color: var(--muted, #999); }
.week-tops { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; min-width: 0; flex: 1; max-width: 100%; }
.week-tops > * { min-width: 0; max-width: 100%; }
.week-song { display: flex; gap: 10px; align-items: center; text-align: left; min-width: 0; max-width: 100%; }
.week-song .cover { width: 48px; flex: none; }
/* Customize Home */
.home-rows { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; }
.home-row-item { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 10px; background: var(--surface-2); }
.home-row-item.off { opacity: .55; }
.home-row-item .arrow { font-size: 16px; font-weight: 700; }
.gm-track-acts { display: flex; align-items: center; gap: 2px; flex: none; }
.gm-track-acts .icon-btn .icon { width: 18px; height: 18px; }
.gm-track-acts { justify-content: flex-end; }

/* Library: Liked mode */
.liked-toggle { gap: 0; }
.liked-toggle.on { background: var(--accent); color: #1a1208; }
.liked-toggle.on:hover { background: var(--accent); filter: brightness(1.05); }
.liked-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 14px; margin-bottom: 18px; border-radius: 12px; background: rgba(255,157,61,.1); border: 1px solid rgba(255,157,61,.3); }
.liked-bar > .icon { color: var(--accent); width: 18px; height: 18px; }
.liked-bar > span { flex: 1; min-width: 160px; }

/* Artist and album names as links */
.t-link { color: inherit; }
.t-link:hover, .pb-artist a:hover { color: var(--text); text-decoration: underline; }
.pb-artist a { color: inherit; }
.t-album-inline { display: none; }
@media (max-width: 760px) {
  .t-album-inline { display: inline; }
  .pb-album { display: none; }
}
.fp-source { color: inherit; } .fp-source:hover b { text-decoration: underline; }

/* ---------- Resume bar, stats, long lists, advanced settings ---------- */
.resume-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; background: var(--surface-2); border-bottom: 1px solid var(--line); padding: 8px 14px; font-size: 14px; font-weight: 600; }
.resume-bar > .icon { color: var(--accent); width: 18px; height: 18px; }
.resume-bar > span { flex: 1; }
.stats-chart { width: 100%; height: auto; margin-top: 10px; display: block; overflow: visible; }
.stats-chart .bar { fill: var(--accent); }
.stats-chart .grid { stroke: var(--line); stroke-width: 1; }
.stats-chart .lbl { fill: var(--faint); font-size: 11px; font-family: var(--font); }
.stats-row { width: 100%; text-align: left; min-width: 0; }
.stats-row .t-text { min-width: 0; }
.list-more { display: flex; justify-content: center; padding: 12px; min-height: 1px; }
details.advanced { margin-top: 6px; }
details.advanced > summary { cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); list-style: none; }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary h2 { font-size: 20px; }
details.advanced > summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .15s; }
details.advanced[open] > summary::after { transform: rotate(180deg); }
details.advanced[open] > summary { margin-bottom: 14px; }
details.advanced .card { margin-bottom: 14px; }
.alarm-days { display: flex; gap: 6px; flex-wrap: wrap; }
.alarm-days button { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); font-weight: 700; font-size: 13px; color: var(--muted); }
.alarm-days button.on { background: var(--accent); color: var(--accent-ink); }
.car-voice.listening { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 760px) { .stats-page .page-head { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* wave 2 (agent G) */
.setup-restore-link { display: block; text-align: center; margin-top: 14px; font-size: 13px; color: var(--muted, #888); text-decoration: underline; }
.setup-restore { margin-top: 10px; padding: 12px; border-radius: 10px; background: rgba(127, 127, 127, 0.08); display: flex; flex-direction: column; gap: 8px; }
.export-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(127, 127, 127, 0.2); }
.export-row > div:first-child { flex: 1 1 260px; min-width: 0; }

/* wave 2 (agent F) */
.pl-import-input { height: auto; padding: 10px 14px; resize: vertical; font: inherit; line-height: 1.4; }
.pl-import-list { max-height: min(42vh, 420px); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); }
.pl-import-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); min-width: 0; }
.pl-import-row:last-child { border-bottom: 0; }
.pl-import-ic { width: 18px; height: 18px; flex: none; }
.pl-import-row.ok .pl-import-ic { color: var(--ok); }
.pl-import-row.missing .pl-import-ic { color: #f2c43d; }
.pl-import-row.missing { background: rgba(242, 196, 61, .05); }
.id-sound .progress-bar { margin-top: 2px; }


/* ===================================================================== */
/* V1 layout: panes, role tag, hero, transitions, settings shell          */
/* ===================================================================== */

/* Role tag: one short line under the logo saying where this copy runs */
.role-tag { font-size: 12px; color: var(--muted); padding: 0 10px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; min-height: 16px; }
.role-tag span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* In the sidebar the quality sits under the place, so neither gets cut off. */
#side-role { flex-wrap: wrap; row-gap: 1px; }
#side-role .rt-q { flex-basis: 100%; padding-left: 13px; color: var(--faint); }
.role-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.role-tag[data-kind="server"]::before { background: var(--accent); }
.role-tag[data-kind="home"]::before { background: var(--ok); }
.role-tag[data-kind="away"]::before { background: #f2c43d; }
.role-tag:empty { display: none; }

/* Phone header (hidden on computers) */
@media (min-width: 761px) { .phone-head { display: none !important; } }
.phone-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(6px + env(safe-area-inset-top, 0px)) 16px 6px; background: var(--titlebar-bg, var(--bg)); transition: background .8s; }
.phone-head .brand { padding: 0; font-size: 16px; }
.phone-head .brand img { width: 26px; height: 26px; }
.phone-head .role-tag { padding: 0; font-size: 12px; min-width: 0; }

/* Pull down on Home to search */
.pull-hint { position: absolute; left: 0; right: 0; top: 0; z-index: 4; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); padding: 10px; opacity: 0; transform: translateY(-20px); pointer-events: none; }
.pull-hint.on { opacity: calc(var(--pull, 0) * 1); transform: translateY(calc(var(--pull, 0) * 24px - 20px)); }

/* Now playing pane (right column) */
.nowpane { grid-row: 1; grid-column: 3; position: relative; overflow: hidden; border-left: 1px solid #1d1a17; background: var(--bg); display: flex; flex-direction: column; min-width: 0; }
.np-backdrop { position: absolute; inset: -30%; z-index: 0; background: radial-gradient(60% 50% at 30% 20%, color-mix(in srgb, var(--art-1) 55%, transparent), transparent 70%), radial-gradient(50% 60% at 75% 70%, color-mix(in srgb, var(--art-2) 55%, transparent), transparent 70%), var(--bg); filter: blur(40px) saturate(1.1); opacity: .55; transition: background .8s; }
.np-backdrop.drift { animation: np-drift 36s ease-in-out infinite alternate; }
@keyframes np-drift { from { transform: translate(-3%, -2%) scale(1); } to { transform: translate(3%, 3%) scale(1.12); } }
.np-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; padding: 16px 16px 0; gap: 12px; min-height: 0; } /* no bottom padding: the list scrolls right down to the player bar */
.np-head { display: flex; align-items: center; justify-content: space-between; }
.np-kicker { font-size: 13px; font-weight: 700; color: var(--muted); }
.np-art { width: 100%; max-width: 288px; margin: 0 auto; }
.np-art .cover { width: 100%; border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0,0,0,.55); }
.np-info { display: flex; align-items: center; gap: 8px; }
.np-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.np-title { font-size: 17px; font-weight: 700; }
.np-title:hover, .np-artist:hover { text-decoration: underline; }
.np-artist { color: var(--muted); font-size: 14px; }
.np-from { color: var(--faint); font-size: 13px; }
.np-acts { display: flex; align-items: center; gap: 2px; flex: none; }
.np-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); }
.np-tab { padding: 8px 12px 10px; font-weight: 700; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 6px 6px 0 0; }
.np-tab-ly { display: inline-flex; align-items: center; gap: 6px; }
.np-tab-ly .icon { width: 16px; height: 16px; } /* this song's kind of lyrics */
.np-tab:hover { color: var(--text); }
.np-tab.on { color: var(--text); border-bottom-color: var(--art-1); }
.np-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; margin: 0 -8px; padding: 0 8px 10px; }
.np-body.np-lyrics .lyrics { flex: 1; }
.np-body.np-lyrics .lyric-line { font-size: 18px; margin-bottom: 10px; }
.np-list { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.np-row { display: flex; align-items: center; gap: 10px; padding: 6px 6px; border-radius: var(--radius-sm); cursor: pointer; min-height: 48px; }
.np-row:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.np-row .cover { width: 36px; border-radius: 4px; }
.np-row .t-text { flex: 1; min-width: 0; }
.np-row .icon-btn { opacity: 0; }
.np-row:hover .icon-btn, .np-row:focus-within .icon-btn { opacity: 1; }
.np-grip { color: var(--faint); cursor: grab; display: inline-flex; opacity: 0; }
.np-row:hover .np-grip { opacity: .8; }
.np-grip .icon { width: 16px; height: 16px; }
.np-row.dragging { opacity: .4; }
.np-row.over { box-shadow: inset 0 2px 0 var(--art-1); }
.np-dur { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.np-sub { color: var(--muted); font-size: 13px; font-weight: 600; padding: 10px 6px 4px; }
.np-empty { text-align: center; color: var(--muted); padding: 24px 8px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.np-empty p { margin: 0; }
.np-keep { display: flex; gap: 10px; align-items: center; padding: 14px 6px 6px; cursor: pointer; font-size: 14px; }
.np-keep input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
/* Now-playing / queue button: the album colour, dimmed while the pane is closed, full strength while it's open. */
.pb-right .icon-btn { flex: none; }
.pb-pane.icon-btn.small { width: 30px; height: 30px; border-radius: 50%; }
body.np-visible .pb-pane { color: var(--text); background: color-mix(in srgb, var(--text) 14%, transparent); }
/* Between a phone and a wide window the pane is a drawer: it slides over the page from the right, the page dims. */
@media (max-width: 1099px) and (min-width: 761px) {
  body:not(.desktop-app).np-visible .app { grid-template-columns: var(--sidebar) minmax(0, 1fr) 0; }
  body:not(.desktop-app).np-drawer .nowpane { display: flex !important; position: fixed; top: 0; right: 0; bottom: var(--player-h); width: min(400px, 92vw); z-index: 40; border-left: 1px solid rgba(255,255,255,.1); box-shadow: -24px 0 48px rgba(0,0,0,.45); animation: np-drawer-in .22s cubic-bezier(.2,.7,.2,1); }
  body:not(.desktop-app).np-drawer::after { content: ''; position: fixed; inset: 0 0 var(--player-h) 0; background: rgba(0,0,0,.35); z-index: 39; animation: np-dim-in .2s; }
  @keyframes np-drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes np-dim-in { from { opacity: 0; } }
}
@media (max-width: 760px) { body:not(.desktop-app) .nowpane { display: none !important; } body:not(.desktop-app) .pb-pane .icon { transform: rotate(180deg); } }

/* Equaliser on the playing row (CSS only; stands still while paused) */
.eq { display: none; align-items: flex-end; gap: 2px; width: 16px; height: 14px; }
.eq i { display: block; width: 3px; height: 100%; background: var(--art-1); border-radius: 1px; transform-origin: bottom; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.33s; }
.eq i:nth-child(3) { animation-delay: -.66s; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
body.is-paused .eq i { animation-play-state: paused; }
.track.playing .t-num .n, .track.playing .t-num > .icon { display: none; }
.track.playing .t-num .eq { display: inline-flex; margin: 0 auto; }
.track.playing:hover .t-num .eq { display: none; }
.track.playing:hover .t-num > .icon.t-pa { display: inline-flex; }          /* the song that's playing: hover shows pause */
body.is-paused .track.playing:hover .t-num > .icon.t-pa { display: none; }
body.is-paused .track.playing:hover .t-num > .icon.t-pl { display: inline-flex; }
.track:not(.playing):hover .t-num > .icon.t-pa { display: none; }
.t-eq-sm { display: none; }
@media (max-width: 760px) {
  .track.playing .t-main .t-eq-sm { display: inline-flex; }
  .t-eq-sm { flex: none; width: 24px; height: 16px; margin-right: 0; justify-content: center; } /* a small slot so the bars sit centred, not jammed left */
}

/* Page transitions: cross-fade on computers, slide on phones */
.view.enter-forward { animation: view-fade .16s ease-out; }
.view.enter-back { animation: view-fade .16s ease-out; }
@keyframes view-fade { from { opacity: 0; } }
@media (max-width: 760px) {
  .view.enter-forward { animation: view-right .16s ease-out; }
  .view.enter-back { animation: view-left .16s ease-out; }
}
@keyframes view-right { from { transform: translateX(28px); opacity: 0; } }
@keyframes view-left { from { transform: translateX(-28px); opacity: 0; } }

/* Confirmations: a small pop on like / add-to-playlist buttons */
.pop { animation: pop .4s cubic-bezier(.2,.8,.2,1.4); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.t-more.pop { color: var(--ok); opacity: 1; }

/* Home: heading band and the hero card */
.home-band { position: relative; margin: calc(-1 * var(--view-pt, 24px)) calc(-1 * var(--view-px, 32px)) 20px; padding: var(--view-pt, 24px) var(--view-px, 32px) 18px; background: linear-gradient(90deg, color-mix(in srgb, var(--art-1) 18%, transparent), color-mix(in srgb, var(--art-2) 10%, transparent) 60%, transparent); transition: background .8s; }
.hero-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px; margin-bottom: 24px; border-radius: var(--radius-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--art-1) 14%, var(--surface)), var(--surface) 70%); border: 1px solid var(--line); }
.hero-card .cover { width: 180px; border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.hero-card-link { display: block; }
.hero-card-text { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hero-card-reason { font-size: 13px; font-weight: 700; color: var(--art-1); }
.hero-card-title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hero-card-title a:hover { text-decoration: underline; }
.hero-card-sub { color: var(--muted); font-size: 15px; }
.hero-card-acts { margin-top: 8px; }
.hero-play { height: 44px; padding: 0 22px; }
@media (max-width: 760px) {
  .home-band { margin: -16px -16px 16px; padding: 14px 16px 12px; }
  .page-head.row.between.home-band h1 { font-size: 22px; }
  .page-head.row.between > .row { gap: 0 !important; }
  .home-band .icon-btn { width: 36px; height: 36px; }
  .hero-card { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .hero-card .cover { width: 112px; }
  .hero-card-title { font-size: 20px; }
  .hero-card-sub { font-size: 13px; }
  .hero-play { height: 40px; padding: 0 18px; }
}

/* First-run tour (phones) */
.tour { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px 20px; padding: 0 16px 6px; scrollbar-width: none; }
.tour::-webkit-scrollbar { display: none; }
.tour-card { flex: 0 0 calc(100% - 44px); scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px 12px; }
.tour-ic { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); display: grid; place-items: center; }
.tour-text b { font-size: 15px; }
.tour-text p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.tour-acts { grid-column: 2; display: flex; gap: 8px; }

/* Settings shell */
.settings-shell { display: flex; flex-direction: column; gap: 12px; max-width: 900px; width: 100%; margin: 0 auto; } /* cards sit centred; the page heading above stays left */
.scard-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.scard-tools .search-box { flex: 1 1 240px; margin: 0; max-width: none; }
.scard-tools .search-box .input { height: 42px; font-size: 15px; }
.scard-tools .search-box .icon { top: 11px; }
.scards { display: flex; flex-direction: column; gap: 12px; }
.scard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.scard-head { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; min-height: 56px; cursor: pointer; }
.scard-head:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.scard-toggle { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: 1; min-width: 0; text-align: left; padding: 8px 12px; border-radius: var(--radius); }
.scard-title { font-size: 17px; font-weight: 700; }
.scard-help { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.scard.collapsed .scard-help { display: block; }
.scard-extra { display: flex; align-items: center; gap: 8px; flex: none; }
.scard-chev { color: var(--muted); transition: transform .16s; flex: none; margin-right: 4px; }
.scard.collapsed .scard-chev { transform: rotate(-90deg); }
.scard-moves { display: none; gap: 2px; }
.settings-shell.customizing .scard-moves { display: inline-flex; }
.settings-shell.customizing .scard-body { display: none; }
.settings-shell.customizing .scard-chev { display: none; }
.scard-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 0; }
.scard-part { display: flex; flex-direction: column; }
.scard-part > * { display: flex; flex-direction: column; gap: 12px; }
.scard-part > *:not(.stack) { display: block; }
.scard-part + .scard-part { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.scard-body h2 { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.scard-sub { font-size: 15px !important; font-weight: 700 !important; margin: 0 0 8px !important; }
.scard-sub + p { margin-top: 0; }
.sw-hide { display: none !important; }
.scard.sw-off .scard-body { padding-bottom: 8px; }
.scard.bump { animation: bump .25s ease-out; }
@keyframes bump { 50% { transform: scale(1.01); } }
.scard-nohits { margin: 8px 0; }
.scard .setting-row:first-of-type { border-top: 0; }
.scard .card { background: transparent; border: 0; padding: 0; }
.scard details.advanced > summary { background: transparent; }
@media (max-width: 760px) { .scard-head { min-height: 52px; } .scard-title { font-size: 16px; } .scard-body { padding: 0 12px 12px; } }

/* Keyboard shortcuts sheet */
.keys { display: flex; flex-direction: column; gap: 4px; }
.key-row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; padding: 6px 0; font-size: 15px; }
kbd { font-family: var(--font); font-size: 13px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 3px 8px; text-align: center; white-space: nowrap; }

/* Sortable track headers */
.th-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; font: inherit; font-weight: 600; padding: 4px 0; border-radius: 4px; }
.th-sort:hover, .th-sort.on { color: var(--text); }
.th-arrow { font-size: 12px; min-width: 10px; }
.t-dur .th-sort { justify-content: flex-start; width: 100%; }
.t-h-tools { display: flex; justify-content: center; }
.th-menu { opacity: .7; }
.track-head:hover .th-menu { opacity: 1; }
.disc-head { color: var(--muted); font-size: 13px; font-weight: 700; padding: 14px 10px 6px; }
.q-empty { padding: 6px 10px 10px; }

/* No horizontal scroll at phone width; long words wrap */
@media (max-width: 760px) {
  .view, .page-head, .section { max-width: 100%; min-width: 0; }
  .page-head h1 { font-size: 26px; }
  .scard-tools { flex-wrap: nowrap; }
  .scard-tools .search-box { flex: 1 1 auto; min-width: 0; }
}

/* Motion only answers actions; reduced motion turns the rest off */
@media (prefers-reduced-motion: reduce) {
  .np-backdrop.drift, .eq i, .view.enter-forward, .view.enter-back, .fullplayer.grow, .fullplayer.fp-in-up, .fullplayer.fp-in-right, .fullplayer.fp-out-up, .fullplayer.fp-out-right, .pop, .scard.bump, .menu, .tile .tile-play, .bg-art-img { animation: none !important; }
  .playerbar, .home-band, .np-backdrop, .scard-chev, .btn, .icon-btn, .tile, .menu-backdrop { transition: none !important; }
}

/* === theme & rows (agent V2) === */

/* Art colours animate between records; the accent follows when "From the album art" is on. */
@property --art-1 { syntax: '<color>'; inherits: true; initial-value: #ff9d3d; }
@property --art-2 { syntax: '<color>'; inherits: true; initial-value: #8a4a12; }
@property --art-ink { syntax: '<color>'; inherits: true; initial-value: #1d1206; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #ff9d3d; }
@property --accent-2 { syntax: '<color>'; inherits: true; initial-value: #ffb766; }
:root { --art-1: #ff9d3d; --art-2: #8a4a12; --art-ink: #1d1206; }
:root.art-animated { transition: --art-1 .6s ease, --art-2 .6s ease, --accent .6s ease, --accent-2 .6s ease; }
@media (prefers-reduced-motion: reduce) { :root.art-animated { transition: none; } }

/* ---------- Light: a cool neutral room, art colours used thinly ---------- */
[data-theme="light"] {
  --bg: #f3f3f1; --bg-2: #ebebe8; --surface: #ffffff; --surface-2: #ececea; --surface-3: #e0e0dd; --line: #d6d5d0;
  --text: #1b1a18; --muted: #5f5a53; --faint: #726a60;
  --accent: #a85508; --accent-2: #9a4c06; --accent-ink: #ffffff;
  --danger: #c0341d; --ok: #1f7a3a; --warn: #7a5a00;
  color-scheme: light;
}
[data-theme="light"] .sidebar { background: #e9e9e6; border-right-color: #d6d5d0; }
[data-theme="light"] .side-section { border-top-color: #d6d5d0; }
[data-theme="light"] .main { background: linear-gradient(180deg, var(--bg-2) 0, var(--bg) 340px); }
[data-theme="light"] .tile .cover, [data-theme="light"] .hero .cover { box-shadow: 0 6px 18px rgba(20, 16, 10, .16); }
[data-theme="light"] .cover { background: linear-gradient(135deg, #e4e3df, #f1f0ed); }
[data-theme="light"] .play-fab { box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 24%, transparent); }
[data-theme="light"] .tag-needs.ok { color: #8fe39b; }
[data-theme="light"] .gm-pill.warn { background: rgba(192, 52, 29, .10); color: #a52a16; }
[data-theme="light"] .gm-pill.amber { background: rgba(176, 120, 0, .14); color: #7a5200; }
[data-theme="light"] .gm-pill.accent { background: rgba(168, 85, 8, .12); color: var(--accent); }
[data-theme="light"] .gm-owned.low, [data-theme="light"] .gm-owned.warn { color: #a3400f; }
[data-theme="light"] .gm-owned.other, [data-theme="light"] .gm-owned.other.prefer { color: #7a5200; }
[data-theme="light"] .pl-import-row.missing .pl-import-ic { color: #7a5200; }
[data-theme="light"] .slsk-note.warn { background: rgba(192, 52, 29, .08); color: #8c2412; }
[data-theme="light"] .slsk-note.warn .icon { color: #c0341d; }
[data-theme="light"] .gm-initials { background: linear-gradient(135deg, #f0dcc3, #d9a46e); color: #5a2e05; }
[data-theme="light"] .mix-cover::after { background: linear-gradient(160deg, rgba(0,0,0,0) 30%, rgba(20, 16, 10, .72)); }
[data-theme="light"] .mix-label { color: #fff; }
[data-theme="light"] .recap-hero { color: #fff; }
[data-theme="light"] .car-top-btn, [data-theme="light"] .car-btn, [data-theme="light"] .car-tile { color: #fff; }

/* ---------- Black (OLED): true black, the art does the lighting ---------- */
[data-theme="oled"] {
  --bg: #000000; --bg-2: #000000; --surface: #0d0d0d; --surface-2: #161616; --surface-3: #202020; --line: #242424;
  color-scheme: dark;
}
[data-theme="oled"] .sidebar { background: #000; border-right-color: #1a1a1a; }
[data-theme="oled"] .side-section { border-top-color: #1a1a1a; }
[data-theme="oled"] .main { background: #000; }

/* ---------- Appearance card ---------- */
.theme-seg { flex-wrap: wrap; }
.appearance-card .setting-row { grid-template-columns: 1fr; gap: 8px; }
.appearance-card .setting-row .seg { justify-self: start; }
.theme-seg .seg-btn { min-height: 34px; justify-content: center; }
@media (max-width: 480px) { .theme-seg.theme-seg-4 { display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; } .theme-seg.theme-seg-4 .seg-btn { border-radius: 10px; } }
.theme-preview { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.tp-art { width: 64px; height: 64px; flex: none; border-radius: 10px; background: linear-gradient(135deg, var(--art-1), var(--art-2)); box-shadow: 0 6px 18px color-mix(in srgb, var(--art-1) 35%, transparent); }
.tp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tp-line { height: 10px; border-radius: 5px; background: var(--surface-3); width: 70%; }
.tp-line.short { width: 42%; }
.tp-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tp-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 12px; }
.tp-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 700; font-size: 12px; }
.tp-text { color: var(--accent); font-weight: 800; font-size: 15px; }

/* ---------- Genre tiles: gradients by family, grain, name bottom-left ---------- */
.genre-tile, .genre-hero {
  --g1: #b3261e; --g2: #f08a24;
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 62%),
    linear-gradient(135deg, var(--g1), var(--g2));
}
.genre-tile { align-items: flex-end; justify-content: flex-start; padding: 12px 14px; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.genre-tile > span { font-size: 19px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
.genre-tile::after { content: ""; position: absolute; right: -18%; top: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 70%); pointer-events: none; }
.genre-tile:hover { transform: none; filter: brightness(1.06); }
@media (prefers-reduced-motion: no-preference) { .genre-tile { transition: filter .15s, transform .12s; } .genre-tile:hover { transform: scale(1.015); } }
.genre-hero { padding: 64px 28px 26px; }
.genre-hero .hero-kind { color: rgba(255,255,255,.78); }
.genre-hero h1 { text-shadow: 0 2px 14px rgba(0,0,0,.4); }

/* ---------- Home rows ---------- */
.artist-row .artist-tile .cover.round { box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.artist-tile .tile-title { font-size: 14px; }
.gm-initials.art-grad { background: linear-gradient(135deg, var(--g1, #3a2a18), var(--g2, #6b3f17)); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.artist-tile .cover.round.has-img { color: transparent; }

/* The Top songs chart: numbered rows in columns of five that scroll sideways. */
.chart-row { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); grid-auto-columns: minmax(300px, 360px); gap: 2px 18px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-bottom: 6px; }
.chart-row::-webkit-scrollbar { display: none; }
.chart-cell { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; text-align: left; min-width: 0; color: inherit; }
.chart-cell:hover { background: var(--surface-2); }
.chart-cell .cover { width: 44px; height: 44px; flex: none; border-radius: 6px; }
.chart-cell .song-text { flex: 1; min-width: 0; }
.chart-cell .song-title { font-weight: 600; font-size: 14px; }
.chart-rank { width: 26px; flex: none; text-align: right; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--muted); }
.chart-cell:nth-child(-n+3) .chart-rank { color: var(--accent); }
.chart-move { flex: none; width: 46px; text-align: right; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--faint); white-space: nowrap; }
.chart-move.up { color: var(--ok); }
.chart-move.down { color: var(--danger); }
.chart-move.new { color: var(--accent); }
.chart-cell .song-owned { width: 18px; height: 18px; color: var(--accent); flex: none; }
.chart-more { display: flex; justify-content: center; margin-top: 8px; }
@media (max-width: 640px) { .chart-row { grid-auto-columns: 86%; } }
@media (hover: hover) and (pointer: fine) { .chart-row { grid-auto-columns: calc((100% - 2 * 18px) / 3); cursor: grab; } }
@media (hover: hover) and (pointer: fine) and (min-width: 1500px) { .chart-row { grid-auto-columns: calc((100% - 3 * 18px) / 4); } }
@media (hover: hover) and (pointer: fine) and (max-width: 900px) { .chart-row { grid-auto-columns: calc((100% - 18px) / 2); } }

/* New releases: a small date ribbon on the cover. */
.tile .date-ribbon { position: absolute; right: 20px; top: 20px; z-index: 1; display: inline-flex; flex-direction: column; align-items: center; min-width: 40px; padding: 4px 7px 5px; border-radius: 8px; background: rgba(12, 11, 10, .78); color: #fff; backdrop-filter: blur(6px); line-height: 1; pointer-events: none; }
.tile .date-ribbon b { font-size: 15px; font-weight: 800; }
.tile .date-ribbon span { font-size: 10px; font-weight: 700; letter-spacing: .02em; color: rgba(255,255,255,.8); margin-top: 2px; }
.tile .date-ribbon.soon { background: var(--accent); color: var(--accent-ink); }
.tile .date-ribbon.soon span { color: inherit; opacity: .8; }

/* Your week: seven bars, the numbers beside them. */
.week-card { gap: 18px 28px; align-items: stretch; }
.week-chart { flex: 1 1 260px; min-width: 0; max-width: 460px; display: flex; flex-direction: column; gap: 8px; }
.week-chart svg { width: 100%; height: auto; aspect-ratio: 320 / 96; display: block; overflow: visible; }
.week-chart .wk-bar { fill: color-mix(in srgb, var(--accent) 55%, var(--surface-3)); }
.week-chart .wk-bar.today { fill: var(--accent); }
.week-chart .wk-lbl { fill: var(--muted); font-size: 11px; font-family: var(--font); font-weight: 600; }
.week-chart .wk-val { fill: var(--text); font-size: 11px; font-family: var(--font); font-weight: 700; }
.week-chart .wk-base { stroke: var(--line); stroke-width: 1; }
.week-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.week-head b { font-size: 26px; line-height: 1.1; }
.week-head span { font-size: 13px; color: var(--muted); }
.week-side { display: flex; flex-direction: column; gap: 12px; justify-content: center; flex: 0 1 260px; min-width: 0; }
.week-mini { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.week-mini .week-stat b { font-size: 17px; }
.week-mini .week-stat span { font-size: 12px; }
@media (max-width: 640px) { .week-card { flex-direction: column; } .week-chart { flex: none; max-width: none; } .week-side { flex: none; } }

/* ---------- Stats page ---------- */
.stats-chart .bar { fill: var(--accent); transition: opacity .15s; }
.stats-chart .bar:hover { opacity: .78; }
.stats-chart .bar.today { fill: var(--art-1); }
.stats-tip { position: fixed; z-index: 50; pointer-events: none; background: var(--surface-3); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.25); transform: translate(-50%, calc(-100% - 10px)); }
.stats-list ol { list-style: none; counter-reset: rank; margin: 0; padding: 0; }
.stats-list li { counter-increment: rank; }
.stats-row { display: flex; align-items: center; gap: 10px; }
.stats-row::before { content: counter(rank); width: 22px; flex: none; text-align: right; font-weight: 800; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.stats-list li:nth-child(-n+3) .stats-row::before { color: var(--accent); }
.stats-row .cover { width: 44px; flex: none; }
.stats-row .stats-bar { height: 3px; border-radius: 2px; background: var(--accent); opacity: .7; margin-top: 5px; max-width: 100%; }
.stat-value { color: var(--text); }
.stat.accent .stat-value { color: var(--accent); }

/* ---------- Pickers & pills shared by Get music and the tools ---------- */
.format-wrap { display: inline-flex; align-items: center; gap: 6px; }
.format-wrap .seg { flex-wrap: nowrap; }
.format-wrap .seg-btn { height: 32px; padding: 0 12px; }
.format-wrap .format-pick { height: 36px; font-size: 13px; }
.format-wrap[aria-busy="true"] { opacity: .5; pointer-events: none; }
.quality-note { color: var(--faint); font-size: 12px; }
@media (max-width: 640px) { .format-wrap .seg { display: none; } }
@media (min-width: 641px) { .format-wrap select.format-pick { display: none; } }
.gm-pill .icon { width: 14px; height: 14px; margin-right: 4px; }
.health-card.ok .icon { color: var(--ok); }
.health-card .row > .icon { color: var(--accent); }
.health-card.ok h2 { color: var(--muted); }

/* ---------- Extras: car mode, Soulseek health, alarm ---------- */
.car-bg { background: radial-gradient(120% 90% at 20% 10%, var(--art-1), transparent 60%), radial-gradient(100% 90% at 85% 90%, var(--art-2), transparent 60%), #000; }
.car-bg .bg-art-img { position: absolute; inset: -10%; background-color: transparent; background-size: cover; background-position: center; filter: blur(60px) brightness(.45) saturate(1.25); opacity: .85; mix-blend-mode: luminosity; }
.car-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55)); }
.car { color: #fff; }
.car .car-artist, .car .car-album { color: rgba(255,255,255,.9); }
.car .car-source { color: #fff; }
.car-btn { width: 96px; height: 96px; background: rgba(255,255,255,.14); color: #fff; }
.car-btn .icon { width: 44px; height: 44px; }
.car-btn.main { width: 124px; height: 124px; background: var(--art-1); color: var(--art-ink); box-shadow: 0 12px 40px color-mix(in srgb, var(--art-1) 45%, transparent); }
.car-btn.main .icon { width: 58px; height: 58px; }
.car-btn.on { color: var(--art-1); }
.car-progress { background: rgba(255,255,255,.18); height: 8px; }
.car-progress > div { background: var(--art-1); }
.car-tile { height: 96px; font-size: 16px; color: #fff; background: rgba(255,255,255,.12); }
.car-tile .icon { width: 28px; height: 28px; }
.car-tile.on { color: var(--art-1); }
.car-top-btn { color: #fff; }
.car-top-btn.on { background: var(--art-1); color: var(--art-ink); }
.car-voice.listening { background: var(--art-1); color: var(--art-ink); }
.car-exit { color: rgba(255,255,255,.85); }
.car-clock { color: #fff; }
@media (max-width: 600px) and (orientation: portrait) { .car-btn { width: 80px; height: 80px; } .car-btn.main { width: 104px; height: 104px; } .car-tile { height: 80px; font-size: 14px; } }

.slsk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.slsk-tile { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.slsk-tile .v { font-size: 20px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slsk-tile .k { font-size: 12px; font-weight: 700; color: var(--muted); }
.slsk-tile .s { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slsk-tile.good .v { color: var(--ok); }
.slsk-tile.bad .v { color: var(--danger); }
.slsk-tile.accent .v { color: var(--accent); }

.alarm-card .alarm-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.alarm-card .alarm-time { width: 150px; height: 38px; padding: 0 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.alarm-card .alarm-days { gap: 4px; }
.alarm-card .alarm-days button { width: 32px; height: 32px; font-size: 12px; }
.alarm-card .alarm-what { height: 38px; flex: 1 1 160px; min-width: 150px; }
.alarm-card .alarm-summary { color: var(--muted); font-size: 13px; }
.alarm-card .alarm-summary b { color: var(--text); }
@media (max-width: 640px) { .stats-chart .lbl { font-size: 17px; } }
/* Light theme: the player bar is a light surface too (the art colour as a light wash, text in ink). */
[data-theme="light"] .playerbar { background: linear-gradient(90deg, color-mix(in srgb, var(--art-1) 16%, var(--surface)), var(--surface) 55%, color-mix(in srgb, var(--art-2) 10%, var(--surface))); border-top: 1px solid var(--line); color: var(--text); }
[data-theme="light"] .playerbar .pb-title, [data-theme="light"] .playerbar .icon-btn { color: var(--text); }
[data-theme="light"] .playerbar .pb-artist, [data-theme="light"] .playerbar .faint, [data-theme="light"] .playerbar .muted { color: var(--muted); }

/* Your week: short and wide (one band, not a tall card) */
.week-card.compact { padding: 12px 18px; gap: 10px 28px; align-items: center; flex-wrap: nowrap; }
@container view (max-width: 924px) { .week-card.compact { flex-wrap: wrap; } .week-card.compact .week-chart { flex: 1 1 100%; max-width: none; min-width: 0; } .week-card.compact .week-chart svg { flex: 1 1 0; min-width: 0; width: auto; height: auto; max-height: 64px; } .week-card.compact .week-side { flex: 1 1 100%; } }
.week-card.compact .week-chart { flex: 1 1 300px; max-width: 420px; flex-direction: row; align-items: flex-end; gap: 16px; }
.week-card.compact .week-head { flex: none; flex-direction: column; align-items: flex-start; gap: 0; }
.week-card.compact .week-head b { font-size: 24px; }
.week-card.compact .week-head span { font-size: 12px; max-width: 110px; line-height: 1.2; }
.week-card.compact .week-chart { min-width: 0; }
.week-card.compact .week-chart svg { aspect-ratio: 320 / 96; height: 60px; width: auto; max-width: 100%; flex: 1 1 160px; min-width: 120px; }
.week-card.compact .week-side { flex: 1 1 auto; flex-direction: row; align-items: center; gap: 24px; flex-wrap: wrap; }
.week-card.compact .week-tops { gap: 10px 24px; }
.week-card.compact .week-song .cover { width: 40px; }
@media (max-width: 760px) { .week-card.compact { flex-wrap: wrap; } .week-card.compact .week-side { flex-direction: column; align-items: flex-start; gap: 8px; } }
/* A narrow main pane (sidebar + Now playing open on a small window): stats in two columns, tops stacked under them. */
@container view (max-width: 600px) {
  .week-card.compact { padding: 14px 16px; gap: 12px; }
  .week-card.compact .week-chart { gap: 12px; }
  .week-card.compact .week-side { flex-direction: column; align-items: stretch; gap: 10px; }
  .week-card.compact .week-mini { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 12px; }
  .week-card.compact .week-tops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
}
@container view (max-width: 440px) { .week-card.compact .week-mini { grid-template-columns: 1fr 1fr; } .week-card.compact .week-tops { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .week-card.compact { flex-direction: row; flex-wrap: wrap; align-items: flex-end; } .week-card.compact .week-chart { flex: 1 1 200px; max-width: none; } .week-card.compact .week-chart { min-width: 0; } .week-card.compact .week-chart svg { flex: 1 1 0; min-width: 0; width: auto; height: auto; max-height: 72px; } }

/* Accent from the album art: the colour reaches the backgrounds, not only the player bar.
   Mixed with the theme's own surfaces so text contrast holds; transitions with the art variables. */
.art-mode .main { background: linear-gradient(180deg, color-mix(in srgb, var(--art-1) 26%, var(--bg)) 0, color-mix(in srgb, var(--art-2) 12%, var(--bg)) 360px, color-mix(in srgb, var(--art-1) 7%, var(--bg)) 100%); transition: background .8s; }
.art-mode .sidebar { background: color-mix(in srgb, var(--art-2) 14%, #0c0b0a); transition: background .8s; }
.art-mode .card, .art-mode .week-card, .art-mode .quick a, .art-mode .quick button { background: color-mix(in srgb, var(--art-1) 9%, var(--surface)); }
.art-mode .nowpane { background: color-mix(in srgb, var(--art-2) 12%, var(--bg)); }
.art-mode .playerbar { background: linear-gradient(90deg, color-mix(in srgb, var(--art-1) 32%, #0c0b0a), color-mix(in srgb, var(--art-2) 18%, #0c0b0a) 55%, color-mix(in srgb, var(--art-2) 26%, #0c0b0a)); }
.art-mode .tabbar { background: color-mix(in srgb, var(--art-2) 14%, var(--bg)); }
.art-mode[data-theme="light"] .main { background: linear-gradient(180deg, color-mix(in srgb, var(--art-1) 16%, var(--bg)) 0, color-mix(in srgb, var(--art-2) 7%, var(--bg)) 360px, var(--bg) 100%); }
.art-mode[data-theme="light"] .sidebar { background: color-mix(in srgb, var(--art-2) 8%, var(--surface)); }
.art-mode[data-theme="light"] .playerbar { background: linear-gradient(90deg, color-mix(in srgb, var(--art-1) 22%, var(--surface)), color-mix(in srgb, var(--art-2) 14%, var(--surface))); }
.art-mode[data-theme="light"] .card, .art-mode[data-theme="light"] .week-card { background: color-mix(in srgb, var(--art-1) 5%, var(--surface)); }
.art-mode[data-theme="oled"] .main { background: linear-gradient(180deg, color-mix(in srgb, var(--art-1) 18%, #000) 0, #000 420px); }
.art-mode[data-theme="oled"] .sidebar, .art-mode[data-theme="oled"] .tabbar { background: #000; }
@media (max-width: 760px) { .art-mode .main { background: linear-gradient(180deg, color-mix(in srgb, var(--art-1) 28%, var(--bg)) 0, color-mix(in srgb, var(--art-2) 10%, var(--bg)) 320px, var(--bg) 100%); } }

/* Full-screen player on a wide screen: the cover fills the backdrop like it does on a phone, content centred */
@media (min-width: 761px) {
  .fullplayer .fp-inner { max-width: 560px; margin: 0 auto; width: 100%; }
  .fullplayer .fp-bg { filter: blur(70px) saturate(1.4) brightness(.5); }
}

/* High: the cover, blurred and zoomed, behind everything; panels go translucent so it shows through */
.art-high body::before, .art-high body::after { content: ''; position: fixed; inset: -8%; z-index: 0; pointer-events: none; background: center / cover no-repeat; filter: blur(56px) saturate(1.4) brightness(.55); transform: scale(1.12); transition: opacity .8s ease; }
.art-zoom body::before, .art-zoom body::after { transform: scale(1.9); filter: blur(44px) saturate(1.5) brightness(.55); }
.art-crisp body::before, .art-crisp body::after { transform: scale(1.35); filter: blur(16px) saturate(1.2) brightness(.42); }
.art-high body::before { background-image: var(--art-url-a); opacity: 1; }
.art-high body::after { background-image: var(--art-url-b); opacity: 0; }
.art-high.art-b body::before { opacity: 0; }
.art-high.art-b body::after { opacity: 1; }
.art-high .app { position: relative; z-index: 1; }
.art-high .main { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 28%, transparent) 420px, color-mix(in srgb, var(--bg) 45%, transparent)); }
.art-high .sidebar { background: color-mix(in srgb, #0c0b0a 30%, transparent); backdrop-filter: blur(10px); }
.art-crisp .main { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 40%, transparent) 300px, color-mix(in srgb, var(--bg) 60%, transparent)); }
.art-high .nowpane { background: color-mix(in srgb, var(--bg) 25%, transparent); }
.art-high .np-backdrop { opacity: .5; }
.art-high .card, .art-high .week-card, .art-high .quick a, .art-high .quick button, .art-high .notice { background: color-mix(in srgb, var(--surface) 58%, transparent); backdrop-filter: blur(8px); }
.art-high .playerbar { background: rgba(12,11,10,.35); backdrop-filter: blur(10px); border-top-color: rgba(255,255,255,.08); }
.art-high body.desktop-frame .titlebar { background: transparent; backdrop-filter: blur(6px); border-bottom-color: rgba(255,255,255,.08); }
[data-theme="light"] body.desktop-frame .titlebar { border-bottom-color: var(--line); }
.art-high.art-zoom[data-theme="light"] body::before, .art-high.art-zoom[data-theme="light"] body::after { filter: blur(44px) saturate(1.3) brightness(1.2); }
.art-high.art-crisp[data-theme="light"] body::before, .art-high.art-crisp[data-theme="light"] body::after { filter: blur(16px) saturate(1.1) brightness(1.05); }
.art-high.art-crisp[data-theme="light"] .main { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(243,243,241,.55) 300px, rgba(243,243,241,.68)); }
/* Phones: a square cover on a tall screen would show only its middle, so draw it to fit the screen's height after the
   zoom (no top or bottom cut off); the sides spill past the edges. Blur zoom keeps the zoomed-in look. */
@media (max-width: 760px) {
  .art-high body:not(.desktop-app)::before, .art-high body:not(.desktop-app)::after { background-size: auto calc(100dvh / 1.12); background-color: var(--art-1); }
  .art-high.art-crisp body:not(.desktop-app)::before, .art-high.art-crisp body:not(.desktop-app)::after { background-size: auto calc(100dvh / 1.35); }
  .art-high.art-zoom body:not(.desktop-app)::before, .art-high.art-zoom body:not(.desktop-app)::after { background-size: cover; transform: scale(1.35); }
}
.art-high[data-theme="light"] body.desktop-frame .titlebar { background: rgba(255,255,255,.35); }
.art-high .tabbar, .art-high .phone-head { background: color-mix(in srgb, var(--bg) 40%, transparent); backdrop-filter: blur(12px); }
.art-high[data-theme="light"] .tabbar, .art-high[data-theme="light"] .phone-head { background: rgba(255,255,255,.45); }
.art-high .home-band { background: linear-gradient(90deg, color-mix(in srgb, var(--art-1) 22%, transparent), transparent); }
.art-high[data-theme="light"] body::before, .art-high[data-theme="light"] body::after { filter: blur(64px) saturate(1.2) brightness(1.25); }
.art-high[data-theme="light"] .main { background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(243,243,241,.78) 420px, rgba(243,243,241,.9)); }
.art-high[data-theme="light"] .sidebar { background: rgba(255,255,255,.62); }
.art-high[data-theme="light"] .card, .art-high[data-theme="light"] .week-card { background: rgba(255,255,255,.72); }
.art-high[data-theme="light"] .playerbar { background: rgba(255,255,255,.45); }
@media (prefers-reduced-motion: reduce) { .art-high body::before, .art-high body::after { transition: none; } }

/* Full-screen player on a wide screen: art in the middle, controls low and wide like the player bar */
.fp-bar { display: contents; }
.pb-art-wrap { position: relative; flex: none; }
.playerbar .pb-expand { position: absolute; inset: -7px; z-index: 3; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; opacity: 0; transition: opacity .2s ease; }
.playerbar .pb-expand svg { width: 100%; height: 100%; overflow: visible; transform: scale(.9); transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.pb-art-wrap:hover .pb-expand, .pb-expand:focus-visible { opacity: 1; }
.pb-art-wrap:hover .pb-expand svg, .pb-expand:focus-visible svg { transform: none; }
.pb-expand:active svg { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { .playerbar .pb-expand svg { transition: none; transform: none; } }
@media (min-width: 761px) {
  .fullplayer .fp-inner { max-width: none; padding: 16px 24px 0; }
  .fullplayer .fp-art .cover { width: min(100%, 56vh); }
  .fp-bar { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(360px, 2fr) minmax(220px, 1fr); grid-template-areas: "info controls bottom" "info progress bottom"; align-items: center; column-gap: 24px; row-gap: 2px; margin: 0 -24px; padding: 10px 24px 14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.28)); }
  .fp-bar .fp-info { grid-area: info; margin: 0; }
  .fp-bar .fp-title { font-size: 16px; }
  .fp-bar .fp-artist { font-size: 13px; margin-top: 1px; }
  .fp-bar .fp-progress { grid-area: progress; }
  .fp-bar .fp-controls { grid-area: controls; justify-content: center; gap: 10px; margin: 0; }
  .fp-bar .fp-controls .icon-btn { width: 44px; height: 44px; }
  .fp-bar .fp-controls .icon-btn .icon { width: 24px; height: 24px; }
  .fp-bar .fp-play { width: 52px; height: 52px; }
  .fp-bar .fp-bottom { grid-area: bottom; justify-content: flex-end; gap: 14px; }
  /* the status line goes under the buttons and wraps there, so a long one never runs into the play controls */
  .fp-bar .fp-bottom { min-width: 0; flex-wrap: wrap; row-gap: 4px; }
  .fp-bar .fp-q { order: 2; flex: 1 1 100%; min-width: 0; white-space: normal; align-items: flex-end; text-align: right; }
}

/* Scrollbars: a thin translucent thumb on a transparent track, so the background shows through.
   Chrome, Edge and the desktop app use the -webkit rules; Firefox uses scrollbar-color. */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 28%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 22%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text) 40%, transparent); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.main::-webkit-scrollbar-thumb, .nowpane::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--art-1) 45%, color-mix(in srgb, var(--text) 25%, transparent)); background-clip: padding-box; border: 3px solid transparent; }

/* Desktop app on Windows: our own title bar (the OS draws only its three caption buttons on the right) */
:root { --tb: 34px; }
.titlebar { display: none; }
body.desktop-frame .titlebar { position: fixed; top: 0; left: 0; right: 0; height: env(titlebar-area-height, var(--tb)); z-index: 60; display: flex; align-items: center; gap: 8px; padding-left: 10px; padding-right: 0; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--titlebar-bg, var(--bg)); border-bottom: 1px solid #1d1a17; box-sizing: border-box; -webkit-app-region: drag; user-select: none; transition: background .8s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.desktop-frame .titlebar img { width: 16px; height: 16px; border-radius: 4px; }
body.desktop-frame .app { height: calc(100dvh - env(titlebar-area-height, var(--tb))); margin-top: env(titlebar-area-height, var(--tb)); }
body.desktop-frame .auth { top: env(titlebar-area-height, var(--tb)); }
body.desktop-frame .fullplayer { top: env(titlebar-area-height, var(--tb)); }
body.desktop-frame .toast { bottom: calc(var(--player-h, 72px) + 16px); }
body.desktop-frame.mini-on .titlebar { display: none; }
body.desktop-frame.mini-on .mini-restore { right: auto; left: 4px; }

/* === libraries (agent M) === */
/* Per-person libraries: scope control, "not yours yet" badges, add buttons, family (blue) state in Get music. */
:root { --fam: #6db3f2; --fam-bg: rgba(109, 179, 242, .16); --fam-line: rgba(109, 179, 242, .35); }
[data-theme="light"] { --fam: #1f6fb2; --fam-bg: rgba(31, 111, 178, .12); --fam-line: rgba(31, 111, 178, .3); }
.lib-scope-wrap { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lib-scope-wrap .seg { padding: 2px; }
.lib-scope-wrap .seg-btn { height: 30px; padding: 0 12px; }
.lib-viewas { width: auto; height: 34px; padding: 0 30px 0 12px; border-radius: 999px; background: var(--surface-2); border: 0; font-weight: 600; font-size: 14px; max-width: 200px; }
.tag-needs.fam { color: var(--fam); }
.tile-add-wrap { position: absolute; right: 8px; top: 8px; z-index: 2; }
.tile-act.tile-add, .tile-act.tile-add:first-child { background: var(--fam); color: #0d1a26; border: 0; width: 34px; height: 34px; }
.tile-act.tile-add .icon { width: 18px; height: 18px; }
.fam-bar { background: var(--fam-bg); border-color: var(--fam-line); }
.fam-bar > .icon { color: var(--fam); }
.fam-bar .btn.primary { background: var(--fam); color: #0d1a26; }
.fam-bar .btn.primary:hover { filter: brightness(1.08); }
/* Track rows in a family view: the heart column widens so "+ Add" fits and durations still line up. */
.tracks.fam .track { grid-template-columns: 34px minmax(0, 3fr) minmax(0, 2fr) 78px 52px 36px; }
.tracks.fam.no-album .track { grid-template-columns: 34px minmax(0, 1fr) 52px 132px 36px; }
.tracks.fam .t-like { justify-self: center; }
.t-add { height: 28px; padding: 0 10px 0 7px; font-size: 12px; gap: 3px; border-radius: 999px; background: var(--fam-bg); color: var(--fam); border: 1px solid var(--fam-line); white-space: nowrap; justify-self: center; }
.t-add .icon { width: 14px; height: 14px; }
.t-add:hover { background: var(--fam); color: #0d1a26; }
.t-owners { color: var(--faint); }
@media (max-width: 760px) {
  .tracks.fam .track, .tracks.fam.no-album .track { grid-template-columns: minmax(0, 1fr) 78px 40px; }
  .lib-scope-wrap { width: 100%; }
  .lib-viewas { max-width: 160px; }
  .fam-bar > span { flex: 1 1 200px; }
  .fam-bar > .btn { margin-left: 28px; }
}
/* Get music: blue "someone else has it" state */
.gm-pill.fam { background: var(--fam-bg); color: var(--fam); }
.gm-owned.fam { color: var(--fam); }
.gm-owned.fam.prefer { color: var(--fam); }
.fam-add { background: var(--fam-bg); color: var(--fam); border-color: var(--fam-line); white-space: nowrap; }
.fam-add:hover { background: var(--fam); color: #0d1a26; }
.fam-add .icon { width: 16px; height: 16px; }
.fam-state { flex: none; flex-wrap: wrap; justify-content: flex-end; }
.gm-track-end { display: flex; justify-content: flex-end; min-width: 0; }
.fam-note { display: flex; align-items: center; gap: 6px; color: var(--fam); margin-top: 4px; }
.fam-note .icon { width: 14px; height: 14px; flex: none; }
@media (max-width: 760px) {
  .fam-state { flex: 1 1 100%; justify-content: flex-start; }
  .list-row:has(.fam-state) { flex-wrap: wrap; }
  .gm-track-end .fam-add { height: 30px; padding: 0 10px; font-size: 12px; }
}

/* Desktop title bar: our own caption buttons. Whole bar is one colour; buttons go light brown on hover, dark when pressed. */
body.desktop-frame .titlebar #titlebar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tb-controls { display: flex; align-self: stretch; margin-left: auto; -webkit-app-region: no-drag; }
.tb-btn { width: 46px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: default; transition: background .12s, color .12s; border-radius: 0; padding: 0; }
.tb-btn:hover { background: color-mix(in srgb, var(--accent) 38%, var(--titlebar-bg, var(--bg))); color: var(--text); }
.tb-btn:active { background: color-mix(in srgb, black 45%, var(--titlebar-bg, var(--bg))); color: var(--text); }
.tb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tb-btn[data-win="close"]:hover { background: #c42b1c; color: #fff; }
.tb-btn[data-win="close"]:active { background: #8f1d12; color: #fff; }
.tb-btn .tb-restore { display: none; }
body.win-max .tb-btn .tb-max { display: none; }
body.win-max .tb-btn .tb-restore { display: block; }

/* A sub-setting shown under the one it belongs to */
.setting-row.setting-sub { margin-left: 18px; padding-left: 14px; border-left: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); }

/* Get music, before the first search */
.gm-intro { display: flex; gap: 16px; align-items: flex-start; padding: 22px 20px; border-radius: 16px; background: var(--surface); margin-top: 8px; }
.gm-intro-icon { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); display: grid; place-items: center; flex: none; }
.gm-intro-icon .icon { width: 24px; height: 24px; }
.gm-intro b { display: block; font-size: 16px; margin-bottom: 4px; }
.gm-intro p { margin: 0 0 6px; }
.gm-intro a { color: var(--accent); font-weight: 600; }

/* ===================================================================== */
/* Layout review: pages use the width they have (narrow main pane, wide   */
/* windows, the desktop app squeezed with the Now playing pane open).     */
/* Page content keys off the .view container; app chrome off the window.  */
/* ===================================================================== */
.seg-btn { white-space: nowrap; }

/* Only on the three-pane layout (the phone layout at 760px and under has its own rules and keeps them). */
@media (min-width: 761px) {
  /* Narrow main pane (sidebar + Now playing on a small window, or a window around 800px wide):
     smaller tiles so three fit a row, quick links in two columns, the track list drops its Album column
     (the album name sits after the artist instead). */
  @container view (max-width: 560px) {
    .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .grid.scroll { grid-auto-columns: 140px; }
    .track { grid-template-columns: 34px minmax(0, 1fr) 36px 52px 36px; }
    .tracks.fam .track { grid-template-columns: 34px minmax(0, 1fr) 78px 52px 36px; }
    .tracks.no-album .track, .tracks.fam.no-album .track { grid-template-columns: 34px minmax(0, 1fr) 52px 116px 36px; }
    .t-album { display: none !important; }
    .t-album-inline { display: inline; }
  }
  @container view (min-width: 400px) and (max-width: 640px) {
    .quick { grid-template-columns: 1fr 1fr; }
  }
  /* Album / artist / playlist header: side by side with a smaller cover from about 420px of content,
     stacked and centred below that (the same shape as on a phone). */
  @container view (min-width: 420px) and (max-width: 640px) {
    .hero { flex-direction: row; align-items: flex-end; text-align: left; gap: 20px; }
    .hero .cover { width: 160px; }
    .hero h1 { font-size: clamp(26px, 6.5cqi, 56px); margin: 6px 0 10px; }
    .hero-meta, .actions { justify-content: flex-start; }
  }
  @container view (max-width: 419px) {
    .hero { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
    .hero .cover { width: min(60cqi, 220px); }
    .hero-meta, .actions { justify-content: center; }
  }
  /* Get music header: title and inbox button on the first line, the format picker on its own line below. */
  @container view (max-width: 640px) {
    .gm-head { flex-wrap: wrap; row-gap: 10px; }
    .gm-head h1 { white-space: nowrap; }
    .gm-head .format-wrap { order: 3; flex: 1 1 100%; }
  }
  /* Sideways song charts: how many columns fit depends on the main pane, not the window. */
  @container view (max-width: 700px) {
    .song-grid, .chart-row { grid-auto-columns: calc((100% - 18px) / 2); }
  }
  @container view (max-width: 440px) {
    .song-grid, .chart-row { grid-auto-columns: 100%; }
  }
}

/* The phone layout on a wider window (a tablet, or the desktop app between about 560 and 760px): the album
   header sits beside a smaller cover instead of a tall centred stack, so the songs start higher. Phones (430px
   and under) are too narrow for this and keep the stacked header. */
@media (max-width: 760px) {
  @container view (min-width: 500px) {
    .hero { flex-direction: row; align-items: flex-end; text-align: left; gap: 20px; }
    .hero .cover { width: 168px; }
    .hero h1 { font-size: clamp(26px, 6cqi, 44px); margin: 6px 0 10px; }
    .hero-meta, .actions { justify-content: flex-start; }
  }
}

/* Desktop app between 761 and 1099px wide with the Now playing pane open: the sidebar and the pane give
   up a little so the page in the middle keeps a usable width (it was down to 240px at 800px wide). */
@media (max-width: 1099px) and (min-width: 761px) {
  body.desktop-app.np-visible { --sidebar: 200px; --nowpane: 280px; }
  body.desktop-app.np-visible .view { --view-pt: 20px; --view-px: 20px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  body.desktop-app.np-visible { --sidebar: 188px; --nowpane: 260px; }
  body.desktop-app.np-visible .nav-link { padding: 10px 10px; gap: 12px; }
}
/* Full-screen player on a window under 1000px: the three-column bar keeps to the width it has. */
@media (max-width: 1000px) and (min-width: 761px) {
  .fp-bar { grid-template-columns: minmax(150px, 1fr) minmax(260px, 2fr) minmax(150px, 1fr); column-gap: 14px; }
  .fp-bar .fp-bottom { flex-wrap: wrap; row-gap: 2px; }
  .fp-bar .fp-q { order: 2; flex: 1 1 100%; align-items: flex-end; }
}

/* Search on Home, and the Back link on pages you drilled into */
.home-search { flex: 1 1 220px; max-width: 420px; margin: 0 12px; position: relative; }
.home-search .input, .hero-search .input { padding-right: 36px; }
.home-search .search-clear, .hero-search .search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: none; align-items: center; justify-content: center; color: var(--muted); }
.home-search .search-clear .icon, .hero-search .search-clear .icon { width: 16px; height: 16px; }
.home-search:has(input:not(:placeholder-shown)) .search-clear, .hero-search:has(input:not(:placeholder-shown)) .search-clear { display: inline-flex; }
.home-search .search-clear:hover, .hero-search .search-clear:hover { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); }
.page-head.home-band { flex-wrap: wrap; gap: 10px 0; }
.page-head.home-band h1 { margin-right: 8px; }
.search-results { margin-top: 4px; }
@media (max-width: 760px) {
  .page-head.row.between.home-band { flex-wrap: wrap; }
  .page-head.row.between.home-band .home-search { flex: 1 1 100%; max-width: none; margin: 6px 0 0; order: 3; }
  .page-head.row.between.home-band .home-tools { margin-left: auto; }
}
/* The way back stays put while the page scrolls under it, white on a soft pill so it reads over covers and heroes. */
.page-back { position: sticky; top: 8px; z-index: 6; display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-size: 13px; font-weight: 600; padding: 5px 12px 5px 8px; border-radius: 999px; margin: -8px 0 10px -6px; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent); }
.page-back .icon { width: 18px; height: 18px; }
.page-back:hover { color: var(--text); background: color-mix(in srgb, var(--bg) 92%, var(--text) 8%); }
.view.has-bleed .page-back { color: #fff; background: rgba(0,0,0,.55); }

.lyrics-paste { width: 100%; min-height: 220px; resize: vertical; font-family: inherit; line-height: 1.4; }
/* The Home header's shortcut buttons are for phones (no sidebar there). On a PC the sidebar already has Karaoke and
   Notifications, and Car mode is for a phone on a dashboard — so only "Customize Home" stays. */
@media (min-width: 761px) { .home-tools a[href="#/car"], .home-tools a[href="#/karaoke"], .home-tools .home-bell { display: none; } }
body.desktop-app .home-tools a[href="#/car"], body.desktop-app .home-tools a[href="#/karaoke"], body.desktop-app .home-tools .home-bell { display: none; }
/* Library: search box in the heading, same look as Home's */
.lib-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lib-head .home-search { flex: 1 1 240px; max-width: 420px; margin: 0; }
@media (max-width: 760px) { .lib-head .home-search { flex-basis: 100%; max-width: none; } }
.gm-panel { margin-top: 8px; }
.gm-panel .gm-results { margin-top: 8px; }
.gm-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gm-panel .search-box { position: relative; }
.gm-panel .search-box .input { padding-right: 36px; }
.gm-panel .search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: none; align-items: center; justify-content: center; color: var(--muted); }
.gm-panel .search-clear .icon { width: 16px; height: 16px; }
.gm-panel .search-box:has(input:not(:placeholder-shown)) .search-clear { display: inline-flex; }
.home .gm-panel { margin: 0 0 8px; }

input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* we draw our own clear button */

/* Lyrics timing nudge in the Now-playing pane's tab row */
.np-tab-tools { margin-left: 4px; display: inline-flex; align-items: center; }
.lyrics-tools.compact { padding: 0; gap: 0; font-size: 11px; color: var(--muted); }
.lyrics-tools.compact .icon-btn { width: 20px; height: 20px; font-size: 15px; line-height: 1; }
.lyrics-tools.compact .lyrics-offset { min-width: 46px; margin: 0 -1px; }
.lyrics-tools.compact .lyrics-ai { margin-left: 6px; }
.lyrics-tools.compact .lyrics-sweep { margin-left: 2px; }
.lyrics-tools.compact .lyrics-sweep .icon { width: 15px; height: 15px; }
/* "AI Lyric Sync" while the AI runs: the name carries a slow sweeping shine; a short progress note follows it. */
.ai-sync { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.2; white-space: nowrap; font-size: 11px; }
.ai-sync-name { font-weight: 800; letter-spacing: .02em; background: linear-gradient(100deg, var(--muted) 0 38%, var(--text) 50%, var(--muted) 62% 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ai-shine 2.2s linear infinite; }
.ai-sync-prog { color: var(--muted); }
@keyframes ai-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .ai-sync-name { animation: none; color: var(--text); background: none; } }
.lyrics.compact .lyrics-body { padding-top: 8%; }

/* Expanded player, lyrics mode: a centred column, text aligned left, small cover + timing controls above */
.fp-lyrics .lyrics { text-align: left; }
/* On a PC the lyrics sit in the same middle column as the controls and progress bar below them (same grid as .fp-bar). */
@media (min-width: 761px) {
  .fp-lyrics { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(360px, 2fr) minmax(220px, 1fr); column-gap: 24px; }
  .fp-lyrics .lyrics { grid-column: 2; min-width: 0; }
}
.lyrics-head { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 4px 14px; }
.lyrics-head-row { display: flex; align-items: center; gap: 14px; max-width: 100%; }
.lyrics-head .cover { width: 84px; flex: none; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.lyrics-head-text { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; text-align: left; }
.lyrics-head-text b { font-size: 17px; }
.lyrics-head-text .muted { font-size: 13px; }
.fp-lyrics .lyrics-body { padding-top: 76px; } /* clears the top fade so the first line is readable */
@media (max-width: 760px) { .lyrics-head .cover { width: 72px; } }
.lyrics-tools.compact .lyrics-ai .icon { width: 15px; height: 15px; }
.lyrics-tools.compact .lyrics-ai { color: var(--accent); }

.home-notices:empty { display: none; }
.home-notices { margin-bottom: 8px; }
.home-notices .notice { margin-bottom: 8px; }
.np-tabs > button { white-space: nowrap; flex: none; }
.np-tab-tools { min-width: 0; }
.np-tab-tools > .lyrics-tools.compact { min-width: 0; max-width: 100%; }
.ai-sync { min-width: 0; max-width: 100%; }
.ai-sync-prog { overflow: hidden; text-overflow: ellipsis; max-width: min(150px, 100%); display: block; }
.ai-sync-prog .ai-sync-txt { display: inline-block; white-space: nowrap; }
.ai-sync-prog.marquee { text-overflow: clip; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6px, #000 calc(100% - 6px), transparent); mask-image: linear-gradient(90deg, transparent, #000 6px, #000 calc(100% - 6px), transparent); }
.ai-sync-prog.marquee .ai-sync-txt { animation: ai-marquee linear infinite; }
@keyframes ai-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ai-sync-prog.marquee .ai-sync-txt { animation: none; } }
/* The format picker inside a Settings row: wraps if the row is narrow, no stray right margin */
.setting-row .format-wrap { margin-right: 0; flex-wrap: wrap; justify-content: flex-end; }

/* The desktop app reaches lyrics through the Now-playing pane's tab (or the expanded player), so no Lyrics button in the bar. */
body.desktop-app .pb-right [aria-label="Lyrics"] { display: none !important; }
/* The narrow desktop window keeps the expand brackets on the cover (phones open the player by tapping the bar). */
@media (max-width: 760px) {
  body.desktop-app .playerbar .pb-expand { display: grid !important; }
  body.desktop-app .playerbar { overflow: visible; }
  body.desktop-app .pb-art-wrap { position: relative; }
}
/* The page itself never scrolls (panes do); without this a focus() or scrollIntoView could shift the whole app up by the title bar's height. */
html { overflow: hidden; }

/* Save / Cancel for a previewed timing change, under the Now-playing tabs */
.np-tab-actions:empty { display: none; }
.lyrics-actions { display: flex; align-items: center; gap: 8px; padding: 8px 0 2px; flex-wrap: wrap; }
.lyrics-actions .muted { flex: 1 1 100%; }
.lyrics-actions .btn.small { height: 30px; padding: 0 12px; }

/* Tooltips ([data-tip], drawn by ui.js): one bubble placed by script so it never runs off the screen — kept
   inside the window with an 8px margin, wrapped at 240px, below the control when there's no room above. */
.tip-bubble { position: fixed; z-index: 1000; max-width: min(240px, calc(100vw - 16px)); padding: 6px 9px; border-radius: 7px;
  background: var(--surface-3, #2a2623); color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.35; text-align: left;
  box-shadow: 0 6px 18px rgba(0,0,0,.45); pointer-events: none; opacity: 0; transition: opacity .12s; white-space: normal; overflow-wrap: anywhere; }
.tip-bubble.on { opacity: 1; }
.tip-bubble::after { content: ''; position: absolute; left: var(--arrow-x, 50%); transform: translateX(-50%); border: 5px solid transparent; }
.tip-bubble[data-side="top"]::after { top: 100%; border-top-color: var(--surface-3, #2a2623); }
.tip-bubble[data-side="bottom"]::after { bottom: 100%; border-bottom-color: var(--surface-3, #2a2623); }

/* Narrow desktop window: once the page beside the slim Now-playing pane would be under ~340px wide (window under
   600px), the pane takes the whole window instead — over the page and the sidebar — until its × or the Now-playing
   button closes it. The player bar and tab bar stay underneath. */
@media (max-width: 600px) {
  body.desktop-app.np-visible .app { grid-template-columns: minmax(0, 1fr); }
  body.desktop-app.np-visible .nowpane { grid-column: 1; grid-row: 1 / 3; z-index: 5; border-left: 0; }
  body.desktop-app.np-visible .phone-head, body.desktop-app.np-visible .main { visibility: hidden; }
  body.desktop-app.np-visible .np-inner { padding: 12px 16px 0; }
  body.desktop-app.np-visible .np-art .cover { width: min(100%, 300px); margin: 0 auto; }
}

.fp-like { display: contents; } /* wrapper for the full player's like button so it can be refreshed in place */

/* ---------- Library chips: two rows (whose music + Liked; views + quick picks) ---------- */
.lib-tabs { display: block; } /* block, not flex: a flex column would grow as wide as the scrolling row */
.lib-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lib-row + .lib-row { margin-top: 10px; }
.lib-sep { width: 1px; height: 22px; background: var(--line); margin: 0 2px; flex: none; }
.lib-row .chip .chip-ic { width: 15px; height: 15px; margin-right: 5px; }
.lib-row button.chip { font: inherit; }
@media (max-width: 760px) {
  /* Phones: the views and quick picks sit on one line that scrolls sideways, instead of wrapping into four rows. */
  .lib-scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--view-px, 16px)); padding: 2px var(--view-px, 16px); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lib-scroll::-webkit-scrollbar { display: none; }
  /* A tight fade where the row runs off the edge (and on the left once it has been scrolled), instead of a hard cut. */
  .lib-scroll { --fade-l: 0px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - 22px), transparent); }
  .lib-scroll.at-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000); mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000); }
  .lib-scroll.scrolled { --fade-l: 22px; }
  .lib-scroll .chip { flex: none; white-space: nowrap; }
  .lib-row .lib-scope-wrap { display: contents; } /* Liked + My library|Family on one line; View as… wraps under */
}

/* ---------- Home header on phones: greeting with every quick button on the same line ---------- */
@media (max-width: 760px) {
  .page-head.row.between.home-band { flex-wrap: nowrap; align-items: center; gap: 6px; }
  .page-head.row.between.home-band h1 { flex: 1 1 auto; min-width: 0; font-size: clamp(17px, 4.8vw, 26px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 0; }
  .page-head.row.between.home-band .gm-tools { display: contents; } /* the Inbox button joins the row */
  .page-head.row.between.home-band .gm-inbox-btn { order: 2; width: 34px; height: 34px; padding: 0; border-radius: 50%; justify-content: center; flex: none; background: transparent; color: var(--muted); border: 0; position: relative; }
  .page-head.row.between.home-band .gm-inbox-btn .badge { position: absolute; top: 2px; right: 0; }
  .page-head.row.between.home-band .home-tools { order: 3; margin-left: 0; flex: none; gap: 0 !important; }
  .page-head.row.between.home-band .home-tools .icon-btn, .page-head.row.between.home-band .gm-inbox-btn { width: 32px; height: 32px; }
  .page-head.row.between.home-band .home-tools .icon-btn .icon, .page-head.row.between.home-band .gm-inbox-btn .icon { width: 21px; height: 21px; }
  .lib-scope-wrap { max-width: 100%; }
}

/* ---------- Car mode: four slim tiles on one line ---------- */
.car-tiles { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.car-tile { height: 64px; font-size: 13px; gap: 4px; border-radius: 14px; }
.car-tile .icon { width: 22px; height: 22px; }
@media (max-width: 400px) { .car-tile { height: 58px; font-size: 12px; } }

/* ---------- Phone player bar: flush with the tab bar, no floating pill ---------- */
@media (max-width: 760px) {
  body:not(.desktop-app) .playerbar { margin: 0; border-radius: 0; border-top: 1px solid rgba(255,255,255,.08); }
  body:not(.desktop-app) .pb-mini-progress { margin: 0; }
  body:not(.desktop-app) .pb-row { padding: 8px 12px; }
}

/* First run in the desktop app: own server, or join one */
.setup-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 16px; }
.setup-choice-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 14px; background: var(--surface-2); border: 2px solid transparent; text-align: center; font: inherit; color: var(--text); }
.setup-choice-btn .icon { width: 26px; height: 26px; color: var(--muted); margin-bottom: 2px; }
.setup-choice-btn[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.setup-choice-btn[aria-pressed="true"] .icon { color: var(--accent); }
.setup-choice-btn .hint { margin: 0; }
.setup-join { display: flex; flex-direction: column; gap: 10px; }
.setup-found { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.folder .folder-owner { width: 170px; height: 34px; flex: none; }
.card-inset { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }
.card-inset .remote-url { margin-top: 4px; }

/* ---------- Touch: small icon buttons keep their look but get a 40px hit area ---------- */
@media (pointer: coarse) {
  .icon-btn.small { position: relative; }
  .icon-btn.small::after { content: ''; position: absolute; inset: -6px; }
}
/* Playback quality selects: long option text ("Normal · ≈256 kbps MP3 · Opus") needs the room */
.setting-row select.input { max-width: 100%; min-width: 220px; }
/* Light theme: placeholder covers and the active sidebar item need more contrast */
[data-theme="light"] .cover:has(.placeholder) { background: color-mix(in srgb, var(--text) 9%, var(--surface-2)); }
[data-theme="light"] .nav-link.active { background: color-mix(in srgb, var(--text) 9%, transparent); }
[data-theme="light"] .tag-needs { color: #3a2a00; background: #ffd27a; }
/* "Your week" chart labels were unreadable */

/* "Continue from another device": a chip on Home instead of a bar on every page */
.resume-chip { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 8px 8px 8px 10px; margin-bottom: 8px; }
.resume-chip .cover { width: 40px; height: 40px; border-radius: 8px; flex: none; }
.resume-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.resume-text b { font-size: 14px; }
.resume-chip > .icon-btn:not(.small) { background: var(--accent); color: var(--accent-ink); width: 36px; height: 36px; border-radius: 50%; }

.menu-sep { height: 1px; background: var(--line); margin: 4px 8px; }
.menu-header { padding: 8px 14px 6px; font-size: 14px; line-height: 1.25; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu-header b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Phone Home header: Car mode, Karaoke and Customize live in the More menu */
.home-more { display: none; }
@media (max-width: 760px) {
  body:not(.desktop-app) .home-tools a[href="#/car"], body:not(.desktop-app) .home-tools a[href="#/karaoke"], body:not(.desktop-app) .home-tools [aria-label="Customize Home"] { display: none; }
  body:not(.desktop-app) .home-more { display: inline-flex; }
}

/* Appearance → "Home tiles and notices follow the album colours" */
body.tiles-art .quick .q-icon { background: linear-gradient(135deg, var(--art-1), var(--art-2)); }
body.tiles-art .notice:not(.warn, .ok, .down, .in-attn, [data-busy="1"]):not(:has(> .icon:is([data-i="warning"], [data-i="check"], [data-i="fail"]))) { background: linear-gradient(90deg, color-mix(in srgb, var(--art-1) 16%, transparent), color-mix(in srgb, var(--art-2) 5%, transparent)); border-color: color-mix(in srgb, var(--art-1) 35%, transparent); }
body.tiles-art .resume-chip > .icon-btn:not(.small) { background: var(--art-1); }

.np-qhead { padding: 2px 4px 6px; }
/* Phones: queue rows show their remove button without hover */
@media (pointer: coarse) { .np-row .icon-btn { opacity: 1; } }
/* Week chart: give the SVG enough height that its 11px labels render at 11px */
.week-chart svg { width: 100%; height: auto; min-height: 110px; }

/* Search page (phones): the online panel's own search box stays hidden — the page's one box drives it */
.search-page .gm-panel .gm-search, .search-page .gm-panel .gm-tabs, .search-page .gm-panel .gm-tools, .search-page .gm-panel .gm-files-hint, .search-page .gm-panel .gm-setup { display: none !important; }
.search-page .search-online { margin-top: 18px; }
.search-page .search-results { margin-top: 8px; }

/* Settings on phones: a list of sections; one opens as its own page */
@media (max-width: 760px) {
  body:not(.desktop-app) .scards-list .scard-tools .row { display: none; } /* search stays; Customize is for wide screens */
  body:not(.desktop-app) .scards-list .scard-tools { margin-bottom: 8px; }
  body:not(.desktop-app) .scards-list .scard-body { display: none; }
  body:not(.desktop-app) .scards-list .scard { margin-bottom: 8px; }
  body:not(.desktop-app) .scards-list .scard-head { padding: 14px 14px; }
  body:not(.desktop-app) .scards-list .scard-chev { transform: rotate(-90deg); }
  body:not(.desktop-app) .scards-focus .scard-tools { display: none; }
  body:not(.desktop-app) .scards-focus .scard:not(.focused) { display: none; }
  body:not(.desktop-app) .scards-focus .scard.focused .scard-head { pointer-events: none; }
  /* An opened section: its title lines up with what's under it, and its description is read in full. */
  body:not(.desktop-app) .scards-focus .scard.focused .scard-head { padding-left: 0; }
  body:not(.desktop-app) .scards-focus .scard.focused .scard-toggle { padding-left: 12px; }
  body:not(.desktop-app) .scards-focus .scard.focused .scard-help { white-space: normal; }
  body:not(.desktop-app) .scards-focus .scard.focused .scard-chev, body:not(.desktop-app) .scards-focus .scard-moves { display: none; }
  body:not(.desktop-app) .scards-focus .scard.focused .scard-body { display: block !important; }
  body:not(.desktop-app) .scard-backrow { display: inline-flex; margin-bottom: 10px; }
}

/* Full album: songs you don't have are greyed and not clickable. */
.track.t-missing { cursor: default; }
/* Settings → Appearance → "Music you have and don't have". Dim (default): what you don't have is faded — its words
   and cover, not its Get buttons. Outline: everything stays bright and what you have gets a faint ring just outside
   its cover (never over the picture), or around its row. */
:root:not([data-owned-look="outline"]) .track.t-missing:not(.t-else) > .t-num,
:root:not([data-owned-look="outline"]) .track.t-missing:not(.t-else) > .t-main,
:root:not([data-owned-look="outline"]) .track.t-missing:not(.t-else) > .t-dur { opacity: .55; }
/* A whole release's track list (your album with every song showing, or an album you don't have yet): one layout for
   both, so a song landing changes a row's status and nothing else. Time, then a status column — your heart, "Get
   song", or the download ring with what's happening beside it — all starting at the same left edge, then •••. */
.tracks.no-album .track > * { grid-row: 1; }
.tracks.no-album .track > :nth-child(1) { grid-column: 1; }
.tracks.no-album .track > :nth-child(2) { grid-column: 2; }
.tracks.no-album .track > :nth-child(3) { grid-column: 4; justify-self: start; }
.tracks.no-album .track > :nth-child(4) { grid-column: 3; }
.tracks.no-album .track > :nth-child(5) { grid-column: 5; }
/* Song lists keep the time and buttons right after the song's name (titles up to 560px, or 460px + album) rather than
   across the page. */
.t-status { display: flex; align-items: center; justify-content: flex-start; min-width: 0; }
.t-status .t-getbtn { padding: 0 8px 0 5px; gap: 6px; color: var(--text); }
.t-status .t-getbtn .icon { width: 18px; height: 18px; }
.t-status .gm-getting { padding-left: 5px; }
.tracks.no-album .track > .t-like { margin-left: 2px; }
@media (max-width: 760px) {
  .tracks.full-album .track { grid-template-columns: minmax(0, 1fr) 116px 40px; }
  .tracks.no-album .track:not(.track-head) { grid-template-columns: minmax(0, 1fr) 116px 40px; grid-template-rows: 19px auto; row-gap: 0; align-content: center; }
  .tracks.no-album .track > :nth-child(2) { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .tracks.no-album .track > :nth-child(5) { grid-column: 3; grid-row: 1 / span 2; }
  /* Phones: the time stacks over the heart / Get song / download ring, starting at the same left edge. */
  .tracks.no-album .track > :nth-child(3) { grid-column: 2; grid-row: 2; align-self: start; margin-top: -5px; }
  .tracks.no-album .track > .t-dur { display: block !important; grid-column: 2; grid-row: 1; align-self: center; justify-self: start; text-align: left; font-size: 12px; line-height: 19px; padding-left: 6px; color: var(--muted); }
}
:root[data-owned-look="outline"] .full-album:has(.t-missing) .track:not(.t-missing):not(.track-head) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); }
:root[data-owned-look="outline"] .full-album:has(.t-missing) .track:not(.t-missing):not(.track-head) + .track:not(.t-missing):not(.track-head) { margin-top: 2px; }
:root[data-owned-look="outline"] .tile-owned .cover { outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 4px; }
:root[data-owned-look="outline"] .tile-owned .tag-needs.ok { display: none; }
/* Rows that can't be played from here (a release you don't own, songs missing from the full album) have no play
   icon to swap in on hover, so their number stays. */
.track.t-missing .t-num .n, .track.gm-track:hover .t-num .n, .track.t-missing:hover .t-num .n { display: inline; }
.icon-btn.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Home: one slim "Needs attention" row instead of a stack of banners. */
.attn { margin-bottom: 16px; }
.attn-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 14px; border-radius: var(--radius-lg); background: linear-gradient(90deg, color-mix(in srgb, var(--k) 14%, transparent), color-mix(in srgb, var(--k) 4%, transparent)); border: 1px solid color-mix(in srgb, var(--k) 30%, transparent); color: var(--text); font-size: 14px; cursor: pointer; }
.attn-row .attn-ic { color: var(--k); width: 18px; height: 18px; flex: none; }
.attn-ic-slot { display: flex; flex: none; }
.attn-spin { margin: 0; width: 18px; height: 18px; flex: none; }
.attn.busy .attn-row { background: var(--surface-2, rgba(255,255,255,.05)); border-color: var(--line, rgba(255,255,255,.12)); }
.notice-ic { display: flex; flex: none; }
.notice[data-busy="1"] { border-color: var(--line); background: var(--surface-2); }
.gm-job.clickable { cursor: pointer; }
/* (only a picture that has loaded: one still coming, or that failed, stays hidden — it would show a broken-image box) */
:root:not([data-owned-look="outline"]) .tile-missing .cover > img:is(:not(.rc-img), .rc-img.ok), :root:not([data-owned-look="outline"]) .tile-missing .cover > .placeholder { opacity: .5; filter: saturate(.5); transition: opacity .2s, filter .2s; }
:root:not([data-owned-look="outline"]) .tile-missing:hover .cover > img:is(:not(.rc-img), .rc-img.ok), :root:not([data-owned-look="outline"]) .tile-missing:hover .cover > .placeholder { opacity: .95; filter: none; }
:root:not([data-owned-look="outline"]) .tile-missing .tile-title, :root:not([data-owned-look="outline"]) .tile-missing .tile-sub { color: var(--muted); }
.gm-getting { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; max-width: 100%; min-width: 0; }
.gm-getting .gm-way-text { overflow: hidden; text-overflow: ellipsis; }
/* In the song list's last column the ring keeps one spot: the column lines up on the left, the word follows it. */
.gm-track-end { display: flex; align-items: center; min-width: 0; }
.gm-track-end:has(> .gm-getting) { justify-content: flex-start; padding-left: 14px; }
.rg { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 50%; }
.rg svg { display: block; overflow: visible; }
.rg-track { fill: none; stroke: var(--surface-3); stroke-width: 2.4; }
.rg-fill { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.rg-check { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s; }
.rg.done .rg-check { opacity: 1; }
/* Being checked and filed: the full ring breathes a soft glow. */
.rg.filing { animation: rg-glow 1.6s ease-in-out infinite; }
@keyframes rg-glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } 50% { box-shadow: 0 0 7px 2px color-mix(in srgb, var(--accent) 45%, transparent); } }
@media (prefers-reduced-motion: reduce) { .rg.filing { animation: none; box-shadow: 0 0 5px 1px color-mix(in srgb, var(--accent) 35%, transparent); } .rg-fill { transition: none; } }
.btn .rg { width: 18px; height: 18px; }
.btn .rg svg { width: 18px; height: 18px; }
.btn.primary .rg-track { stroke: color-mix(in srgb, var(--accent-ink) 25%, transparent); }
.btn.primary .rg-fill, .btn.primary .rg-check { stroke: var(--accent-ink); }
.gm-job.clickable:hover, .gm-job.clickable:focus-visible { background: var(--surface-2); outline: none; }
.attn-row b { flex: none; }
.attn-gist { flex: 1; min-width: 0; color: var(--muted); }
.attn-chev { width: 16px; height: 16px; flex: none; color: var(--muted); transition: transform .2s; }
.attn-chev { transform: rotate(-90deg); } .attn.open .attn-chev { transform: rotate(0deg); }
/* Open: one card — the row on top, then each notice as a line under a divider (not cards hanging off a line). */
.attn.open { border-radius: var(--radius-lg); background: linear-gradient(90deg, color-mix(in srgb, var(--k) 14%, transparent), color-mix(in srgb, var(--k) 4%, transparent)); border: 1px solid color-mix(in srgb, var(--k) 30%, transparent); overflow: hidden; }
.attn.busy.open { background: var(--surface-2); border-color: var(--line); }
.attn.open .attn-row { background: none; border-color: transparent; border-radius: 0; }
.attn-list { padding: 0; margin: 0; }
.attn-list .notice, .attn-list .notice[data-busy="1"] { margin: 0; background: none; border: 0; border-top: 1px solid color-mix(in srgb, var(--k) 22%, var(--line)); border-radius: 0; padding: 10px 14px; backdrop-filter: none; }
@media (max-width: 560px) { .attn-gist { display: none; } }
/* Phones have a Search tab, so Home doesn't repeat the search box or its tabs. */
@media (max-width: 760px) { .home .gm-panel .gm-search, .home .gm-panel .gm-tabs, .home .gm-panel .gm-files-hint, .home .home-search { display: none !important; } .home .gm-panel:not(:has(.gm-results:not(:empty))) { margin: 0; } }

/* Library controls: header holds title · search · whose music; one row below holds the kinds and the sort/quick-picks menu. */
.lib-head .lib-scope-wrap { margin-left: auto; }
.lib-row { justify-content: space-between; }
.lib-kinds { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lib-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lib-count { white-space: nowrap; }
.lib-sort { font: inherit; }
.lib-tabs { margin-bottom: 18px; }
@media (max-width: 760px) {
  .lib-head .lib-scope-wrap { margin-left: 0; width: 100%; }
  .lib-head .lib-scope-wrap .seg { flex: 1; } .lib-head .lib-scope-wrap .seg-btn { flex: 1; }
  .lib-count { display: none; }
  .lib-kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .lib-kinds .chip { flex: none; white-space: nowrap; }
  .lib-right { flex: none; margin-left: auto; } .lib-row { flex-wrap: wrap; row-gap: 8px; } .lib-kinds { min-width: 0; flex: 1 1 auto; } /* the sort/menu goes under the chips when they need the room: none squeezed */
}

/* Album facts strip under the hero: format · quality, added, plays, last played. */
.facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -8px 0 16px; color: var(--muted); font-size: 13px; }
.fact { display: inline-flex; align-items: center; gap: 6px; }
.fact-ic { width: 14px; height: 14px; opacity: .8; }
.fact.good { color: var(--accent); }
.fact.warn { color: #e0a24a; }
.fact.link { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  /* Phones: the album's details read as one line under the artist line, in its style (• between), close to it. */
  .facts { justify-content: center; margin: -10px 0 14px; gap: 2px 0; font-size: 12.5px; line-height: 1.5; }
  .facts .fact { gap: 0; }
  .facts .fact-ic { display: none; }
  .facts > .fact + .fact::before { content: '•'; margin: 0 7px; opacity: .7; }
  .facts > .f-last { display: none; } /* the play count says enough here */
  .facts > .fact.link { order: 9; flex-basis: 100%; justify-content: center; }
  .facts > .fact.link::before { content: none; }
}

.tag-needs.upg { color: #e0a24a; }
[data-theme="light"] .tag-needs.upg { color: #6b4300; }
.tile-dl { position: absolute; right: 18px; top: 18px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.72); color: var(--ok, #58d68d); display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.tile-dl .icon { width: 13px; height: 13px; }

/* Inbox: the folder row and the all-clear state. */
.inbox-folder { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: var(--radius-lg); margin-top: 8px; }
.inbox-folder > .icon { width: 26px; height: 26px; color: var(--muted); flex: none; }
.inbox-clear { padding: 36px 16px; }
.inbox-clear > .icon { color: var(--ok, #58d68d); }

/* Notifications: grouped by day; the icon colour says what kind it is. */
.notif-group { margin-bottom: 18px; }
.notif-group-h { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px 4px; }
/* Notification icons all take the theme colour (set on .notif-icon); their shapes tell the kinds apart. */

.storage-bar { position: relative; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.storage-used { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--text) 25%, transparent); }
.storage-music { position: absolute; inset: 0 auto 0 0; background: var(--accent); }

/* Search page before anything is typed. */
.search-start { margin-top: 18px; }
.search-group { margin-bottom: 22px; }
.search-group h3 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip { font: inherit; font-size: 14px; }
.chips .chip .chip-ic { width: 15px; height: 15px; margin-right: 6px; }
.chip-n { margin-left: 6px; color: var(--muted); font-size: 12px; }
.t-when { color: var(--muted); }
.recent-group { margin-bottom: 20px; }

.np-details { color: var(--muted); font-size: 12px; margin-top: 2px; }
.np-dot { margin: 0 5px; color: var(--faint); }

/* Phones: the hero cover shrinks as you scroll, and a slim sticky bar takes over once the hero is gone. */
@media (max-width: 760px) {
  .hero .cover { transform: scale(calc(1 - .22 * var(--hero-p, 0))); transform-origin: center bottom; transition: transform .05s linear; }
  .hero-bar { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; gap: 10px; margin: 0 calc(-1 * var(--view-px)) 0; padding: 8px var(--view-px); background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(-100%); pointer-events: none; transition: opacity .18s, transform .18s; height: 52px; margin-bottom: -52px; box-sizing: border-box; }
  .hero-bar.show { opacity: 1; transform: none; pointer-events: auto; }
  /* The album bar slides in at the top; the Back button moves down just under it instead of being covered. */
  .page-back { transition: top .18s; }
  .view:has(> .hero-bar.show) > .page-back { top: 60px; }
  .hero-bar .cover.small { width: 36px; height: 36px; border-radius: 6px; flex: none; box-shadow: none; transform: none; }
  .hero-bar-title { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; }
  .hero-bar-play { background: var(--accent); color: var(--accent-ink); }
}
@media (prefers-reduced-motion: reduce) { .hero .cover { transform: none !important; } }

.role-tag[role="button"] { cursor: pointer; border-radius: 999px; }
.role-tag[role="button"]:hover { color: var(--text); }

/* Per-song marks before the artist: quality and lyrics. */
.t-q { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .02em; line-height: 1; padding: 2px 4px; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--muted); margin-right: 6px; vertical-align: 1px; }
.t-q.good { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.t-q.low { color: #e0a24a; background: rgba(224,162,74,.14); }
[data-theme="light"] .t-q.low { color: #7a4a00; background: rgba(168, 85, 8, .12); }
.t-ly { display: inline-flex; width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; color: var(--faint); }
.t-ly.timed, .t-ly.ai, .t-ly.words { color: var(--accent); } /* one colour (the theme's): the icon's corner tells them apart */
.t-ly .icon { width: 14px; height: 14px; }
@media (max-width: 760px) { .t-q { font-size: 9px; padding: 1px 3px; } }

/* ---- Motion & polish ---- */
/* Page change: a short fade with a small rise; rows and tiles arrive one after another (first dozen only). */
.view.enter-forward { animation: view-in .18s cubic-bezier(.2,.7,.2,1); }
.view.enter-back { animation: view-in-back .18s cubic-bezier(.2,.7,.2,1); }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes view-in-back { from { opacity: 0; transform: translateY(-6px); } }
.view.enter-forward .track:not(.track-head), .view.enter-forward .tile, .view.enter-forward .gm-job, .view.enter-forward .list-row { animation: row-in .32s cubic-bezier(.2,.7,.2,1) both; }
.view.enter-forward :is(.track, .tile, .gm-job, .list-row):nth-child(1) { animation-delay: 0ms; } .view.enter-forward :is(.track, .tile, .gm-job, .list-row):nth-child(2) { animation-delay: 22ms; } .view.enter-forward :is(.track, .tile, .gm-job, .list-row):nth-child(3) { animation-delay: 44ms; } .view.enter-forward :is(.track, .tile, .gm-job, .list-row):nth-child(4) { animation-delay: 66ms; } .view.enter-forward :is(.track, .tile, .gm-job, .list-row):nth-child(5) { animation-delay: 88ms; } .view.enter-forward :is(.track, .tile, .gm-job, .list-row):nth-child(6) { animation-delay: 110ms; } .view.enter-forward :is(.track, .tile, .gm-job, .list-row):nth-child(7) { animation-delay: 132ms; } .view.enter-forward :is(.track, .tile, .gm-job, .list-row):nth-child(8) { animation-delay: 154ms; } .view.enter-forward :is(.track, .tile, .gm-job, .list-row):nth-child(9) { animation-delay: 176ms; } .view.enter-forward :is(.track, .tile, .gm-job, .list-row):nth-child(10) { animation-delay: 198ms; } .view.enter-forward :is(.track, .tile, .gm-job, .list-row):nth-child(11) { animation-delay: 220ms; } .view.enter-forward :is(.track, .tile, .gm-job, .list-row):nth-child(12) { animation-delay: 242ms; }
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } }
/* Album-colour wash behind the hero. */
.view { position: relative; }
.view.has-bleed::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 420px; pointer-events: none; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--hero-1) 26%, transparent), color-mix(in srgb, var(--hero-2) 8%, transparent) 55%, transparent); animation: bleed-in .6s ease-out; }
@keyframes bleed-in { from { opacity: 0; } }
.main { position: relative; z-index: 0; }
/* Skeleton placeholders. */
.skeleton { --sk: color-mix(in srgb, var(--text) 7%, transparent); --sk2: color-mix(in srgb, var(--text) 12%, transparent); }
.sk-bar, .sk-sq, .sk-cover { border-radius: 6px; background: linear-gradient(90deg, var(--sk) 25%, var(--sk2) 50%, var(--sk) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.sk-bar { margin: 8px 0; }
.sk-row { display: flex; align-items: center; gap: 14px; padding: 8px 12px; }
.sk-sq { width: 40px; height: 40px; flex: none; }
.sk-lines { flex: 1; min-width: 0; }
.sk-hero { display: flex; align-items: flex-end; gap: 28px; margin-bottom: 26px; }
.sk-cover { aspect-ratio: 1; width: 100%; margin-bottom: 10px; }
.sk-cover.big { width: 220px; flex: none; }
.sk-cover.round, .sk-cover.sk-dot { border-radius: 50%; }
.sk-cover.sk-dot { flex: none; margin: 0; }
.sk-tile { padding: 12px; margin: -12px; min-width: 0; } /* placed exactly like a real .tile */
.sk-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0 24px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.gm-stale { opacity: .55; transition: opacity .15s; pointer-events: none; }
.lyrics-skel { display: flex; flex-direction: column; gap: 14px; padding: 18px 4px; }
.lyrics-skel .sk-bar { height: 18px; margin: 0; }
.t-skel { pointer-events: none; --sk: color-mix(in srgb, var(--text) 7%, transparent); --sk2: color-mix(in srgb, var(--text) 12%, transparent); }
.t-skel .sk-bar { vertical-align: middle; }
@media (max-width: 760px) { .sk-hero { flex-direction: column; align-items: center; } .sk-cover.big { width: min(64vw, 260px); } .sk-quick { grid-template-columns: 1fr 1fr; } }
/* Covers lift on hover; the play button and chips press. */
.tile .cover { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s; }
@media (hover: hover) { .tile:hover .cover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(0,0,0,.5); } }
.play-fab, .btn, .chip, .icon-btn, .tile-play { transition: transform .12s, background .15s, color .15s, opacity .15s; }
.play-fab:active, .btn:active, .chip:active, .icon-btn:active, .quick > *:active { transform: scale(.94); }
/* Flying cover (phone mini player → full player). */
.fly-cover { position: fixed; z-index: 220; overflow: hidden; border-radius: 6px; transform-origin: top left; pointer-events: none; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.fly-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Buffered band behind the played part of the seek bar. */
.range[aria-label="Seek"] { background: linear-gradient(to right, var(--text) var(--p, 0%), color-mix(in srgb, var(--text) 28%, var(--surface-3)) var(--p, 0%), color-mix(in srgb, var(--text) 28%, var(--surface-3)) var(--b, 0%), var(--surface-3) var(--b, 0%)); }
.range[aria-label="Seek"]:hover { background: linear-gradient(to right, var(--art-1) var(--p, 0%), color-mix(in srgb, var(--text) 28%, var(--surface-3)) var(--p, 0%), color-mix(in srgb, var(--text) 28%, var(--surface-3)) var(--b, 0%), var(--surface-3) var(--b, 0%)); }
/* Badges pop when their number goes up; toasts slide up from the player bar (they already fade — add the rise). */
.badge.pop { animation: badge-pop .35s cubic-bezier(.2,.9,.3,1.4); }
@keyframes badge-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .view.enter-forward, .view.enter-back, .view.enter-forward .track, .view.enter-forward .tile, .view.enter-forward .gm-job, .view.enter-forward .list-row, .view.has-bleed::before, .badge.pop, .sk-bar, .sk-sq, .sk-cover { animation: none !important; }
  .tile:hover .cover, .play-fab:active, .btn:active, .chip:active, .icon-btn:active { transform: none !important; }
  .fly-cover { display: none; }
}

/* Empty states inside a card or section: same look, less air. */
.card .empty, .section .empty, .np-body .empty { padding: 22px 12px; }
.card .empty > .icon, .section .empty > .icon { width: 34px; height: 34px; }
.card .empty h2, .section .empty h2 { font-size: 16px; }
.card .empty p, .section .empty p { font-size: 13px; margin-bottom: 10px; }

/* Phones: the tinted header fades into the page instead of ending in a hard line. */
@media (max-width: 760px) { .phone-head { background: linear-gradient(180deg, var(--titlebar-bg, var(--bg)), color-mix(in srgb, var(--titlebar-bg, var(--bg)) 70%, var(--bg))); } }

.sweep-reasons { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }
.sweep-reasons li { margin: 2px 0; }

/* AI timing preview: lines it wasn't sure of. */
.lyric-line.ai-partial, .lyric-line.ai-sound, .lyric-line.ai-missing, .lyric-line.ai-inserted, .lyric-line.ai-prior, .lyric-line.ai-disputed { position: relative; }
.lyric-line.ai-partial::before, .lyric-line.ai-sound::before, .lyric-line.ai-missing::before, .lyric-line.ai-inserted::before, .lyric-line.ai-prior::before, .lyric-line.ai-disputed::before {
  content: ''; position: absolute; left: -12px; top: .35em; bottom: .35em; width: 3px; border-radius: 2px; background: #e0a24a; }
.lyric-line.ai-missing::before { background: #e5604f; }
.lyric-line.ai-inserted::before { background: var(--accent); }
.lyric-line.ai-partial::before { opacity: .6; }
.ai-reasons { color: #e0a24a; }

/* Pauses in synced lyrics: a row of notes that fill in, one after another, until the singing comes back. */
.lyric-pause { display: flex; gap: .45em; letter-spacing: 0; }
.lyric-pause .note { display: inline-block; }
.lyric-line.lyric-pause.on .lw { background: linear-gradient(90deg, #fff var(--p), rgba(255,255,255,.22) var(--p)); -webkit-background-clip: text; background-clip: text; }
@keyframes note-bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-.08em) scale(1.06); } }
.lyric-pause.past .note { color: rgba(255,255,255,.35) !important; }
.lyrics.big .lyric-pause { gap: .35em; }

.lyric-line.ai-prior::before { opacity: .45; }

/* Find lyrics (LRCLIB picker) */
.fl-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow: auto; }
.fl-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.fl-main { flex: 1; min-width: 0; }
.fl-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-preview { color: var(--faint); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
.fl-empty { text-align: center; padding: 18px 8px; }
/* Lyrics editor: one line per row */
.le { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.le-intro { margin: 0; }
.le-rows { display: flex; flex-direction: column; gap: 4px; overflow: auto; max-height: 58vh; padding-right: 4px; }
.le-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 32px; align-items: center; gap: 8px; }
.le-time { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-start; font: inherit; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; padding: 6px 6px; border-radius: 8px; background: none; border: 0; cursor: pointer; }
.le-time .icon { width: 14px; height: 14px; }
.le-time:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.le-time:disabled { opacity: .35; cursor: default; }
.le-text { padding: 7px 10px; border-radius: 8px; background: var(--surface-2); line-height: 1.4; outline: none; min-height: 1.4em; white-space: pre-wrap; word-break: break-word; }
.le-text:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent); }
mark.le-unsure { background: rgba(224,162,74,.28); color: inherit; border-radius: 3px; padding: 0 2px; }
.le-del { opacity: .45; } .le-row:hover .le-del, .le-row:focus-within .le-del { opacity: 1; }
.le-foot { flex-wrap: wrap; gap: 10px; padding-top: 4px; }
@media (max-width: 760px) { .le-row { grid-template-columns: 56px minmax(0, 1fr) 28px; gap: 6px; } .le-rows { max-height: 60vh; } }

.lyrics-none-acts { gap: 8px; justify-content: center; flex-wrap: wrap; }
.lyrics-none-acts .btn .icon { width: 15px; height: 15px; margin-right: 4px; }

.lyrics-head-acts { gap: 4px; justify-content: center; flex-wrap: wrap; }
.lyrics-head-acts .btn .icon { width: 14px; height: 14px; margin-right: 4px; }
/* Phones: the song's tools stay on one line — tighter buttons, and on narrow screens Fine-tune and Edit lyrics
   drop their words (icons with labels for screen readers and a long press), never a second row. */
@media (max-width: 760px) {
  .lyrics-head-acts { flex-wrap: nowrap; gap: 2px; max-width: 100%; }
  .lyrics-head-acts .btn.small { padding: 0 7px; font-size: 13px; white-space: nowrap; min-width: 0; }
  .lyrics-head-acts .icon-btn.small { width: 32px; height: 34px; flex: none; }
}
@media (max-width: 374px) {
  .lyrics-head-acts .btn.small > .lh-word { display: none; }
  .lyrics-head-acts .btn.small:not(.on) .icon { margin-right: 0; width: 18px; height: 18px; }
  .lyrics-head-acts .btn.small:not(.on) { width: 38px; padding: 0; justify-content: center; }
  .lyrics-head-acts .lyrics-tune-head.on > .lh-word { display: inline; } /* while fine-tuning, say so */
  .lyrics-head-acts .lyrics-tune-head.on { width: auto; padding: 0 10px; }
}

/* Report a lyrics issue */
.lyrics-flag.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.lyrics-flag-hint { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 4px 0 6px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); font-size: 13px; }
.lyrics-flag-hint > .icon { width: 16px; height: 16px; color: var(--accent); flex: none; }
.lyrics-flag-hint span { flex: 1; }
.lyrics-body.flagging .lyric-line { cursor: crosshair; }
.lyrics-body.flagging .lyric-line:hover { color: rgba(255,255,255,.8); }
.lyrics-body.flagging .lw:hover { text-decoration: underline wavy color-mix(in srgb, var(--accent) 80%, transparent); text-underline-offset: 4px; }
.flag-quote { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-weight: 600; line-height: 1.4; }
.flag-quote mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.seg-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; height: auto; padding: 10px 12px; white-space: normal; }
.seg-choice.on { outline: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
@media (max-width: 420px) { .seg-choices { grid-template-columns: 1fr; } }

/* Help improve RiftCaster / Developer */
.share-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.share-pre { margin: 0; max-height: 60vh; overflow: auto; padding: 12px; border-radius: 10px; background: var(--surface-2); font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.dev-key-link { align-self: flex-start; opacity: .7; }
.dev-h { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 6px 0 0; }
.dev-reports { max-height: 50vh; overflow: auto; }

/* Share ratio cap */
.ratio-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.ratio-meter { height: 6px; border-radius: 99px; background: color-mix(in srgb, currentColor 12%, transparent); overflow: hidden; }
.ratio-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .4s ease; }
.ratio-meter.full > span { background: var(--warn, #d9a43a); }
.ratio-cap .is-dim { opacity: .55; }

/* Lyrics message that folds to its first sentence */
.lyrics-msg-row { flex: 1 1 100%; display: flex; align-items: flex-start; gap: 6px; }
.lyrics-msg-row .lyrics-msg-text { flex: 1; min-width: 0; }
.lyrics-msg-short { font-weight: 700; color: var(--text); }
.lyrics-actions.min .msg-more { display: none; }
.lyrics-fold { flex: none; margin-top: -4px; }
.lyrics-fold .icon { transition: transform .2s ease; transform: rotate(180deg); }
.lyrics-actions.min .lyrics-fold .icon { transform: none; }

/* Fine-tune timing in the Now-playing pane */
.lyrics-tune.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.lyrics-body.tuning .lyric-line { cursor: pointer; position: relative; padding: 4px 6px 4px 54px; opacity: .75; }
.lyrics-body.tuning .lyric-line::before { content: attr(data-time); position: absolute; left: 8px; top: calc(4px + .45em); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); letter-spacing: 0; }
.lyrics-body.tuning .lyric-pause { opacity: .35; cursor: default; }
.lyrics-body.tuning .lyric-line.on { opacity: 1; }
.lyrics-body.tuning .lyric-line.tune-sel { opacity: 1; background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent); border-radius: 8px; }
.lyrics-body.tuning .lw.tune-sel { background: color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 5px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
.lyrics-body.tuning .tune-text { display: inline-block; min-width: 60%; outline: none; border-bottom: 2px solid var(--accent); }
.tune-bar { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; }
.tune-what { display: flex; align-items: center; gap: 6px; color: var(--muted); min-height: 20px; }
.tune-what .icon { width: 16px; height: 16px; color: var(--accent); }
.tune-what b { color: var(--text); }
.tune-btns, .tune-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tune-foot { flex-wrap: nowrap; }
.tune-foot .tune-later { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tune-btns .btn.small { font-variant-numeric: tabular-nums; }
.tune-later { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; }
.tune-spacer { flex: 1; }

/* Fine-tune in the full player (phones): the song row gives its room to the controls */
.lyrics.is-tuning .lyrics-head-row { display: none; }
.lyrics.is-tuning .lyrics-head { padding-bottom: 6px; }
.fp-lyrics .lyrics.is-tuning .lyrics-body { padding-top: 24px; -webkit-mask-image: linear-gradient(#000, #000 85%, transparent); mask-image: linear-gradient(#000, #000 85%, transparent); }
.lyrics-head + .lyrics-actions { padding: 0 6px 8px; }
.lyrics-tune-head.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
@media (pointer: coarse) {
  .tune-btns .btn.small, .tune-foot .btn.small { height: 38px; padding: 0 14px; font-size: 14px; }
  .tune-btns .icon-btn.small { width: 38px; height: 38px; }
  .tune-later input { width: 20px; height: 20px; }
}
.lyrics.is-tuning .lyrics-head-acts > :not(.lyrics-tune-head) { display: none; }

/* Notifications about a song: its cover, the kind's icon as a corner badge, and artist · album */
.notif-icon.notif-art { position: relative; border-radius: 8px; background: none; overflow: visible; }
.notif-art .cover { width: 40px; height: 40px; border-radius: 8px; }
.notif-badge { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); box-shadow: 0 0 0 2px var(--bg); color: inherit; }
.notif-badge .icon { width: 13px; height: 13px; }
/* Lyric notes: in the theme colour like everything else; their icons' shapes tell them apart. */
.notif-badge, .notif .notif-icon[class*="nb-"] { color: var(--accent); } /* the theme colour; the icon's shape says which */
.notif-song { color: var(--text); opacity: .8; font-weight: 600; margin-top: 1px; }

/* Lyric change log: before / after */
.chg-item { width: 100%; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; }
.chg-grid { max-height: 60vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.chg-row { display: grid; grid-template-columns: 52px 1fr 52px 1fr; gap: 6px 10px; padding: 5px 10px; font-size: 13px; border-top: 1px solid var(--line); align-items: baseline; }
.chg-row:first-child { border-top: 0; }
.chg-head { position: sticky; top: 0; background: var(--surface-2); z-index: 1; }
.chg-t { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
.chg-row.mv .chg-t:nth-of-type(3) { color: var(--accent); font-weight: 700; }
.chg-row.txt .chg-x:last-child { color: var(--accent); }
.chg-row.txt .chg-x:nth-of-type(2) { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); color: var(--muted); }
@media (max-width: 560px) { .chg-row { grid-template-columns: 44px 1fr; } .chg-row > :nth-child(3), .chg-row > :nth-child(4) { grid-column: auto; } }

/* Settings groups: tabs on wide screens, headings in the phone list and while searching */
.scard-groups { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.scard-group-tab { height: 36px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--muted); background: transparent; transition: background .15s, color .15s; }
.scard-group-tab:hover { color: var(--text); background: var(--surface-2); }
.scard-group-tab.on { color: var(--bg); background: var(--text); }
.settings-shell .scard-group-h { margin: 14px 2px 2px; font-size: 12px !important; line-height: 1.3; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.scards .scard-group-h:first-child { margin-top: 0; }
.settings-shell.scards-all .scard-groups { opacity: .55; }
@media (max-width: 760px) {
  body:not(.desktop-app) .scards-focus .scard-groups { display: none; }
  body:not(.desktop-app) .scards-list .scard-groups { margin: 0 -16px 12px; padding: 0 16px 10px; }
  body:not(.desktop-app) .scards-list .scard-group-tab { flex: none; }
  .scard-groups { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .scard-group-tab { flex: none; }
}

.lyric-line.ai-disputed::before { background: #e8a33d; }

/* Back to the line being sung (after scrolling away) */
.lyrics { position: relative; }
.lyrics-back { white-space: nowrap; position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px; border: 0; font-weight: 700; font-size: 13px; color: var(--bg); background: var(--text); box-shadow: 0 6px 20px rgba(0,0,0,.35); cursor: pointer; animation: lyrics-back-in .2s ease; }
.lyrics-back.up { top: 12px; bottom: auto; }
.lyrics-back.up .icon { transform: rotate(180deg); }
.lyrics-back .icon { width: 16px; height: 16px; }
@keyframes lyrics-back-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .lyrics-back { animation: none; } }

/* Karaoke in the app: the mic switch */
.k-mic { position: relative; }
.k-mic.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.k-mic-dot { position: absolute; right: 3px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: none; }
.k-mic.on.preparing .k-mic-dot { display: block; animation: k-mic-pulse 1.2s ease-in-out infinite; }
@keyframes k-mic-pulse { 50% { opacity: .25; } }

/* The stage in the app window: the expanded player as the karaoke screen */
.fullplayer .stage.fp-stage { position: absolute; inset: 0; z-index: 0; }
.fullplayer.fp-stage-on { background: #05030a; }
.fullplayer.fp-stage-on .fp-inner { max-width: none; transition: opacity .35s ease; background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 18%, transparent 70%, rgba(0,0,0,.65)); color: #fff; }
.fullplayer.fp-stage-on .fp-stage-space { flex: 1; min-height: 0; }
.fullplayer.fp-stage-on .fp-bar { max-width: 980px; width: 100%; margin: 0 auto; }
.fullplayer.fp-stage-on.fp-idle .fp-inner { opacity: 0; pointer-events: none; }
.fullplayer.fp-stage-on.fp-idle { cursor: none; }
.stage-status { position: absolute; z-index: 4; left: 0; right: 0; margin: 0 auto; width: fit-content; top: 22px; max-width: min(92vw, 720px); text-align: center; padding: 8px 16px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; font-weight: 600; text-align: center; }
.fullplayer.fp-stage-on:not(.fp-idle) .stage-status { top: 78px; }
@media (prefers-reduced-motion: reduce) { .fullplayer.fp-stage-on .fp-inner { transition: none; } }
.fullplayer.fp-stage-on .k-lines, .fullplayer.fp-stage-on .k-next { transition: transform .35s ease; }
.fullplayer.fp-stage-on:not(.fp-idle) .k-lines, .fullplayer.fp-stage-on:not(.fp-idle) .k-next { transform: translateY(-120px); }
@media (max-width: 760px) { .fullplayer.fp-stage-on:not(.fp-idle) .k-lines, .fullplayer.fp-stage-on:not(.fp-idle) .k-next { transform: translateY(-230px); } }

/* Stage lyrics layout: centered lines that scroll like lyrics mode (the default; "classic" keeps two lines) */
.k-stage.k-flow { justify-content: center; padding: 0 6vw; }
.k-flow .lyrics.on-stage { position: absolute; inset: 0; height: auto; }
.k-flow .lyrics.on-stage .lyrics-body { padding: 42vh 6vw 50vh; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.k-flow .lyrics.on-stage .lyric-line { text-align: center; font-size: clamp(28px, 4.2vw, 72px); font-weight: 900; line-height: 1.18; margin: 0 auto .5em; max-width: 26ch; opacity: .38; transition: opacity .35s, transform .35s; transform: scale(.92); filter: drop-shadow(0 3px 0 rgba(0,0,0,.85)) drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
.k-flow .lyrics.on-stage .lyric-line.on { opacity: 1; transform: none; }
.k-flow .lyrics.on-stage .lyric-line.past { opacity: .22; }
.k-flow .lyrics.on-stage .lyric-pause { justify-content: center; } /* the notes sit centered like the words, and light up the same way */
.k-flow .lyrics.on-stage .lyrics-back { display: none; }
.k-flow.titling .lyrics.on-stage { opacity: 0; }
.k-flow .lyrics.on-stage { transition: opacity .5s; }

/* TV stage: pair by scanning */
.stage-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 22px; color: rgba(255,255,255,.7); font-size: clamp(13px, 1.2vw, 18px); }
.stage-qr { width: clamp(120px, 14vw, 200px); height: auto; border-radius: 12px; background: #fff; padding: 8px; }
.k-qr { border-radius: 12px; background: #fff; padding: 8px; }
/* A window following the app (another display) */
.stage-follow-hint { position: absolute; z-index: 6; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; transition: opacity .6s; }
.stage-follow-hint.gone { opacity: 0; pointer-events: none; }

/* Party → Karaoke: where to show it */
.k-where-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.k-where { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px; background: var(--surface-2); color: var(--text); text-align: left; border: 2px solid transparent; cursor: pointer; transition: background .15s, border-color .15s; }
.k-where:hover { background: var(--surface-3, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.k-where.on { border-color: var(--accent); }
.k-where > .icon { width: 26px; height: 26px; flex: none; color: var(--accent); margin-top: 2px; }
.k-where > span { display: flex; flex-direction: column; gap: 2px; }

/* ---------- Party: the join code on the Party page ---------- */
.party-join { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.party-qr { width: 150px; height: 150px; border-radius: 12px; background: #fff; padding: 8px; flex: none; }

/* ---------- Party: the queue beside the lyrics (who asked for what) and the guests' code ---------- */
.stage-side { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(240px, 24vw, 380px); z-index: 4; display: flex; flex-direction: column; gap: 12px;
  padding: clamp(16px, 2.4vw, 36px) clamp(18px, 2vw, 32px) clamp(16px, 2.4vw, 36px) clamp(28px, 3vw, 48px); background: linear-gradient(90deg, rgba(10,9,8,0), rgba(10,9,8,.7) 12%, rgba(10,9,8,.82)); color: #fff; pointer-events: none; }
.stage-side[hidden] { display: none; }
.stage.stage-with-side .stage-layer { right: clamp(240px, 24vw, 380px); }
.ss-head { font-size: clamp(14px, 1.3vw, 20px); text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.62); font-weight: 700; }
.ss-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(8px, 1vw, 14px); overflow: hidden; flex: 1; min-height: 0; }
.ss-list li { display: flex; gap: 10px; align-items: baseline; }
.ss-list li.pending { opacity: .62; }
.ss-num { font-variant-numeric: tabular-nums; color: var(--accent-2); font-weight: 700; min-width: 1.4em; font-size: clamp(14px, 1.3vw, 20px); }
.ss-title { font-weight: 700; font-size: clamp(15px, 1.45vw, 23px); line-height: 1.2; }
.ss-sub { color: rgba(255,255,255,.66); font-size: clamp(12px, 1.05vw, 17px); margin-top: 2px; }
.ss-pend { color: var(--accent-2); font-size: clamp(11px, .95vw, 15px); margin-top: 2px; }
.ss-empty { color: rgba(255,255,255,.6); }
/* The join code sits against the right edge, in the solid part of the panel — never out on its faded edge. Sized
   by the screen's height as well as its width: big enough to scan from across the room, never a poster. */
.ss-join { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; align-self: center; text-align: left; }
.ss-join img { width: clamp(110px, min(11vw, 20vh), 240px); height: auto; background: #fff; border-radius: 12px; padding: 8px; flex: none; }
.ss-join div { display: flex; flex-direction: column; gap: 2px; font-size: clamp(12px, 1.05vw, 17px); color: rgba(255,255,255,.75); }
.ss-join b { color: #fff; font-size: clamp(14px, 1.3vw, 20px); }
@media (max-width: 700px) { .stage-side { display: none; } .stage.stage-with-side .stage-layer { right: 0; } }

/* ---------- Party guest page (#/p/<code>): phones, no account ---------- */
body.party-guest { overflow: auto; }
.pg-page { max-width: 560px; margin: 0 auto; padding: 16px 16px 48px; display: flex; flex-direction: column; gap: 14px; }
.pg-head { display: flex; gap: 12px; align-items: center; }
.pg-head img { width: 40px; height: 40px; border-radius: 10px; }
.pg-name { font-weight: 800; font-size: 18px; }
.pg-host { color: var(--muted); font-size: 13px; }
.pg-join { display: flex; flex-direction: column; gap: 12px; padding-top: 8vh; }
.pg-join h1 { margin: 12px 0 0; }
.pg-hello { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 17px; }
.pg-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.pg-card h2 { font-size: 16px; margin: 0 0 10px; }
.pg-card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 0 6px; }
.pg-card .search-box { margin-bottom: 4px; }
.pg-text .input { flex: 1; min-width: 0; }
.pg-num { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: right; }
.pg-note { position: sticky; top: 8px; z-index: 5; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; border-radius: 12px; font-weight: 600; }
.pg-note.bad { background: var(--danger, #c0341d); color: #fff; }
.pg-note[hidden] { display: none; }
.fullplayer .stage-side { padding-top: 76px; padding-bottom: 140px; } /* clear of the player's top row and bar */
.pg-page .t-title, .pg-page .t-artist { white-space: normal; }
.q-num { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 1.6em; text-align: right; margin-right: 6px; }
.inbox-party { text-decoration: none; color: inherit; }
/* The queue inside the full player: the Now-playing pane's list, a size up. */
.fullplayer .np-list { max-width: 720px; width: 100%; margin: 0 auto; }
.fullplayer .np-row { min-height: 56px; padding: 8px 10px; }
.fullplayer .np-row .cover { width: 44px; }
.fullplayer .np-row .icon-btn { opacity: .6; }

/* ---------- Word styles: how the word being sung shows (karaoke and lyrics modes) ---------- */
.lyrics[data-ws="grow"] .lw, .lyrics[data-ws="fade"] .lw { display: inline-block; }
.lyrics .lw { transition: transform .12s ease-out, letter-spacing .2s; }
/* Grow: the word swells while it's sung and settles back. */
.lyrics[data-ws="grow"] .lyric-line.on .lw { transform: scale(calc(1 + 0.22 * sin(var(--pn, 0) * 180deg))); transform-origin: 50% 70%; }
/* Room for a word swelling at either end of a line (up to 22%, from its middle). */
.lyrics[data-ws="grow"] .lyrics-body .lyric-line { padding-inline: .45em; }
/* Glow: a soft bloom moves from word to word; the fill is still there, dimmer. */
.lyrics[data-ws="glow"] .lyric-line.on .lw { text-shadow: 0 0 calc(18px * sin(var(--pn, 0) * 180deg)) color-mix(in srgb, var(--accent-2) 90%, #fff), 0 0 calc(36px * sin(var(--pn, 0) * 180deg)) var(--accent); }
/* Fade-in: words appear as they're sung, so the line reveals itself. */
.lyrics[data-ws="fade"] .lyric-line.on .lw { background: none; color: #fff; opacity: calc(0.18 + 0.82 * min(1, var(--pn, 0) / 0.6)); transform: translateY(calc(4px - 4px * var(--pn, 0))); }
/* Underline: a running line under the word instead of the fill. */
.lyrics[data-ws="underline"] .lyric-line.on .lw { background: linear-gradient(90deg, var(--accent-2) var(--p), transparent var(--p)) no-repeat 0 100% / 100% 0.14em; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; padding-bottom: .08em; }
/* Bounce: the fill stays plain; the ball above does the work. */
.lyrics[data-ws="bounce"] .lyric-line.on .lw { background: linear-gradient(90deg, #fff var(--p), rgba(255,255,255,.55) var(--p)); -webkit-background-clip: text; background-clip: text; }
.lyric-ball { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 2; will-change: transform; }
.lyric-ball::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px var(--accent); transition: transform .08s; transform: scaleY(var(--squash, 1)); transform-origin: 50% 100%; }
.lyric-ball.on { opacity: 1; }
.lyrics.on-stage .lyric-ball { width: clamp(12px, 1.3vw, 22px); height: clamp(12px, 1.3vw, 22px); }
.lyrics-body { position: relative; }
/* Dim the past: sung lines fade back (the default); off keeps them as bright as the next ones. */
.lyrics.keep-past .lyric-line.past { opacity: inherit; }
.k-flow .lyrics.on-stage.keep-past .lyric-line.past { opacity: .38; }
/* Stretch held words: letter spacing opens for a long note. */
.lyrics.stretch-hold .lyric-line.on .lw { letter-spacing: var(--hold, 0); }
/* Visualizer canvas fills the background. */
.stage-bg canvas.viz, .fp-viz canvas.viz { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fp-viz { position: absolute; inset: 0; z-index: 0; }
.stage-bg .viz-layer { position: absolute; inset: 0; }

/* ---------- Phone microphones ---------- */
.mic-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 14px; }
.mic-big { width: 150px; height: 150px; border-radius: 50%; border: 0; background: var(--ok, #2e8b57); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 0 0 0 10px color-mix(in srgb, var(--ok, #2e8b57) 25%, transparent); transition: background .2s, box-shadow .2s; }
.mic-big svg, .mic-big .icon { width: 44px; height: 44px; font-size: 44px; }
.mic-page .range { width: 100%; }
.mic-big.muted { background: var(--surface-3); color: var(--muted); box-shadow: 0 0 0 10px color-mix(in srgb, var(--surface-3) 40%, transparent); }
.mic-big.waiting { background: var(--surface-2); color: var(--muted); box-shadow: none; }
.mic-state { color: var(--muted); font-size: 14px; text-align: center; }
.mic-level { height: 6px; width: 100%; max-width: 260px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.mic-level span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .08s linear; }
.mic-row .mic-level { max-width: none; margin: 4px 0; height: 4px; }
.mic-row .mic-vol { width: 110px; }
@media (max-width: 600px) { .mic-row .mic-vol { width: 70px; } }
.k-choice-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.k-choice-row input { margin-top: 4px; }
.k-choice-row span span { display: block; }
/* Centred with auto margins, not left: 50% — that leaves a box only the right half of the screen to wrap in. */
.stage-tip { position: absolute; z-index: 5; left: 0; right: 0; margin: 0 auto; width: fit-content; top: 64px; max-width: min(94vw, 560px); }
.stage-tip-card .row.wrap { flex-wrap: nowrap; justify-content: center; }
.stage-tip-card .btn { white-space: nowrap; }
.stage-tip[hidden] { display: none; }
.stage-tip-card { background: rgba(10,9,8,.86); color: #fff; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.5); backdrop-filter: blur(10px); }
.fullplayer .stage-tip { top: 132px; }
/* In the app window the controls float over the stage; the empty space between them must let clicks through to the stage's own cards. */
.fullplayer.fp-stage-on .fp-inner, .fullplayer.fp-stage-on .fp-stage-space, .fullplayer.fp-stage-on .fp-top { pointer-events: none; }
.fullplayer.fp-stage-on .fp-top > *, .fullplayer.fp-stage-on .fp-inner > :not(.fp-top):not(.fp-stage-space) { pointer-events: auto; }
/* A button that started a download: it shows the download's progress in place until the songs land. */
.btn.busy { opacity: .9; cursor: progress; }
.btn.done { background: color-mix(in srgb, var(--ok, #2e8b57) 22%, var(--surface-2)); color: var(--text); }
/* An album you don't have yet: the play controls are in their usual place, waiting. */
.play-fab:disabled { opacity: .4; box-shadow: none; cursor: default; filter: saturate(.6); }
.actions .icon-btn:disabled { opacity: .4; cursor: default; }
.actions .icon-btn.on:disabled { opacity: .7; }
/* The song a link pointed at (a "downloaded" notification): a soft glow that fades, so it's found, not shouted. */
.track.t-found { animation: t-found 2.6s ease-out 1; }
@keyframes t-found { 0%, 35% { background: color-mix(in srgb, var(--accent) 22%, transparent); } 100% { background: transparent; } }
/* The status column's marks share one center line: download icon, spinner and ring all sit where the icon was. */
.t-status .gm-getting .spinner { margin-left: 3px !important; }
.t-status .gm-getting .rg { margin-left: 2px; }
@media (max-width: 760px) {
  /* Phones: the spinner / ring sits on the line under the time, level with the song's second line, at the hearts' edge. */
  .tracks.no-album .track > .t-status:has(> .gm-getting) { margin-top: 2px; }
  .t-status .gm-getting { padding-left: 3px; }
}
/* Settings → Remote access → Connection log */
.connlog-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; font-size: 12.5px; }
.connlog-list li { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 0 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.connlog-list li:last-child { border-bottom: 0; } /* a line between entries, not under the last (or under "Nothing yet.") */
.connlog-list li.bad .connlog-what { color: var(--warn, #e0a24a); }
.connlog-when { color: var(--muted); grid-row: span 2; }
.connlog-who { color: var(--muted); font-size: 11.5px; }
@media (max-width: 760px) { .connlog-list li { grid-template-columns: minmax(0, 1fr); } .connlog-when { grid-row: auto; } }
/* After installing from the browser: the tab hands over to the app. */
.install-done { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.install-done-card { max-width: 360px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.install-done-card img { border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.install-done-card h2 { margin: 6px 0 0; }
.install-done-card p { margin: 0; color: var(--muted); }
.install-done-card .btn { width: 100%; justify-content: center; }
/* The install offer waits at the bottom, above the player and tabs, instead of covering the top of every page. */
.install-banner { top: auto; bottom: calc(var(--player-h) + var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); transform: translateY(calc(100% + 200px)); }
.install-banner.on { transform: none; }
/* Invite / guest link dialog: the short link, the code to read out, and what to do if the link won't open. */
.invite-url { font-size: 14px; font-weight: 600; word-break: break-all; color: var(--accent); }
.invite-code { font: 700 26px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .12em; padding: 8px 16px; border-radius: 12px; background: color-mix(in srgb, var(--text) 7%, transparent); }
.invite-fallback { text-align: left; width: 100%; font-size: 13px; }
.invite-fallback summary { cursor: pointer; color: var(--muted); }
.code-entry { display: flex; flex-direction: column; gap: 10px; }
.code-entry .input { text-align: center; font: 600 20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.phone-head-right { display: flex; align-items: center; gap: 6px; min-width: 0; }
.phone-head-right .role-tag { min-width: 0; }
.phone-feedback { flex: none; width: 34px; height: 34px; color: var(--muted); }
.phone-feedback .icon { width: 20px; height: 20px; }
/* Sidebar Activity (owner): who's online and what they're playing; folds away. */
.side-activity { margin-top: auto; flex: none; max-height: 40%; display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--line); padding-top: 10px; }
.side-activity + .side-feedback { margin-top: 0; }
.side-activity > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 2px 12px 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.side-activity > summary::-webkit-details-marker { display: none; }
.side-activity > summary::after { content: '▾'; font-size: 11px; margin-left: 6px; transition: transform .15s; }
.side-activity:not([open]) > summary::after { transform: rotate(-90deg); }
.side-activity > summary > span:first-child { flex: 1; }
.side-act-count { font-size: 11px; font-weight: 700; color: var(--ok, #6fd38a); }
.side-act-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.side-act-row { display: flex; gap: 9px; align-items: flex-start; padding: 6px 12px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.side-act-row:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.side-act-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-top: 6px; flex: none; opacity: .7; }
.side-act-dot.on { background: var(--ok, #6fd38a); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok, #6fd38a) 22%, transparent); }
.side-act-text { display: flex; flex-direction: column; min-width: 0; }
.side-act-name { font-size: 13px; font-weight: 600; }
.side-act-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-act-empty { font-size: 12px; color: var(--muted); padding: 2px 12px 6px; }
.side-act-all { font-size: 12px; color: var(--muted); padding: 4px 12px; text-decoration: none; }
.side-act-all:hover { color: var(--text); }
.act-now { display: flex; gap: 10px; align-items: flex-start; }
.act-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok, #6fd38a); margin-top: 6px; flex: none; }
/* Sidebar: playlists take the room between the menu and Activity, scrolling when they overflow; Activity stays low,
   just above Feedback, never more than about a third of the height (its own list scrolls past that). */
.side-section { flex: 1 1 auto; min-height: 120px; }
.side-playlists { flex: 1 1 auto; min-height: 0; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 25%, transparent) transparent; }
.side-activity { margin-top: 0; max-height: 32%; }
.side-playlists > * { flex: none; }
/* Home header (phones, owner): who's online. The sidebar has its own Activity on computers. */
.home-people { position: relative; }
.home-people .online-count { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--ok, #6fd38a); color: #0b1a10; font-size: 10px; font-weight: 800; line-height: 15px; text-align: center; }
@media (min-width: 761px) { .home-people { display: none; } }
.act-now.idle .act-dot { background: var(--muted); opacity: .7; }
/* Phones: the top bar pulls down into a status sheet (connection; for the owner, who's online). */
.ph-grab { display: none; }
@media (max-width: 760px) {
  .phone-head { position: relative; }
  .ph-grab { display: block; position: absolute; left: 50%; bottom: 1px; width: 36px; height: 14px; transform: translateX(-50%); background: none; border: 0; padding: 0; cursor: pointer; }
  .ph-grab::before { content: ''; position: absolute; left: 6px; right: 6px; top: 6px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--text) 26%, transparent); }
}
.ph-scrim { position: fixed; inset: 0; z-index: 79; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .22s; }
.ph-scrim.on { opacity: 1; }
.ph-sheet { position: fixed; left: 0; right: 0; top: 0; z-index: 80; max-height: 75vh; overflow-y: auto; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 8px; background: var(--surface-2, #1f1c18); border-bottom: 1px solid var(--line); border-radius: 0 0 20px 20px; box-shadow: 0 20px 50px rgba(0,0,0,.5); transform: translateY(-100%); transition: transform .22s ease; }
.ph-sheet.on { transform: none; }
.ph-handle { width: 40px; height: 4px; border-radius: 4px; margin: 10px auto 2px; background: color-mix(in srgb, var(--text) 26%, transparent); }
.ph-sec { display: flex; flex-direction: column; gap: 10px; padding: 10px 2px; }
.ph-sec + .ph-sec { border-top: 1px solid var(--line); }
.ph-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ph-conn { display: flex; gap: 10px; align-items: flex-start; }
.ph-conn-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: #e0a24a; }
.ph-conn-dot.home { background: var(--ok, #6fd38a); }
.ph-person { display: flex; gap: 10px; align-items: flex-start; }
.ph-link { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; align-self: flex-start; }
/* First-open survey: genres to tap, then artists to check off. Full screen on phones, a centred card on computers. */
.survey { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ob-card { width: min(760px, 100%); max-height: min(860px, 100%); display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,.5); overflow: hidden; }
.ob-steps { display: flex; gap: 6px; padding: 18px 24px 0; }
.ob-steps span { width: 28px; height: 4px; border-radius: 2px; background: var(--surface-3); }
.ob-steps span.on { background: var(--accent); }
.ob-body { flex: 1; overflow-y: auto; padding: 8px 24px 16px; overscroll-behavior: contain; }
.ob-body h1 { margin: 10px 0 4px; font-size: 26px; }
.ob-body h2 { margin: 16px 0 2px; font-size: 19px; }
.ob-body h3 { margin: 20px 0 10px; font-size: 15px; }
.ob-lead { margin: 0; color: var(--muted); max-width: 56ch; }
.ob-foot { display: flex; justify-content: space-between; gap: 10px; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg-2); }
.ob-foot .btn.primary { min-width: 120px; justify-content: center; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; }
.ob-chip { --chip: var(--accent); display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.ob-chip:hover { border-color: color-mix(in srgb, var(--chip) 60%, var(--line)); }
.ob-chip .ob-check { display: none; width: 16px; height: 16px; }
.ob-chip .ob-check svg { width: 16px; height: 16px; }
.ob-chip.on { background: color-mix(in srgb, var(--chip) 26%, var(--surface)); border-color: var(--chip); }
.ob-chip.on .ob-check { display: inline-flex; }
.ob-have { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--muted); }
.ob-find { display: flex; gap: 8px; align-items: center; margin: 12px 0 2px; flex-wrap: wrap; }
.ob-search { flex: 1; min-width: 200px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; }
.ob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 14px 10px; }
.ob-artist { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; border-radius: var(--radius); text-align: center; }
.ob-artist:hover { background: var(--surface); }
.ob-artist[hidden] { display: none; }
.ob-pic-wrap { position: relative; width: 92px; height: 92px; }
.ob-pic { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 700; font-size: 22px; color: rgba(255,255,255,.85); box-shadow: 0 0 0 2px transparent; transition: box-shadow .15s, transform .15s; }
.ob-pic > .cover { position: absolute; inset: 0; border-radius: 0; }
.ob-pic > .cover img { width: 100%; height: 100%; object-fit: cover; }
.ob-tick { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; display: none; place-items: center; background: var(--accent); color: var(--accent-ink); border: 3px solid var(--bg-2); }
.ob-tick svg { width: 16px; height: 16px; }
.ob-artist.on .ob-pic { box-shadow: 0 0 0 3px var(--accent); transform: scale(.94); }
.ob-artist.on .ob-tick { display: grid; }
.ob-name { font-weight: 600; font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ob-sub { font-size: 11px; color: var(--faint); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ob-lib { display: flex; gap: 10px; align-items: center; margin: 20px 0 4px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.ob-lib input { width: 18px; height: 18px; accent-color: var(--accent); }
.ob-loading { display: flex; gap: 10px; align-items: center; color: var(--muted); padding: 30px 0; }
@media (max-width: 700px) {
  .survey { padding: 0; place-items: stretch; }
  .ob-card { max-height: none; height: 100%; border-radius: 0; border: 0; padding-top: env(safe-area-inset-top); }
  .ob-body { padding: 6px 16px 16px; }
  .ob-steps { padding: 14px 16px 0; }
  .ob-foot { padding-left: 16px; padding-right: 16px; }
  .ob-grid { grid-template-columns: repeat(3, 1fr); }
  .ob-pic-wrap { width: 84px; height: 84px; }
  .ob-body h1 { font-size: 23px; }
}
.ob-loading .spinner, .ob-foot .spinner { width: 18px; height: 18px; border-width: 2px; margin: 0; }
.survey [hidden] { display: none !important; }
.ob-finish { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 36px 0 12px; }
.ob-finish h2 { margin: 4px 0 0; font-size: 24px; }
.ob-finish-mark { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.ob-finish-mark svg { width: 34px; height: 34px; }
.ob-finish-list { margin: 4px 0 0; padding: 0; list-style: none; color: var(--muted); display: grid; gap: 6px; max-width: 46ch; }
.ob-finish-list li:empty { display: none; }
.ob-welcome { margin: 22px 0 0; font-size: 20px; font-weight: 700; color: var(--accent); letter-spacing: .01em; }
.ob-finish-mark .icon, .ob-finish-mark .icon svg { width: 34px; height: 34px; }
.ob-tick .icon, .ob-chip .ob-check .icon { display: inline-flex; width: 16px; height: 16px; }
/* Your devices / someone's devices: one row each, sign-out on the right. */
.devices-box summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.devices-box[open] summary { margin-bottom: 8px; }
.device-row .p { min-width: 0; }
.folder.is-paused .p { opacity: .7; }
.this-device { margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); vertical-align: 1px; }
/* Developer → Hosts */
.host-row { width: 100%; text-align: left; cursor: pointer; border: 0; color: inherit; font: inherit; }
.host-row:hover { background: var(--surface-2); }
.host-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; }
.host-kv { display: flex; flex-direction: column; font-size: 13px; }
.host-kv .faint { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.host-log { max-height: 260px; overflow: auto; font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; background: var(--bg); padding: 8px 10px; border-radius: 8px; margin: 6px 0 0; }
.host-detail details summary { cursor: pointer; font-weight: 600; }
.auth-card .forgot { width: 100%; text-align: left; } .auth-card .forgot summary { cursor: pointer; color: var(--muted); font-size: 13px; text-align: center; } .auth-card .forgot[open] { display: flex; flex-direction: column; gap: 8px; }
body[data-role="guest"] #new-playlist { display: none; }
/* Family list in the sidebar / pull-down: online (dim green), playing (bright), latest events under it. */
.side-act-dot.online { background: var(--ok, #6fd38a); opacity: .55; }
.side-act-event { display: block; font-size: 11.5px; color: var(--muted); padding: 2px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.side-act-event:first-of-type { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.side-act-when { color: var(--faint); }
.ph-person.side-act-row { padding: 6px 0; }
/* A new version is waiting (the window was busy playing): offer the reload. */
.update-ready { position: fixed; z-index: 300; left: 50%; transform: translateX(-50%); bottom: calc(var(--player-h) + 16px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.45); font-size: 13px; max-width: calc(100vw - 24px); }
@media (max-width: 700px) { .update-ready { bottom: calc(var(--player-h) + var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); } }
.fam-pref { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; } .fam-pref input { margin-top: 3px; accent-color: var(--accent); }
/* New with RiftCaster */
.whatsnew ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.whatsnew li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.whatsnew li .icon { color: var(--accent); flex: none; margin-top: 2px; }
/* Update bar: where an app update is (downloading / ready / installs after this song). */
.update-bar { position: sticky; top: 12px; z-index: 40; display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: calc(100% - 48px); max-width: 1100px; margin: 12px auto 0; padding: 8px 8px 8px 14px; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.35); font-size: 13px; }
.update-bar[hidden] { display: none; }
.update-bar > .icon { color: var(--k); flex: none; }
.update-bar > span { flex: 1; min-width: 0; color: var(--text); }
.update-bar > .btn, .update-bar > .icon-btn { flex: none; }
@media (max-width: 700px) { .update-bar { width: calc(100% - 24px); top: 8px; } }
/* No lyrics: the choices, each with what it costs. */
.lyr-opts { display: grid; gap: 8px; }
.lyr-opt { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--text) 4%, transparent); }
.lyr-opt .btn { flex: none; }
@media (max-width: 600px) { .lyr-opt { flex-direction: column; align-items: stretch; } }
.lrclib-bar { position: sticky; top: 0; z-index: 29; display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin: 0 0 8px; border-radius: var(--radius); background: color-mix(in srgb, var(--surface-3) 70%, var(--surface)); border: 1px solid var(--line); font-size: 13px; }
.lrclib-bar > span { flex: 1; }

/* What's new: long lists scroll inside the window. */
.whatsnew ul { max-height: min(60vh, 520px); overflow-y: auto; padding-right: 4px; }

/* Activity: who's streaming shows how it reaches them beside the name; the page has one chip per person. */
.side-act-conn { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--accent, #7fd18b); white-space: nowrap; }
.act-who { display: flex; flex-wrap: wrap; gap: 6px; }

.lyr-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, var(--text) 10%, transparent); }

/* Inbox tabs */
.inbox-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.inbox-tab-n { margin-left: 6px; font-size: 12px; opacity: .75; }
/* Inbox sections fold away; the bubble counts what's in each. */
.inbox-fold-head { cursor: pointer; user-select: none; justify-content: flex-start; gap: 8px; }
.inbox-fold-head > :last-child:not(h2) { margin-left: auto; }
.inbox-chev { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform .2s; }
.section.folded .inbox-chev { transform: rotate(-90deg); }
.section.folded > :not(.section-head) { display: none; }
.inbox-sec-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; margin-left: 10px; border-radius: 999px; font-size: 12px; font-weight: 700; vertical-align: middle; background: var(--accent); color: var(--accent-ink); }
.reorder-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--text) 5%, transparent); }
.reorder-n { width: 22px; text-align: center; color: var(--muted); font-size: 12px; }

/* ===================================================================== */
/* Phones on their side: short and wide. The tabs become a rail down the  */
/* left, the page takes the rest, the player sits under it as on a phone, */
/* and the full player splits in two (picture/lyrics/queue | controls).   */
/* Every button stays; only where things sit changes.                     */
/* ===================================================================== */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  body:not(.desktop-app) .app, body:not(.desktop-app).np-visible .app {
    grid-template-columns: calc(68px + env(safe-area-inset-left, 0px)) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  body:not(.desktop-app) .sidebar, body:not(.desktop-app) .nowpane, body:not(.desktop-app).np-drawer .nowpane { display: none !important; }
  body:not(.desktop-app).np-drawer::after { display: none; }
  /* the rail: the logo (still opens the status pull-down), then the tabs */
  body:not(.desktop-app) .phone-head { display: flex !important; grid-column: 1; grid-row: 1; flex-direction: column; justify-content: center; padding: 10px 0 4px env(safe-area-inset-left, 0px); background: #0a0908; }
  body:not(.desktop-app) .phone-head .brand span, body:not(.desktop-app) .phone-head .role-tag, body:not(.desktop-app) .phone-head .phone-head-right { display: none; }
  body:not(.desktop-app) .tabbar { display: flex; grid-column: 1; grid-row: 2 / 4; flex-direction: column; justify-content: flex-start; gap: 2px; padding: 6px 0 calc(6px + var(--safe-b, 0px)) env(safe-area-inset-left, 0px); background: #0a0908; border-right: 1px solid #1d1a17; overflow-y: auto; }
  body:not(.desktop-app) .tab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--muted); padding: 8px 0; position: relative; }
  body:not(.desktop-app) .tab .icon { width: 22px; height: 22px; }
  body:not(.desktop-app) .tab.rail-only { display: flex; background: none; border: 0; font: inherit; font-size: 10px; cursor: pointer; }
  body:not(.desktop-app) .main { grid-column: 2; grid-row: 1 / 3; }
  body:not(.desktop-app) .view { --view-pt: 12px; --view-px: 20px; padding: 12px max(20px, env(safe-area-inset-right, 0px)) 24px 20px; }
  /* the player: the phone's slim bar, under the page */
  body:not(.desktop-app) .playerbar { grid-column: 2; grid-row: 3; display: block; height: auto; margin: 0 8px 4px; border-radius: var(--radius); border: 0; padding: 0; }
  body:not(.desktop-app) .pb-row { display: flex; align-items: center; gap: 10px; padding: 5px 8px; }
  body:not(.desktop-app) .pb-now .cover { width: 38px; border-radius: 5px; }
  body:not(.desktop-app) .pb-center, body:not(.desktop-app) .pb-right .hide-sm, body:not(.desktop-app) .pb-right .range.volume, body:not(.desktop-app) .pb-quality { display: none !important; }
  body:not(.desktop-app) .pb-now { flex: 1; }
  body:not(.desktop-app) .pb-right { gap: 0; }
  body:not(.desktop-app) .pb-right .show-sm, body:not(.desktop-app) .pb-right .pb-play-sm { display: inline-flex !important; }
  body:not(.desktop-app) .pb-mini-progress { display: block; height: 2px; background: rgba(255,255,255,.12); margin: 0 8px; }
  /* big page headings and covers come down to fit the height */
  body:not(.desktop-app) h1 { font-size: clamp(22px, 5.5vh, 30px); }
  body:not(.desktop-app) .hero .cover, body:not(.desktop-app) .album-hero .cover { width: min(150px, 34vh); }

  /* The full player: picture / lyrics / queue on the left, the song and its controls on the right. */
  .fullplayer .fp-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; column-gap: 28px;
    max-width: none; padding: max(8px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(8px, var(--safe-b, 0px)) max(20px, env(safe-area-inset-left)); }
  .fullplayer .fp-bar { display: contents; }
  .fullplayer .fp-top { grid-column: 2; grid-row: 1; }
  .fullplayer .fp-art, .fullplayer .fp-lyrics, .fullplayer .fp-queue { grid-column: 1; grid-row: 1 / -1; min-height: 0; margin: 0; }
  .fullplayer .fp-art { padding: 8px 0; }
  .fullplayer .fp-art .cover { width: auto; height: min(100%, 84vh); max-width: 100%; aspect-ratio: 1; }
  .fullplayer .fp-info { grid-column: 2; grid-row: 3; margin: 0 0 6px; }
  .fullplayer .fp-title { font-size: 20px; }
  .fullplayer .fp-artist { font-size: 14px; }
  .fullplayer .fp-progress { grid-column: 2; grid-row: 4; }
  .fullplayer .fp-times { margin-top: 4px; }
  .fullplayer .fp-controls { grid-column: 2; grid-row: 5; margin: 6px 0 4px; justify-content: space-between; }
  .fullplayer .fp-controls .icon-btn { width: 44px; height: 44px; }
  .fullplayer .fp-play { width: 56px; height: 56px; }
  .fullplayer .fp-bottom { grid-column: 2; grid-row: 6; }
  /* lyrics in the left half: the small cover + title above them would repeat the right side, so only the buttons stay */
  .fullplayer .fp-lyrics { display: flex; padding: 0; }
  .fullplayer .fp-lyrics .lyrics { flex: 1; min-width: 0; grid-column: auto; }
  .fullplayer .fp-lyrics .lyrics-head-row { display: none; }
  .fullplayer .fp-lyrics .lyrics-head { padding: 2px 0 6px; }
  .fullplayer .fp-lyrics .lyrics-body { padding-top: 28px; }
}

/* Playlist import */
.ob-import { display: flex; gap: 12px; align-items: flex-start; text-align: left; margin: 14px 0 4px; padding: 12px 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.ob-import > .icon { color: var(--accent); flex: none; margin-top: 2px; }
.import-how details { padding: 8px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--text) 4%, transparent); }
.import-how summary { cursor: pointer; }
.import-how ol { margin: 8px 0 6px; padding-left: 20px; display: grid; gap: 4px; }
.pl-import-or { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12px; }
.pl-import-or::before, .pl-import-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.pl-import-drip { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pl-import-drip .icon { flex: none; width: 16px; height: 16px; color: var(--accent); margin-top: 2px; }

/* Sidebar Activity: four people at a time, the rest scroll. */
.side-act-people { display: flex; flex-direction: column; gap: 2px; max-height: calc(4 * 46px); overflow-y: auto; overscroll-behavior: contain; }

/* Phones upright: Inbox, Party, Notifications and Feedback are in the top bar instead */
.tab.rail-only { display: none; }

/* Karaoke → Available now: readiness chips on the cover */
.k-cover { position: relative; flex: none; }
.k-chips { position: absolute; left: 2px; bottom: 2px; display: flex; gap: 2px; }
.k-chip { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: rgba(0,0,0,.72); color: #fff; }
.k-chip svg { width: 12px; height: 12px; }
.k-chip.ok { color: #6ee7a8; } .k-chip.accent { color: var(--accent); } .k-chip.warn { color: #fbbf24; } .k-chip.faint { color: #bbb; }
.k-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.k-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.phone-quick { position: relative; }
.phone-quick .badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; font-size: 10px; line-height: 16px; padding: 0 4px; }
.phone-head-right { display: flex; align-items: center; gap: 2px; }
.fp-volume { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 420px; margin: 0 auto; }
.fp-volume .range { flex: 1; }
.fp-sub { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Touch: the queue's grip is always there (drag it to reorder), and each row has its ••• menu */
.np-row-more { display: none; }
@media (pointer: coarse) {
  .np-grip { opacity: .7; touch-action: none; padding: 8px 4px; margin: -8px 0; }
  .np-row-more { display: inline-flex; }
}
/* Long press opens RiftCaster's menu, not the phone's link preview / text selection */
@media (pointer: coarse) {
  [data-ctx], a[href^="#/album/"], a[href^="#/artist/"], a[href^="#/playlist/"], a[href^="#/get/album/"], .tile, .track, .np-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}
/* Touch: no hover, so Hide on New releases and the tile's play button are just there */
@media (hover: none) {
  .tile-x { opacity: .9; }
  .tile .tile-play { opacity: 1; transform: none; }
}
/* Phones: the column headers are hidden, but the list can still be sorted — a small "Sort" button above it */
.th-menu-label { display: none; }
@media (max-width: 760px) {
  .tracks .track-head:has(.th-menu) { display: flex !important; justify-content: flex-end; min-height: 0; padding: 0 4px 2px; border: 0; }
  .tracks .track-head:has(.th-menu) > :not(.t-h-tools) { display: none !important; }
  .track-head .th-menu { width: auto; padding: 0 10px; gap: 6px; border-radius: 999px; }
  .th-menu-label { display: inline; font-size: 13px; }
}
.phone-head { overflow: hidden; min-width: 0; }
.phone-head .brand { flex: 0 4 auto; min-width: 36px; overflow: hidden; }
.phone-head .brand img { flex: none; }
.phone-head .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.phone-head-right { min-width: 0; flex: 1; justify-content: flex-end; }
.phone-head-right > .icon-btn { flex: none; }
.phone-head-right .role-tag { flex: 1 1 auto; justify-content: flex-end; text-overflow: ellipsis; }
.k-ready .search-box { margin-bottom: 0; }

/* Connection: dot + where on top, quality underneath — in the phone's top bar and the full player alike */
/* The top bar: one line ("● Away · ≈256 kbps MP3") when it fits; two (place on top, quality under it) when it doesn't */
.phone-head .role-tag { flex-wrap: nowrap; line-height: 1.25; padding: 2px 0; }
.phone-head .role-tag .rt-q { color: var(--faint); white-space: nowrap; }
.phone-head .role-tag .rt-q::before { content: '· '; }
.phone-head .role-tag.stack { flex-wrap: wrap; row-gap: 0; }
.phone-head .role-tag.stack .rt-q { flex-basis: 100%; padding-left: 15px; font-size: 11px; }
.phone-head .role-tag.stack .rt-q::before { content: none; }
.fp-conn { flex-wrap: wrap; row-gap: 0; line-height: 1.25; padding: 2px 0; }
.fp-conn .rt-q { flex-basis: 100%; padding-left: 13px; color: var(--faint); font-size: 11px; }
.phone-head-right .role-tag { flex: 0 1 auto; justify-content: flex-start; margin-right: 4px; min-width: 64px; }
.fp-conn { font-size: 12px; color: var(--text); opacity: .85; padding: 0; }
.fp-conn .rt-where { white-space: nowrap; }
.fp-bar .fp-q .fp-conn { align-self: flex-start; }
/* "Playing from <name>" on one line */
.fp-top .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fp-top .label b { font-weight: 700; }
/* The cover beside the lyrics or queue: only on a phone on its side, where the right half has room */
.fp-side-art { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .fullplayer .fp-side-art { display: flex; grid-column: 2; grid-row: 2; min-height: 0; align-items: center; justify-content: center; padding: 6px 0; }
  .fullplayer .fp-side-art .cover { height: 100%; width: auto; max-width: 100%; aspect-ratio: 1; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
  /* the connection stacked on the left, the buttons beside it on the same row, at the very bottom */
  .fullplayer .fp-bar .fp-bottom { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; align-self: end; }
  .fullplayer .fp-bar .fp-q { order: 0; flex: 0 1 auto; min-width: 0; align-items: flex-start; }
  .fullplayer .fp-bar .fp-tools { flex: none; }
}
/* the dot is a real element at the start of the top line (a drawn ::before got squeezed into a half circle on phones) */
.role-tag::before { display: none; }
.role-tag .rt-where { display: inline-flex; align-items: center; gap: 6px; }
.role-tag .rt-dot { display: block; flex: 0 0 9px; width: 9px; height: 9px; min-width: 9px; color: var(--faint); overflow: visible; }
.role-tag .rt-dot svg { display: block; width: 9px; height: 9px; overflow: visible; }
.role-tag[data-kind="server"] .rt-dot { color: var(--accent); }
.role-tag[data-kind="home"] .rt-dot { color: var(--ok); }
.role-tag[data-kind="away"] .rt-dot { color: #f2c43d; }
.role-tag .rt-where > :not(.rt-dot) { min-width: 0; }
@media (max-width: 760px) { .phone-head { padding-bottom: 10px; } }
@media (max-width: 399px) { .phone-head .brand span { display: none; } }

/* Karaoke: original now, or wait for the vocals to come out */
.k-vchoices { gap: 8px; }
.k-vchoice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.k-vchoice:hover:not(:disabled) { border-color: var(--accent); }
.k-vchoice:disabled { opacity: .5; cursor: default; }
/* the full player's connection: nothing cut off (the top bar trims; here there's room to wrap) */
.fp-conn { overflow: visible; }
.fp-conn span { overflow: visible; text-overflow: clip; }
.fp-conn .rt-q { white-space: normal; }
@media (min-width: 761px) { .fp-bar .fp-q .fp-conn { align-self: flex-end; justify-content: flex-end; text-align: right; } .fp-bar .fp-conn .rt-q { padding-left: 0; } }
/* the dot's row never clips it; only the words trim */
.role-tag .rt-where { overflow: visible; padding: 1px 0; }
.role-tag .rt-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.unreach-why { text-align: left; margin-top: 14px; }
.unreach-why summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.unreach-why ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--muted); }
/* Keep device awake → Allow dimming: a dark layer instead of the system's dimming (a held-awake screen can't dim) */
.screen-veil { position: fixed; inset: 0; z-index: 9999; background: #000; opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
.screen-veil.on { opacity: .72; }

/* Phones with the album colours on: the page's colour runs up behind the top bar to the status bar (which takes the
   same colour), instead of the bar being a solid band */
@media (max-width: 760px) {
  .art-mode:not(.art-high) .app { background: linear-gradient(180deg, color-mix(in srgb, var(--art-1) 26%, var(--bg)) 0, color-mix(in srgb, var(--art-2) 12%, var(--bg)) 420px, color-mix(in srgb, var(--art-1) 7%, var(--bg)) 100%); }
  .art-mode:not(.art-high) .main { background: transparent; }
  .art-mode .phone-head { background: transparent; }
  .art-high .phone-head { background: linear-gradient(180deg, var(--titlebar-bg), color-mix(in srgb, var(--titlebar-bg) 35%, transparent)); backdrop-filter: blur(6px); }
}
/* The connection line is a pill (role=button, border-radius 999px, overflow hidden): its rounded end cut the dot
   sitting at its very edge into a leaf shape. A little room on the left and gentle corners keep the dot whole. */
.phone-head .role-tag[role="button"], .fp-conn { border-radius: 8px; padding-left: 3px; }
.phone-head.no-brand .brand span { display: none; }
/* Phones: a faint line where the phone's own status bar ends and RiftCaster's top bar begins */
@media (max-width: 760px) {
  .phone-head { position: relative; }
  .phone-head::before { content: ''; position: absolute; left: 0; right: 0; top: env(safe-area-inset-top, 0px); height: 1px; background: rgba(255, 255, 255, .08); pointer-events: none; }
  [data-theme="light"] .phone-head::before { background: rgba(0, 0, 0, .08); }
}

/* First-run permissions: icon, what it's for, Allow */
.perm-row { display: flex; align-items: center; gap: 12px; }
.perm-row .tour-text { flex: 1; min-width: 0; }
.perm-row .tour-text p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.perm-row .btn { flex: none; }

/* Album covers by how much of the album you have (Settings → Appearance → Album covers). The veil greys the part you
   don't have: from the top down to how much you have (fill), all of it (complete), or nothing (any). */
.cover .own-veil { position: absolute; left: 0; right: 0; top: 0; height: calc((1 - var(--have, 1)) * 100%); z-index: 1; pointer-events: none;
  background: rgba(14, 13, 12, .42); -webkit-backdrop-filter: grayscale(1) brightness(.7); backdrop-filter: grayscale(1) brightness(.7); transition: opacity .2s; }
:root[data-cover-fill="any"] .cover .own-veil { display: none; }
:root[data-cover-fill="complete"] .cover .own-veil { height: 100%; }
:root[data-cover-fill="fill"][data-cover-edge="fade"] .cover .own-veil { /* the whole cover, faded out across the edge (±9%) */
  height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc((1 - var(--have, 1)) * 100% - 9%), transparent calc((1 - var(--have, 1)) * 100% + 9%));
  mask-image: linear-gradient(to bottom, #000 calc((1 - var(--have, 1)) * 100% - 9%), transparent calc((1 - var(--have, 1)) * 100% + 9%)); }
.tile:hover .cover .own-veil { opacity: .35; }

/* The PC that holds the music: its dot glows while broadcasting (theme colour), amber when it works but wants
   fixing, red when it's down, pulsing while it starts — like the online dots in Activity. */
.role-tag[data-cast] .rt-dot { border-radius: 50%; transition: color .3s, box-shadow .3s; }
.role-tag[data-cast="on"] .rt-dot { color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent), 0 0 8px 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.role-tag[data-cast="warn"] .rt-dot { color: #f2c43d; box-shadow: 0 0 0 3px color-mix(in srgb, #f2c43d 26%, transparent), 0 0 8px 1px color-mix(in srgb, #f2c43d 35%, transparent); }
.role-tag[data-cast="down"] .rt-dot { color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 26%, transparent), 0 0 8px 1px color-mix(in srgb, var(--danger) 35%, transparent); }
.role-tag[data-cast="starting"] .rt-dot { color: var(--accent); animation: cast-pulse 1.6s ease-in-out infinite; }
@keyframes cast-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent); } }
@media (prefers-reduced-motion: reduce) { .role-tag[data-cast="starting"] .rt-dot { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } }

.role-tag .rt-lines { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.role-tag .rt-lines > .rt-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.role-tag .rt-issue { flex: none; white-space: nowrap; font-weight: 600; }
.role-tag .rt-issue.warn { color: #f2c43d; }
.role-tag .rt-issue.down { color: var(--danger); }
/* No room beside it: the word goes above the line, and the dot sits in the middle of the two. */
.role-tag.issue-stack .rt-where { align-items: center; }
.role-tag.issue-stack .rt-lines { flex-direction: column-reverse; align-items: flex-start; gap: 1px; line-height: 1.25; }
.role-tag.issue-stack { overflow: visible; min-height: 32px; }

.side-playlists a { display: flex; align-items: center; gap: 9px; }
.side-playlists .side-pl-ic { width: 16px; height: 16px; flex: none; color: var(--accent); opacity: .85; }
.side-playlists .side-pl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Review fixes (visual) */
.pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .01em;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); white-space: nowrap; vertical-align: 2px; }
.pill.warn { background: rgba(242, 196, 61, .16); color: #f2c43d; }
[data-theme="light"] .pill.warn { color: #7a5a00; }
.search-page .home-search { margin: 0 0 20px; max-width: 560px; }
/* Party tabs on a phone: one row that scrolls sideways */
@media (max-width: 760px) { .karaoke-page .seg, .party-seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; } .karaoke-page .seg > *, .party-seg > * { flex: none; } }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details:not(.devices-box) > summary::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; vertical-align: 2px; opacity: .7; }
details[open]:not(.devices-box) > summary::before { transform: rotate(45deg); }
/* Phones: a Settings section page starts with "‹ Settings" (like "Back to …" elsewhere) and its card's own title —
   not the same title twice with the back link between them. */
@media (max-width: 760px) { body:not(.desktop-app) .settings:has(.scards-focus) > .page-head { display: none; } body:not(.desktop-app) .scard-backrow { margin-top: 4px; } }
/* Phones: Home's own Inbox and bell aren't needed — the top bar has them. */
@media (max-width: 760px) { body:not(.desktop-app) .home-band .home-bell, body:not(.desktop-app) .home-band .gm-inbox-btn { display: none; } }
/* Computers: Home's header buttons sit together on the right, not one floating in the middle. */
@media (min-width: 761px) { .page-head.row.between.home-band { justify-content: flex-start; } .page-head.row.between.home-band > h1 + * { margin-left: auto; } .page-head.row.between.home-band .home-tools { margin-left: 8px; } }
/* Settings rows stacked on a phone: a switch sits under its text on the left, like the other controls. */
@media (max-width: 760px) { .setting-row > .switch, .setting-row > label.switch, .setting-row > .sw { justify-self: start; } }
.appearance-card .setting-row > .switch { justify-self: start; }

/* Offline songs quality: a box like a dropdown that opens a grouped list (Settings → Playback). */
.qpick { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; cursor: pointer; }
.qpick-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.qpick-arrow { flex: none; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--muted); margin-right: 4px; }
.qpick-list { display: flex; flex-direction: column; gap: 6px; margin: -4px -8px 0; }
.qpick-head { display: flex; flex-direction: column; padding: 8px 10px 4px; }
.qpick-head b { color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.qpick-head span { color: var(--muted); font-size: 12px; }
.qpick-item { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; width: 100%; text-align: left; padding: 8px 10px 8px 18px; border-radius: 10px; background: none; border: 0; color: var(--text); font: inherit; cursor: pointer; }
.qpick-item > div:first-child { grid-column: 1; }
.qpick-item .qpick-use { grid-column: 1; color: var(--muted); font-size: 12px; }
.qpick-item .qpick-use.faint { opacity: .75; }
.qpick-item .icon { grid-column: 2; grid-row: 1 / span 3; align-self: center; color: var(--accent); width: 18px; height: 18px; }
.qpick-item:hover, .qpick-item:focus-visible { background: var(--surface-2); outline: none; }
.qpick-item.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.qpick-item.blocked { opacity: .45; cursor: not-allowed; }
.qpick-note { margin: 0 10px 4px; }
.offline-rules { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }

/* Settings → Playback → Speakers */
.spk-list { display: flex; flex-direction: column; gap: 6px; }
.spk-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 10px; border: 1px solid var(--border, rgba(255,255,255,.08)); }
.spk-row.on { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.spk-use { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; color: inherit; text-align: left; padding: 6px 4px; min-height: 44px; cursor: pointer; }
.spk-dot { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--muted); display: grid; place-items: center; color: #1d1206; }
.spk-row.on .spk-dot { background: var(--accent); border-color: var(--accent); }
.spk-dot .icon { width: 14px; height: 14px; }
.spk-text { display: flex; flex-direction: column; min-width: 0; }
.spk-text b, .spk-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spk-gap { visibility: hidden; pointer-events: none; }

/* The waiting screen ("RiftCaster is updating"): the logo breathing over a slow glow that drifts, like the stage. */
.wait-card { position: relative; align-items: center; text-align: center; }
.wait-card > :not(.rc-glow) { position: relative; z-index: 1; }
.wait-card .logo { animation: wait-breathe 2.6s ease-in-out infinite; }
.wait-card .wait-line { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; max-width: 320px; line-height: 1.45; }
.rc-glow { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.rc-glow i { position: absolute; inset: -40%; filter: blur(40px); animation: drift 18s ease-in-out infinite alternate;
  background: radial-gradient(circle at 32% 34%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 38%),
    radial-gradient(circle at 70% 62%, rgba(140, 90, 255, .30), transparent 40%),
    radial-gradient(circle at 44% 84%, rgba(255, 90, 140, .22), transparent 38%); }
.rc-glow i + i { animation-duration: 27s; animation-direction: alternate-reverse; opacity: .7; }
@keyframes wait-breathe { 0%, 100% { transform: scale(1); box-shadow: 0 12px 40px rgba(255, 140, 40, .25); } 50% { transform: scale(1.05); box-shadow: 0 14px 64px rgba(255, 140, 40, .5); } }
@media (prefers-reduced-motion: reduce) { .wait-card .logo, .rc-glow i { animation: none; } }

/* Settings → Disk space: each drive one bar, split by kind; tap a part or a row for what's in it. */
.disk-card { --d-music: var(--accent); --d-karaoke: #b195f5; --d-lyrics: #5ec8c0; --d-addons: #6ea8fe; --d-system: #c9b79c; --d-safety: #7fd18b; --d-inbox: #f2c43d; --d-other: color-mix(in srgb, var(--muted) 45%, var(--surface-2)); }
[data-theme="light"] .disk-card { --d-karaoke: #6d4fc2; --d-lyrics: #1d7f78; --d-addons: #2f62b8; --d-system: #8a7350; --d-safety: #1f7a3a; --d-inbox: #8a6400; }
.disk-card .k-music { background: var(--d-music); } .disk-card .k-karaoke { background: var(--d-karaoke); } .disk-card .k-lyrics { background: var(--d-lyrics); }
.disk-card .k-addons { background: var(--d-addons); } .disk-card .k-system { background: var(--d-system); } .disk-card .k-safety { background: var(--d-safety); }
.disk-card .k-inbox { background: var(--d-inbox); } .disk-card .k-other { background: var(--d-other); } .disk-card .k-ours { background: var(--accent); }
.disk-card .k-free { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
.disk-drive { display: flex; flex-direction: column; gap: 8px; }
.disk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.disk-bar { display: flex; gap: 2px; height: 22px; border-radius: 8px; overflow: hidden; background: var(--surface-3); }
.disk-seg { display: block; flex: 0 0 auto; height: 100%; border: 0; padding: 0; margin: 0; cursor: pointer; transition: filter .15s, opacity .15s; }
button.disk-seg:hover { filter: brightness(1.15); }
.disk-bar:has(.disk-seg.on) .disk-seg:not(.on) { opacity: .4; }
.disk-free { display: block; flex: 1 1 auto; }
.disk-bar.thin { height: 10px; border-radius: 5px; }
.disk-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); }
.disk-key { display: inline-flex; align-items: center; gap: 6px; }
.disk-key .disk-dot { width: 10px; height: 10px; border-radius: 3px; }
.disk-list { display: flex; flex-direction: column; margin-top: 4px; }
.disk-row { border-top: 1px solid var(--line); }
.disk-row-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 2px; background: none; border: 0; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.disk-dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.disk-name { flex: 1; min-width: 0; }
.disk-size { font-variant-numeric: tabular-nums; font-weight: 600; }
.disk-pct { width: 46px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.disk-chev { width: 16px; height: 16px; color: var(--muted); transform: rotate(-90deg); transition: transform .2s; flex: none; }
.disk-row.open .disk-chev { transform: none; }
.disk-detail { display: flex; flex-direction: column; gap: 10px; padding: 0 2px 14px 22px; }
.disk-detail > p { margin: 0; }
.disk-detail > .btn { align-self: flex-start; }
.disk-item { display: flex; flex-direction: column; gap: 4px; }
.disk-item-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.disk-item-bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.disk-item-bar > span { display: block; height: 100%; border-radius: 3px; }
/* A choice of two or three, each with a line on what it does (Settings → Converted copies). */
.radio-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 2px; cursor: pointer; font-size: 14px; }
.radio-row input { margin-top: 3px; accent-color: var(--accent); flex: none; }
/* The open Activity box's content takes part in its column, so on a short window the people list shrinks and
   scrolls (with "All activity" still showing) instead of the bottom rows being cut off out of reach. */
.side-activity::details-content { display: contents; }
.side-activity > .side-act-list { flex: 1 1 auto; }
.side-activity .side-act-people { flex: 1 1 auto; min-height: 0; }
.side-activity .side-act-all { flex: none; }
.side-activity { flex: 0 1 auto; min-height: 84px; } /* gives way before Feedback below it is pushed off a short window */

/* ---------- Lyrics Lab ---------- */
.lab-bar { margin-bottom: 10px; }
.lab-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.lab-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.lab-chip.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.lab-chip-n { font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; }
.lab-list { display: flex; flex-direction: column; }
.lab-item { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; border-radius: var(--radius-sm); }
.lab-item:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.lab-item .lab-cover { width: 44px; height: 44px; border-radius: 6px; flex: none; }
.lab-item-main { flex: 1; min-width: 0; }
.lab-item-title { font-weight: 600; }
.lab-item-tags { display: flex; align-items: center; gap: 6px; flex: none; }
.lab-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); }
.lab-tag .icon { width: 14px; height: 14px; }
.lab-tag.rep { color: var(--danger); } .lab-tag.note { color: var(--warn); }
.lab-tier { font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.lab-tier.t-none { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.lab-tier.t-words { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.lab-tier.t-ai { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.lab-tier.t-checked { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.lab-empty { padding: 24px 0; }
.lab-chip-link .icon { width: 15px; height: 15px; margin-right: 4px; }

.lab-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.lab-head h1 { margin: 0; font-size: 26px; }
.lab-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); }
.lab-check input { accent-color: var(--ok); }
.lab-transport { position: sticky; top: 0; z-index: 6; background: var(--bg); padding: 8px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.lab-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lab-play { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.lab-clock { font-variant-numeric: tabular-nums; font-size: 15px; min-width: 76px; }
.lab-speed { width: auto; padding: 6px 8px; }
.lab-loop.on { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.lab-wave-wrap { position: relative; margin-top: 8px; }
.lab-wave { display: block; width: 100%; height: 72px; border-radius: 8px; background: var(--surface); cursor: pointer; touch-action: none; }
.lab-wave-msg { position: absolute; left: 12px; top: 26px; pointer-events: none; }
.lab-ai { margin-bottom: 10px; }
.lab-ai .notice { margin-bottom: 0; }
.lab-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .lab-body { grid-template-columns: minmax(0, 1fr); } }
.lab-lines { display: flex; flex-direction: column; gap: 2px; }
.lab-row { display: flex; align-items: flex-start; gap: 6px; padding: 6px 6px; border-radius: 10px; border: 1px solid transparent; }
.lab-row.sel { background: var(--surface-2); border-color: var(--line); }
.lab-row.now .lab-text { color: var(--accent); }
.lab-row.untimed .lab-time { border-color: color-mix(in srgb, var(--warn) 60%, var(--line)); }
.lab-row-play { flex: none; }
.lab-timebox { display: flex; align-items: center; flex: none; }
.lab-time { width: 78px; padding: 5px 4px; text-align: center; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 6px; }
.lab-nudge { width: 24px; height: 28px; border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; border-radius: 6px; }
.lab-nudge:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.lab-textcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lab-text { padding: 5px 8px; border-radius: 6px; font-size: 16px; line-height: 1.4; outline: none; min-height: 1.4em; }
.lab-text:focus { background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.lab-text:empty::before { content: 'Type the line…'; color: var(--faint, var(--muted)); }
.lab-heard { padding: 0 8px; color: var(--muted); }
.lab-heard-diff { background: color-mix(in srgb, var(--warn) 24%, transparent); color: var(--text); border-radius: 3px; padding: 0 2px; }
.lab-row-notes { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px; }
.lab-note-chip { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--k, var(--accent)) 18%, transparent); color: var(--k, var(--accent)); }
.lab-note-chip.k-slang { --k: var(--accent); } .lab-note-chip.k-unsure { --k: var(--warn); } .lab-note-chip.k-censored, .lab-note-chip.k-version { --k: var(--danger); }
.lab-note-chip.k-backing, .lab-note-chip.k-adlib { --k: #8fa8ff; } .lab-note-chip.k-spoken, .lab-note-chip.k-language { --k: #5ec8c0; } .lab-note-chip.k-note { --k: var(--muted); }
[data-theme="light"] .lab-note-chip.k-backing, [data-theme="light"] .lab-note-chip.k-adlib { --k: #3a55b8; } [data-theme="light"] .lab-note-chip.k-spoken, [data-theme="light"] .lab-note-chip.k-language { --k: #1d7f78; }
.lab-add { align-self: flex-start; margin-top: 6px; }
.lab-side { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 8px; }
.lab-side details { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 8px 12px; }
.lab-side summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 2px 0; }
.lab-side-list { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 4px; max-height: 40vh; overflow-y: auto; }
.lab-note { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 8px; background: var(--surface-2); }
.lab-linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.lab-keys { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; }
.lab-keys kbd { font: inherit; font-size: 11px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface-2); }
.lab-savebar { position: sticky; bottom: 0; z-index: 6; display: none; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; margin-top: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0,0,0,.3); }
.lab-savebar.on { display: flex; }
.lab-set-h { margin: 10px 0 0; font-size: 15px; }
@media (max-width: 600px) { .lab-row { flex-wrap: wrap; } .lab-textcol { flex-basis: 100%; order: 5; } .lab-tap { flex: 1; } }
.lab-savebar { flex-wrap: wrap; } .lab-savebar > .row { margin-left: auto; }
/* Opening and closing glide: a <details> eases to its height instead of snapping (browsers that can animate to
   "auto"; others just open as before). JS-toggled panels use slideHidden (ui.js). */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content { height: 0; overflow: clip; transition: height .24s cubic-bezier(.2,.7,.2,1), content-visibility .24s allow-discrete; }
  details[open]::details-content { height: auto; }
  .side-activity::details-content { height: auto; overflow: visible; transition: none; }
}
@media (prefers-reduced-motion: reduce) { details::details-content { transition: none !important; } }
.attn-chev, .scard-chev, .disk-chev { transition: transform .22s cubic-bezier(.2,.7,.2,1); }
/* Covers fade in once loaded, and a picture that failed never shows the browser's broken-image mark (ui.js retryOnce). */
.cover img.rc-img { opacity: 0; transition: opacity .25s ease; }
.cover img.rc-img.ok { opacity: 1; }
.cover img.rc-img.seen, img.rc-img.seen { transition: none; } /* a picture already shown this visit, in a redrawn list: no fade from blank */
@media (prefers-reduced-motion: reduce) { .cover img.rc-img { transition: none; } }
/* The clear (×) button's icon sits in the middle of its round button: the search box's own icon rule (the
   magnifier, placed at the left) must not move it. */
.search-box .search-clear .icon, .home-search .search-clear .icon { position: static; left: auto; top: auto; width: 16px; height: 16px; color: inherit; }
.gm-job-link { color: inherit; text-decoration: none; } .gm-job-link:hover { text-decoration: underline; }
/* Artist pictures over the initials; genre tiles: the genre's colours laid over a popular album of it. */
.cover.round > img.pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cover.round { position: relative; overflow: hidden; }
.cover.round.has-img { color: transparent; text-shadow: none; }
.genre-tile > img.genre-pic, .genre-hero > img.genre-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(1.05); }
.genre-tile.has-img, .genre-hero.has-img { background: none; }
.genre-tile.has-img::before, .genre-hero.has-img::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.05) 65%), linear-gradient(135deg, color-mix(in srgb, var(--g1) 78%, transparent), color-mix(in srgb, var(--g2) 62%, transparent)); }
.genre-tile > img.genre-pic:not(.ok), .genre-hero > img.genre-pic:not(.ok) { opacity: 0; }
.genre-tile > img.genre-pic, .genre-hero > img.genre-pic { transition: opacity .3s ease; }

/* Singers, backing vocals and ad-libs (marked in the Lyrics Lab). The lead keeps the theme's colour; each other singer
 * has their own (Settings → Playback), on upcoming, current and past lines alike. Ad-libs sit in the line, smaller and
 * dimmer; backing vocals get a row under the line and light up with it. */
.lw.adlib, .kw.adlib { font-size: .78em; opacity: .72; }
.lyric-backing { display: block; font-size: .64em; margin-top: .3em; opacity: .9; }
.lyric-backing .lw.adlib { font-size: 1em; }
.k-backing { font-size: .6em; margin-top: .15em; }
.lyrics-body .lyric-line .lw.sg-2 { color: color-mix(in srgb, var(--sg-2, #4fd1c5) 85%, #fff); }
.lyrics .lyrics-body .lyric-line.on .lw.sg-2 { background: linear-gradient(90deg, var(--sg-2, #4fd1c5) var(--p), color-mix(in srgb, var(--sg-2, #4fd1c5) 42%, transparent) var(--p)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lyrics .lyrics-body .lyric-line.past .lw.sg-2 { background: none; color: color-mix(in srgb, var(--sg-2, #4fd1c5) 60%, transparent); }
.kw.sg-2 { background: linear-gradient(90deg, var(--sg-2, #4fd1c5) var(--p), color-mix(in srgb, var(--sg-2, #4fd1c5) 50%, #fff) var(--p)); -webkit-background-clip: text; background-clip: text; }
.lyrics-body .lyric-line .lw.sg-3 { color: color-mix(in srgb, var(--sg-3, #f472b6) 85%, #fff); }
.lyrics .lyrics-body .lyric-line.on .lw.sg-3 { background: linear-gradient(90deg, var(--sg-3, #f472b6) var(--p), color-mix(in srgb, var(--sg-3, #f472b6) 42%, transparent) var(--p)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lyrics .lyrics-body .lyric-line.past .lw.sg-3 { background: none; color: color-mix(in srgb, var(--sg-3, #f472b6) 60%, transparent); }
.kw.sg-3 { background: linear-gradient(90deg, var(--sg-3, #f472b6) var(--p), color-mix(in srgb, var(--sg-3, #f472b6) 50%, #fff) var(--p)); -webkit-background-clip: text; background-clip: text; }
.lyrics-body .lyric-line .lw.sg-4 { color: color-mix(in srgb, var(--sg-4, #a78bfa) 85%, #fff); }
.lyrics .lyrics-body .lyric-line.on .lw.sg-4 { background: linear-gradient(90deg, var(--sg-4, #a78bfa) var(--p), color-mix(in srgb, var(--sg-4, #a78bfa) 42%, transparent) var(--p)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lyrics .lyrics-body .lyric-line.past .lw.sg-4 { background: none; color: color-mix(in srgb, var(--sg-4, #a78bfa) 60%, transparent); }
.kw.sg-4 { background: linear-gradient(90deg, var(--sg-4, #a78bfa) var(--p), color-mix(in srgb, var(--sg-4, #a78bfa) 50%, #fff) var(--p)); -webkit-background-clip: text; background-clip: text; }
.lyrics-body .lyric-line .lw.sg-all { color: color-mix(in srgb, var(--sg-all, #ffd166) 85%, #fff); }
.lyrics .lyrics-body .lyric-line.on .lw.sg-all { background: linear-gradient(90deg, var(--sg-all, #ffd166) var(--p), color-mix(in srgb, var(--sg-all, #ffd166) 42%, transparent) var(--p)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lyrics .lyrics-body .lyric-line.past .lw.sg-all { background: none; color: color-mix(in srgb, var(--sg-all, #ffd166) 60%, transparent); }
.kw.sg-all { background: linear-gradient(90deg, var(--sg-all, #ffd166) var(--p), color-mix(in srgb, var(--sg-all, #ffd166) 50%, #fff) var(--p)); -webkit-background-clip: text; background-clip: text; }

/* Lyrics Lab steps: 1 words, 2 line timing, 3 word timing, 4 singers. Each step shows what it needs. */
.lab-steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; }
.lab-step { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s; }
.lab-step:hover { background: var(--surface-2); }
.lab-step.on { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.lab-step-n { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: var(--surface-3, var(--surface-2)); }
.lab-step.on .lab-step-n { background: var(--accent); color: var(--accent-ink); }
.lab-step-help { margin: 0 0 10px; }
.lab-song[data-step="words"] .lab-timebox, .lab-song[data-step="words"] .lab-tap { display: none; }
.lab-song:not([data-step="lines"]) .lab-tap { display: none; }
.lab-wchips { display: none; }
.lab-song[data-step="wordtime"] .lab-wchips, .lab-song[data-step="singers"] .lab-wchips { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 0; }
.lab-song[data-step="wordtime"] .lab-text, .lab-song[data-step="singers"] .lab-text, .lab-song[data-step="wordtime"] .lab-heard, .lab-song[data-step="singers"] .lab-heard { display: none; }
.lab-song[data-step="wordtime"] .lab-timebox, .lab-song[data-step="singers"] .lab-timebox { pointer-events: none; opacity: .7; }
.lab-song[data-step="wordtime"] .lab-nudge, .lab-song[data-step="singers"] .lab-nudge { visibility: hidden; }
.lab-steptools > * { display: none; }
.lab-song[data-step="wordtime"] .lab-wordtools, .lab-song[data-step="singers"] .lab-singertools { display: flex; }
.lab-steptools { position: sticky; top: 0; z-index: 3; }
.lab-wordtools, .lab-singertools { flex-direction: column; gap: 8px; padding: 10px; margin-bottom: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.lab-wordtools-bar, .lab-sg-row { gap: 6px; flex-wrap: wrap; align-items: center; }
.lab-zoom { width: 100%; height: 120px; border-radius: 8px; background: var(--bg, #0f0d0b); cursor: pointer; touch-action: none; display: block; }
.lab-zoom-info { min-height: 1.3em; }
.btn.on { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.lab-w { font: inherit; font-size: 15px; padding: 3px 8px; border-radius: 7px; border: 1px solid transparent; background: var(--surface-2); color: var(--text); cursor: pointer; line-height: 1.3; }
.lab-w:hover { border-color: var(--line); }
.lab-w.est { border-style: dashed; border-color: var(--line); }
.lab-w.cur { background: color-mix(in srgb, var(--accent) 28%, var(--surface-2)); border-color: var(--accent); }
.lab-w.picked { box-shadow: 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
.lab-w.k-adlib { font-size: 13px; opacity: .75; }
.lab-w.k-backing { font-style: italic; border-bottom: 2px dotted currentColor; }
.lab-w.sg-2 { color: var(--sg-2, #4fd1c5); } .lab-w.sg-3 { color: var(--sg-3, #f472b6); } .lab-w.sg-4 { color: var(--sg-4, #a78bfa); } .lab-w.sg-all { color: var(--sg-all, #ffd166); }
.lab-sg { gap: 6px; }
.lab-sg kbd, .lab-singertools kbd { font-size: 11px; opacity: .7; margin-left: 2px; }
.lab-sg-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--accent); display: inline-block; }
.lab-sg-dot.sg-2 { background: var(--sg-2, #4fd1c5); } .lab-sg-dot.sg-3 { background: var(--sg-3, #f472b6); } .lab-sg-dot.sg-4 { background: var(--sg-4, #a78bfa); } .lab-sg-dot.sg-all { background: var(--sg-all, #ffd166); }
.lab-keys-h { display: block; margin-top: 8px; color: var(--text); }
[data-theme="light"] .lab-w.sg-2 { color: color-mix(in srgb, var(--sg-2, #4fd1c5) 70%, #000); } [data-theme="light"] .lab-w.sg-3 { color: color-mix(in srgb, var(--sg-3, #f472b6) 75%, #000); }
[data-theme="light"] .lab-w.sg-4 { color: color-mix(in srgb, var(--sg-4, #a78bfa) 75%, #000); } [data-theme="light"] .lab-w.sg-all { color: color-mix(in srgb, var(--sg-all, #ffd166) 55%, #000); }
.lab-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.lab-color { width: 38px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
/* Soulseek health: a person (or a download) opens to show its files. */
.slsk-group { border-bottom: 1px solid var(--line); }
.slsk-group:last-child { border-bottom: 0; }
.slsk-group > summary.slsk-row { border-bottom: 0; cursor: pointer; list-style: none; }
.slsk-group > summary.slsk-row::-webkit-details-marker { display: none; }
.slsk-group > summary.slsk-row b::before { content: '›'; display: inline-block; width: 1em; color: var(--muted); transition: transform .2s; }
.slsk-group[open] > summary.slsk-row b::before { transform: rotate(90deg); }
.slsk-files { display: flex; flex-direction: column; gap: 2px; padding: 0 0 10px 1em; }
.slsk-said { margin: 2px 0 6px; }
.slsk-file { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 4px 0; font-size: 13px; }
.slsk-file-main { display: flex; flex-direction: column; min-width: 0; }
.slsk-job { color: var(--accent); }
@media (max-width: 640px) { .slsk-file { grid-template-columns: minmax(0, 1fr) auto; } .slsk-file .slsk-job, .slsk-file > .muted { grid-column: 1 / -1; } }
details.slsk-group:not(.devices-box) > summary::before { display: none; } /* its own arrow, before the name */
.slsk-group > summary.slsk-row > * { justify-self: start; min-width: 0; max-width: 100%; }
.slsk-group > summary.slsk-row > :last-child { justify-self: end; }
.slsk-group > summary.slsk-row b { font-weight: 700; color: var(--text); }
.slsk-file > .gm-pill { justify-self: start; }
/* Karaoke stage titles: never wider than the screen (stage.js shrinks a long one to fit). */
.k-title-song, .k-title-artist, .stage-now-title, .stage-now-artist { max-width: 100%; box-sizing: border-box; }
.stage-now > div { min-width: 0; }
.fp-sub .fp-album { color: inherit; }
.fp-sub .fp-album:hover { text-decoration: underline; color: var(--text); }
/* Placeholders laid out like their pages (app.js skeletonFor). */
.skeleton .sk-num { width: 24px; flex: none; display: flex; justify-content: center; }
.skeleton .sk-end { flex: none; margin-left: auto; }
.skeleton .sk-pills { display: flex; gap: 8px; margin: 8px 0 18px; flex-wrap: wrap; }
.skeleton .sk-pills .sk-bar { border-radius: 999px; margin: 0; }
.skeleton .sk-card { padding: 16px 18px; margin-bottom: 12px; border-radius: var(--radius-lg, 14px); border: 1px solid var(--line); }
.skeleton .sk-card .sk-bar { margin: 6px 0; }
.skeleton .sk-banner { width: 100%; aspect-ratio: auto; height: 180px; border-radius: 16px; margin-bottom: 22px; }
.skeleton .grid.sk-scroll { overflow: hidden; }
.skeleton .sk-quick { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.skeleton > .sk-bar:first-child[style*="height: 44px"] { border-radius: 999px; margin-bottom: 18px; }
.skeleton .sk-searchrow { display: flex; gap: 10px; align-items: center; margin: 6px 0 4px; }
.skeleton .sk-searchrow .sk-bar { margin: 0; border-radius: 999px; flex: none; }
.skeleton .sk-searchrow .sk-bar:first-child { flex: 1; }

/* Now playing pane: the like button always shows (the hide-until-hover rule is for song rows); the song's facts wrap to a
   second line rather than being cut off; "From <album>" opens the album. */
.np-like .t-like, .fp-like .t-like { opacity: 1; }
.np-details { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; line-height: 1.35; }
a.np-from[href] { color: var(--faint); }
a.np-from[href]:hover { color: var(--text); text-decoration: underline; }
/* Sidebar Activity: one arrow (the shared chevron before the name), and closing it really hides the list — the
   open box's content is display: contents so it can shrink, which the closed state has to undo. */
.side-activity > summary::after { content: none; }
.side-activity:not([open])::details-content { display: none; }
.side-activity:not([open]) { min-height: 0; }
/* Versions: the button is lit when the song plays as something other than the original. */
.v-btn.on { color: var(--art-1, var(--accent)); }
.lyrics-from { margin: 0 0 12px; }
.v-err { display: block; max-width: 230px; white-space: normal; font-weight: 400; }
/* Album and artist headers: the title and details line up with the top of the cover, and a search bar for the page
   sits at the bottom, level with the cover's lower edge. */
.hero-top .hero-text { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 2px; } /* full height beside the cover (full width when stacked) */
.hero-top .hero-kind { margin-top: 0; }
.hero-search.search-box { margin: 16px 0 0; width: min(100%, 420px); max-width: none; } /* Home's search box, under the details */
.hero-search.search-box.below { width: 100%; margin: 0 0 14px; } /* stacked header: under the facts line */
.hero-nomatch { padding: 12px 6px; }
/* Stacked headers (phones, narrow panes): the search spans the width under the details. */
@media (max-width: 760px) { .hero-search.search-box { width: 100%; } }

/* A page redrawn in place: its new elements take their hover look at once instead of easing into it (see route()). */
.view.still *, .view.still *::before, .view.still *::after { transition: none !important; }

/* Japanese / Korean lyrics: the romaji (romanization) and English under each line, any of the three shown. */
.lyric-roma, .lyric-en { display: block; font-weight: 600; line-height: 1.25; }
.lyric-roma { font-size: .6em; margin-top: .22em; color: rgba(255,255,255,.6); letter-spacing: .01em; }
.lyric-en { font-size: .52em; margin-top: .2em; color: rgba(255,255,255,.5); font-style: italic; font-weight: 500; }
.lyric-en.machine::after { content: ''; } /* (a translation made on the PC looks the same; the Lab says which is which) */
.lyric-roma .lr { --p: 0%; }
.lyric-line.on .lyric-roma .lr { background: linear-gradient(90deg, #fff var(--p), rgba(255,255,255,.45) var(--p)); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .1em .04em; margin: -.1em -.04em; }
.lyric-line.on .lyric-en { color: rgba(255,255,255,.85); }
.lyric-line.past .lyric-roma, .lyric-line.past .lyric-en { color: rgba(255,255,255,.4); }
.lyrics-body.hide-orig .lyric-line > .lw, .lyrics-body.hide-orig .lyric-line > .lyric-backing, .lyrics-body.hide-orig .lyrics-plain p.has-layers .lyric-orig { display: none; }
.lyrics-body.hide-orig .lyric-roma { font-size: 1em; margin-top: 0; color: inherit; } /* romaji on its own: as big as the lyrics */
.lyrics-body.hide-orig .lyric-line:not(.has-layers) > .lw { display: inline; } /* a line with nothing else (an English line in a J-pop song) still shows */
.lyrics-body.hide-orig.hide-roma .lyric-en { font-size: .9em; margin-top: 0; font-style: normal; }
.lyrics-body.hide-roma .lyric-roma, .lyrics-body.hide-en .lyric-en { display: none; }
.lyrics-plain .lyric-orig { display: block; }
.lyrics-plain .lyric-roma { font-size: .7em; }
.lyrics-plain .lyric-en { font-size: .62em; }
.lyrics-layers .lyl-glyph { font-size: 12px; font-weight: 800; letter-spacing: -.02em; }
.lyrics-layers.on { color: var(--art-1, var(--accent)); }
/* The classic karaoke stage: romaji and English under the line being sung. */
.k-roma, .k-en { display: block; line-height: 1.2; }
.k-roma { font-size: .56em; margin-top: .25em; font-weight: 700; color: rgba(255,255,255,.7); }
.k-en { font-size: .46em; margin-top: .2em; font-style: italic; font-weight: 500; color: rgba(255,255,255,.65); }
.k-roma .kr { --p: 0%; background: linear-gradient(90deg, var(--accent-2, #fff) var(--p), rgba(255,255,255,.55) var(--p)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hide-orig .k-line.has-layers > .kw, .hide-orig .k-line.has-layers > .k-backing { display: none; }
.hide-orig .k-roma { font-size: 1em; margin-top: 0; }
.hide-roma .k-roma, .hide-en .k-en { display: none; }
/* Lyrics Lab: romaji & English per line */
.lab-layers { gap: 10px; max-height: 60vh; }
.lab-layer { display: grid; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.lab-layer-orig { font-weight: 600; }
.lab-layer .input.small { padding: 6px 8px; font-size: 13px; }
.lab-layer .input.machine { font-style: italic; }
.lab-layer-bar { display: flex; gap: 6px; flex-wrap: wrap; position: sticky; bottom: 0; padding: 8px 0 2px; background: var(--surface); }
.lyrics-layers { white-space: nowrap; flex: none; font-size: 12px; font-weight: 700; letter-spacing: -.02em; }
.lyrics-tools.compact .lyrics-layers { width: auto; min-width: 20px; padding: 0 3px; font-size: 10px; }
/* Soulseek health, organized: tiles for the last 30 days, a day-by-day chart, then one tab of details at a time. */
.slsk-chart { display: flex; flex-direction: column; gap: 6px; }
.slsk-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; height: 72px; align-items: end; }
.slsk-day { display: flex; gap: 1px; align-items: flex-end; height: 100%; }
.slsk-day i, .slsk-legend i { display: block; flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; }
.slsk-day i.up, .slsk-legend i.up { background: var(--accent); }
.slsk-day i.down, .slsk-legend i.down { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.slsk-legend { display: inline-flex; align-items: center; gap: 6px; }
.slsk-legend i { width: 10px; height: 10px; flex: none; border-radius: 3px; margin-left: 6px; }
.slsk-tabs { align-self: flex-start; max-width: 100%; }
.slsk-body { gap: 8px; min-height: 60px; }
.slsk-h { font-size: 14px; margin: 6px 0 0; color: var(--muted); font-weight: 700; }
.slsk-live { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.slsk-live:last-child { border-bottom: 0; }
.slsk-prog { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.slsk-prog .progress-bar { margin: 0; }
.slsk-album-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 0; cursor: pointer; list-style: none; }
.slsk-album-row::-webkit-details-marker { display: none; }
details.slsk-album > summary::before { display: none; }
.slsk-cover { width: 48px; height: 48px; border-radius: 6px; }
.slsk-album .slsk-files { padding-left: 60px; }
.slsk-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.slsk-facts > div { display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; min-width: 0; }
@media (max-width: 640px) {
  .slsk-live { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .slsk-album-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .slsk-album-row > :last-child { display: none; }
  .slsk-cover { width: 40px; height: 40px; }
  .slsk-album .slsk-files { padding-left: 0; }
  .slsk-bars { height: 56px; gap: 2px; }
}
/* "Better copy available": you have / found / you'd get. */
.better-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.better-fact { display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.better-fact b { font-size: 15px; }
.better-fact:last-child { outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
@media (max-width: 520px) { .better-facts { grid-template-columns: 1fr; } }
.slsk-health .slsk-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.slsk-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.slsk-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 640px) { .slsk-health .slsk-tiles { grid-template-columns: 1fr 1fr; } }