/* ==========================================================
   Pulse Music — Line Minimal (black & white)
   Flat white panels with thin dark outlines, black pill labels, outlined icon
   tiles, hatched highlights and dot-matrix waves. Dark mode inverts the ink.
   Layout: sidebar | content | queue, player bar below.
   Phones: content, mini player, outlined icon tab bar.
   ========================================================== */

/* ---------------- 1. Tokens ---------------- */
:root {
  --bg: #ECECEC; --bg-2: #E4E4E4;
  --surface: #FFFFFF; --surface-2: #F4F4F4; --surface-3: #E7E7E7;
  --line: #1B1B1B;          /* strong outlines */
  --line-2: #CFCFCF;        /* soft outlines */
  --bw: 1.5px;              /* outline width */
  --text: #111111; --text-2: #565656; --text-3: #8F8F8F;
  --ink: #111111; --on-ink: #FFFFFF;
  --overlay: rgba(20, 20, 20, .32);
  --panel: rgba(255, 255, 255, .94);
  --ok: #2F7D32; --warn: #A15C07; --live: #C62D22;
  --dot-off: #D3D3D3; --dot-on: #1B1B1B;
  --hatch: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 8px);
  --pop: 0 8px 22px -12px rgba(0, 0, 0, .28), 0 1px 3px rgba(0, 0, 0, .06);      /* soft lift on hover */
  --pop-lg: 0 22px 48px -20px rgba(0, 0, 0, .34), 0 2px 8px rgba(0, 0, 0, .06); /* menus, modals */
  --ring: 0 0 0 3px rgba(0, 0, 0, .08);

  /* accent: mono by default (the reference design is black & white) */
  --a1: #111111; --a2: #111111; --acc: #111111; --acc-rgb: 17, 17, 17; --on-acc: #FFFFFF;

  --font: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --display: 'Bricolage Grotesque', 'Manrope', 'Segoe UI', system-ui, sans-serif; /* main headings only */
  --r-xs: 8px; --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-xl: 28px;
  --side-w: 244px; --queue-w: 340px; --player-h: 100px; --tab-h: 0px; --mini-h: 64px;
  --gap: 12px;
  --gutter: clamp(16px, 2.6vw, 30px);
  --ease: cubic-bezier(.22, .8, .24, 1);
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #0C0C0C; --bg-2: #111111;
  --surface: #151515; --surface-2: #1C1C1C; --surface-3: #262626;
  --line: #EDEDED; --line-2: #333333;
  --text: #F2F2F2; --text-2: #A8A8A8; --text-3: #6E6E6E;
  --ink: #F2F2F2; --on-ink: #0C0C0C;
  --overlay: rgba(0, 0, 0, .6);
  --panel: rgba(21, 21, 21, .94);
  --ok: #7CC77F; --warn: #E7A64A; --live: #FF7066;
  --dot-off: #2E2E2E; --dot-on: #EDEDED;
  --hatch: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 8px);
  --pop: 0 10px 26px -12px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .4);
  --pop-lg: 0 24px 54px -18px rgba(0, 0, 0, .85), 0 2px 8px rgba(0, 0, 0, .4);
  --ring: 0 0 0 3px rgba(255, 255, 255, .1);
  --a1: #F2F2F2; --a2: #F2F2F2; --acc: #F2F2F2; --acc-rgb: 242, 242, 242; --on-acc: #0C0C0C;
  color-scheme: dark;
}
/* optional highlight colours (Settings › Appearance); outlines stay black & white */
html[data-accent="lime"]   { --a1: #C9E86A; --a2: #A9D84B; --acc: #A9D84B; --acc-rgb: 169, 216, 75;  --on-acc: #111111; }
html[data-accent="ember"]  { --a1: #FF8A3D; --a2: #F2541B; --acc: #F26A21; --acc-rgb: 242, 106, 33;  --on-acc: #FFFFFF; }
html[data-accent="cobalt"] { --a1: #4F7BFF; --a2: #2449E5; --acc: #3461F5; --acc-rgb: 52, 97, 245;  --on-acc: #FFFFFF; }
html[data-accent="violet"] { --a1: #9C82FF; --a2: #6E46E6; --acc: #8761F2; --acc-rgb: 135, 97, 242; --on-acc: #FFFFFF; }
:root { --grad: linear-gradient(135deg, var(--a1), var(--a2)); --acc-soft: rgba(var(--acc-rgb), .12); }

/* ---------------- 2. Base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--text); font: 500 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; transition: background-color .35s var(--ease), color .35s var(--ease); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--line); outline-offset: 2px; border-radius: 10px; }
::selection { background: var(--ink); color: var(--on-ink); }
.ico { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico.fill { fill: currentColor; stroke: none; }
.ico.sm { width: 18px; height: 18px; }
.mesh { display: none; }

/* no visible scrollbars anywhere (scrolling still works) */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ---------------- 3. App grid ---------------- */
.app { position: relative; height: 100vh; height: 100dvh; display: grid; gap: var(--gap); padding: var(--gap); grid-template-columns: var(--side-w) minmax(0, 1fr) 0; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "side main queue" "player player player"; overflow: hidden; transition: grid-template-columns .35s var(--ease); }
html.queue-open .app { grid-template-columns: var(--side-w) minmax(0, 1fr) var(--queue-w); }
.sidebar { grid-area: side; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 4px; padding: 16px 12px 12px; border-radius: var(--r-lg); background: var(--surface); border: var(--bw) solid var(--line); }
.app > .main { grid-area: main; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-behavior: smooth; position: relative; border-radius: var(--r-lg); }
.queue-panel { grid-area: queue; min-width: 0; min-height: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); border: var(--bw) solid var(--line); display: flex; flex-direction: column; }
html:not(.queue-open) .queue-panel { visibility: hidden; border-width: 0; }
.player { grid-area: player; min-width: 0; }
.tabbar { display: none !important; }
.menu-btn, .mbrand, .topnav { display: none !important; }
.mbrand { align-items: center; gap: 8px; font: 700 1.15rem var(--display); }
.mbrand .brand-mark { width: 32px; height: 32px; border-radius: 9px; }
.mbrand .brand-mark .ico { width: 17px; height: 17px; }
.mbrand .brand-mark::after { display: none; }
.topnav { order: 4; flex: 0 0 calc(100% + var(--gutter) * 2); max-width: none; gap: 6px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); scroll-padding-inline: var(--gutter); }
.topnav::after { content: ""; flex: 0 0 var(--gutter); }
.topnav a { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; border: var(--bw) solid var(--line-2); background: var(--surface); font-size: .74rem; font-weight: 800; display: inline-flex; align-items: center; color: var(--text-2); }
.topnav a.active { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.drawer-scrim { display: none; position: fixed; inset: 0; z-index: 99; background: var(--overlay); animation: fadeIn .2s var(--ease); }

/* Brand */
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 14px; margin-bottom: 4px; border-bottom: var(--bw) solid var(--line-2); }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; flex-shrink: 0; position: relative; }
.brand-mark::after { content: ""; position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--acc); border: 2px solid var(--surface); }
.brand-mark .ico { width: 20px; height: 20px; stroke-width: 2; }
.brand b { font: 700 1.3rem/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.brand small { display: block; font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-top: 3px; }

.nav { display: grid; gap: 3px; }
.nav-link { display: flex; align-items: center; gap: 12px; padding: 5px 12px 5px 5px; border-radius: 14px; color: var(--text-2); font-weight: 700; font-size: .88rem; position: relative; white-space: nowrap; border: var(--bw) solid transparent; background: none; width: 100%; text-align: left; transition: background-color .2s var(--ease), color .2s, border-color .2s; }
.nav-link > .ico { width: 32px; height: 32px; padding: 6.5px; border: var(--bw) solid var(--line-2); border-radius: 10px; background: var(--surface); transition: border-color .2s, background-color .2s, color .2s; }
.nav-link:hover { color: var(--text); border-color: var(--line-2); }
.nav-link:hover > .ico { border-color: var(--line); }
.nav-link.active { color: var(--on-ink); background: var(--ink); border-color: var(--ink); }
.nav-link.active > .ico { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.side-label { display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 4px; font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.side-label button { border: var(--bw) solid var(--line-2); background: var(--surface); width: 28px; height: 28px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text); flex-shrink: 0; transition: background-color .2s var(--ease), color .2s, border-color .2s; }
.side-label button .ico { width: 16px; height: 16px; stroke-width: 2; }
.side-label button:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.side-lists { flex: none; display: grid; align-content: start; gap: 2px; }
.side-pl { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 12px; min-width: 0; color: var(--text-2); transition: background-color .2s; }
.side-pl:hover { background: var(--surface-2); color: var(--text); }
.side-pl .cov { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; border: var(--bw) solid var(--line-2); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; color: var(--text-2); }
.side-pl .cov img { width: 100%; height: 100%; object-fit: cover; }
.side-pl span { min-width: 0; font-weight: 700; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-pl small { display: block; font-size: .72rem; color: var(--text-3); font-weight: 600; }

/* ---------------- 4. Top bar ---------------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px var(--gutter) 14px; padding-top: max(10px, env(safe-area-inset-top, 0px)); background: linear-gradient(to bottom, var(--bg) 66%, transparent); }
.topbar .nav-arrows { display: flex; gap: 6px; }
.round { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; border: var(--bw) solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--text); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, color .2s; }
.round:hover { background: var(--surface-2); box-shadow: var(--pop); }
.round:active { transform: none; box-shadow: none; }
.searchbox { flex: 1 1 auto; min-width: 0; max-width: 520px; position: relative; }
.searchbox > .ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-2); width: 19px; height: 19px; pointer-events: none; }
.searchbox input { width: 100%; height: 44px; padding: 0 50px 0 44px; border-radius: 999px; border: var(--bw) solid var(--line); background: var(--surface); color: var(--text); outline: none; transition: box-shadow .25s var(--ease); }
.searchbox input::placeholder { color: var(--text-3); }
.searchbox input:focus { box-shadow: var(--ring); }
.searchbox input::-webkit-search-cancel-button { display: none; }
.searchbox .mic { position: absolute; right: 5px; top: 5px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); display: grid; place-items: center; transition: .2s; }
.searchbox .mic:hover { background: var(--surface-2); color: var(--text); }
.searchbox .mic.listening { background: var(--ink); color: var(--on-ink); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(var(--acc-rgb), .18); } }
.topbar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.avatar { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 var(--bw) var(--line); display: grid; place-items: center; font: 800 .95rem var(--font); border: 0; transition: transform .2s var(--ease); }
.avatar:hover { transform: translateY(-1px); }
.avatar.synced:not(.unverified) { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--line); }
.avatar.synced.unverified { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--warn); }

.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; border-radius: var(--r); background: var(--surface); border: var(--bw) solid var(--line); box-shadow: var(--pop-lg); padding: 6px; display: grid; gap: 2px; max-height: 60vh; overflow-y: auto; animation: pop .18s var(--ease); }
.suggest h6 { margin: 8px 10px 4px; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.suggest button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; border: 0; background: none; color: var(--text-2); min-width: 0; transition: background-color .15s; font-weight: 600; }
.suggest button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest button:hover { background: var(--surface-2); color: var(--text); }

/* ---------------- 5. Page + sections ---------------- */
.page { padding: 2px var(--gutter) 48px; display: grid; gap: clamp(26px, 3.6vw, 40px); min-width: 0; max-width: 1560px; grid-template-columns: minmax(0, 1fr); animation: pageIn .4s var(--ease) both; }
.page > * { min-width: 0; }
@keyframes pageIn { from { opacity: 0; } }
.page .sec, .page .rail > *, .page .grid > *, .page .tiles > * { animation: riseIn .45s var(--ease) both; }
.page .rail > :nth-child(2), .page .grid > :nth-child(2), .page .tiles > :nth-child(2) { animation-delay: .03s; }
.page .rail > :nth-child(3), .page .grid > :nth-child(3), .page .tiles > :nth-child(3) { animation-delay: .06s; }
.page .rail > :nth-child(4), .page .grid > :nth-child(4), .page .tiles > :nth-child(4) { animation-delay: .09s; }
.page .rail > :nth-child(5), .page .grid > :nth-child(5), .page .tiles > :nth-child(5) { animation-delay: .12s; }
.page .rail > :nth-child(n+6), .page .grid > :nth-child(n+6), .page .tiles > :nth-child(n+6) { animation-delay: .15s; }
@keyframes riseIn { from { opacity: 0; } }
.sec, .stack, .settings-body { grid-template-columns: minmax(0, 1fr); }
.stack { display: grid; gap: 28px; min-width: 0; }
.sec > *, .stack > * { min-width: 0; }

.greet h1, .page-title { margin: 8px 0 0; font: 700 clamp(1.8rem, 4vw, 2.7rem)/1.05 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.grad-text { color: var(--text); background: none; border-bottom: 3px solid var(--acc); }
.sub { margin: 8px 0 0; color: var(--text-2); max-width: 62ch; }
/* small black pill label — the reference's "MY HABITS" headers */
.eyebrow { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec { display: grid; gap: 14px; min-width: 0; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding-bottom: 10px; border-bottom: var(--bw) solid var(--line-2); }
.sec-head h2 { margin: 0; font: 800 clamp(1rem, 1.6vw, 1.15rem)/1.2 var(--font); letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-head .more { flex-shrink: 0; font-size: .74rem; font-weight: 800; color: var(--text); border: var(--bw) solid var(--line); background: var(--surface); padding: 4px 12px; border-radius: 999px; transition: .2s var(--ease); }
.sec-head .more:hover { background: var(--ink); color: var(--on-ink); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; border: var(--bw) solid var(--line); background: var(--surface); color: var(--text); font-weight: 800; font-size: .84rem; white-space: nowrap; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .2s, color .2s; }
.btn:hover { background: var(--surface-2); box-shadow: var(--pop); }
.btn:active { transform: none; box-shadow: none; }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn.primary, .btn.dark { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn.primary:hover, .btn.dark:hover { background: var(--ink); opacity: .88; }
html[data-accent] .btn.primary { background: var(--acc); border-color: var(--line); color: var(--on-acc); }
.btn.sm { height: 34px; padding: 0 14px; font-size: .78rem; }
.btn.icon-only { width: 42px; padding: 0; }
.btn.danger { color: var(--live); border-color: var(--live); }
.btn .ico { width: 18px; height: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.play-circle { width: 54px; height: 54px; border-radius: 50%; border: var(--bw) solid var(--line); background: var(--acc); color: var(--on-acc); display: grid; place-items: center; flex-shrink: 0; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.play-circle:hover { transform: translateY(-1px); box-shadow: var(--pop); }
.play-circle:active { transform: none; box-shadow: none; }
.play-circle .ico { width: 22px; height: 22px; }

/* Chips */
.chips { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 4px; margin: -4px; min-width: 0; scroll-behavior: smooth; scroll-padding-inline: 4px; }
.chips:not(.wrap)::after { content: ""; flex: 0 0 4px; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chip-n { font-variant-numeric: tabular-nums; color: var(--text-3); margin-right: 2px; }
.chip.on .chip-n { color: inherit; opacity: .7; }
.chip { flex: none; height: 36px; padding: 0 15px; border-radius: 999px; border: var(--bw) solid var(--line-2); background: var(--surface); color: var(--text-2); font-weight: 700; font-size: .8rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: background-color .2s var(--ease), color .2s, border-color .2s; }
.chip:hover { color: var(--text); border-color: var(--line); }
.chip.on { color: var(--on-ink); background: var(--ink); border-color: var(--ink); }
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; min-width: 0; }
.filter-row .chips { flex: 1 1 260px; }
.select { height: 38px; max-width: 100%; padding: 0 36px 0 15px; border-radius: 999px; border: var(--bw) solid var(--line); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; appearance: none; -webkit-appearance: none; color: var(--text); font-weight: 700; font-size: .8rem; min-width: 0; }
.select option { background: var(--surface); color: var(--text); }

/* Announcement banner */
.announce { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: var(--r); background: var(--surface); border: var(--bw) solid var(--line); min-width: 0; }
.announce::before { content: "NEW"; flex-shrink: 0; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: .58rem; font-weight: 800; letter-spacing: .12em; display: grid; place-items: center; }
.announce.warn::before { content: "NOTE"; background: var(--warn); color: #fff; }
.announce p { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 700; font-size: .9rem; }
.announce a { text-decoration: underline; text-underline-offset: 3px; }
.announce .round { width: 32px; height: 32px; border-radius: 9px; }

/* Quick tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.tile { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px 14px 6px 6px; height: 62px; border-radius: 14px; border: var(--bw) solid var(--line-2); background: var(--surface); overflow: hidden; text-align: left; cursor: pointer; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s var(--ease); position: relative; }
.tile:hover { border-color: var(--line); transform: translateY(-1px); box-shadow: var(--pop); }
.tile img, .tile .ph { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--surface-3); }
.tile b { min-width: 0; flex: 1; font-size: .86rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Rails + grids + cards */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(146px, 42vw, 186px); gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-behavior: smooth; padding: 4px 6px 10px 4px; margin: -4px -6px -10px -4px; min-width: 0; }
.rail > * { scroll-snap-align: start; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 14px; }
@media (max-width: 480px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.card { position: relative; display: grid; gap: 10px; align-content: start; min-width: 0; padding: 8px 8px 12px; border-radius: var(--r); border: var(--bw) solid var(--line-2); background: var(--surface); cursor: pointer; text-align: left; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s; }
.card:hover { transform: translateY(-2px); border-color: var(--line); box-shadow: var(--pop); }
.card .art { position: relative; aspect-ratio: 1; width: 100%; border-radius: 11px; overflow: hidden; background: var(--surface-2); border: var(--bw) solid var(--line-2); }
.card .art.round-art { border-radius: 50%; }
.card .art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .art img { transform: scale(1.04); }
.card .art .ini { position: absolute; inset: 0; display: grid; place-items: center; font: 800 2.2rem var(--font); color: var(--text-3); }
.card .art .pill, .card .art .fab, .card .badge { z-index: 2; }
.card .fab { position: absolute; right: 8px; bottom: 8px; width: 42px; height: 42px; border-radius: 50%; border: var(--bw) solid var(--line); background: var(--acc); color: var(--on-acc); display: grid; place-items: center; opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.card .fab .ico { width: 18px; height: 18px; }
.card:hover .fab, .card:focus-within .fab { opacity: 1; transform: none; }
@media (hover: none) { .card .fab { opacity: 1; transform: none; width: 36px; height: 36px; } }
.card .ct { padding: 0 4px; font-weight: 800; font-size: .86rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .cs { padding: 0 4px; margin-top: -6px; color: var(--text-2); font-size: .76rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.badge { position: absolute; left: 7px; top: 7px; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: #FFFFFF; color: #111111; border: 1.25px solid #111111; }
.badge.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #D7362B; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border: 1.25px solid var(--line-2); color: var(--text-2); white-space: nowrap; background: var(--surface); }
.tag.full { border-color: var(--line); color: var(--text); }
.tag.preview { border-style: dashed; }
.tag.live { border-color: var(--live); color: var(--live); }
.tag.e { width: 20px; height: 20px; justify-content: center; padding: 0; border-radius: 5px; border-color: var(--line); color: var(--text); }

/* Track list */
.tracklist { list-style: none; margin: 0; padding: 4px; display: grid; min-width: 0; border-radius: var(--r-lg); background: var(--surface); border: var(--bw) solid var(--line); }
.trk { display: grid; grid-template-columns: 34px 46px minmax(0, 1fr) minmax(0, .8fr) auto 52px auto; gap: 14px; align-items: center; padding: 8px 12px; border-radius: 12px; cursor: pointer; min-width: 0; position: relative; transition: background-color .2s var(--ease); }
.trk + .trk::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--line-2); }
.trk:hover { background: var(--surface-2); }
.trk::after, .nl::after { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 4px; border-radius: 2px; background: radial-gradient(circle, var(--line) 1.4px, transparent 1.9px) 0 0 / 4px 6px repeat-y; opacity: 0; transition: opacity .25s var(--ease); pointer-events: none; }
.trk:hover::after, .nl:hover::after { opacity: .35; }
.trk.on, .nl.on { background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); }
.trk.on + .trk::before, .trk.on::before { opacity: 0; }
.trk.on::after, .nl.on::after { opacity: 1; animation: dotRun 1.1s linear infinite; }
html[data-accent] .trk.on::after, html[data-accent] .nl.on::after { background-image: radial-gradient(circle, var(--acc) 1.4px, transparent 1.9px); }
.paused .trk.on::after, .paused .nl.on::after, .trk.on.idle::after { animation-play-state: paused; }
@keyframes dotRun { to { background-position: 0 -12px; } }
.trk .n { font-weight: 800; font-size: .8rem; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.trk .th { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: var(--surface-3); border: 1.25px solid var(--line-2); }
.trk .meta { min-width: 0; }
.trk .tt { font-weight: 800; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; gap: 6px; align-items: center; min-width: 0; }
.trk .tt > span { overflow: hidden; text-overflow: ellipsis; }
.trk .ta { color: var(--text-2); font-size: .8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk .ta a:hover, .trk .tx a:hover { color: var(--text); text-decoration: underline; }
.trk .tx { color: var(--text-2); font-size: .8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.trk .td { font-size: .8rem; font-weight: 700; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.trk .acts { display: flex; align-items: center; gap: 4px; }
.trk .more-btn { width: 34px; height: 34px; border-radius: 10px; border: var(--bw) solid transparent; background: none; color: var(--text-2); display: grid; place-items: center; transition: border-color .2s, color .2s; }
.trk .more-btn:hover { border-color: var(--line); color: var(--text); background: var(--surface); }
.trk .heart-btn.yes { color: var(--text); }
@media (max-width: 900px) { .trk { grid-template-columns: 26px 46px minmax(0, 1fr) auto auto; gap: 10px; } .trk .tx, .trk .td { display: none; } }
@media (max-width: 480px) { .trk { grid-template-columns: 46px minmax(0, 1fr) auto; padding-inline: 6px; } .trk .n, .trk .typ, .trk .heart-btn { display: none; } .tracklist { padding: 2px; } }

/* playing indicator: three little dot columns */
.eq { display: inline-grid; grid-template-columns: repeat(3, 3px); gap: 2px; align-items: end; height: 15px; }
.eq i { width: 3px; height: 100%; background: var(--text); -webkit-mask: repeating-linear-gradient(to top, #000 0 3px, transparent 3px 4px); mask: repeating-linear-gradient(to top, #000 0 3px, transparent 3px 4px); animation: eq .9s steps(4) infinite; transform-origin: bottom; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.paused .eq i { animation-play-state: paused; }

/* Detail header */
.detail { position: relative; display: flex; gap: clamp(18px, 3vw, 32px); align-items: flex-end; flex-wrap: wrap; padding: clamp(18px, 3vw, 28px); border-radius: var(--r-xl); background: var(--surface); border: var(--bw) solid var(--line); overflow: hidden; isolation: isolate; }
.detail::before { content: ""; position: absolute; right: -140px; top: -180px; width: 480px; height: 480px; z-index: -1; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 30px, var(--line-2) 30px 31.5px); }
.detail .wash { display: none; }
.detail .cover { width: clamp(140px, 21vw, 226px); aspect-ratio: 1; border-radius: var(--r-lg); object-fit: cover; background: var(--surface-2); border: var(--bw) solid var(--line); box-shadow: var(--pop-lg); flex-shrink: 0; }
.detail .cover.circle { border-radius: 50%; }
.detail .info { flex: 1 1 280px; min-width: 0; display: grid; gap: 10px; justify-items: start; }
.detail h1 { margin: 0; font: 700 clamp(2rem, 5vw, 3.6rem)/1.02 var(--display); letter-spacing: -.04em; overflow-wrap: anywhere; text-wrap: balance; }
.detail .meta-line { color: var(--text-2); font-size: .84rem; font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.detail .meta-line b { color: var(--text); }
.meta-links a { color: inherit; text-decoration: none; padding: 4px 10px; margin: -4px -4px; border-radius: 999px; transition: background-color .2s; }
.meta-links a:hover, .meta-links a:focus-visible { background: var(--surface-2); color: var(--text); }
.detail .desc { color: var(--text-2); font-size: .86rem; max-width: 70ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.detail .actions { justify-self: stretch; }

/* Panels */
.glass { border-radius: var(--r-lg); background: var(--surface); border: var(--bw) solid var(--line); min-width: 0; }
.pad { padding: clamp(16px, 2.4vw, 24px); }
.state { display: grid; justify-items: center; gap: 12px; padding: 48px 18px; text-align: center; color: var(--text-2); }
.state > .ico { width: 44px; height: 44px; padding: 10px; border: var(--bw) solid var(--line); border-radius: 12px; color: var(--text); }
.state b { color: var(--text); font: 800 1.15rem var(--font); }
.skel { border-radius: var(--r); background: linear-gradient(90deg, var(--surface), var(--surface-2), var(--surface)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border: var(--bw) solid var(--line-2); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.stat { padding: 16px 18px; border-radius: var(--r); background: var(--surface); border: var(--bw) solid var(--line); min-width: 0; }
.stat b { display: block; font: 800 clamp(1.7rem, 3.4vw, 2.3rem)/1.05 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat span { color: var(--text-2); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.bars { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.bar-row .lbl { font-weight: 800; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .val { font-size: .76rem; font-weight: 700; color: var(--text-3); }
/* segmented outlined bar (the reference's "This week" bars) */
.bar-row .track { grid-column: 1 / -1; height: 12px; border-radius: 99px; border: var(--bw) solid var(--line); background: var(--surface); overflow: hidden; position: relative; }
.bar-row .track::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to right, transparent 0 calc(20% - 1.5px), var(--line-2) calc(20% - 1.5px) 20%); pointer-events: none; }
.bar-row .track i { display: block; height: 100%; background: var(--ink); transform-origin: left; animation: grow .8s var(--ease) both; }
html[data-accent] .bar-row .track i { background: var(--acc); }
@keyframes grow { from { transform: scaleX(0); } }

.recap { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(20px, 4vw, 34px); background: var(--ink); color: var(--on-ink); display: grid; gap: 10px; isolation: isolate; justify-items: start; }
.recap::before { content: ""; position: absolute; width: 360px; height: 360px; right: -110px; top: -150px; border-radius: 50%; z-index: -1; background: repeating-radial-gradient(circle, transparent 0 22px, currentColor 22px 23.5px); opacity: .22; }
.recap .eyebrow { background: var(--on-ink); color: var(--ink); }
.recap h2 { margin: 0; font: 700 clamp(1.5rem, 3.8vw, 2.4rem)/1.08 var(--display); letter-spacing: -.035em; max-width: 24ch; }
.recap p { margin: 0; opacity: .78; }

/* Settings */
.settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
.settings-nav { position: sticky; top: 84px; display: grid; gap: 2px; }
.settings-nav a { padding: 8px 14px; border-radius: 999px; color: var(--text-2); font-weight: 700; font-size: .84rem; border: var(--bw) solid transparent; transition: .2s var(--ease); }
.settings-nav a:hover { border-color: var(--line); color: var(--text); background: var(--surface); }
.settings-body { display: grid; gap: 14px; min-width: 0; }
.set-group { scroll-margin-top: 84px; }
.set-group h3 { margin: 0 0 4px; font: 800 1.15rem var(--font); letter-spacing: -.01em; }
.set-group > p { margin: 0 0 8px; color: var(--text-3); font-size: .82rem; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.set-row:first-of-type { border-top: 0; }
.set-row .lbl { min-width: 0; flex: 1 1 220px; }
.set-row .lbl b { display: block; font-size: .9rem; font-weight: 800; }
.set-row .lbl span { color: var(--text-3); font-size: .78rem; }
.switch { position: relative; width: 48px; height: 28px; flex-shrink: 0; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch input:disabled { cursor: not-allowed; }
.switch i { position: absolute; inset: 0; border-radius: 99px; border: var(--bw) solid var(--line); background: var(--surface); transition: background-color .25s var(--ease); }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--line); transition: transform .3s var(--ease), background-color .25s; }
.switch input:checked + i { background: var(--ink); }
.switch input:checked + i::after { transform: translateX(20px); background: var(--on-ink); }
html[data-accent] .switch input:checked + i { background: var(--acc); }
html[data-accent] .switch input:checked + i::after { background: var(--on-acc); }
.switch input:focus-visible + i { outline: 2px solid var(--line); outline-offset: 2px; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 36px; height: 36px; border-radius: 10px; border: var(--bw) solid var(--line); padding: 0; transition: transform .2s var(--ease), box-shadow .2s; }
.swatch:hover { transform: translateY(-1px); box-shadow: var(--pop); }
.swatch.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--line); }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; border: var(--bw) solid var(--line); background: var(--surface); flex-wrap: wrap; }
.seg button { border: 0; background: none; height: 30px; padding: 0 13px; border-radius: 999px; font-weight: 800; font-size: .76rem; color: var(--text-2); transition: .2s var(--ease); }
.seg button.on { background: var(--ink); color: var(--on-ink); }
.note { font-size: .79rem; color: var(--text-3); }
.kbd { display: inline-block; min-width: 28px; padding: 3px 8px; border-radius: 8px; border: var(--bw) solid var(--line); background: var(--surface);  font: 800 .72rem var(--font); text-align: center; }
@media (max-width: 900px) { .settings { grid-template-columns: minmax(0, 1fr); } .settings-nav { position: static; display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px; }
  .settings-nav::after { content: ""; flex: 0 0 2px; } .settings-nav a { white-space: nowrap; border-color: var(--line-2); background: var(--surface); } }

/* Library rows */
.rows { display: grid; gap: 4px; }
.lrow { display: flex; align-items: center; gap: 14px; padding: 6px; border-radius: 14px; min-width: 0; cursor: pointer; border: var(--bw) solid transparent; transition: border-color .2s, background-color .2s; }
.lrow:hover { border-color: var(--line-2); background: var(--surface-2); }
.lrow .cov { width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; border: var(--bw) solid var(--line-2); background: var(--surface-2); overflow: hidden; display: grid; place-items: center; color: var(--text-2); }
.lrow .cov.circle { border-radius: 50%; }
.lrow .cov img { width: 100%; height: 100%; object-fit: cover; }
.lrow .meta { min-width: 0; flex: 1; }
.lrow b { display: block; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow span { color: var(--text-2); font-size: .82rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- 6. Dot-matrix wave bar + visualizer ---------------- */
.wave { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 640px; min-width: 0; font-size: .72rem; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; }
.wave > span { width: 38px; flex-shrink: 0; }
.wave > span:first-child { text-align: right; }
.wave-track { position: relative; flex: 1; min-width: 0; height: 22px; }
.wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
.wave input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.wave input:disabled { cursor: default; }
.wave input:focus-visible ~ .wave-canvas { outline: 2px solid var(--line); outline-offset: 3px; border-radius: 4px; }

/* ---------------- 7. Player bar ---------------- */
.player-bar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 20px; height: var(--player-h); padding: 0 16px; border-radius: var(--r-lg); background: var(--surface); border: var(--bw) solid var(--line); }
.pb-now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pb-art { width: 58px; height: 58px; border-radius: 13px; flex-shrink: 0; background: var(--surface-2); overflow: hidden; border: var(--bw) solid var(--line); padding: 0; transition: transform .2s var(--ease), box-shadow .2s; cursor: pointer; }
.pb-art:hover { transform: translateY(-1px); box-shadow: var(--pop); }
.pb-art img { width: 100%; height: 100%; object-fit: cover; }
.pb-meta { min-width: 0; }
.pb-title { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; padding: 0; display: block; max-width: 100%; text-align: left; cursor: pointer; }
.pb-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.pb-artist { color: var(--text-2); font-size: .8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-artist a:hover { color: var(--text); text-decoration: underline; }
.pb-center { display: grid; gap: 6px; justify-items: center; align-content: center; min-width: 0; padding-top: 6px; }
.ctrls { display: flex; align-items: center; gap: 8px; }
.cbtn { width: 38px; height: 38px; border-radius: 11px; border: var(--bw) solid var(--line-2); background: var(--surface); color: var(--text); display: grid; place-items: center; position: relative; flex-shrink: 0; transition: border-color .2s, background-color .2s, color .2s, transform .18s var(--ease), box-shadow .18s var(--ease); }
.cbtn .ico { width: 18px; height: 18px; }
.cbtn:hover { border-color: var(--line); background: var(--surface-2); }
.cbtn.main:hover { transform: scale(1.05); box-shadow: var(--pop); background: var(--acc); }
.cbtn:active { transform: none; box-shadow: none; }
.cbtn.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.cbtn.main { width: 46px; height: 46px; border-radius: 50%; border: var(--bw) solid var(--line); background: var(--acc); color: var(--on-acc); }
.cbtn.main .ico { width: 20px; height: 20px; }
.cbtn.main.loading::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px dashed var(--line); animation: spin 2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pb-right { display: flex; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; }
.vol { -webkit-appearance: none; appearance: none; width: 96px; height: 18px; background: transparent; cursor: pointer; --p: 85%; }
.vol::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; border: 1.25px solid var(--line); background: linear-gradient(90deg, var(--ink) var(--p), var(--surface) var(--p)); }
.vol::-moz-range-track { height: 6px; border-radius: 99px; border: 1.25px solid var(--line); background: var(--surface); }
.vol::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--ink); }
.vol::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); }
.vol::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid var(--line); border-radius: 50%; background: var(--surface); }
.speed-pill { font: 800 .7rem var(--font); }

.mini { display: none; }

/* Queue panel */
.qp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 14px 10px; border-bottom: var(--bw) solid var(--line-2); }
.qp-head h3 { margin: 0; font: 800 1.15rem var(--font); }
.qp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 16px; }
.qp-label { padding: 12px 8px 6px; font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.qp-label a { text-decoration: underline; }
.qrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) 32px; gap: 10px; align-items: center; padding: 6px; border-radius: 12px; cursor: pointer; transition: background-color .2s; }
.qrow:hover { background: var(--surface-2); }
.qrow.on { background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); }
.qrow img, .qrow .ph { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--surface-3); border: 1.25px solid var(--line-2); }
.qrow b { display: block; font-size: .84rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrow span { display: block; font-size: .76rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrow .x { width: 30px; height: 30px; border-radius: 9px; border: var(--bw) solid transparent; background: none; color: var(--text-3); display: grid; place-items: center; }
.qrow .x:hover { color: var(--text); border-color: var(--line); }

/* ---------------- 8. Now playing ---------------- */
.np { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; animation: npIn .4s var(--ease); }
.np.closing { animation: npOut .26s var(--ease) forwards; }
@keyframes npIn { from { transform: translateY(5%); opacity: 0; } }
@keyframes npOut { to { transform: translateY(5%); opacity: 0; } }
.np > *:not(.np-bg) { position: relative; }
.np-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(14px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) 8px max(18px, env(safe-area-inset-left, 0px)); }
.np-top .eyebrow { min-width: 0; }
.np-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 5vw, 60px); align-items: center; min-height: 0; overflow-y: auto; padding: 8px max(22px, env(safe-area-inset-right, 0px)) max(22px, env(safe-area-inset-bottom, 0px)) max(22px, env(safe-area-inset-left, 0px)); max-width: 1300px; width: 100%; margin: 0 auto; }
.np-left { display: grid; gap: 16px; justify-items: center; min-width: 0; padding-top: 6px; }
.np-cover { width: min(100%, 40vh, 420px); aspect-ratio: 1; border-radius: var(--r-xl); object-fit: cover; background: var(--surface-2); border: var(--bw) solid var(--line); box-shadow: var(--pop-lg); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.np.paused .np-cover { transform: scale(.96); box-shadow: var(--pop); }
.np-titles { width: min(100%, 460px); display: flex; align-items: center; gap: 12px; }
.np-titles .t { flex: 1; min-width: 0; }
.np-titles h2 { margin: 0; font: 700 clamp(1.35rem, 3vw, 2rem)/1.12 var(--display); letter-spacing: -.025em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.np-titles p { margin: 4px 0 0; color: var(--text-2); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-titles p a:hover { color: var(--text); text-decoration: underline; }
.np-left .wave { width: min(100%, 460px); max-width: none; }
.np-left .wave-track { height: 30px; }
.np-left .ctrls { gap: clamp(6px, 2vw, 14px); }
.np-left .cbtn { width: 46px; height: 46px; border-radius: 13px; }
.np-left .cbtn.main { width: 70px; height: 70px; border-radius: 50%; }
.np-left .cbtn.main .ico { width: 26px; height: 26px; }
.np-extras { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.np-right { min-width: 0; min-height: 0; height: min(100%, 640px); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
.np-panel { min-height: 0; overflow-y: auto; border-radius: var(--r-lg); background: var(--surface); border: var(--bw) solid var(--line); padding: 20px; scroll-behavior: smooth; }
.lyrics { display: grid; gap: 12px; padding: 18vh 4px; }
.lyrics p { margin: 0; font: 800 clamp(1.25rem, 2.4vw, 1.75rem)/1.25 var(--font); letter-spacing: -.02em; color: var(--text-3); cursor: pointer; transition: color .35s var(--ease), transform .35s var(--ease), opacity .35s; transform-origin: left center; overflow-wrap: anywhere; opacity: .55; }
.lyrics p:hover { color: var(--text-2); opacity: 1; }
.lyrics p.past { color: var(--text-2); opacity: .5; }
.lyrics p.now { color: var(--text); opacity: 1; transform: scale(1.03); }
.lyrics p.now::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 3px; background: var(--acc); border: 1.5px solid var(--line); vertical-align: middle; }
.lyrics.plain p { cursor: default; color: var(--text-2); font: 600 1rem/1.6 var(--font); letter-spacing: 0; opacity: 1; }
.lyrics.plain { padding: 4px; gap: 3px; }
.info-grid { display: grid; gap: 0; }
.info-grid div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; font-size: .88rem; padding: 12px 0; border-top: 1px solid var(--line-2); }
.info-grid div:first-child { border-top: 0; }
.info-grid .k { color: var(--text-3); font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.info-grid .v { overflow-wrap: anywhere; font-weight: 600; }
.info-grid a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .np-main { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 22px; padding-top: 4px; }
  .np-right { height: auto; }
  .np-panel { max-height: 58vh; min-height: 220px; padding: 16px; }
  .np-cover { width: min(78vw, 34vh, 320px); }
  .np-titles { width: min(100%, 460px); }
  .lyrics { padding: 12vh 2px; }
}
@media (max-width: 480px) {
  .np-top { padding-inline: 14px; }
  .np-top .eyebrow { max-width: 58vw; }
  .np-main { padding-inline: 16px; }
  .np-left { gap: 12px; }
  .np-left .ctrls { gap: 8px; }
  .np-extras { gap: 6px; }
  .np-extras .btn { height: 32px; padding: 0 11px; font-size: .74rem; }
  .info-grid div { grid-template-columns: 92px minmax(0, 1fr); }
}

/* Equalizer */
.eq-panel { display: grid; gap: 16px; }
.eq-bands { display: grid; grid-template-columns: 52px repeat(10, minmax(0, 1fr)); gap: 6px; align-items: end; padding: 14px 10px 6px; border-radius: var(--r); border: var(--bw) solid var(--line); background: var(--surface-2); }
.eq-band { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.eq-band output { font-size: .64rem; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; }
.eq-band label { font-size: .62rem; font-weight: 800; color: var(--text-3); white-space: nowrap; }
.eq-band input { -webkit-appearance: slider-vertical; appearance: auto; writing-mode: vertical-lr; direction: rtl; width: 22px; height: 150px; accent-color: var(--ink); margin: 0; cursor: pointer; }
html[data-accent] .eq-band input { accent-color: var(--acc); }
.eq-band.pre { border-right: 1.5px dashed var(--line-2); padding-right: 6px; }
.eq-curve { width: 100%; height: 70px; display: block; }
@media (max-width: 520px) { .eq-bands { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 2px; padding-inline: 4px; } .eq-band input { height: 120px; width: 18px; } .eq-band label { font-size: .54rem; } }

/* ---------------- 9. Menus, modals, toasts ---------------- */
.menu { position: fixed; z-index: 120; min-width: 230px; max-width: min(300px, calc(100vw - 24px)); max-height: min(70vh, 480px); overflow-y: auto; padding: 6px; border-radius: var(--r); background: var(--surface); border: var(--bw) solid var(--line); box-shadow: var(--pop-lg); animation: pop .16s var(--ease); }
@keyframes pop { from { transform: translateY(-4px); opacity: 0; } }
.menu button, .menu a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; text-align: left; font-weight: 700; font-size: .85rem; color: var(--text-2); min-width: 0; transition: background-color .15s, color .15s; }
.menu button span, .menu a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu button:hover, .menu a:hover { background: var(--ink); color: var(--on-ink); }
.menu hr { border: 0; height: 1px; background: var(--line-2); margin: 6px 4px; }
.menu h6 { margin: 8px 10px 6px; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scrim { position: fixed; inset: 0; z-index: 110; background: var(--overlay); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; animation: fadeIn .22s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } }
.modal { width: min(480px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: var(--r-xl); background: var(--surface); border: var(--bw) solid var(--line); box-shadow: var(--pop-lg); padding: 24px; display: grid; gap: 16px; animation: modalIn .3s var(--ease); }
.modal.wide { width: min(640px, 100%); }
@keyframes modalIn { from { transform: translateY(14px); opacity: 0; } }
.modal h3 { margin: 0; font: 800 1.5rem/1.1 var(--font); letter-spacing: -.02em; }
.field { display: grid; gap: 6px; }
.field label { font-size: .72rem; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
.input { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: var(--bw) solid var(--line-2); background: var(--surface); color: var(--text); outline: none; transition: border-color .2s, box-shadow .2s; font-weight: 600; }
textarea.input { height: 92px; padding: 12px 14px; resize: vertical; }
.input:focus { border-color: var(--line); box-shadow: var(--ring); }
.input[aria-invalid="true"] { border-color: var(--live); }
.toasts { position: fixed; z-index: 130; left: 50%; transform: translateX(-50%); bottom: calc(var(--player-h) + 28px); display: grid; gap: 8px; justify-items: center; pointer-events: none; width: min(92vw, 420px); }
.toast { pointer-events: auto; padding: 11px 18px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-weight: 800; font-size: .83rem; border: var(--bw) solid var(--ink); animation: toastIn .3s var(--ease); text-align: center; max-width: 100%; }
@keyframes toastIn { from { transform: translateY(10px); opacity: 0; } }

/* Account */
.account-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.account-card .lbl { flex: 1 1 280px; min-width: 0; }
.account-card h3 { margin: 10px 0 0; font: 800 1.5rem/1.1 var(--font); letter-spacing: -.02em; overflow-wrap: anywhere; }
.account-card .sub { margin-top: 6px; overflow-wrap: anywhere; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.account-card [data-syncstatus] { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; }
.form-error { margin: 0; padding: 10px 14px; border-radius: 12px; border: var(--bw) solid var(--live); color: var(--text); font-size: .84rem; font-weight: 700; }
.form-ok { margin: 0; padding: 12px 14px; border-radius: 12px; border: var(--bw) solid var(--line); background: var(--hatch), var(--surface-2); font-size: .85rem; font-weight: 700; }
.link-btn { border: 0; background: none; padding: 0; color: var(--text); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.verify-notice { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 12px 14px; border-radius: var(--r); border: var(--bw) dashed var(--line); background: var(--surface-2); }
.verify-notice > .ico { width: 38px; height: 38px; padding: 8px; border: var(--bw) solid var(--line); border-radius: 10px; }
.verify-notice > div { flex: 1 1 220px; min-width: 0; }
.verify-notice b { display: block; font-weight: 800; }
.verify-notice span { color: var(--text-2); font-size: .83rem; overflow-wrap: anywhere; }

/* ---------------- 9b. Home + Browse sections (each has its own layout) ---------------- */
.home-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px 28px; align-items: end; }
.home-top .greet h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
@media (max-width: 900px) { .home-top { grid-template-columns: minmax(0, 1fr); } }
/* slim "#1 today" strip */
.mini-hero { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 10px; border-radius: var(--r-lg); background: var(--surface); border: var(--bw) solid var(--line); min-width: 0; }
.mh-art { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--surface-2); }
.mh-meta { flex: 1; min-width: 0; display: grid; gap: 2px; justify-items: start; }
.mh-meta b { max-width: 100%; font: 700 1.05rem/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-meta > span:last-child { max-width: 100%; color: var(--text-2); font-size: .8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-hero .actions { flex-wrap: nowrap; gap: 8px; }
@media (max-width: 520px) { .mini-hero { flex-wrap: wrap; } .mini-hero .actions { flex-basis: 100%; } .mini-hero .actions .btn { flex: 1; } }

/* numbered two-column chart */
.numlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 22px; counter-reset: none; }
@media (max-width: 760px) { .numlist { grid-template-columns: minmax(0, 1fr); } }
.nl { position: relative; display: grid; grid-template-columns: 34px 48px minmax(0, 1fr) 34px; gap: 12px; align-items: center; padding: 7px 8px 7px 12px; border-radius: 14px; cursor: pointer; min-width: 0; border-bottom: 1px solid var(--line-2); transition: background-color .2s var(--ease); }
.nl:hover { background: var(--surface); }
.nl-n { font: 700 1.25rem/1 var(--display); color: var(--text-3); font-variant-numeric: tabular-nums; }
.nl.on .nl-n, .nl:hover .nl-n { color: var(--text); }
.nl-art { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--surface-3); }
.nl .meta { min-width: 0; }
.nl b { display: block; font-weight: 800; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl .meta span { display: block; color: var(--text-2); font-size: .78rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl .more-btn { width: 34px; height: 34px; border-radius: 10px; border: var(--bw) solid transparent; background: none; color: var(--text-2); display: grid; place-items: center; }
.nl .more-btn:hover { border-color: var(--line); color: var(--text); }

/* mixes: big numerals over the cover */
.mix-card .art img { filter: grayscale(.35); }
.mix-card:hover .art img { filter: none; }
.mix-no { position: absolute; left: 10px; top: 6px; z-index: 2; font: 700 2.6rem/1 var(--display); color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); letter-spacing: -.04em; }

/* moods: outlined pills with a small cover */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills > .skel { width: 100%; height: 40px; }
.pill-link { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 4px; border-radius: 999px; border: var(--bw) solid var(--line-2); background: var(--surface); font-weight: 700; font-size: .82rem; max-width: 100%; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.pill-link img, .pill-link > .ico { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pill-link > .ico { padding: 6px; }
.pill-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-link:hover { border-color: var(--line); box-shadow: var(--pop); }

/* wide landscape cards */
.wide-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 72vw, 330px); gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 4px 4px 12px; margin: -4px -4px -12px; }
.wide-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: var(--r-lg); border: var(--bw) solid var(--line-2); background: var(--surface); min-width: 0; scroll-snap-align: start; transition: border-color .2s, box-shadow .25s var(--ease), transform .25s var(--ease); }
.wide-card:hover { border-color: var(--line); box-shadow: var(--pop); transform: translateY(-2px); }
.wc-art { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; flex-shrink: 0; background: var(--surface-2); }
.wc-meta { flex: 1; min-width: 0; display: grid; gap: 4px; justify-items: start; }
.wc-meta b { max-width: 100%; font: 700 1rem/1.2 var(--display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wc-meta > span:last-child { max-width: 100%; color: var(--text-2); font-size: .76rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wide-card .fab { position: static; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: var(--bw) solid var(--line); background: var(--acc); color: var(--on-acc); display: grid; place-items: center; opacity: 0; transition: opacity .2s; }
.wide-card:hover .fab, .wide-card:focus-within .fab { opacity: 1; }
@media (hover: none) { .wide-card .fab { opacity: 1; } }

/* live stations: compact two-column list */
.station-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.st-item { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 14px; border: var(--bw) dashed var(--line-2); background: transparent; cursor: pointer; min-width: 0; transition: border-color .2s, background-color .2s; }
.st-item:hover { border-style: solid; border-color: var(--line); background: var(--surface); }
.st-art { width: 42px; height: 42px; border-radius: 10px; object-fit: contain; background: var(--surface); flex-shrink: 0; border: 1px solid var(--line-2); }
.st-item .meta { flex: 1; min-width: 0; }
.st-item b { display: block; font-weight: 800; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-item .meta span { display: block; color: var(--text-3); font-size: .74rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex-shrink: 0; animation: blink 1.4s infinite; }

/* Browse: full-bleed genre posters */
.poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 12px; }
@media (max-width: 480px) { .poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.poster { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); color: #fff; isolation: isolate; display: flex; align-items: flex-end; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(1) contrast(1.05); transition: filter .5s var(--ease), transform .6s var(--ease); }
.poster::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .05) 60%); }
.poster:hover { transform: translateY(-3px); box-shadow: var(--pop-lg); }
.poster:hover img { filter: none; transform: scale(1.05); }
.po-meta { display: grid; gap: 2px; padding: 14px; min-width: 0; }
.po-meta b { font: 700 clamp(1.05rem, 2vw, 1.3rem)/1.1 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.po-meta small { font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
/* moods: icon + label in a compact grid */
.mood-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.mood { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: var(--bw) solid var(--line-2); background: var(--surface); font-weight: 800; font-size: .86rem; min-width: 0; transition: border-color .2s, box-shadow .2s; }
.mood .ico { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--ink); color: var(--on-ink); }
.mood span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mood:hover { border-color: var(--line); box-shadow: var(--pop); }
/* eras: big numerals */
.era-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); gap: 0; overflow-x: auto; border: var(--bw) solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.era { display: grid; gap: 4px; padding: 16px 18px; border-left: 1px solid var(--line-2); min-width: 0; transition: background-color .2s, color .2s; }
.era:first-child { border-left: 0; }
.era b { font: 700 clamp(1.8rem, 3.4vw, 2.4rem)/1 var(--display); letter-spacing: -.04em; }
.era b i { font-style: normal; color: var(--text-3); }
.era span { font-size: .72rem; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.era:hover { background: var(--ink); color: var(--on-ink); }
.era:hover b i, .era:hover span { color: inherit; opacity: .7; }

/* ad slots */
.ad-banner { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: var(--r-lg); border: var(--bw) dashed var(--line); background: var(--surface); min-width: 0; }
.ad-banner img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.ad-banner .meta { flex: 1; min-width: 0; }
.ad-banner b { display: block; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-banner span { display: block; color: var(--text-2); font-size: .82rem; overflow-wrap: anywhere; }
.ad-banner .ad-tag { position: absolute; right: 10px; top: -9px; height: 18px; padding: 0 8px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: .55rem; font-weight: 800; letter-spacing: .14em; display: grid; place-items: center; }
.ad-banner.side { flex-direction: column; align-items: stretch; text-align: left; gap: 8px; padding: 10px; margin-top: 8px; }
.ad-banner.side img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.preroll { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 16px; background: var(--overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadeIn .25s var(--ease); }
.preroll-card { width: min(420px, 100%); display: grid; gap: 14px; padding: 18px; border-radius: var(--r-xl); background: var(--surface); border: var(--bw) solid var(--line); box-shadow: var(--pop-lg); }
.preroll-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); background: var(--surface-2); }
.preroll-card h3 { margin: 0; font: 700 1.3rem/1.15 var(--display); }
.preroll-bar { height: 4px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.preroll-bar i { display: block; height: 100%; width: 0; background: var(--line); transition: width .25s linear; }

/* avatar photo */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 96px; height: 96px; border-radius: 50%; background: var(--surface-2); color: var(--text); display: grid; place-items: center; font: 700 2rem var(--display); overflow: hidden; flex-shrink: 0; border: var(--bw) solid var(--line); }
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }

/* onboarding */
.onb { position: fixed; inset: 0; z-index: 150; background: var(--bg); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: fadeIn .3s var(--ease); }
.onb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(16px, env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 40px) 10px; }
.onb-steps { display: flex; gap: 6px; }
.onb-steps i { width: 28px; height: 4px; border-radius: 99px; background: var(--line-2); }
.onb-steps i.on { background: var(--line); }
.onb-body { overflow-y: auto; padding: 8px clamp(16px, 4vw, 40px) 24px; display: grid; gap: 18px; align-content: start; max-width: 1100px; width: 100%; margin: 0 auto; }
.onb-body h2 { margin: 0; font: 700 clamp(1.6rem, 4vw, 2.4rem)/1.08 var(--display); letter-spacing: -.03em; }
.onb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr)); gap: 16px 12px; }
@media (max-width: 480px) { .onb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; } }
.onb-artist { display: grid; gap: 8px; justify-items: center; text-align: center; border: 0; background: none; padding: 0; min-width: 0; color: var(--text); animation: riseIn .4s var(--ease) both; }
.onb-artist .pic { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--surface-2); border: var(--bw) solid var(--line-2); transition: transform .25s var(--ease), border-color .2s; }
.onb-artist .pic img { width: 100%; height: 100%; object-fit: cover; }
.onb-artist .pic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(0, 0, 0, .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 40% no-repeat; opacity: 0; transition: opacity .2s; }
.onb-artist.on .pic { border-color: var(--line); border-width: 3px; transform: scale(.96); }
.onb-artist.on .pic::after { opacity: 1; }
.onb-artist:hover .pic { border-color: var(--line); }
.onb-artist b { font-size: .8rem; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(16px, 4vw, 40px) max(14px, env(safe-area-inset-bottom, 0px)); border-top: var(--bw) solid var(--line-2); background: var(--surface); }
.onb-foot .note { margin: 0; min-width: 0; }
.pick-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-chips .chip { height: 42px; padding: 0 18px; font-size: .86rem; }

/* creator studio + track page */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 10px; }
.spark { width: 100%; height: 120px; display: block; }
.checks { display: grid; gap: 6px; }
.check-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); }
.check-row .ico { width: 22px; height: 22px; padding: 3px; border-radius: 50%; }
.check-row.pass .ico { background: var(--ok); color: #fff; }
.check-row.warn .ico { background: var(--warn); color: #fff; }
.check-row.fail .ico { background: var(--live); color: #fff; }
.check-row b { display: block; font-size: .84rem; }
.check-row span { color: var(--text-2); font-size: .8rem; overflow-wrap: anywhere; }
.declare { display: grid; gap: 8px; }
.declare label { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; font-weight: 600; cursor: pointer; }
.declare input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink); flex-shrink: 0; }
.progress { height: 8px; border-radius: 99px; border: var(--bw) solid var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .2s; }
.table-wrap { overflow-x: auto; border-radius: var(--r); border: var(--bw) solid var(--line); background: var(--surface); }
.tbl { width: 100%; border-collapse: collapse; font-size: .84rem; min-width: 560px; }
.tbl th, .tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.tbl th { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.wrap { white-space: normal; min-width: 200px; }
.status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border: 1.25px solid var(--line-2); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.published, .status.approved, .status.active { color: var(--ok); border-color: currentColor; }
.status.review, .status.pending { color: var(--warn); border-color: currentColor; }
.status.rejected, .status.removed, .status.suspended { color: var(--live); border-color: currentColor; }
.comment { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line-2); align-items: start; }
.comment:first-child { border-top: 0; }
.comment .av { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); color: var(--text); border: var(--bw) solid var(--line); display: grid; place-items: center; font-weight: 800; font-size: .8rem; overflow: hidden; }
.comment .av img { width: 100%; height: 100%; object-fit: cover; }
.comment b { font-size: .84rem; }
.comment small { color: var(--text-3); font-size: .72rem; margin-left: 6px; }
.comment p { margin: 2px 0 0; font-size: .88rem; overflow-wrap: anywhere; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; align-items: stretch; }
.plan { display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: var(--r-xl); border: var(--bw) solid var(--line-2); background: var(--surface); position: relative; }
.plan.best { border-color: var(--line); border-width: 2px; }
.plan.best::before { content: "Best value"; position: absolute; right: 16px; top: -11px; height: 22px; padding: 0 10px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; display: grid; place-items: center; }
.plan h3 { margin: 0; font: 700 1.2rem var(--display); }
.plan .price { font: 700 2.2rem/1 var(--display); letter-spacing: -.03em; }
.plan .price small { font: 700 .8rem var(--font); color: var(--text-3); letter-spacing: 0; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .86rem; }
.plan li { display: flex; gap: 8px; align-items: flex-start; }
.plan li .ico { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.plan .btn { margin-top: auto; }

/* ---------------- 10. Responsive ---------------- */
@media (max-width: 1100px) and (min-width: 768px) {
  .app, html.queue-open .app { grid-template-columns: 76px minmax(0, 1fr) 0; }
  html.queue-open .queue-panel { position: fixed; right: var(--gap); top: var(--gap); bottom: calc(var(--player-h) + var(--gap) * 2); width: min(var(--queue-w), 88vw); z-index: 60; visibility: visible; border-width: var(--bw); box-shadow: var(--pop-lg); animation: slideIn .3s var(--ease); }
  .sidebar { padding-inline: 10px; align-items: center; }
  .brand { padding: 2px 0 12px; }
  .brand > div, .nav-link span, .side-label, .side-lists, .sidebar [data-ad-slot] { display: none; }
  .nav-link { justify-content: center; padding: 4px; width: 50px; border-radius: 13px; }
}
@keyframes slideIn { from { transform: translateX(16px); opacity: 0; } }
@media (min-width: 1101px) and (max-width: 1360px) {
  html.queue-open .app { grid-template-columns: var(--side-w) minmax(0, 1fr) 0; }
  html.queue-open .queue-panel { position: fixed; right: var(--gap); top: var(--gap); bottom: calc(var(--player-h) + var(--gap) * 2); width: var(--queue-w); z-index: 60; visibility: visible; border-width: var(--bw); box-shadow: var(--pop-lg); animation: slideIn .3s var(--ease); }
}
@media (max-width: 1020px) and (min-width: 768px) { .pb-right .vol, .pb-right .hide-md { display: none; } .player-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; } }

/* Phone */
@media (max-width: 767px) {
  :root { --gutter: 16px; --gap: 0px; }
  .app, html.queue-open .app { padding: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "main"; }
  .app > .main { border-radius: 0; padding-bottom: calc(var(--mini-h) + 28px + env(safe-area-inset-bottom, 0px)); }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 100; width: min(300px, 84vw); border-radius: 0 var(--r-lg) var(--r-lg) 0; border-width: 0 var(--bw) 0 0; padding-top: max(16px, env(safe-area-inset-top, 0px)); overflow-y: auto; transform: translateX(-104%); transition: transform .32s var(--ease); box-shadow: var(--pop-lg); }
  html.drawer-open .sidebar { transform: none; }
  html.drawer-open .drawer-scrim { display: block; }
  .side-lists { flex: none; overflow: visible; }
  .menu-btn { display: grid !important; }
  .topbar { flex-wrap: wrap; gap: 8px; padding-bottom: 8px; background: var(--bg); border-bottom: 1px solid var(--line-2); margin-bottom: 14px; }
  .topbar .searchbox { flex: 1 1 140px; max-width: none; }
  .topbar .searchbox input { height: 38px; padding-left: 38px; padding-right: 40px; font-size: .88rem; }
  .topbar .searchbox > .ico { left: 13px; width: 17px; height: 17px; }
  .topbar .searchbox .mic { top: 2px; }
  .topbar-right { margin-left: 0; }
  .topbar-right > .round { display: none; }
  .topbar .round, .topbar .avatar { width: 38px; height: 38px; border-radius: 11px; }
  .topbar .avatar { border-radius: 50%; }
  .mbrand { display: flex !important; }
  .topnav { display: flex !important; }
  .mini { margin-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  .queue-panel { position: fixed; inset: 0; z-index: 90; border-radius: 0; border: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  html:not(.queue-open) .queue-panel { display: none; }
  html.queue-open .queue-panel { visibility: visible; animation: npIn .35s var(--ease); }
  .player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0 10px; display: grid; gap: 8px; pointer-events: none; }
  .player > * { pointer-events: auto; }
  .player-bar { display: none; }
  .mini { display: flex; align-items: center; gap: 8px; padding: 6px; height: var(--mini-h); border-radius: 18px; background: var(--panel); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: var(--bw) solid var(--line); position: relative; overflow: hidden; min-width: 0; }
  .mini .pb-art { width: 50px; height: 50px; border-radius: 12px; border-width: 1.25px; }
  .mini .pb-meta { flex: 1; cursor: pointer; }
  .mini .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line-2); overflow: hidden; }
  .mini .prog i { display: block; height: 100%; width: 0; background: var(--line); }
  .mini .cbtn.main { width: 44px; height: 44px; }
  .mini .cbtn:not(.main) { border-color: transparent; }
  .toasts { bottom: calc(var(--mini-h) + 26px + env(safe-area-inset-bottom, 0px)); }
  .topbar .nav-arrows { display: none; }
  .hero, .detail, .recap { border-radius: var(--r-lg); }
  .detail .cover { width: min(54vw, 210px); margin: 0 auto; }
  .detail .info { flex-basis: 100%; }
  .np-left .cbtn { width: 42px; height: 42px; }
  .np-left .cbtn.main { width: 64px; height: 64px; }
  .modal { padding: 20px; border-radius: var(--r-lg); box-shadow: var(--pop-lg); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
[data-ad-slot]:empty, #h-ann:empty { display: none; }
@media (max-width: 560px) { .topbar .mbrand { display: none !important; } }

/* the profile picture keeps a perfect circle at every size */
.detail .cover.avatar-lg { width: clamp(120px, 18vw, 200px); height: auto; aspect-ratio: 1 / 1; flex: none; display: grid; place-items: center; background: var(--surface-2); color: var(--text); font-family: var(--display); font-weight: 700; box-shadow: none; }
/* content that arrives after loading fades in instead of popping */
.filled { animation: fadeIn .35s var(--ease) both; }
/* page changes cross-fade only the content area */
#view { view-transition-name: page; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(page) { animation: fadeOut .18s var(--ease) both; }
::view-transition-new(page) { animation: fadeIn .26s var(--ease) both; }
@keyframes fadeOut { to { opacity: 0; } }
html.reduce-motion::view-transition-group(*), html.reduce-motion::view-transition-old(*), html.reduce-motion::view-transition-new(*) { animation: none !important; }

/* ---------------- Now Playing: immersive ----------------
   Album art fills the screen as a soft blur behind light text, whatever the app theme. */
.np { background: #0c0c0e; color: #fff;
  --text: #ffffff; --text-2: rgba(255,255,255,.72); --text-3: rgba(255,255,255,.46);
  --line: rgba(255,255,255,.92); --line-2: rgba(255,255,255,.16);
  --surface: rgba(255,255,255,.07); --surface-2: rgba(255,255,255,.12); --surface-3: rgba(255,255,255,.16);
  --ink: #ffffff; --on-ink: #0c0c0e; --dot-on: #ffffff; --dot-off: rgba(255,255,255,.2);
  --pop: 0 10px 30px -12px rgba(0,0,0,.6); }
html:not([data-accent]) .np { --acc: #ffffff; --on-acc: #0c0c0e; }
.np-bg { position: absolute; inset: -12%; pointer-events: none; background-color: #1a1a1d; background-size: cover; background-position: center; filter: blur(70px) saturate(1.5) brightness(.5); transform: scale(1.1); transition: background-image .6s var(--ease); }
.np::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 30% 20%, transparent, rgba(0,0,0,.55)), linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
.np > *:not(.np-bg) { z-index: 1; }
.np .eyebrow { background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(8px); }
.np .round { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: #fff; }
.np-cover { border: 0; border-radius: 24px; box-shadow: 0 30px 80px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); }
.np:not(.paused) .np-cover { animation: breathe 6s ease-in-out infinite; }
.np.paused .np-cover { transform: scale(.94); box-shadow: 0 16px 40px -20px rgba(0,0,0,.8); }
@keyframes breathe { 50% { transform: scale(1.015); } }
.np-titles h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); }
.np .cbtn { background: transparent; border-color: transparent; color: #fff; }
.np .cbtn:hover { background: rgba(255,255,255,.12); border-color: transparent; }
.np .cbtn.on { background: rgba(255,255,255,.18); color: #fff; }
.np .cbtn.main { background: #fff; color: #0c0c0e; border: 0; box-shadow: 0 12px 30px -10px rgba(0,0,0,.7); }
.np .cbtn.main:hover { background: #fff; transform: scale(1.06); }
.np .cbtn.main.loading::before { border-color: #fff; }
.np-extras { flex-wrap: nowrap; gap: 4px; overflow-x: auto; max-width: 100%; padding: 2px 4px; justify-content: center; }
.xbtn { flex: 0 0 auto; width: 58px; display: grid; justify-items: center; gap: 4px; padding: 8px 0 6px; border: 0; border-radius: 14px; background: transparent; color: var(--text-2); font-size: .64rem; font-weight: 800; letter-spacing: .04em; transition: background-color .2s, color .2s; }
.xbtn .ico, .xbtn b { width: 22px; height: 22px; font-size: .82rem; display: grid; place-items: center; }
.xbtn:hover { background: rgba(255,255,255,.1); color: #fff; }
.xbtn.on { color: #fff; background: rgba(255,255,255,.16); }
.np-right { gap: 14px; }
.np #npTabs .chip { background: rgba(255,255,255,.08); border-color: transparent; color: rgba(255,255,255,.75); }
.np #npTabs .chip.on { background: #fff; color: #0c0c0e; }
.np-panel { background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent); }
.np .lyrics p { color: rgba(255,255,255,.4); opacity: 1; font-family: var(--display); font-weight: 700; }
.np .lyrics p.past { color: rgba(255,255,255,.3); }
.np .lyrics p.now { color: #fff; transform: scale(1.04); text-shadow: 0 0 24px rgba(255,255,255,.35); }
.np .lyrics p.now::before { display: none; }
.np .state, .np .note { color: rgba(255,255,255,.65); }
.np .state > .ico { border-color: rgba(255,255,255,.4); color: #fff; }
.np .qrow.on { background: rgba(255,255,255,.12); box-shadow: none; }
.np .qrow:hover { background: rgba(255,255,255,.08); }
.np .skel { background: rgba(255,255,255,.08); border-color: transparent; }
.np [data-ad-slot] .ad-banner { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
@media (max-width: 900px) { .np-main { gap: 18px; } .np-panel { background: rgba(0,0,0,.28); } }
@media (max-width: 480px) { .np-cover { width: min(80vw, 36vh, 320px); border-radius: 18px; } .xbtn { width: 52px; } .np-left .cbtn { width: 44px; height: 44px; } .np-left .cbtn.main { width: 66px; height: 66px; } }

/* sleep timer picker: a chunky dotted slider up to 2 hours */
.sleep-pick { display: grid; gap: 10px; }
.sleep-pick output { font: 700 clamp(2.2rem, 7vw, 3rem)/1 var(--display); letter-spacing: -.03em; }
.sleep-track { position: relative; height: 34px; --p: 22%; }
.sleep-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 12px; transform: translateY(-50%); border-radius: 99px; background: radial-gradient(circle, var(--dot-off) 2px, transparent 2.5px) 0 50% / 9px 12px repeat-x; }
.sleep-fill { position: absolute; left: 0; top: 50%; height: 12px; width: var(--p); transform: translateY(-50%); border-radius: 99px; background: radial-gradient(circle, var(--dot-on) 2px, transparent 2.5px) 0 50% / 9px 12px repeat-x; pointer-events: none; }
.sleep-track input { position: absolute; inset: 0; width: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; z-index: 1; }
.sleep-track input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); border: 4px solid var(--surface); box-shadow: 0 0 0 1.5px var(--line); }
.sleep-track input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); border: 4px solid var(--surface); }
.sleep-scale { display: flex; justify-content: space-between; font-size: .68rem; font-weight: 800; color: var(--text-3); }
.wave-track { height: 26px; }
.np-left .wave-track { height: 34px; }

/* ---------------- full songs: the YouTube video window ----------------
   Floating: a small window that can be dragged to any corner (YouTube needs at least 200×200).
   In the full-screen player it sits exactly over the cover box instead. */
.ytdock { position: fixed; z-index: 86; width: var(--ytw, 300px); display: grid; grid-template-rows: auto var(--yth, 200px); border-radius: 16px; overflow: hidden; background: #000; box-shadow: var(--pop-lg); border: 1px solid rgba(255,255,255,.14); animation: fadeIn .3s var(--ease); touch-action: none; transition: left .3s var(--ease), top .3s var(--ease), right .3s var(--ease), bottom .3s var(--ease); }
.ytdock.dragging { transition: none; cursor: grabbing; }
.ytdock-bar { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 10px; background: #111; cursor: grab; }
.ytdock-grip { flex: 1; height: 12px; background: radial-gradient(circle, rgba(255,255,255,.4) 1.3px, transparent 1.8px) 0 50% / 6px 6px repeat-x; }
.ytdock-btn { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; }
.ytdock-btn[data-ytplay] { background: #fff; color: #111; }
.ytdock-frame { position: relative; width: 100%; height: 100%; }
.ytdock-frame iframe, #ytSlot { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ytdock.in-np { z-index: 96; grid-template-rows: 1fr; border-radius: 24px; border: 0; transition: none; box-shadow: 0 30px 80px -24px rgba(0,0,0,.85); }
.ytdock.in-np .ytdock-bar { display: none; }
html.yt-on .np-cover { animation: none !important; transform: none !important; visibility: hidden; }
.np-cover { cursor: pointer; }
@media (max-width: 767px) { .ytdock { width: var(--ytw, 220px); } }

/* ---------------- sign-in wall and upsell ---------------- */
.wall-modal { width: min(440px, 100%); }
.wall { display: grid; justify-items: center; text-align: center; gap: 12px; }
.wall img { border-radius: 16px; box-shadow: var(--pop); }
.wall h3 { font: 700 1.7rem/1.1 var(--display); }
.wall .sub { margin: 0; }
.wall-ico { width: 60px; height: 60px; border-radius: 18px; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; }
.wall-ico .ico { width: 28px; height: 28px; }
.wall-list { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; text-align: left; font-weight: 700; font-size: .88rem; }
.wall-list li { display: flex; gap: 10px; align-items: center; }

/* ---------------- identify a song ---------------- */
.recog { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; align-content: center; gap: 14px; padding: 24px; text-align: center; background: radial-gradient(circle at 50% 40%, #1d1d22, #0b0b0d 70%); color: #fff; animation: fadeIn .3s var(--ease); }
.recog .sub { color: rgba(255,255,255,.7); margin: 0; max-width: 40ch; }
.recog h2 { margin: 6px 0 0; font: 700 clamp(1.6rem, 5vw, 2.4rem)/1.1 var(--display); }
.recog-x { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: 16px; background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.25) !important; color: #fff !important; }
.recog-stage { position: relative; width: 260px; height: 260px; display: grid; place-items: center; }
.recog-mic { position: relative; z-index: 2; width: 128px; height: 128px; border-radius: 50%; border: 0; background: #fff; color: #0b0b0d; display: grid; place-items: center; box-shadow: 0 20px 60px -10px rgba(255,255,255,.35); transition: transform .3s var(--ease); }
.recog-mic .ico { width: 48px; height: 48px; stroke-width: 1.8; }
.recog-mic:hover { transform: scale(1.05); }
.recog .ring-old { position: absolute; inset: 66px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); opacity: 0; }
.recog.listening .ring { animation: ripple 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
.recog.listening .ring:nth-child(2) { animation-delay: .6s; } .recog.listening .ring:nth-child(3) { animation-delay: 1.2s; } .recog.listening .ring:nth-child(4) { animation-delay: 1.8s; }
.recog.listening .recog-mic { animation: micPulse 1.2s ease-in-out infinite; }
.recog.searching .ring { border-style: dashed; }
.recog.found .recog-mic { background: #C9E86A; }
.recog.fail .recog-mic { background: rgba(255,255,255,.85); }
@keyframes ripple { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes micPulse { 50% { transform: scale(1.07); } }
.recog-card { display: flex; gap: 14px; align-items: center; padding: 10px 16px 10px 10px; border-radius: 18px; background: rgba(255,255,255,.08); text-align: left; max-width: min(420px, 90vw); }
.recog-card img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.recog-card b { display: block; font-size: 1rem; } .recog-card span { color: rgba(255,255,255,.7); font-size: .84rem; }
.recog .btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.recog .btn.primary { background: #fff; color: #0b0b0d; border-color: #fff; }

/* ---------------- earphones connected ---------------- */
.ear-pop { position: fixed; z-index: 160; left: 50%; bottom: calc(var(--player-h) + 30px); transform: translate(-50%, 40px); opacity: 0; width: min(360px, calc(100vw - 24px)); display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 16px; border-radius: 26px; background: rgba(250,250,250,.96); color: #111; box-shadow: 0 30px 70px -20px rgba(0,0,0,.45); backdrop-filter: blur(20px); transition: transform .45s cubic-bezier(.2,1.2,.3,1), opacity .3s; }
html[data-theme="dark"] .ear-pop { background: rgba(30,30,32,.96); color: #fff; }
.ear-pop.in { transform: translate(-50%, 0); opacity: 1; }
.ear-img { grid-row: span 2; width: 96px; height: 96px; border-radius: 20px; background: rgba(0,0,0,.05); display: grid; place-items: center; overflow: hidden; }
.ear-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
html[data-theme="dark"] .ear-img img { mix-blend-mode: normal; }
.ear-svg { width: 70px; height: 70px; color: currentColor; }
.ear-meta b { display: block; font: 700 1.15rem/1.2 var(--display); overflow-wrap: anywhere; }
.ear-meta span { display: inline-flex; gap: 4px; align-items: center; font-size: .78rem; font-weight: 800; color: var(--ok); }
.ear-pop .actions { gap: 6px; }
@media (max-width: 767px) { .ear-pop { bottom: calc(var(--mini-h) + 24px); } }

/* ---------------- playlists: drag to reorder ---------------- */
.grip { width: 22px; display: grid; place-items: center; color: var(--text-3); cursor: grab; touch-action: none; }
.grip:hover { color: var(--text); }
.tracklist.sortable .trk { grid-template-columns: 22px 34px 46px minmax(0, 1fr) minmax(0, .8fr) auto 52px auto; }
@media (max-width: 900px) { .tracklist.sortable .trk { grid-template-columns: 22px 26px 46px minmax(0, 1fr) auto auto; } }
@media (max-width: 480px) { .tracklist.sortable .trk { grid-template-columns: 22px 46px minmax(0, 1fr) auto; } }
.drag-ghost { position: fixed; z-index: 200; list-style: none; pointer-events: none; background: var(--surface); border-radius: 12px; box-shadow: var(--pop-lg), inset 0 0 0 2px var(--line); opacity: .95; }
.drag-ph { list-style: none; border-radius: 12px; border: 2px dashed var(--line-2); margin: 2px 0; }
html.dragging, html.dragging * { cursor: grabbing !important; user-select: none; }

/* ---------------- offline ---------------- */
.offline-bar { position: fixed; z-index: 130; top: max(8px, env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: .8rem; font-weight: 800; box-shadow: var(--pop); max-width: calc(100vw - 24px); }
.offline-bar a { padding: 4px 10px; border-radius: 999px; background: var(--on-ink); color: var(--ink); }

/* ---------------- plans + checkout ---------------- */
.plans-head { display: grid; gap: 4px; justify-items: start; }
.seg.cycle { margin-top: 12px; }
.seg.cycle button { height: 36px; padding: 0 16px; font-size: .82rem; }
.seg.cycle em { font-style: normal; font-size: .64rem; padding: 2px 6px; border-radius: 999px; background: #C9E86A; color: #111; margin-left: 4px; }
.plan.pro { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.plan.pro .note, .plan.pro .vat-line { color: currentColor; opacity: .7; }
.plan.pro .btn.primary { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.plan.cur { box-shadow: inset 0 0 0 2px var(--ok); }
.vat-line { font-size: .76rem; color: var(--text-2); font-weight: 600; }
.cmp td:not(:first-child), .cmp th:not(:first-child) { text-align: center; }
.cmp .ico { width: 18px; height: 18px; }
.compare .tbl { min-width: 420px; }
.bill { display: grid; gap: 6px; padding: 14px; border-radius: var(--r); background: var(--surface-2); }
.bill div { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.bill .tot { border-top: 1px dashed var(--line-2); padding-top: 8px; font-size: 1.05rem; }
.paymethods { display: grid; gap: 8px; }
.paym { display: grid; grid-template-columns: auto 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: var(--bw) solid var(--line-2); cursor: pointer; transition: border-color .2s, background-color .2s; }
.paym:has(input:checked) { border-color: var(--line); background: var(--surface-2); }
.paym input { accent-color: var(--ink); width: 18px; height: 18px; margin: 0; }
.pm-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; }
.pm-t b { display: block; } .pm-t small { color: var(--text-2); font-size: .76rem; }
.pm-p { font-weight: 800; white-space: nowrap; }
@media (max-width: 480px) { .paym { grid-template-columns: auto minmax(0, 1fr); } .pm-ico { display: none; } .pm-p { grid-column: 2; } }

/* ---------------- phones: three columns, short sections with "View all" ---------------- */
@media (max-width: 767px) {
  .page .rail { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 12px 8px; margin: 0; padding: 0; scroll-snap-type: none; }
  .page .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
  .page.home .rail > :nth-child(n+7) { display: none; }
  .page .rail .card, .page .grid .card { padding: 4px 4px 8px; gap: 6px; border-radius: 14px; }
  .page .card .art { border-radius: 10px; }
  .page .card .ct { font-size: .74rem; padding: 0 2px; }
  .page .card .cs { font-size: .64rem; padding: 0 2px; margin-top: -4px; -webkit-line-clamp: 1; }
  .page .card .fab { width: 30px; height: 30px; right: 5px; bottom: 5px; }
  .page .card .fab .ico { width: 14px; height: 14px; }
  .page .card .badge { font-size: .48rem; height: 16px; padding: 0 5px; left: 4px; top: 4px; }
  .mix-no { font-size: 1.6rem; left: 6px; top: 4px; }
  .sec-head h2 { font-size: .98rem; }
  .sec-head .more { font-size: .66rem; padding: 3px 10px; }
  .sec { gap: 10px; }
  .page { gap: 24px; }
  .page.home .numlist .nl:nth-child(n+7) { display: none; }
  .page.home .station-grid .st-item:nth-child(n+7) { display: none; }
  .poster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .poster { border-radius: 14px; }
  .po-meta { padding: 8px; } .po-meta b { font-size: .8rem; } .po-meta small { display: none; }
  .cat-chips { margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
}
.cat-chips { display: flex; gap: 6px; overflow-x: auto; }
.cat-chips::after { content: ""; flex: 0 0 4px; }
.cat-chips a { flex: none; height: 32px; padding: 0 14px; border-radius: 999px; border: var(--bw) solid var(--line-2); background: var(--surface); display: inline-flex; align-items: center; font-size: .78rem; font-weight: 800; color: var(--text-2); }
.cat-chips a:hover { border-color: var(--line); color: var(--text); }
.tag.promo { border-color: var(--line); color: #111; background: #C9E86A; }
@media (max-width: 767px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tile { height: 52px; padding: 4px 8px 4px 4px; gap: 8px; border-radius: 12px; } .tile img, .tile .ph { width: 42px; height: 42px; border-radius: 8px; } .tile b { font-size: .74rem; } }
/* drag handles on library playlist cards */
.card .card-grip { position: absolute; z-index: 3; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff; opacity: 0; transition: opacity .2s; }
.card:hover .card-grip, .card:focus-within .card-grip { opacity: 1; }
@media (hover: none) { .card .card-grip { opacity: .9; } }
.grid > .drag-ph { min-height: 160px; border-radius: var(--r); }
/* iPhone/iPad: 16px inputs stop Safari zooming in on focus; installed app respects the notch */
@supports (-webkit-touch-callout: none) { input, select, textarea, .input { font-size: 16px !important; } }
html.standalone .topbar { padding-top: max(10px, env(safe-area-inset-top, 0px)); }
html.ios body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.ios input, html.ios textarea, html.ios .lyrics p { -webkit-user-select: text; user-select: text; }
.ios-steps li { gap: 10px; }
.ios-steps li > b:first-child { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; font-size: .72rem; flex-shrink: 0; }

/* player bar: fewer side buttons on medium screens so the centre controls never overlap */
@media (max-width: 1280px) { .pb-right .hide-lg { display: none; } .pb-right .vol { width: 72px; } }
@media (max-width: 480px) { .np-extras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; overflow: visible; width: 100%; } .xbtn { width: auto; } }

/* identify a song: water ripples across the whole screen, behind the mic */
.recog { overflow: hidden; --lvl: 0; }
.recog > * { position: relative; z-index: 1; }
.recog-stage { z-index: 0 !important; }
.recog-mic { z-index: 2; }
.recog-x { position: absolute !important; z-index: 2 !important; }
.recog-water { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.recog-water .ripple { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); opacity: 0; will-change: transform, opacity; animation: water 6s cubic-bezier(.15,.55,.35,1) infinite; }
.recog-water .ripple:nth-child(2) { animation-delay: 1s; } .recog-water .ripple:nth-child(3) { animation-delay: 2s; }
.recog-water .ripple:nth-child(4) { animation-delay: 3s; } .recog-water .ripple:nth-child(5) { animation-delay: 4s; } .recog-water .ripple:nth-child(6) { animation-delay: 5s; }
@keyframes water { 0% { transform: scale(.9); opacity: .55; } 100% { transform: scale(14); opacity: 0; } }
.recog.listening .recog-water .ripple { animation-duration: 3s; border-color: rgba(255,255,255,.6); border-width: 3px; }
.recog.listening .recog-water .ripple:nth-child(2) { animation-delay: .5s; } .recog.listening .recog-water .ripple:nth-child(3) { animation-delay: 1s; }
.recog.listening .recog-water .ripple:nth-child(4) { animation-delay: 1.5s; } .recog.listening .recog-water .ripple:nth-child(5) { animation-delay: 2s; } .recog.listening .recog-water .ripple:nth-child(6) { animation-delay: 2.5s; }
.recog.searching .recog-water .ripple { animation-duration: 4.5s; border-style: dashed; }
.recog.found .recog-water .ripple { border-color: rgba(201,232,106,.55); }
/* the mic itself breathes slowly; only its soft glow follows the (smoothed) sound level */
.recog.listening .recog-mic { animation: micBreathe 2.4s ease-in-out infinite; box-shadow: 0 0 0 calc(8px + var(--lvl) * 28px) rgba(255,255,255,.1), 0 0 0 calc(var(--lvl) * 56px) rgba(255,255,255,.05), 0 20px 60px -10px rgba(255,255,255,.35); transition: box-shadow .35s ease-out; }
@keyframes micBreathe { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .recog.listening .recog-mic { animation: none; } }
.recog-stage { width: 220px; height: 220px; }

/* video window: loading veil and resize handle */
.ytdock-wait { position: absolute; inset: 0; display: none; place-items: center; align-content: center; gap: 8px; background: #000; color: rgba(255,255,255,.75); font-size: .78rem; font-weight: 800; }
.ytdock-wait .ico { width: 28px; height: 28px; animation: blink 1.4s infinite; }
.ytdock.waiting .ytdock-wait { display: grid; }
.ytdock-resize { position: absolute; z-index: 3; left: 4px; top: 7px; width: 22px; height: 22px; border-radius: 6px; cursor: ew-resize; touch-action: none; background: rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6 3 12l6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ytdock-bar { padding-left: 32px; }
.ytdock.left .ytdock-resize { left: auto; right: 76px; }
.ytdock.in-np .ytdock-resize { display: none; }

/* Identify a song: a labelled top-bar button and a card on Home */
.identify-pill { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 5px; border-radius: 999px; border: var(--bw) solid var(--line); background: var(--surface); color: var(--text); font-weight: 800; font-size: .82rem; transition: background-color .2s, box-shadow .2s; }
.identify-pill:hover { box-shadow: var(--pop); }
.idp-ico { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; position: relative; }
.idp-ico::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--line); opacity: 0; animation: ripple 2.4s ease-out infinite; }
.idp-ico .ico { width: 17px; height: 17px; }
@media (max-width: 767px) { .identify-pill { height: 38px; padding: 0 3px; } .idp-t { display: none; } .idp-ico { width: 30px; height: 30px; } }
.identify-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px 12px 12px; border-radius: var(--r-lg); border: 0; background: var(--ink); color: var(--on-ink); text-align: left; transition: transform .25s var(--ease), box-shadow .25s; }
.identify-card:hover { transform: translateY(-2px); box-shadow: var(--pop-lg); }
.ic-mic { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; background: var(--on-ink); color: var(--ink); display: grid; place-items: center; flex-shrink: 0; }
.ic-rings { position: absolute; left: 35px; top: 50%; }
.ic-rings i { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: water 4.5s ease-out infinite; }
.ic-rings i:nth-child(2) { animation-delay: 1.5s; } .ic-rings i:nth-child(3) { animation-delay: 3s; }
.ic-t { position: relative; z-index: 1; flex: 1; min-width: 0; display: grid; gap: 2px; }
.ic-t b { font: 700 1.05rem/1.2 var(--display); }
.ic-t small { opacity: .7; font-size: .78rem; font-weight: 600; }

/* sign-in: Email / Phone tabs, picture code, one-time code */
.auth-tabs { display: flex; width: 100%; }
.auth-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; }
.captcha-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; align-items: center; }
.captcha-img { width: 150px; height: 50px; border-radius: 10px; border: var(--bw) solid var(--line-2); background: #f4f4f4; transition: opacity .2s; }
.captcha-new { width: 40px; height: 40px; }
.captcha-row .input { text-transform: uppercase; letter-spacing: .2em; font-weight: 800; }
@media (max-width: 420px) { .captcha-row { grid-template-columns: auto auto; } .captcha-row .input { grid-column: 1 / -1; } }
.otp-input { height: 60px; text-align: center; font: 800 1.8rem/1 var(--font); letter-spacing: .5em; padding-left: .5em; }
.trust-row { display: flex; gap: 10px; align-items: center; font-size: .86rem; font-weight: 700; cursor: pointer; }
.trust-row input { width: 18px; height: 18px; accent-color: var(--ink); }

.ytdock-tap { position: absolute; inset: 0; z-index: 2; display: none; place-items: center; align-content: center; gap: 8px; border: 0; background: rgba(0,0,0,.72); color: #fff; font-weight: 800; font-size: .86rem; cursor: pointer; }
.ytdock-tap .ico { width: 44px; height: 44px; padding: 12px; border-radius: 50%; background: #fff; color: #111; }
.ytdock.need-tap .ytdock-tap { display: grid; }
.ytdock.in-np.need-tap .ytdock-tap span { font-size: 1rem; }

/* ---------------- sign-in / sign-up card ---------------- */
.modal.auth-modal { width: min(920px, 100%); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0; overflow: hidden; }
.auth-scrim { background: rgba(10, 10, 12, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.auth-form { padding: clamp(20px, 3vw, 32px); display: grid; gap: 14px; align-content: start; max-height: calc(100dvh - 32px); overflow-y: auto; }
.auth-form h3 { font: 700 clamp(1.6rem, 3vw, 2rem)/1.1 var(--display); }
.auth-art { position: relative; overflow: hidden; background: #0c0c0e; color: #fff; min-height: 560px; isolation: isolate; }
.auth-covers { position: absolute; inset: -20% -30%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; transform: rotate(-12deg); animation: coverDrift 40s linear infinite alternate; z-index: -1; }
.auth-covers span { aspect-ratio: 1; border-radius: 14px; background: #1c1c1f; overflow: hidden; box-shadow: 0 10px 30px -10px rgba(0,0,0,.8); }
.auth-covers span:nth-child(odd) { transform: translateY(30px); }
.auth-covers img { width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: coverIn .8s calc(var(--i, 0) * 80ms) var(--ease) forwards; }
@keyframes coverIn { to { opacity: .85; } }
@keyframes coverDrift { to { transform: rotate(-12deg) translateY(-14%); } }
.auth-art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8,8,10,.95) 8%, rgba(8,8,10,.35) 55%, rgba(8,8,10,.15)); }
.auth-art-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; display: grid; gap: 8px; }
.auth-art-copy img { border-radius: 12px; box-shadow: 0 8px 24px -8px rgba(0,0,0,.6); }
.auth-art-copy b { font: 700 clamp(1.6rem, 3vw, 2.2rem)/1.05 var(--display); letter-spacing: -.02em; }
.auth-art-copy span { color: rgba(255,255,255,.75); font-size: .9rem; max-width: 34ch; }
/* remembered accounts */
.known { display: grid; gap: 6px; }
.known-t { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.known-acc { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 6px 6px 8px; border-radius: 14px; border: var(--bw) solid var(--line-2); cursor: pointer; transition: border-color .2s, background-color .2s; }
.known-acc:hover, .known-acc.on { border-color: var(--line); background: var(--surface-2); }
.known-acc .av { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); border: var(--bw) solid var(--line); display: grid; place-items: center; font-weight: 800; font-size: .8rem; overflow: hidden; }
.known-acc .av img { width: 100%; height: 100%; object-fit: cover; }
.known-m b { display: block; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.known-m small { display: block; color: var(--text-2); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.known-x { width: 30px; height: 30px; border-radius: 50%; border: 0; background: none; color: var(--text-3); display: grid; place-items: center; }
.known-x:hover { color: var(--text); background: var(--surface-2); }
@media (max-width: 767px) {
  .modal.auth-modal { grid-template-columns: minmax(0, 1fr); max-height: calc(100dvh - 24px); overflow-y: auto; }
  .auth-art { min-height: 150px; height: 150px; }
  .auth-covers { inset: -60% -20%; grid-template-columns: repeat(6, 1fr); }
  .auth-art-copy { padding: 16px; }
  .auth-art-copy img, .auth-art-copy span { display: none; }
  .auth-art-copy b { font-size: 1.4rem; }
  .auth-form { max-height: none; overflow: visible; }
}

/* ---------------- radio globe ---------------- */
.globe-box { position: relative; width: 100%; max-width: 640px; margin: 0 auto; min-height: 260px; user-select: none; }
.globe-canvas { display: block; margin: 0 auto; cursor: grab; touch-action: pan-y; }
.globe-wait { width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto; }
.globe-hint { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); pointer-events: none; }
.globe-zoom { position: absolute; right: 8px; top: 8px; display: grid; border-radius: 999px; border: var(--bw) solid var(--line); background: var(--surface); box-shadow: var(--pop); overflow: hidden; }
.globe-zoom button { width: 38px; height: 38px; border: 0; background: none; color: var(--text); display: grid; place-items: center; cursor: pointer; transition: background-color .2s; }
.globe-zoom button + button { border-top: 1px solid var(--line-2); }
.globe-zoom button:hover { background: var(--surface-2); }
.globe-zoom button:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; }
.globe-zoom .ico { width: 16px; height: 16px; stroke-width: 2; }
.globe-pop { position: absolute; z-index: 3; width: min(280px, calc(100% - 16px)); padding: 10px; border-radius: 18px; background: var(--surface); border: var(--bw) solid var(--line); box-shadow: var(--pop-lg); display: grid; gap: 8px; animation: pop .2s var(--ease); }
.gp-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.gp-flag { font-size: 1.6rem; line-height: 1; width: 36px; height: 27px; object-fit: cover; border-radius: 5px; box-shadow: 0 0 0 1px var(--line-2); flex-shrink: 0; }
.gp-head b { display: block; font: 700 1rem/1.2 var(--display); }
.gp-head small { color: var(--text-2); font-size: .74rem; font-weight: 700; }
.gp-x { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--text); display: grid; place-items: center; }
.gp-list { display: grid; gap: 2px; max-height: 240px; overflow-y: auto; }
.gp-st { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px; border-radius: 10px; cursor: pointer; }
.gp-st:hover { background: var(--surface-2); }
.gp-st img, .gp-ph { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; background: var(--surface-2); }
.gp-st b { display: block; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-st small { display: block; font-size: .7rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-all { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px; border-radius: 10px; font-size: .78rem; font-weight: 800; border: var(--bw) solid var(--line-2); }
.gp-all:hover { border-color: var(--line); }

/* studio: uploads used on this plan */
.upl-meter { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.upl-meter > div { flex: 1 1 240px; display: grid; gap: 4px; }
.upl-bar { height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; margin-top: 4px; }
.upl-bar i { display: block; height: 100%; background: var(--ink, var(--text)); border-radius: inherit; }
.upl-meter.full .upl-bar i { background: #e5484d; }

/* video tile: the window shrinks to YouTube's 200×200 minimum above the song card; double-tap to open it */
.ytdock.yt-mini { grid-template-rows: 1fr; border-radius: 13px; border: 0; box-shadow: none; animation: none; transition: none; z-index: 61; cursor: pointer; }
.ytdock.yt-mini .ytdock-bar, .ytdock.yt-mini .ytdock-resize, .ytdock.yt-mini .ytdock-wait span, .ytdock.yt-mini .ytdock-tap span { display: none; }
.ytdock.yt-mini iframe { pointer-events: none; }
.ytdock.yt-mini .ytdock-wait .ico { width: 20px; height: 20px; }
.ytdock.yt-mini .ytdock-tap .ico { width: 30px; height: 30px; padding: 8px; }
/* channel credit under the song title while a YouTube video plays */
.pb-yt { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: .7rem; font-weight: 700; color: var(--text-3); margin-top: 1px; }
.pb-yt[hidden] { display: none; }
.pb-yt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-mark { width: 14px; height: 10px; flex-shrink: 0; }

/* help & contact */
.help-form-box { max-width: 760px; }
.help-form { display: grid; gap: 14px; }
.help-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.hp-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.help-thread { max-width: 760px; margin-bottom: 10px; }
.help-thread summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.help-thread summary::-webkit-details-marker { display: none; }
.ht-main { flex: 1; min-width: 0; display: grid; }
.ht-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-main small { color: var(--text-2); font-size: .76rem; }
.ht-msgs { display: grid; gap: 8px; margin-top: 14px; }
.ht-msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; background: var(--surface-2); justify-self: start; }
.ht-msg.me { justify-self: end; background: var(--text); color: var(--bg); }
.ht-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; }
.ht-msg small { display: block; margin-top: 4px; font-size: .7rem; opacity: .65; }
.ht-reply { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-top: 12px; }
/* the team's answer under a song comment */
.team-reply { margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--text); background: var(--surface-2); border-radius: 0 12px 12px 0; }
.team-reply b { display: flex; align-items: center; gap: 4px; font-size: .76rem; }
.team-reply p { margin: 2px 0 0; font-size: .86rem; }
/* maintenance screen */
.maint { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: var(--bg); }
.maint-card { max-width: 440px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.maint-card img { border-radius: 14px; }
.maint-card h1 { margin: 0; font: 700 clamp(1.8rem, 5vw, 2.4rem)/1.1 var(--display); }
.maint-card p { margin: 0; color: var(--text-2); }
html.in-maint body > :not(.maint):not(script) { visibility: hidden; }