/* Kalomori: your library, without limits.
   Dark and dreamy ("dreamcore"): violet night, drifting pastel haze, soft glow,
   faint film grain and stars; Spotify-like structure (sidebar, shelves, track
   rows) in its own voice. Purple is the accent, not the whole palette.

   Scaling: every size is in rem, and the root font size grows with the screen
   from 1440px up (16px -> ~21px at 2560px), so big monitors get a bigger UI
   instead of a small island in a sea of black. Mobile first: bottom tab bar
   below 1024px, a left rail from 1024px, a second column on Home from 1280px. */
:root {
  --bg: #09070f; --panel: #16121f;
  --surface-1: rgba(255, 255, 255, .035); --surface-2: rgba(255, 255, 255, .06); --surface-3: rgba(255, 255, 255, .1);
  --glass: rgba(22, 17, 34, .6);
  --card-bg: rgba(22, 17, 34, .74);   /* build 16: cards without backdrop blur, a touch more solid */
  --line: rgba(214, 200, 255, .1); --line-2: rgba(214, 200, 255, .2);
  --text: #f6f2fb; --muted: #bfb6d6; --faint: #938aad;
  --accent: #a77bff; --accent-hi: #c3a4ff; --accent-lo: #7d4dff; --on-accent: #0d0916;
  --pink: #f3a8ff; --blue: #8fd3ff; --mint: #9ff3d6;
  --ok: #8ff0c4; --warn: #ffd38a; --err: #ff9aa8; --ok-bg: rgba(143, 240, 196, .1); --err-bg: rgba(255, 154, 168, .1); --info-bg: rgba(167, 123, 255, .12);
  --radius: 1.1rem; --tabbar: 4.2rem; --rail: 17rem; --gutter: 1.15rem;
  --glow: rgba(125, 77, 255, .42);
  --display: ui-rounded, "SF Pro Rounded", "Nunito", "Quicksand", system-ui, sans-serif;
  color-scheme: dark;
}
@media (min-width: 1440px) { html { font-size: min(calc(10px + .42vw), 22px); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
/* body stays transparent: an opaque body would paint over the fixed haze (z-index -1) */
body { margin: 0; min-height: 100vh; color: var(--text); background: transparent;
  font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-hi); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, .wordmark { font-family: var(--display); letter-spacing: -.015em; }
h1 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem); line-height: 1.04; margin: 0 0 .5rem; font-weight: 800; }
h2 { font-size: 1.4rem; line-height: 1.2; margin: 0 0 .9rem; font-weight: 800; }
h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
p { margin: 0 0 .75rem; }
[hidden] { display: none !important; }
::selection { background: rgba(167, 123, 255, .45); }

/* --- Dream haze: fixed background (orbs, stars, grain) -------------------------------- */
.haze { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 80% at 15% -10%, #24124a 0%, transparent 55%),
              radial-gradient(90% 70% at 110% 110%, #321040 0%, transparent 55%),
              radial-gradient(60% 50% at 80% 10%, #0e2238 0%, transparent 60%), var(--bg); }
.haze .orb { position: absolute; border-radius: 50%; opacity: .34; will-change: transform; }   /* build 16: soft gradients, no blur filter (much cheaper on phones) */
.haze .o1 { width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax; background: radial-gradient(circle, #7d4dff 0%, #7d4dff55 32%, transparent 70%); animation: drift1 38s ease-in-out infinite alternate; }
.haze .o2 { width: 40vmax; height: 40vmax; right: -14vmax; bottom: -12vmax; background: radial-gradient(circle, #e279ff 0%, #e279ff55 32%, transparent 70%); opacity: .22; animation: drift2 44s ease-in-out infinite alternate; }
.haze .o3 { width: 30vmax; height: 30vmax; right: 18vmax; top: 30vh; background: radial-gradient(circle, #6fc4ff 0%, #6fc4ff55 32%, transparent 70%); opacity: .12; animation: drift3 52s ease-in-out infinite alternate; }
.haze .stars { position: absolute; inset: 0; opacity: .6;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff9, transparent 60%), radial-gradient(1px 1px at 72% 12%, #fff7, transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 64%, #fff6, transparent 60%), radial-gradient(1px 1px at 86% 72%, #fff8, transparent 60%),
    radial-gradient(1px 1px at 22% 88%, #fff5, transparent 60%), radial-gradient(1.5px 1.5px at 58% 34%, #fff7, transparent 60%),
    radial-gradient(1px 1px at 93% 40%, #fff6, transparent 60%), radial-gradient(1px 1px at 6% 52%, #fff6, transparent 60%),
    radial-gradient(1px 1px at 47% 8%, #fff6, transparent 60%), radial-gradient(1.5px 1.5px at 66% 91%, #fff5, transparent 60%);
  animation: twinkle 7s ease-in-out infinite alternate; }
.haze .grain { position: absolute; inset: -50%; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes drift1 { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-12vmax, -8vmax) scale(1.1); } }
@keyframes drift3 { to { transform: translate(-10vmax, 14vmax) scale(.9); } }
@keyframes twinkle { to { opacity: .28; } }
@media (prefers-reduced-motion: reduce) { .haze .orb, .haze .stars { animation: none; } }
@media (hover: none), (max-width: 1023px) { .haze .stars { animation: none; } .haze .grain { display: none; } }   /* build 16: phones and tablets */

/* --- Brand ------------------------------------------------------------------------------ */
.wordmark { display: inline-flex; align-items: center; gap: .7rem; font-weight: 800; font-size: 1.45rem; color: var(--text); text-decoration: none; }
.wordmark:hover { text-decoration: none; }
.wordmark img { width: 2.3rem; height: 2.3rem; border-radius: .75rem; box-shadow: 0 0 1.4rem rgba(167, 123, 255, .45); }
.wordmark span { background: linear-gradient(100deg, #fff 0%, #e6dbff 45%, var(--pink) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- App shell: rail (desktop) / top bar + bottom tabs (mobile, iPad portrait) --------------- */
.shell { min-height: 100vh; }
.rail { display: none; }
.mobile-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: calc(.6rem + env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) .6rem max(var(--gutter), env(safe-area-inset-left));
  isolation: isolate; }
/* The frosted glass sits on a layer behind the bar's contents (build 8): on iPhone Safari a sticky
   element with backdrop-filter drew its own contents (logo, name, bell, picture) blurry. */
.mobile-top::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(9, 7, 15, .92), rgba(9, 7, 15, .55)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.me { width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 800; font-size: .95rem; color: #fff; text-decoration: none; box-shadow: 0 0 1.1rem rgba(167, 123, 255, .35); }
.me:hover { text-decoration: none; }
.stage { min-width: 0; width: 100%; overflow-x: clip;
  padding: .5rem max(var(--gutter), env(safe-area-inset-right)) calc(var(--tabbar) + 2.2rem + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); }
.page { width: 100%; max-width: 96rem; margin: 0 auto; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr);
  padding-bottom: env(safe-area-inset-bottom); background: linear-gradient(to top, rgba(9, 7, 15, .98) 55%, rgba(9, 7, 15, .82));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
.tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: var(--tabbar);
  font-size: .75rem; font-weight: 700; color: var(--faint); text-decoration: none; }
.tabs svg { width: 1.5rem; height: 1.5rem; }
.tabs a[aria-current="page"] { color: var(--text); }
.tabs a[aria-current="page"] svg { color: var(--accent-hi); filter: drop-shadow(0 0 8px rgba(167, 123, 255, .8)); }

@media (min-width: 1024px) {
  :root { --gutter: clamp(2rem, 3vw, 3.5rem); }
  .shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }
  .mobile-top, .tabs { display: none; }
  .rail { display: flex; flex-direction: column; gap: 2rem; position: sticky; top: 0; height: 100vh; padding: 1.8rem 1.1rem 1.2rem;
    background: rgba(7, 5, 12, .5); border-right: 1px solid var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .rail .wordmark { padding: 0 .6rem; }
  .rail nav { display: grid; gap: .3rem; }
  .rail nav a { display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; border-radius: .8rem; color: var(--muted);
    font-size: 1.05rem; font-weight: 700; text-decoration: none; transition: background .15s, color .15s; }
  .rail nav a:hover { color: var(--text); background: var(--surface-2); }
  .rail nav a[aria-current="page"] { color: var(--text); background: var(--surface-3); }
  .rail nav svg { width: 1.45rem; height: 1.45rem; flex: none; }
  .rail nav a[aria-current="page"] svg { color: var(--accent-hi); filter: drop-shadow(0 0 6px rgba(167, 123, 255, .7)); }
  .rail-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 1rem; display: grid; gap: .5rem; }
  .who { display: flex; align-items: center; gap: .8rem; padding: .55rem .6rem; border-radius: .8rem; color: var(--text); text-decoration: none; min-width: 0; }
  .who:hover { background: var(--surface-2); text-decoration: none; }
  .who[aria-current="page"] { background: var(--surface-3); }
  .who .me { width: 2.6rem; height: 2.6rem; }
  .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .who small { display: block; color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .who > span:last-child { min-width: 0; }
  .foot-links { display: flex; gap: .3rem; padding: 0 .3rem; }
  .foot-links a, .foot-links button { min-height: 0; padding: .4rem .6rem; border-radius: .6rem; font-size: .9rem; font-weight: 700; color: var(--muted);
    background: none; box-shadow: none; }
  .foot-links a:hover, .foot-links button:hover { color: var(--text); background: var(--surface-2); text-decoration: none; transform: none; filter: none; box-shadow: none; }
  .foot-links form { margin: 0; }
  .stage { padding: .5rem var(--gutter) 4rem; }
}

/* --- Page header: no box, just a soft glow behind the title --------------------------------- */
.hero { position: relative; isolation: isolate; padding: 1.6rem 0 1.4rem; margin-bottom: .6rem; }
.hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: -30%; right: -30%; top: -8rem; bottom: -3rem;
  background: radial-gradient(45% 60% at 30% 45%, var(--glow), transparent 72%); }
.hero.pink { --glow: rgba(226, 121, 255, .3); } .hero.blue { --glow: rgba(111, 196, 255, .26); } .hero.mint { --glow: rgba(120, 230, 190, .22); }
.eyebrow { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 800; }   /* build 16: one look everywhere */
.hero .eyebrow { font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 800; margin-bottom: .5rem; }
.hero .lede { color: var(--muted); font-size: 1.1rem; max-width: 42rem; margin: .4rem 0 0; }
@media (min-width: 1024px) { .hero { padding: 2.8rem 0 1.8rem; } }

/* --- Surfaces ------------------------------------------------------------------------------ */
.card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; margin: 0 0 1.2rem; min-width: 0;
  box-shadow: 0 .6rem 2.5rem rgba(0, 0, 0, .28); }   /* build 16: no backdrop blur on cards (re-blurred every frame over the moving haze) */
.section { margin: 0 0 2.4rem; min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .9rem; }
.card-head h2 { margin: 0; }
.card-head a { font-size: .92rem; color: var(--muted); font-weight: 700; }
.cols { display: grid; gap: 0 1.3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cols.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

/* --- Forms & buttons ------------------------------------------------------------------------- */
label { display: block; font-weight: 700; font-size: .95rem; margin: 1rem 0 .45rem; }
label:first-child { margin-top: 0; }
.hint, .muted { color: var(--muted); } .faint { color: var(--faint); }
.hint { font-size: .92rem; font-weight: 400; }
.small { font-size: .9rem; }
input, select, textarea, button, .button { font: inherit; }
input, select, textarea { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%;
  min-height: 3.1rem; padding: .75rem 1rem; border: 1px solid var(--line-2); border-radius: .9rem; background: rgba(255, 255, 255, .05); color: var(--text); font-size: max(16px, 1rem); }
input::placeholder, textarea::placeholder { color: var(--faint); }
select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
select option { background: var(--panel); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(167, 123, 255, .22), 0 0 24px rgba(167, 123, 255, .25); }
input[type=checkbox] { width: 1.5rem; height: 1.5rem; min-height: 0; padding: 0; border-radius: .5rem; display: inline-block; flex: none; }
input[type=checkbox]:checked { background: var(--accent) url("/static/check.svg") center/15px no-repeat; border-color: var(--accent); box-shadow: 0 0 14px rgba(167, 123, 255, .6); }
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { display: none; -webkit-appearance: none; }
input.code { font-family: ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; font-size: 1.15rem; text-align: center; }
.check { display: flex; gap: .75rem; align-items: center; font-weight: 500; margin: .75rem 0; }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.1rem; padding: 0 1.6rem;
  border: 0; border-radius: 999px; font-weight: 800; letter-spacing: .01em; cursor: pointer; text-decoration: none; white-space: nowrap;
  color: var(--on-accent); background: linear-gradient(135deg, var(--accent-hi), var(--accent) 55%, var(--accent-lo));
  box-shadow: 0 6px 24px rgba(125, 77, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .12s ease, box-shadow .2s ease, filter .2s, background .2s;
  -webkit-tap-highlight-color: transparent; }
button:hover, .button:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 8px 30px rgba(125, 77, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .35); text-decoration: none; }
button:active { transform: scale(.98); }
button.secondary, .button.secondary { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
button.secondary:hover, .button.secondary:hover { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
button.danger { background: #ff6f86; color: #16070b; box-shadow: none; }
button.small, .button.small { min-height: 2.4rem; padding: 0 1rem; font-size: .9rem; }
button:disabled { opacity: .45; cursor: default; transform: none; filter: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.form-actions.full > * { flex: 1 1 100%; }
.inline { display: flex; gap: .6rem; align-items: stretch; }
.inline > input, .inline > select { flex: 1 1 auto; }
.inline > button { flex: none; }
@media (max-width: 380px) { .inline { flex-wrap: wrap; } .inline > button { flex: 1 1 100%; } }

/* --- Alerts & bits ----------------------------------------------------------------------------- */
.alert { padding: .75rem 1rem; border-radius: .9rem; margin: 0 0 1rem; border: 1px solid var(--line); }
.alert.error { background: var(--err-bg); color: var(--err); border-color: rgba(255, 154, 168, .25); }
.alert.ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(143, 240, 196, .25); }
.alert.info { background: var(--info-bg); border-color: rgba(167, 123, 255, .3); }
.ok-text { color: var(--ok); } .warn-text { color: var(--warn); }
.pill { display: inline-block; font-size: .75rem; font-weight: 800; padding: .1rem .6rem; border-radius: 999px; background: var(--surface-3); color: var(--muted); vertical-align: 1px; white-space: nowrap; letter-spacing: .02em; }
.pill.web { background: rgba(167, 123, 255, .2); color: #ddcdff; }
.pill.discord { background: rgba(111, 140, 255, .18); color: #cfd8ff; }
.pill.sync { background: rgba(120, 230, 190, .15); color: #bdf6df; }
.bigcode { font-family: ui-monospace, Menlo, monospace; font-size: 1.5rem; font-weight: 800; letter-spacing: .06em; padding: 1rem; text-align: center;
  background: rgba(0, 0, 0, .3); border: 1px dashed var(--accent); border-radius: .9rem; user-select: all; overflow-wrap: anywhere; box-shadow: 0 0 30px rgba(167, 123, 255, .2); }
details summary { cursor: pointer; font-weight: 700; }
code { font-family: ui-monospace, Menlo, monospace; background: rgba(255, 255, 255, .08); padding: 1px 7px; border-radius: 7px; font-size: .9em; }
.steps { padding-left: 1.25rem; margin: 0; } .steps li { margin: 0 0 .75rem; } .steps li::marker { color: var(--accent-hi); font-weight: 800; }
.msg { min-height: 1.4em; margin: .75rem 0 0; } .msg:empty { display: none; }
.msg.error { color: var(--err); } .msg.ok { color: var(--ok); }
.gap-top { margin-top: .9rem !important; }

/* Generated dreamy "covers" for things without art (name hash -> g0..g7) */
.g0, .list .art.gen.g0 { background: linear-gradient(135deg, #7d4dff, #f3a8ff); } .g1, .list .art.gen.g1 { background: linear-gradient(135deg, #3a7bff, #9ff3d6); }
.g2, .list .art.gen.g2 { background: linear-gradient(135deg, #e279ff, #ffd38a); } .g3, .list .art.gen.g3 { background: linear-gradient(135deg, #5b3fd6, #8fd3ff); }
.g4, .list .art.gen.g4 { background: linear-gradient(135deg, #ff8ac2, #7d4dff); } .g5, .list .art.gen.g5 { background: linear-gradient(135deg, #2a1d63, #a77bff); }
.g6, .list .art.gen.g6 { background: linear-gradient(135deg, #4de0c8, #7d4dff); } .g7, .list .art.gen.g7 { background: linear-gradient(135deg, #ffb8e0, #8fd3ff); }

/* --- Search: one bar (icon, field, button inside), the centerpiece of Home ----------------------- */
.searchbar { position: relative; display: flex; align-items: center; gap: .5rem; min-height: 3.9rem; padding: .35rem .35rem .35rem 1.2rem;
  border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line-2);
  box-shadow: 0 .8rem 2.6rem rgba(0, 0, 0, .35); transition: box-shadow .2s, border-color .2s, background .2s; }
.searchbar:focus-within { background: rgba(255, 255, 255, .1); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(167, 123, 255, .2), 0 0 2.6rem rgba(167, 123, 255, .3); }
.searchbar .icon { width: 1.3rem; height: 1.3rem; flex: none; color: var(--muted); pointer-events: none; }
.searchbar input { flex: 1 1 auto; min-height: 3rem; padding: 0 .2rem; border: 0; border-radius: 0; background: transparent; font-size: max(16px, 1.08rem); }
.searchbar input:focus { box-shadow: none; border: 0; background: transparent; }
.searchbar button { flex: none; min-height: 3.1rem; padding: 0 1.5rem; }
.modes { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin-top: 1rem; }
.modes .lbl { font-size: .9rem; font-weight: 700; color: var(--muted); }
.seg { display: inline-flex; padding: .25rem; gap: .2rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.seg button { min-height: 2.3rem; padding: 0 1.1rem; font-size: .95rem; font-weight: 700; color: var(--muted); background: transparent; box-shadow: none; }
.seg button:hover { color: var(--text); background: var(--surface-2); transform: none; filter: none; box-shadow: none; }
.seg button[aria-pressed="true"] { color: var(--bg); background: var(--text); }
.paste-hint { display: flex; gap: .55rem; align-items: flex-start; margin: .8rem 0 0; color: var(--muted); font-size: .95rem; }
.paste-hint svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .15rem; color: var(--accent-hi); }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; }
.filters button { min-height: 2.4rem; padding: 0 1.1rem; font-size: .95rem; font-weight: 700; color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.filters button:hover { transform: none; filter: none; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
.filters button[aria-pressed="true"] { background: var(--text); color: var(--bg); box-shadow: none; }

/* --- Track rows (search results, activity, "your latest") ----------------------------------------- */
.list { list-style: none; margin: 0; padding: 0; }
.results:not(:empty) { margin: 0 0 2.4rem; }
.search-wrap { margin-bottom: 1.8rem; }
.list li { display: flex; gap: .9rem; align-items: center; padding: .55rem .65rem; margin: 0 -.65rem; border-radius: .8rem; min-width: 0; transition: background .15s; }
.list li:hover { background: var(--surface-2); }
.list .art { width: 3.3rem; height: 3.3rem; border-radius: .5rem; object-fit: cover; flex: none; background: var(--surface-2); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.list .art.gen { display: grid; place-items: center; font-family: var(--display); font-weight: 900; color: #fff; }
.list .meta { flex: 1 1 auto; min-width: 0; }
.list .t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .s { color: var(--muted); font-size: .9rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.list .album-col { flex: 0 1 30%; min-width: 0; color: var(--muted); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: none; }
@media (min-width: 900px) { .list .album-col { display: block; } }
.list .dur { flex: none; color: var(--faint); font-size: .9rem; font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: right; }
.list .empty { color: var(--muted); display: block; padding: .4rem 0; }
.list li:has(.empty):hover, .list li.empty-state:hover { background: none; }
.list details { margin-top: .4rem; font-size: .9rem; } .list details ul { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--muted); }
.add-btn { flex: none; width: 2.7rem; height: 2.7rem; min-height: 2.7rem; padding: 0; border-radius: 50%; }
.add-btn svg { width: 1.25rem; height: 1.25rem; }
.add-btn.done, .add-btn.done:disabled { opacity: 1; background: rgba(143, 240, 196, .16); color: var(--ok); box-shadow: inset 0 0 0 1px rgba(143, 240, 196, .4); }
.bar { height: 5px; background: rgba(255, 255, 255, .08); border-radius: 999px; overflow: hidden; margin-top: .45rem; }
.bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent-lo), var(--pink)); box-shadow: 0 0 12px rgba(243, 168, 255, .6); transition: width .6s ease; }

/* Designed empty state (no requests yet) */
.list li.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 2rem 1rem 1.6rem; margin: 0; }
.empty-state .orb { width: 3.4rem; height: 3.4rem; border-radius: 50%; margin-bottom: .6rem;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #d8c4ff 18%, var(--accent) 55%, #3a1d8a 100%); box-shadow: 0 0 2.6rem rgba(167, 123, 255, .55); }
.empty-state b { font-family: var(--display); font-size: 1.15rem; }
.empty-state span { color: var(--muted); max-width: 26rem; }
.empty-state .button { margin-top: .8rem; min-height: 2.6rem; padding: 0 1.3rem; font-size: .95rem; }

/* --- Shelves & tiles (album results, recently added) ------------------------------------------------- */
/* A shelf shows N covers plus a slice of the next one, so it's obvious it scrolls sideways. */
.shelf { --n: 2.3; --gap: 1rem; display: grid; grid-auto-flow: column; gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain;
  grid-auto-columns: calc((100% - (var(--n) - .3) * var(--gap)) / var(--n)); list-style: none; margin: 0; padding: .3rem 0 .6rem;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
.shelf::-webkit-scrollbar { display: none; }
.shelf.at-end { -webkit-mask-image: none; mask-image: none; }
@media (min-width: 600px) { .shelf { --n: 3.3; } }
@media (min-width: 900px) { .shelf { --n: 4.3; --gap: 1.2rem; } }
@media (min-width: 1500px) { .shelf { --n: 5.3; } }
@media (min-width: 1900px) { .shelf { --n: 6.3; } }
.shelf-nav { display: none; gap: .4rem; }
@media (hover: hover) and (min-width: 900px) { .shelf-nav { display: flex; } }
.shelf-nav button { width: 2.3rem; height: 2.3rem; min-height: 0; padding: 0; border-radius: 50%; color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.shelf-nav button:hover { background: var(--surface-3); transform: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.shelf-nav button:disabled { opacity: .3; }
.shelf-nav svg { width: 1.2rem; height: 1.2rem; }
.grid-cards { display: grid; gap: 1.4rem 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 40%), 1fr)); list-style: none; margin: 0; padding: 0; }
.tile { scroll-snap-align: start; min-width: 0; position: relative; list-style: none; }
.tile .cover { position: relative; aspect-ratio: 1; border-radius: .7rem; overflow: hidden; margin-bottom: .7rem; background: var(--surface-2);
  box-shadow: 0 .7rem 1.8rem rgba(0, 0, 0, .5); transition: transform .25s ease, box-shadow .25s ease; }
.tile .cover img, .tile .cover .gen { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tile .cover .gen { display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 2.6rem; color: rgba(255, 255, 255, .9); }
.tile:hover .cover { transform: translateY(-3px); box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .55), 0 0 2.2rem rgba(167, 123, 255, .28); }
.tile:hover .cover img { transform: scale(1.04); }
.tile .t { font-weight: 800; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .s { color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .add-btn { position: absolute; right: .6rem; bottom: .6rem; opacity: 0; transform: translateY(8px); transition: .2s; }
.tile:hover .add-btn, .tile .add-btn:focus, .tile .add-btn.done, .tile .add-btn:disabled { opacity: 1; transform: none; }
@media (hover: none) { .tile .add-btn { opacity: 1; transform: none; } }
.shelf .empty { grid-column: 1 / -1; color: var(--muted); }
/* Wide screens: "Recently added" becomes a wall of covers (up to three rows) instead of a carousel */
@media (min-width: 1280px) {
  .shelf.wall { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 1.6rem 1.3rem; overflow: visible;
    -webkit-mask-image: none; mask-image: none; }
  .shelf.wall .tile:nth-child(n+13) { display: none; }
}
@media (min-width: 1800px) { .shelf.wall .tile:nth-child(n+13) { display: block; } }

/* --- Home: search + shelf on the left, setup and your latest on the right (wide screens) ------------ */
.home-grid { display: flex; flex-direction: column; }
.home-main, .home-side { display: contents; }
.home-main > * { order: 1; } .home-grid .setup { order: 0; } .home-grid .latest { order: 2; } .home-grid .lib { order: 3; }
@media (min-width: 1280px) {
  .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(20rem, 26%, 27rem); gap: 0 2.6rem; align-items: start; }
  .home-main, .home-side { display: block; min-width: 0; }
  .home-side { position: sticky; top: 1.5rem; }
}
.side-panel { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.2rem .9rem; margin: 0 0 1.4rem; }
.side-panel h2 { font-size: 1.15rem; }
.side-panel .card-head { margin-bottom: .6rem; }
.side-panel .list li { padding: .45rem .5rem; margin: 0 -.5rem; }
.side-panel .list .art { width: 2.8rem; height: 2.8rem; }
.side-panel .list li > button { display: none; }
.setup-items { display: grid; gap: .5rem; }
.setup-item { display: flex; align-items: center; gap: .85rem; padding: .75rem .8rem; border-radius: .8rem; background: var(--surface-1); border: 1px solid var(--line);
  color: var(--text); text-decoration: none; transition: background .15s, border-color .15s; }
.setup-item:hover { background: var(--surface-2); border-color: var(--line-2); text-decoration: none; }
.setup-item .ico { width: 2.3rem; height: 2.3rem; border-radius: .7rem; display: grid; place-items: center; flex: none; background: rgba(167, 123, 255, .16); color: var(--accent-hi); }
.setup-item .ico svg { width: 1.2rem; height: 1.2rem; }
.setup-item b { display: block; }
.setup-item small { display: block; color: var(--muted); font-size: .88rem; line-height: 1.4; }
.setup-item .go { margin-left: auto; color: var(--faint); font-weight: 800; }
.lib-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.lib-nums b { display: block; font-family: var(--display); font-size: 1.6rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lib-nums span { color: var(--muted); font-size: .88rem; }
.lib .hint { margin: .7rem 0 .2rem; }

/* --- Stats (a year-in-review style recap) --------------------------------------------------------- */
.kpis { display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.3rem; }
@media (min-width: 768px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { position: relative; overflow: hidden; border-radius: 1.25rem; padding: 1.1rem; min-height: 8.5rem; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; box-shadow: 0 .75rem 2.1rem rgba(0, 0, 0, .35); }
.kpi::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, .28), transparent 60%); pointer-events: none; }
.kpi .n { font-family: var(--display); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 20px rgba(0, 0, 0, .25); }
.kpi .l { font-size: .92rem; font-weight: 700; opacity: .95; margin-top: .4rem; }
.chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .45rem; align-items: end; height: 11rem; }
.chart .col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: .3rem; min-width: 0; }
.chart .fill { width: 100%; max-width: 2rem; border-radius: .5rem .5rem .2rem .2rem; min-height: 4px; background: linear-gradient(to top, var(--accent-lo), var(--pink)); box-shadow: 0 0 16px rgba(188, 155, 255, .35); }
.chart .fill.h0 { background: rgba(255, 255, 255, .08); box-shadow: none; }
.chart .v { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-labels { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .45rem; font-size: .72rem; color: var(--faint); text-align: center; margin-top: .5rem; }
.rank { list-style: none; padding: 0; margin: 0; counter-reset: r; }
.rank li { display: grid; grid-template-columns: 1.2rem 2.8rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .5rem 0; }
.rank li::before { counter-increment: r; content: counter(r); color: var(--faint); font-weight: 800; text-align: right; }
.rank .av { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.rank .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.h0 { height: 0; } .h1 { height: 8%; } .h2 { height: 17%; } .h3 { height: 25%; } .h4 { height: 33%; } .h5 { height: 42%; } .h6 { height: 50%; }
.h7 { height: 58%; } .h8 { height: 67%; } .h9 { height: 75%; } .h10 { height: 83%; } .h11 { height: 92%; } .h12 { height: 100%; }
.split { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; }
.big { font-family: var(--display); font-size: 1.8rem; font-weight: 900; display: block; line-height: 1.1; }

/* --- Playlists ----------------------------------------------------------------------------------- */
.sync-row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: .9rem; align-items: center; padding: .75rem 0; border-top: 1px solid var(--line); }
.sync-row:first-of-type { border-top: 0; padding-top: 0; }
.sync-row .gen { width: 3.5rem; height: 3.5rem; border-radius: .6rem; display: grid; place-items: center; font-family: var(--display); font-weight: 900; color: #fff; }
.sync-row .t { font-weight: 800; overflow-wrap: anywhere; }
.sync-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sync-actions form { display: flex; gap: .5rem; align-items: center; margin: 0; }
.sync-actions select { width: auto; min-height: 2.4rem; padding-top: .35rem; padding-bottom: .35rem; font-size: max(16px, .9rem); }
@media (min-width: 768px) { .sync-row { grid-template-columns: 3.5rem minmax(0, 1fr) auto; } .sync-actions { grid-column: auto; } }

/* --- Account ---------------------------------------------------------------------------------------- */
.row-between { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; }
.row-between > :first-child { min-width: 0; flex: 1 1 15rem; }
.row-between form { margin: 0; }
.profile-head { display: flex; align-items: center; gap: 1.2rem; min-width: 0; }
.profile-head > div { min-width: 0; }
.profile-head .lede { overflow-wrap: anywhere; }
.avatar { width: 5.2rem; height: 5.2rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 2.1rem; color: #fff; box-shadow: 0 0 40px rgba(167, 123, 255, .45); flex: none; }

/* --- Outside pages (invite, sign in, sign up): centered glass over the haze --------------------------------- */
.gate { min-height: 100vh; display: grid; place-items: center; padding: calc(1.5rem + env(safe-area-inset-top)) var(--gutter) calc(1.75rem + env(safe-area-inset-bottom)); }
.gate-inner { width: 100%; max-width: 28rem; }
.brand-block { text-align: center; margin-bottom: 1.4rem; }
.brand-block img { width: 5rem; height: 5rem; border-radius: 1.5rem; margin: 0 auto .9rem; box-shadow: 0 0 60px rgba(167, 123, 255, .55); animation: breathe 6s ease-in-out infinite alternate; }
.brand-block .name { font-family: var(--display); font-size: 2.7rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.1;
  background: linear-gradient(100deg, #fff, #dccbff 45%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-block .tag { color: var(--muted); margin-top: .4rem; }
.gate h1 { font-size: 1.6rem; }
.gate .below { text-align: center; margin-top: 1rem; font-size: .95rem; color: var(--muted); }
@keyframes breathe { to { box-shadow: 0 0 90px rgba(243, 168, 255, .55); transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .brand-block img { animation: none; } .tile .cover, .tile .cover img { transition: none; } }
@media (max-width: 480px) {
  .searchbar { padding-left: 1rem; gap: .4rem; }
  .searchbar input { font-size: 16px; }
  .searchbar button { padding: 0 1.1rem; }
}

/* ================================================================================================
   Spotify-like browsing (2026-09-27): Search, Library, album/artist pages, recommendations,
   clear add buttons, the downloading bar. Same palette and surfaces as above.
   ================================================================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sub { color: var(--muted); font-size: .92rem; margin: .2rem 0 0; }
.card-head > div:first-child { min-width: 0; }
.head-actions { display: flex; align-items: center; gap: .6rem; flex: none; }
.head-actions > a { font-size: .92rem; color: var(--muted); font-weight: 700; }
.sub-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 1.2rem 0 .6rem; }
.home-search { margin-top: 1.2rem; max-width: 46rem; }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .55rem; vertical-align: .12em; }
.dot.ok { background: var(--ok); box-shadow: 0 0 10px rgba(143, 240, 196, .7); }
.dot.add { background: var(--accent-hi); box-shadow: 0 0 10px rgba(167, 123, 255, .8); }
.btn-ico { width: 1.2rem; height: 1.2rem; }

/* Loading placeholders */
.tile.skeleton .cover, .tile.skeleton .t, .tile.skeleton .s { background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%);
  background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite; box-shadow: none; }
.tile.skeleton .t { height: .95rem; width: 80%; border-radius: .4rem; margin-bottom: .4rem; }
.tile.skeleton .s { height: .8rem; width: 55%; border-radius: .4rem; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .tile.skeleton .cover, .tile.skeleton .t, .tile.skeleton .s { animation: none; } }

/* Add button: says what it will do, then what's happening */
.add-pill { min-height: 2.5rem; padding: 0 1.05rem 0 .8rem; font-size: .92rem; gap: .35rem; flex: none; }
.add-pill .i svg { width: 1.15rem; height: 1.15rem; }
.add-pill.small { min-height: 2.2rem; padding: 0 .85rem 0 .65rem; font-size: .85rem; }
.add-pill.busy, .add-pill.busy:disabled { opacity: 1; background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.add-pill.done, .add-pill.done:disabled { opacity: 1; background: rgba(143, 240, 196, .14); color: var(--ok); box-shadow: inset 0 0 0 1px rgba(143, 240, 196, .4); }
.have-pill { display: inline-flex; align-items: center; gap: .3rem; flex: none; min-height: 2.2rem; padding: 0 .8rem 0 .6rem; border-radius: 999px;
  font-size: .85rem; font-weight: 800; color: var(--ok); background: rgba(143, 240, 196, .1); box-shadow: inset 0 0 0 1px rgba(143, 240, 196, .3); white-space: nowrap; }
.have-pill svg { width: 1rem; height: 1rem; }

/* Tiles that open something */
.tile-link { display: block; color: inherit; text-decoration: none; }
.tile-link:hover { text-decoration: none; }
.tile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-top: .55rem; }
.tile .why { color: var(--faint); font-size: .8rem; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nope { min-height: 2.2rem; padding: 0 .5rem; font-size: .8rem; font-weight: 700; color: var(--faint); background: none; box-shadow: none; }
.nope:hover { color: var(--text); background: var(--surface-2); box-shadow: none; transform: none; filter: none; }
.tile.leaving { opacity: 0; transform: scale(.95); transition: opacity .25s, transform .25s; }
.grid-cards.artists .cover, .tile.artist .cover { border-radius: 50%; }
.tile.artist { text-align: center; }

/* Notes inside a shelf (building, cold start, warming up) */
.shelf-note { margin-top: .4rem; }
.note-box { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: 1.1rem 1.2rem; border-radius: var(--radius);
  background: var(--glass); border: 1px dashed var(--line-2); }
.note-box b { font-family: var(--display); font-size: 1.1rem; flex: 1 1 100%; }
.note-box > span { color: var(--muted); flex: 1 1 18rem; }

/* Jump back in: compact two-column tiles (Spotify's top grid) */
.quick { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quick-item { display: flex; align-items: center; gap: .8rem; min-height: 3.6rem; padding-right: .8rem; border-radius: .6rem; overflow: hidden;
  background: var(--surface-2); color: var(--text); font-weight: 800; font-size: .92rem; text-decoration: none; transition: background .15s; }
.quick-item:hover { background: var(--surface-3); text-decoration: none; }
.quick-item img, .quick-item .gen { width: 3.6rem; height: 3.6rem; flex: none; object-fit: cover; display: grid; place-items: center; font-weight: 900; }
.quick-item span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }

/* "Want even more picks?" */
.promo { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; margin: 0 0 2.4rem; border-radius: var(--radius); color: var(--text);
  background: linear-gradient(120deg, rgba(125, 77, 255, .22), rgba(243, 168, 255, .12)); border: 1px solid var(--line-2); text-decoration: none; }
.promo:hover { text-decoration: none; border-color: var(--accent); }
.promo .ico { width: 2.6rem; height: 2.6rem; border-radius: .8rem; display: grid; place-items: center; flex: none; background: rgba(167, 123, 255, .25); color: var(--accent-hi); }
.promo .ico svg { width: 1.4rem; height: 1.4rem; }
.promo b { display: block; } .promo small { display: block; color: var(--muted); font-size: .9rem; }
.promo .go { margin-left: auto; color: var(--faint); font-weight: 800; }
a.side-panel { display: block; color: var(--text); text-decoration: none; }
a.side-panel:hover { border-color: var(--line-2); text-decoration: none; }
.side-panel .go { color: var(--muted); font-weight: 700; font-size: .92rem; }

/* Search */
.clear-btn { flex: none; width: 2.4rem; height: 2.4rem; min-height: 0; padding: 0; border-radius: 50%; color: var(--muted); background: transparent; box-shadow: none; }
.clear-btn:hover { color: var(--text); background: var(--surface-2); box-shadow: none; transform: none; }
.clear-btn svg { width: 1.2rem; height: 1.2rem; }
.chips-row { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .9rem .3rem .3rem; border-radius: 999px; background: var(--surface-2);
  color: var(--text); font-weight: 700; text-decoration: none; border: 1px solid var(--line); }
.chip:hover { background: var(--surface-3); text-decoration: none; }
.chip img, .chip .gen { width: 2.2rem; height: 2.2rem; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: .9rem; font-weight: 900; }
#have-albums:not(:empty) { margin-bottom: 1rem; }
.genre-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 45%), 1fr)); }
.genre { position: relative; display: flex; align-items: flex-end; min-height: 6.2rem; padding: .9rem 1rem; border-radius: .9rem; overflow: hidden; color: #fff;
  font-family: var(--display); font-weight: 900; font-size: 1.15rem; text-decoration: none; box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .35); transition: transform .15s; }
.genre::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .25), transparent 55%); }
.genre span { position: relative; z-index: 1; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.genre:hover { transform: translateY(-2px); text-decoration: none; }
.link-card .link-url { overflow-wrap: anywhere; color: var(--muted); font-size: .92rem; }
.link-card .eyebrow { font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 800; margin-bottom: .4rem; }
.choices { display: grid; gap: .8rem; margin-top: .6rem; }
@media (min-width: 700px) { .choices { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.choice { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: 1rem; border-radius: .9rem; background: var(--surface-1); border: 1px solid var(--line); }
.choice > b { font-size: 1.05rem; } .choice > span { color: var(--muted); font-size: .92rem; flex: 1; }
.choice .add-pill, .choice .button { margin-top: .4rem; }
.list li > .have-pill, .list li > .add-pill { margin-left: auto; }

/* Library */
.lib-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; margin-bottom: 1.2rem; }
.lib-bar .filters { margin: 0; align-items: center; }
.chip-link { font-weight: 700; color: var(--muted); font-size: .95rem; padding: 0 .4rem; }
.lib-tools { display: flex; align-items: center; gap: .6rem; }
.sortbox { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .9rem; color: var(--muted); }
.sortbox select { width: auto; min-height: 2.4rem; padding-top: .3rem; padding-bottom: .3rem; font-size: max(16px, .9rem); }
.pill-x { display: inline-flex; align-items: center; min-height: 2.4rem; padding: 0 1rem; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 800; font-size: .9rem; }
.pill-x:hover { text-decoration: none; filter: brightness(.9); }
#lib .list li .button { flex: none; }
.more-wrap { display: flex; justify-content: center; margin: 1.6rem 0; }

/* Album and artist pages */
.detail-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.4rem 2rem; padding: 1.6rem 0 1.8rem; position: relative; isolation: isolate; }
.detail-head::before { content: ""; position: absolute; z-index: -1; left: -30%; right: -30%; top: -8rem; bottom: -2rem; pointer-events: none;
  background: radial-gradient(45% 60% at 25% 45%, var(--glow), transparent 72%); }
.detail-cover { width: min(15rem, 60vw); aspect-ratio: 1; border-radius: .9rem; overflow: hidden; flex: none; box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .55); }
.detail-cover.round { border-radius: 50%; }
.detail-cover img, .detail-cover .gen { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; font-family: var(--display); font-size: 4rem; font-weight: 900; }
.detail-meta { min-width: 0; flex: 1 1 18rem; }
.detail-meta .eyebrow { font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 800; margin-bottom: .4rem; }
.detail-meta h1 { overflow-wrap: anywhere; }
.detail-meta .lede { color: var(--muted); font-size: 1.05rem; margin: .3rem 0 0; }
.detail-meta .lede a { color: var(--text); font-weight: 800; }
.tracklist { list-style: none; margin: 0; padding: .4rem .6rem; }
.tracklist li { display: flex; align-items: center; gap: .9rem; padding: .6rem .5rem; border-radius: .6rem; min-width: 0; }
.tracklist li:hover { background: var(--surface-2); }
.tracklist .n { width: 1.6rem; text-align: right; color: var(--faint); font-variant-numeric: tabular-nums; flex: none; }
.tracklist .meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tracklist .t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracklist .s { color: var(--muted); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracklist .plays { color: var(--faint); font-size: .82rem; flex: none; display: none; }
@media (min-width: 700px) { .tracklist .plays { display: block; } }
.tracklist .dur { color: var(--faint); font-size: .9rem; font-variant-numeric: tabular-nums; flex: none; }
.art-sm { width: 2.6rem; height: 2.6rem; border-radius: .4rem; object-fit: cover; flex: none; }
.card.tracks { padding: .4rem; }

/* Taste: pick artists */
.taste-add { max-width: 32rem; margin-bottom: 1.4rem; }
.bubbles { list-style: none; margin: 0 0 6rem; padding: 0; display: grid; gap: 1.2rem .8rem; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); }
.bubble { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: 0; cursor: pointer; text-align: center; font-weight: 700; font-size: .92rem; }
.bubble input { position: absolute; opacity: 0; pointer-events: none; }
.bubble img, .bubble .gen { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-family: var(--display); font-size: 2rem; font-weight: 900;
  box-shadow: 0 .5rem 1.4rem rgba(0, 0, 0, .45); transition: transform .15s, box-shadow .15s, filter .15s; filter: saturate(.85); }
.bubble b { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.bubble:hover img, .bubble:hover .gen { transform: translateY(-2px); }
.bubble:has(input:checked) img, .bubble:has(input:checked) .gen { filter: none; box-shadow: 0 0 0 3px var(--accent-hi), 0 0 1.6rem rgba(167, 123, 255, .6); }
.bubble:has(input:checked)::after { content: "✓"; position: absolute; top: 0; right: calc(50% - 3.2rem); width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-weight: 900; box-shadow: 0 0 12px rgba(167, 123, 255, .8); }
.bubble:has(input:focus-visible) img, .bubble:has(input:focus-visible) .gen { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.sticky-save { position: fixed; z-index: 15; left: 0; right: 0; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: .8rem var(--gutter); background: linear-gradient(to top, rgba(9, 7, 15, .96), rgba(9, 7, 15, .8)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .sticky-save { left: var(--rail); bottom: 0; } }

/* Toast */
.toast { position: fixed; z-index: 40; left: 50%; bottom: calc(var(--tabbar) + 5.6rem + env(safe-area-inset-bottom)); transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  max-width: min(32rem, calc(100vw - 2rem)); padding: .75rem 1.1rem; border-radius: .9rem; background: #231b36; color: var(--text); border: 1px solid var(--line-2);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .5); font-size: .95rem; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { color: var(--err); }
@media (min-width: 1024px) { .toast { bottom: 6.5rem; left: calc(50% + var(--rail) / 2); } }

/* The downloading bar (like Spotify's now-playing bar), above the tab bar on phones */
.dlbar { position: fixed; z-index: 19; left: .5rem; right: .5rem; bottom: calc(var(--tabbar) + .45rem + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .8rem;
  padding: .55rem .9rem .55rem .55rem; border-radius: .9rem; color: var(--text); text-decoration: none;
  background: rgba(38, 27, 62, .94); border: 1px solid var(--line-2); box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .55), 0 0 2rem rgba(125, 77, 255, .25);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.dlbar:hover { text-decoration: none; }
.dl-art { width: 2.7rem; height: 2.7rem; border-radius: .55rem; flex: none; display: grid; place-items: center; }
.spin { width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin 1s linear infinite; }
.dlbar.finished .spin { animation: none; border: 0; width: auto; height: auto; }
.dlbar.finished .spin::after { content: "✓"; font-weight: 900; }
@keyframes spin { to { transform: rotate(360deg); } }
.dl-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dl-text b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-text small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-text .bar { margin-top: .3rem; height: 3px; }
.dl-more { flex: none; font-size: .85rem; font-weight: 800; color: var(--muted); }
body.has-dlbar .stage { padding-bottom: calc(var(--tabbar) + 6.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) {
  .dlbar { left: calc(var(--rail) + 1.5rem); right: 1.5rem; bottom: 1.2rem; max-width: 44rem; margin: 0 auto; }
  body.has-dlbar .stage { padding-bottom: 7rem; }
}
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* Section heads wrap on narrow screens: actions go under the title */
.section > .card-head { flex-wrap: wrap; align-items: flex-end; }
.section > .card-head > div:first-child { flex: 1 1 16rem; }
.section > .card-head .head-actions { margin-left: auto; }
/* Result rows: the action column has one width, so album names line up */
.results li > .add-pill, .results li > .have-pill { min-width: 8.4rem; justify-content: center; }
@media (max-width: 480px) { .results .dur { display: none; } .results li > .add-pill, .results li > .have-pill { min-width: 0; } .results .have-pill span:last-child { display: none; } .results .have-pill { padding: 0 .6rem; } }
.grid-cards .empty { grid-column: 1 / -1; color: var(--muted); list-style: none; }
.bubbles li.filtered { display: none; }
.version { color: var(--faint); font-size: .75rem; padding: 0 .6rem; }
.gate-version { text-align: center; margin-top: 1.4rem; }
.site-foot { color: var(--faint); font-size: .8rem; text-align: center; padding: 2rem 0 .5rem; }
@media (min-width: 1024px) { .site-foot { display: none; } }

/* ================================================================================================
   5.0 (2026-09-28): the social side (people, profiles, stars, sending, notifications) and art first.
   ================================================================================================ */
/* Member pictures: an album cover, or the dreamy initial */
img.me, img.avatar, img.face, img.person-face, .art.round { object-fit: cover; }
.me.pic { padding: 0; }
.avatar.pic { border-radius: 50%; }
.face { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: .75rem; font-weight: 900; color: #fff; vertical-align: middle; }
.faces { display: flex; flex-wrap: wrap; gap: .35rem; }
.faces .face { width: 2.4rem; height: 2.4rem; font-size: .95rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.art.round, .list .art.round { border-radius: 50%; }

/* Bell */
.bell { position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: var(--muted); flex: none; }
.bell:hover, .bell[aria-current="page"] { color: var(--text); background: var(--surface-2); text-decoration: none; }
.bell svg { width: 1.35rem; height: 1.35rem; }
.badge { position: absolute; top: .05rem; right: .05rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; display: grid; place-items: center;
  font-size: .68rem; font-weight: 900; color: var(--on-accent); background: var(--pink); box-shadow: 0 0 10px rgba(243, 168, 255, .7); }
.top-actions { display: flex; align-items: center; gap: .5rem; }
.top-actions > a { display: grid; place-items: center; line-height: 0; text-decoration: none; }
@media (min-width: 1024px) {
  .rail { gap: 1.4rem; overflow-y: auto; }
  .rail-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
  .rail nav a { padding: .62rem 1rem; }
  .rail .version { display: block; padding: .2rem .6rem; }
  .rail .version:hover { color: var(--muted); }
}
.site-foot a { color: var(--faint); }

/* Shortcuts row (You page, Help) */
.shortcuts { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.4rem 0 1.4rem; }
.shortcuts a { padding: .45rem .9rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: .9rem; }
.shortcuts a:hover { background: var(--surface-3); text-decoration: none; }

/* Stars */
.rate { display: inline-flex; gap: 0; flex: none; }
.star { min-height: 0; width: 2rem; height: 2rem; padding: .25rem; border-radius: 50%; background: none; box-shadow: none; color: rgba(255, 255, 255, .22); }
.star svg { width: 100%; height: 100%; }
.star:hover { transform: none; filter: none; box-shadow: none; color: var(--warn); background: var(--surface-2); }
.star.on { color: var(--warn); filter: drop-shadow(0 0 6px rgba(255, 211, 138, .45)); }
.rate:hover .star { color: rgba(255, 255, 255, .22); filter: none; }
.rate .star:hover, .rate .star:has(~ .star:hover) { color: var(--warn); }
.tracklist .rate .star { width: 1.65rem; height: 1.65rem; padding: .2rem; }
@media (max-width: 520px) { .tracklist .rate .star { width: 1.35rem; height: 1.35rem; padding: .12rem; } .tracklist .icon-btn { display: none; } }
.stars-static { color: rgba(255, 255, 255, .22); letter-spacing: .05em; white-space: nowrap; flex: none; }
.stars-static .on { color: var(--warn); }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin-top: .8rem; }
.avg { color: var(--muted); font-size: .92rem; font-weight: 700; }
.added-by { margin: .6rem 0 0; color: var(--muted); font-size: .92rem; }
.added-by a { color: var(--text); font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; }
.added-by .face { width: 1.5rem; height: 1.5rem; }
.icon-btn { flex: none; width: 2.1rem; height: 2.1rem; min-height: 0; padding: .45rem; border-radius: 50%; color: var(--muted); background: none; box-shadow: none; }
.icon-btn:hover { color: var(--text); background: var(--surface-3); transform: none; box-shadow: none; filter: none; }
.icon-btn svg { width: 100%; height: 100%; }
.act-pick[aria-pressed="true"], .act-follow-artist[aria-pressed="true"] { color: var(--accent-hi); box-shadow: inset 0 0 0 1px rgba(167, 123, 255, .5); }
.detail-grid { display: grid; gap: 0 1.6rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .detail-grid { grid-template-columns: minmax(0, 1fr) 20rem; } }

/* Recommendation tiles: the reason gets two lines; "Not for me" is a small ✕ on the cover */
.tile .why { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }

.nope-x { position: absolute; top: .4rem; right: .4rem; z-index: 2; width: 1.9rem; height: 1.9rem; min-height: 0; padding: .35rem; border-radius: 50%;
  color: #fff; background: rgba(9, 7, 15, .6); box-shadow: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nope-x:hover { background: rgba(9, 7, 15, .85); transform: none; filter: none; box-shadow: none; }
.nope-x svg { width: 100%; height: 100%; }
.tile .s.by, .tile > .by { color: var(--faint); font-size: .8rem; }
.tile .by a { color: var(--muted); font-weight: 700; }
.toast { display: flex; align-items: center; gap: .9rem; pointer-events: none; }
.toast.show { pointer-events: auto; }
.toast-action { min-height: 2rem; padding: 0 .8rem; font-size: .88rem; background: var(--surface-3); color: var(--accent-hi); box-shadow: none; }

/* Jump back in: title + artist */
.quick-item .qt { display: flex; flex-direction: column; min-width: 0; }
.quick-item .qt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-item .qt small { color: var(--muted); font-weight: 600; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promo { gap: .4rem; padding-right: .6rem; }
.promo-link { display: flex; align-items: center; gap: 1rem; color: var(--text); flex: 1 1 auto; min-width: 0; }
.promo-link:hover { text-decoration: none; }

/* People (Home column, People page, profiles) */
.people-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.people-mini li { display: flex; align-items: center; gap: .6rem; }
.people-mini li > a { display: flex; align-items: center; gap: .7rem; min-width: 0; flex: 1 1 auto; padding: .35rem .4rem; margin: 0 -.4rem; border-radius: .7rem; color: var(--text); }
.people-mini li > a:hover { background: var(--surface-2); text-decoration: none; }
.people-mini .face { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.people-mini b { display: block; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-mini small { display: block; color: var(--muted); font-size: .82rem; }
.people-mini li > span { min-width: 0; }
.people-mini button { flex: none; min-height: 2rem; padding: 0 .8rem; font-size: .82rem; }
.people-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.person { position: relative; display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: 0 0 1.1rem; border-radius: var(--radius); overflow: hidden;
  background: var(--glass); border: 1px solid var(--line); text-align: center; }
.person-link { display: flex; flex-direction: column; align-items: center; gap: .15rem; width: 100%; color: var(--text); }
.person-link:hover { text-decoration: none; }
.person-cover { display: block; width: 100%; height: 6.5rem; overflow: hidden; }
.person-cover img, .person-cover .gen { width: 100%; height: 100%; object-fit: cover; display: block; filter: blur(2px) saturate(1.2) brightness(.75); transform: scale(1.1); }
.person-face { width: 5.6rem; height: 5.6rem; border-radius: 50%; margin-top: -2.9rem; display: grid; place-items: center; font-family: var(--display); font-size: 2.2rem; font-weight: 900; color: #fff;
  border: 3px solid var(--panel); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .5); position: relative; }
.person-link > b { font-family: var(--display); font-size: 1.15rem; margin-top: .45rem; }
.person-link > small { color: var(--muted); }
.person-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .8rem; margin-top: .45rem; color: var(--muted); font-size: .85rem; }
.person-stats b { color: var(--text); }
.profile-hero .counts { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .7rem 0 0; color: var(--muted); }
.profile-hero .counts b { color: var(--text); font-family: var(--display); font-size: 1.15rem; }
.profile-hero .form-actions { margin-top: .9rem; }
.profile-head .avatar { width: 6.5rem; height: 6.5rem; font-size: 2.6rem; }
@media (min-width: 900px) { .profile-head .avatar { width: 8.5rem; height: 8.5rem; font-size: 3.2rem; } }
.chips-row .chip .gen, .chips-row .chip img { flex: none; }
.chip.plain { min-height: 0; padding: .45rem .95rem; font-size: .92rem; box-shadow: none; }
.chip.plain:hover { transform: none; filter: none; box-shadow: none; }
.song-list { padding: .5rem .9rem; }
.song-list li { margin: 0 -.4rem; }

/* The sheet (Send to…, Add several, Report a problem) */
.sheet { width: min(34rem, calc(100vw - 1.5rem)); max-height: min(85vh, 46rem); padding: 0; border: 1px solid var(--line-2); border-radius: 1.2rem; color: var(--text);
  background: #1a1427; box-shadow: 0 2rem 5rem rgba(0, 0, 0, .7), 0 0 3rem rgba(125, 77, 255, .2); }
.sheet::backdrop { background: rgba(5, 3, 10, .65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sheet-inner { display: flex; flex-direction: column; max-height: inherit; padding: 1.1rem 1.2rem 1.2rem; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.sheet-head h2 { margin: 0; font-size: 1.3rem; }
#sheet-body { overflow-y: auto; min-height: 0; }
.sheet-foot { position: sticky; bottom: 0; padding-top: .8rem; background: #1a1427; }
@media (max-width: 600px) { .sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 1.2rem 1.2rem 0 0; padding-bottom: env(safe-area-inset-bottom); } }
.checklist li { padding: 0; margin: 0; }
.check-row { display: flex; align-items: center; gap: .8rem; width: 100%; margin: 0; padding: .45rem .5rem; border-radius: .7rem; cursor: pointer; font-weight: 500; min-width: 0; }
.check-row:hover { background: var(--surface-2); }
.check-row .meta { display: flex; flex-direction: column; min-width: 0; }
.check-row .art { width: 2.8rem; height: 2.8rem; }
.reasons { display: grid; gap: .5rem; margin-top: .6rem; }
.reasons button { justify-content: flex-start; }

/* You page */
.switch { display: flex; align-items: flex-start; gap: .8rem; margin: .7rem 0; font-weight: 500; cursor: pointer; }
.switch input { -webkit-appearance: none; appearance: none; position: relative; width: 2.7rem; height: 1.6rem; min-height: 0; padding: 0; margin: .1rem 0 0; flex: none;
  border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-2); transition: background .15s; cursor: pointer; }
.switch input::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(167, 123, 255, .5); }
.switch input:checked::after { transform: translateX(1.1rem); }
.switch input:disabled { opacity: .4; cursor: default; }
.switch b { display: block; } .switch small { display: block; color: var(--muted); font-size: .88rem; }
.conn { padding: .9rem 0; border-top: 1px solid var(--line); }
.conn:first-of-type { border-top: 0; padding-top: 0; }
.conn h3 { margin-bottom: .4rem; }
.avatar-choices { list-style: none; margin: .4rem 0 .6rem; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); }
.avatar-choices form { margin: 0; }
.avatar-pick { width: 100%; aspect-ratio: 1; min-height: 0; padding: 0; border-radius: 50%; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.avatar-pick img, .avatar-pick .gen { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; font-weight: 900; color: #fff; }
.avatar-pick:hover { transform: scale(1.05); box-shadow: 0 0 0 2px var(--accent-hi); }
.avatar-pick.current { box-shadow: 0 0 0 3px var(--accent-hi), 0 0 1rem rgba(167, 123, 255, .6); }
.devices form { margin: 0; }
.devices li > form { margin-left: auto; }

/* Library */
.filters button small, .filters small { opacity: .65; font-weight: 700; margin-left: .15rem; }
.filterbox { position: relative; display: block; margin: 0; }
.filterbox svg { position: absolute; left: .8rem; top: 50%; width: 1.05rem; height: 1.05rem; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.filterbox input { min-height: 2.4rem; padding: .3rem .9rem .3rem 2.3rem; border-radius: 999px; width: min(15rem, 50vw); font-size: max(16px, .92rem); }
.lib-count { margin: -.6rem 0 .9rem; } .lib-count:empty { display: none; }
@media (max-width: 600px) { .lib-tools { width: 100%; flex-wrap: wrap; } .filterbox { flex: 1 1 10rem; } .filterbox input { width: 100%; } }
/* Phones (build 80): the library's search comes first, big and easy to spot; chips and Sort stay below it in order */
@media (max-width: 600px) {
  .lib-bar .lib-tools { display: contents; }
  .lib-bar .filterbox { order: -1; flex: 1 1 100%; }
  .lib-bar .filterbox input { min-height: 3.25rem; padding-left: 3rem; font-size: 17px; font-weight: 600; background: var(--surface-3);
    border: 1.5px solid var(--line-2); box-shadow: 0 6px 22px -14px var(--accent); }
  .lib-bar .filterbox input::placeholder { color: var(--muted); opacity: 1; }
  .lib-bar .filterbox input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
  .lib-bar .filterbox svg { left: 1rem; width: 1.35rem; height: 1.35rem; color: var(--accent-hi); }
  .lib-bar .sortbox, .lib-bar .pill-x { order: 3; }
}

/* Search: genre cards carry covers and counts */
.genre { align-items: flex-end; min-height: 6.8rem; }
.genre-name { position: relative; z-index: 1; display: flex; flex-direction: column; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.genre-name small { font-family: system-ui, sans-serif; font-weight: 700; font-size: .78rem; opacity: .85; }
.genre .genre-covers { position: absolute; z-index: 0; right: -.4rem; bottom: -.9rem; display: flex; transform: rotate(18deg); }
.genre .genre-name { z-index: 1; max-width: 70%; }
.genre-covers img, .genre-covers .gen { width: 3.6rem; height: 3.6rem; border-radius: .4rem; object-fit: cover; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); margin-left: -1.3rem; }
.lib-links .chip .gen { font-size: 1rem; }

/* Activity */
.activity-card { max-width: 64rem; }
.list li.day { display: block; padding: 1rem .2rem .3rem; margin: 0; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
.list li.day:first-child { padding-top: 0; }
.list li.day:hover { background: none; }
.list a.t { display: block; color: var(--text); }
.st.ok { color: var(--ok); } .st.warn { color: var(--warn); } .st.bad { color: var(--err); }
.side-panel .list .s .pill { display: none; }

/* Notifications */
.notes li { padding: 0; }
.notes .note-link { display: flex; align-items: center; gap: .9rem; width: 100%; padding: .55rem .65rem; color: var(--text); border-radius: .8rem; min-width: 0; }
.notes .note-link:hover { text-decoration: none; }
.notes li.unread .t::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--pink); margin-right: .5rem; vertical-align: .15em; box-shadow: 0 0 8px var(--pink); }
.notes .art.gen { display: grid; place-items: center; font-weight: 900; color: #fff; }
.card:has(.notes), .changelog { max-width: 64rem; }

/* Stats */
.summary-line { margin: -.3rem 0 1.4rem; color: var(--muted); font-size: 1rem; }
.summary-line b { color: var(--text); }
.rank img.av { object-fit: cover; }
.rank.flat li::before { content: "•"; }
.rank .name a { color: var(--text); }

/* Synced playlists: the "Send to Kalomori" card */
.note-box.send-to .steps { flex: 1 1 100%; margin-top: .3rem; }
.home-grid .people-panel { order: 3; } .home-grid .lib { order: 4; }
.people-mini b .pill { display: inline-block; vertical-align: 2px; margin-left: .3rem; }


/* ================================================================================================
   5.1 (2026-09-28): the owner's picks from the layout review, onboarding and Kal the mascot.
   ================================================================================================ */
.kao { color: var(--faint); font-weight: 600; font-size: .85em; white-space: nowrap; }
.linkish { min-height: 0; padding: 0; background: none; box-shadow: none; color: var(--accent-hi); font-weight: 700; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { transform: none; filter: none; box-shadow: none; }

/* One column (Stats, You) */
.narrow { max-width: 50rem; margin: 0 auto; }
.one-col { display: grid; gap: 0; }

/* You: tabs for its own sections; on phones, the other pages as a plain list */
.tabline { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--line); margin: .4rem 0 1.2rem; overflow-x: auto; scrollbar-width: none; }
.tabline a { padding: .7rem 0; font-weight: 800; color: var(--muted); white-space: nowrap; text-decoration: none; }
.tabline a:hover { color: var(--text); }
.tabline a.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent-hi); }
.tabline:not(.tabbed) { display: none; }
.more-list { display: grid; margin: 0 0 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--glass); }
.more-list a { display: flex; justify-content: space-between; padding: .8rem 1rem; color: var(--text); font-weight: 700; border-top: 1px solid var(--line); }
.more-list a:first-child { border-top: 0; }
.more-list a:hover { background: var(--surface-2); text-decoration: none; }
.more-list span { color: var(--faint); }
@media (min-width: 1024px) { .more-list { display: none; } }


/* Rows that scroll sideways: fade on the edge with more, round arrows on the row itself */
.shelf-wrap { position: relative; }
.shelf:not(.at-start):not(.at-end) { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 3rem), transparent); }
.shelf.at-end:not(.at-start) { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem); mask-image: linear-gradient(to right, transparent, #000 2.5rem); }
.shelf-wrap > .shelf-nav { position: absolute; inset: 0 0 auto 0; height: 0; display: none; }
@media (hover: hover) and (min-width: 900px) { .shelf-wrap > .shelf-nav { display: block; } }
.shelf-wrap > .shelf-nav[hidden] { display: none !important; }
.shelf-wrap > .shelf-nav button { position: absolute; z-index: 3; top: calc(var(--mid, 4.5rem) - 1.3rem); width: 2.6rem; height: 2.6rem; background: rgba(22, 17, 34, .92); box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .5), inset 0 0 0 1px var(--line-2); opacity: .9; transition: opacity .15s, transform .15s; }
.shelf-wrap > .shelf-nav button[data-dir="-1"] { left: -.9rem; }
.shelf-wrap > .shelf-nav button[data-dir="1"] { right: -.9rem; }
.shelf-wrap:hover > .shelf-nav button { opacity: 1; }
.shelf-wrap > .shelf-nav button:hover { transform: scale(1.08); background: var(--panel); }
.card-head .shelf-nav { display: none !important; }

/* Long titles: one line; scroll slowly on hover (or once on phones) */

@keyframes marquee { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(var(--shift, 0)); } }
@media (prefers-reduced-motion: reduce) { .tile .t.run .mq { animation: none; } }

/* Grids that stretch to fill their rows (genres, people) */
.genre-grid { display: flex; flex-wrap: wrap; }
.genre-grid > li { flex: 1 1 11rem; }
.genre .genre-covers img, .genre .genre-covers .gen { flex: none; max-width: none; width: 3.6rem; height: 3.6rem; aspect-ratio: 1; }
.people-grid { display: flex; flex-wrap: wrap; }
.people-grid > .person { flex: 1 1 15rem; }

/* Home: compact search on the greeting's line */
/* Home: the greeting takes what's left next to the search bar and wraps (never pushes it away) */
.home-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; }
.home-hero h1 { margin: 0; flex: 1 1 18rem; min-width: 0; font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.15;
  text-wrap: balance; overflow-wrap: anywhere; }
.home-search.compact { margin: 0; min-height: 3rem; flex: 0 0 22rem; padding: .2rem .4rem .2rem 1rem; box-shadow: none; }
.home-search.compact input { min-height: 2.5rem; }
@media (max-width: 700px) { .home-search.compact { flex: 1 1 100%; } }
.hello-kao { font-size: .5em; vertical-align: .5em; }

/* Library songs: the row opens the album; stars and Send in the row */
.list.songs li.row-link { cursor: pointer; }
.list.songs .rate .star { width: 1.6rem; height: 1.6rem; padding: .2rem; }
@media (max-width: 600px) { .list.songs .rate .star { width: 1.3rem; height: 1.3rem; padding: .1rem; } .list.songs .icon-btn { display: none; } }
.list a.t:hover { text-decoration: none; }
.lib-count .linkish { font-size: inherit; }

/* Kal, the mascot */
.kal { width: 5.5rem; height: auto; overflow: visible; flex: none; }
.kal-lg { width: 7.5rem; } .kal-xl { width: 10rem; }
.kal .kal-bob { animation: kal-bob 3.6s ease-in-out infinite; transform-origin: 256px 300px; }
.kal .kal-open { animation: kal-blink 5s infinite; transform-origin: 256px 240px; }
.kal .kal-closed, .kal .kal-frown, .kal .kal-hands, .kal .kal-zzz { display: none; }
.kal .kal-tents path { animation: kal-wiggle 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
.kal .kal-tents .t2 { animation-delay: -.6s; } .kal .kal-tents .t3 { animation-delay: -1.2s; } .kal .kal-tents .t4 { animation-delay: -1.8s; }

.kal-sleepy .kal-open, .kal-shy .kal-open { display: none; }
.kal-sleepy .kal-closed { display: inline; }
.kal-sleepy .kal-zzz { display: inline; animation: kal-z 3s ease-in-out infinite; }
.kal-sleepy .kal-bob { animation-duration: 5.5s; }
.kal-sad .kal-smile { display: none; } .kal-sad .kal-frown { display: inline; }
.kal-shy .kal-closed, .kal-shy .kal-hands { display: inline; }
.kal-jump .kal-bob { animation: kal-jump .7s ease-out 2; }
@keyframes kal-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes kal-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes kal-wiggle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(4deg); } }

@keyframes kal-z { 0%, 100% { opacity: .2; transform: translateY(6px); } 50% { opacity: 1; transform: translateY(-6px); } }
@keyframes kal-jump { 0% { transform: translateY(0); } 40% { transform: translateY(-34px); } 70% { transform: translateY(0); } 85% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kal *, .kal .kal-bob { animation: none !important; } }
.kal-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 1.4rem 1rem; }
.kal-empty b { font-family: var(--display); font-size: 1.15rem; margin-top: .4rem; }
.kal-empty > span { color: var(--muted); max-width: 26rem; }
.kal-empty .button { margin-top: .7rem; }
.empty-state .kal { width: 5rem; margin-bottom: .2rem; }
.note-box.with-kal { flex-wrap: nowrap; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem 1.1rem; align-items: center; }
.note-box.with-kal .kal { grid-row: span 3; width: 4.6rem; }
.note-box.with-kal b, .note-box.with-kal > span { flex: none; }
.note-box.with-kal .button { justify-self: start; }
.message-card { text-align: center; } .message-card .kal { margin: 0 auto .6rem; }

/* Sign-up: three short steps with Kal */
.join { text-align: left; overflow: hidden; }
.join fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.join legend { padding: 0; margin-bottom: .2rem; }
.join legend h1 { font-size: 1.55rem; }
.join-kal { display: none; justify-content: center; margin: -.2rem 0 .4rem; }
.join-dots { display: none; justify-content: center; gap: .4rem; margin-bottom: 1rem; }
.join-dots i { width: 2.2rem; height: .3rem; border-radius: 9px; background: var(--surface-3); transition: background .3s; }
.join-dots i.on { background: linear-gradient(90deg, var(--accent-lo), var(--pink)); }
.join.stepping .join-kal, .join.stepping .join-dots { display: flex; }
.join:not(.stepping) .join-next, .join:not(.stepping) .join-back { display: none; }
.join:not(.stepping) .join-step + .join-step { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.join-nav { display: flex; gap: .6rem; } .join-nav > * { flex: 1 1 0; }
.join .in-right { animation: in-right .35s cubic-bezier(.2, .8, .2, 1) both; }
.join .in-left { animation: in-left .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes in-right { from { opacity: 0; transform: translateX(2.5rem); } to { opacity: 1; transform: none; } }
@keyframes in-left { from { opacity: 0; transform: translateX(-2.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .join .in-right, .join .in-left { animation: none; } }

/* Welcome tour */
.welcome { max-width: 46rem; margin: 0 auto; padding-top: 1rem; }
.welcome-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.welcome-dots { display: flex; gap: .35rem; }
.welcome-dots i { width: 1.8rem; height: .3rem; border-radius: 9px; background: var(--surface-3); }
.welcome-dots i.on { background: linear-gradient(90deg, var(--accent-lo), var(--pink)); }
.welcome .skip { color: var(--muted); font-weight: 700; font-size: .92rem; }
.welcome-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem; animation: rise .45s ease both; }
.welcome-step.wide { align-items: stretch; text-align: left; max-width: none; }
.welcome-step h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); margin: .2rem 0 0; }
.welcome-step .lede { color: var(--muted); font-size: 1.08rem; max-width: 36rem; margin: 0; }
.welcome-points { list-style: none; padding: 0; margin: .4rem 0; display: grid; gap: .6rem; text-align: left; max-width: 36rem; }
.welcome-points li { padding: .8rem 1rem; border-radius: .9rem; background: var(--surface-1); border: 1px solid var(--line); }
.welcome-list { text-align: left; max-width: 36rem; }
.welcome-people { width: 100%; max-width: 30rem; text-align: left; }
.avatar-choices.big { width: 100%; max-width: 30rem; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); }
.welcome .bubbles { margin-bottom: 7rem; }
.welcome .form-actions { justify-content: center; }
.welcome .form-actions form { margin: 0; }
.people-grid > .person { max-width: 30rem; }
.genre .genre-covers { right: .5rem; bottom: -.7rem; }
.genre .genre-covers > :first-child { margin-left: 0; }


/* ================================================================================================
   5.1.1 (2026-09-28): animation fixes, text kept level, play counts as an icon.
   ================================================================================================ */
/* Titles: one line, cut with a soft fade when too long; the scrolling text never jumps
   (the inner span is always inline-block, so starting the scroll changes nothing else) */
.tile .t { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.tile .t .mq { display: inline-block; vertical-align: top; will-change: transform; }
.tile .t.over { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.6rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 1.6rem), transparent); }
.tile .t.run { -webkit-mask-image: linear-gradient(to right, transparent, #000 .8rem, #000 calc(100% - .8rem), transparent); mask-image: linear-gradient(to right, transparent, #000 .8rem, #000 calc(100% - .8rem), transparent); }
.tile .t.run .mq { animation: marquee var(--dur, 4s) ease-in-out 2 alternate; }

/* Kal's wave: the tentacle swings from where it meets his head */
.kal-wave .kal-waver { transform-box: fill-box; transform-origin: 10% 0%; animation: kal-wave 1.2s ease-in-out infinite; }
@keyframes kal-wave { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-24deg); } }

/* Stars: hovering previews the rating (lit up to the one under the pointer) without
   flashing circles, glows switching on and off, or buttons nudging up */
.star, .star:hover { background: none; transform: none; box-shadow: none; filter: none; transition: color .12s; }
.star.on { filter: none; }
.star svg { transition: transform .12s; }
.rate .star:hover svg { transform: scale(1.12); }
.rate:hover .star { color: rgba(255, 255, 255, .22); }
.rate:hover .star:hover, .rate:hover .star:has(~ .star:hover) { color: var(--warn); }

/* Recommendation tiles: same height, Add buttons on one line whatever the reason's length */
.shelf.recs > .tile { display: flex; flex-direction: column; }
.shelf.recs .why { min-height: 2.6em; }
.tile.rec.lib { position: relative; }
#recs-refresh.busy .btn-ico { animation: spin 1s linear infinite; }
.sub.tuned b { color: var(--text); font-weight: 600; white-space: nowrap; }
.shelf.recs .tile-actions { margin-top: auto; padding-top: .55rem; }

/* Stats: the four numbers on one line even when a label wraps */
.kpi { justify-content: space-between; }
.kpi .n { order: 0; } .kpi .l { order: 1; min-height: 2.8em; display: flex; align-items: flex-end; }

/* The little symbol after the greeting sits on the text line, not above it */
.hello-kao { font-size: .42em; vertical-align: middle; position: relative; top: -.1em; }

/* Song lists: every row keeps the same columns (stars, send, plays icon, length) */
.tracklist li { min-height: 3.3rem; }
.tracklist .pl { flex: none; width: 1.3rem; height: 1.3rem; color: var(--faint); display: grid; place-items: center; }
.tracklist .pl svg { width: 1rem; height: 1rem; }
.tracklist .dur { min-width: 2.7rem; text-align: right; }
@media (max-width: 700px) { .tracklist .pl { display: none; } }
.tracklist .plays { display: none; }

/* Lines of small text: one height, so rows and tiles stay level */
.tile .s, .tile .by { line-height: 1.35; min-height: 1.35em; }
.list .t, .tracklist .t { line-height: 1.35; }

/* Upload your own picture: the first circle in the picker */
.avatar-pick.upload { display: grid; place-items: center; cursor: pointer; margin: 0; background: var(--surface-1); box-shadow: inset 0 0 0 2px var(--line-2); border-radius: 50%; }
.avatar-pick.upload .plus { font-family: var(--display); font-size: 1.6rem; font-weight: 900; color: var(--accent-hi); line-height: 1; }
.avatar-pick.upload:hover { box-shadow: inset 0 0 0 2px var(--accent-hi); }
.avatar-pick.upload:focus-within { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.avatar-pick.upload.busy .plus { width: 1.3rem; height: 1.3rem; font-size: 0; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--accent-hi); animation: spin 1s linear infinite; }

/* What's new, laid out like Discord's changelog: a banner for the newest release, then
   each release split into coloured sections (new, improved, fixed, security) */
.changelog { max-width: 46rem; margin: 1.5rem auto 0; display: grid; gap: 1.2rem; }
.cl-release { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.5rem 1.1rem; }
.cl-release.latest { padding-top: 0; overflow: hidden; }
.cl-banner { display: flex; align-items: center; gap: 1.2rem; margin: 0 -1.5rem 1.1rem; padding: 1.4rem 1.5rem;
  background: radial-gradient(90% 140% at 0% 0%, rgba(167, 123, 255, .55), transparent 60%), linear-gradient(135deg, #2b1a55, #3a1650 60%, #14233d); }
.cl-banner .kal { width: 5.5rem; }
.cl-banner h1 { font-size: clamp(2rem, 1.6rem + 1.5vw, 2.8rem); margin: 0; }
.cl-kicker { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-hi); }
.cl-date { color: var(--muted); font-size: .9rem; font-weight: 600; }
.cl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.cl-head h2 { margin: 0; font-size: 1.35rem; }
.cl-intro { color: var(--muted); margin: 0 0 .8rem; }
.cl-section { margin-top: .9rem; }
.cl-section h3 { display: flex; align-items: center; gap: .7rem; margin: 0 0 .5rem; font-family: var(--display); font-size: .78rem; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cl, var(--accent-hi)); }
.cl-section h3::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .45; }
.cl-section.new { --cl: #6fe3a5; } .cl-section.better { --cl: #b69bff; } .cl-section.fixed { --cl: #ff8fa3; } .cl-section.security { --cl: #ffc46b; }
.cl-section.breaking { --cl: #ff9a6b; } .cl-section.maintenance { --cl: #938aad; }
.cl-section ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.cl-section li { position: relative; padding-left: 1.1rem; line-height: 1.55; }
.cl-section li::before { content: ""; position: absolute; left: .1rem; top: .62em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--cl); }
.cl-section li b { color: #fff; }
.cl-section li code { font-size: .85em; }

/* Stats: one screen on computers (numbers, then chart + artists + the rest in a grid) */
.stats-page { padding-top: 1.2rem; }
.stats-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .4rem 1.5rem; margin-bottom: .9rem; }
.stats-top h1 { margin: 0; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); }
.stats-top .eyebrow { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 800; }
.stats-top .summary-line { margin: 0 0 .3rem; }
.kpis.compact { margin-bottom: 1rem; }
.kpis.compact .kpi { min-height: 5.6rem; padding: .8rem 1rem; }
.kpis.compact .kpi .n { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
.kpis.compact .kpi .l { min-height: 0; font-size: .85rem; }
.stats-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.stats-grid .card { margin: 0; padding: 1rem 1.2rem; }
.stats-grid h2 { font-size: 1.1rem; margin-bottom: .6rem; }
.stats-grid .card-head { margin-bottom: .6rem; } .stats-grid .card-head h2 { margin: 0; }
.stats-grid .chart { height: 8.5rem; }
.stats-grid .rank li { padding: .3rem 0; }
.stats-grid .rank .av { width: 2.2rem; height: 2.2rem; }
.stats-grid .big { font-size: 1.5rem; }
@media (min-width: 1100px) {
  .stats-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .stats-grid .chart-card { grid-column: 1; grid-row: 1 / span 2; }
  .stats-grid .artists-card { grid-column: 2; grid-row: 1 / span 2; }
}

/* You: Sign out beside "View your profile" */
.profile-head .form-actions { align-items: center; }
.signout-form { margin: 0; }

/* Privacy tab */
.privacy-hero { border-color: var(--line-2); }
.privacy-hero.on { border-color: rgba(255, 196, 107, .55); background: linear-gradient(135deg, rgba(255, 196, 107, .1), transparent 60%), var(--glass); }
.switch.big b { font-size: 1.05rem; }
.radio-cards { display: grid; gap: .5rem; }
.radio-card { display: flex; gap: .8rem; align-items: flex-start; margin: 0; padding: .8rem .9rem; border-radius: .9rem; border: 1px solid var(--line); background: var(--surface-1); cursor: pointer; font-weight: 500; }
.radio-card:has(input:checked) { border-color: var(--accent-hi); background: rgba(167, 123, 255, .12); }
.radio-card.disabled { opacity: .55; cursor: default; }
.radio-card input { -webkit-appearance: none; appearance: none; width: 1.2rem; height: 1.2rem; min-height: 0; padding: 0; margin: .15rem 0 0; flex: none; border-radius: 50%; border: 2px solid var(--line-2); background: none; }
.radio-card input:checked { border: 6px solid var(--accent-hi); box-shadow: none; }
.radio-card b { display: block; } .radio-card small { display: block; color: var(--muted); font-size: .88rem; }
.data-list { margin: 0 0 .8rem; padding-left: 1.1rem; display: grid; gap: .35rem; color: var(--muted); }
.data-list b { color: var(--text); }

/* Picture and backdrop pickers */
.avatar-groups .sub-h { margin: .9rem 0 .45rem; }
.avatar-choices.wide { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
.avatar-choices.wide .avatar-pick { aspect-ratio: 3 / 1; border-radius: .6rem; }
.avatar-choices.wide .avatar-pick.upload { border-radius: .6rem; }
.banner-preview { aspect-ratio: 3 / 1; border-radius: .8rem; overflow: hidden; margin: .2rem 0 .6rem; max-height: 9rem; width: 100%; }
.banner-preview img { width: 100%; height: 100%; object-fit: cover; }

/* Crop dialog */
.crop-box { position: relative; overflow: hidden; width: 100%; max-width: 22rem; aspect-ratio: 1; margin: .6rem auto; border-radius: .9rem;
  background: #0b0913; touch-action: none; cursor: grab; user-select: none; }
.crop-box.crop-wide { max-width: none; aspect-ratio: 3 / 1; }
.crop-box:active { cursor: grabbing; }
.crop-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(9, 7, 15, .55); outline: 2px solid rgba(255, 255, 255, .7); outline-offset: -2px; pointer-events: none; }
.crop-zoom-row { display: flex; align-items: center; gap: .8rem; margin: .4rem 0 0; font-weight: 700; }
.crop-zoom { flex: 1; min-height: 0; padding: 0; height: .4rem; border: 0; accent-color: var(--accent-hi); -webkit-appearance: auto; appearance: auto; background: none; }

/* Profile backdrop */
.profile-hero.has-banner { padding-top: 0; }
.profile-banner { height: clamp(8rem, 18vw, 14rem); margin: 1rem 0 0; border-radius: var(--radius); overflow: hidden; }
.profile-banner img { width: 100%; height: 100%; object-fit: cover; }
/* only the picture overlaps the backdrop; the name sits below it, on the page */
.profile-hero.has-banner .profile-head { position: relative; padding-left: 1.2rem; align-items: flex-start; }
.profile-hero.has-banner .profile-head > div { padding-top: .9rem; }
.profile-hero.has-banner .avatar { border: 4px solid var(--bg); margin-top: -3.4rem; flex: none; }
.person-cover.plain .gen { filter: none; transform: none; opacity: .75; }

/* Hide one of your own things: the eye (crossed out when hidden) */
.act-hide .eye-slash { display: none; }
.act-hide[aria-pressed="true"] .eye-slash { display: inline; }
.act-hide[aria-pressed="true"] { color: var(--warn); }
.tile > .act-hide { position: absolute; top: .45rem; left: .45rem; z-index: 2; width: 2rem; height: 2rem; background: rgba(9, 7, 15, .65); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.is-hidden .cover img, .is-hidden > .art, .is-hidden .meta { opacity: .45; }
.list li.is-hidden .t::after, .tile.is-hidden .t::after { content: " · hidden"; color: var(--warn); font-weight: 600; font-size: .8em; }
.switch small { line-height: 1.45; } .switch.big small { margin-top: .2rem; }

/* === 6.0 ============================================================================================= */
.gap-bottom { margin-bottom: 1.4rem; }
html.js .js-hide { display: none; }
.spin.sm { display: inline-block; width: .9rem; height: .9rem; border-width: 2px; vertical-align: -.12em; margin-right: .35rem; }
.dot.run { background: var(--blue); box-shadow: 0 0 10px rgba(143, 211, 255, .8); animation: pulse 1.4s ease-in-out infinite; }
.dot.wait { background: var(--faint); }
.dot.err { background: var(--err); box-shadow: 0 0 10px rgba(255, 154, 168, .6); }
@keyframes pulse { 50% { opacity: .35; } }
.btn-pair { display: inline-flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
button.danger-quiet:hover { color: var(--err); }

/* Stars: an explicit "remove my rating" (tapping the same star no longer clears it) */
.rate .unrate { min-height: 0; width: 1.5rem; height: 1.5rem; padding: .2rem; margin-left: .15rem; align-self: center; border-radius: 50%;
  background: none; box-shadow: none; color: var(--faint); opacity: .75; }
.rate .unrate:hover { color: var(--err); background: var(--surface-2); transform: none; opacity: 1; }
.rate .unrate[hidden] { display: inline-block; visibility: hidden; }
.rate .unrate svg { width: 100%; height: 100%; }
@media (max-width: 520px) { .tracklist .rate .unrate { width: 1.2rem; height: 1.2rem; padding: .1rem; } }

/* --- Settings: category menu + grouped rows ---------------------------------------------------------- */
.settings { max-width: 70rem; margin: 0 auto; }
.set-head { display: flex; align-items: center; gap: 1.1rem; padding: 1.4rem 0 1rem; flex-wrap: wrap; }
.set-head .avatar { width: 4.6rem; height: 4.6rem; font-size: 1.9rem; }
.set-who { flex: 1 1 12rem; min-width: 0; }
.set-who h1 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.set-who .lede { margin: .1rem 0 0; color: var(--muted); }
.set-who .eyebrow { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 800; }
.set-layout { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.set-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .55rem 0;
  margin: 0 calc(-1 * var(--gutter)); padding-inline: var(--gutter); background: linear-gradient(var(--bg) 70%, transparent); }
.set-nav::-webkit-scrollbar { display: none; }
@media (max-width: 1023px) {   /* below the phone header, and a fade at the edge says "scrolls" (6.5.1) */
  .set-nav { top: calc(3.6rem + env(safe-area-inset-top));
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent); }
  .set-nav a:last-child { margin-right: 1.6rem; }
}
.set-nav a { display: flex; align-items: center; gap: .45rem; flex: none; padding: .45rem .85rem; border-radius: 999px; background: var(--surface-2);
  color: var(--muted); font-weight: 700; font-size: .92rem; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
.set-nav a svg { width: 1.1rem; height: 1.1rem; flex: none; }
.set-nav a small { display: none; }
.set-nav a.on { color: var(--on-accent); background: var(--accent-hi); box-shadow: none; }
@media (min-width: 1024px) {
  .set-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 2.2rem; }
  .set-nav { top: 1rem; flex-direction: column; gap: .15rem; margin: 0; padding: 0; background: none; overflow: visible; }
  .set-nav a { border-radius: .8rem; background: none; box-shadow: none; padding: .55rem .7rem; font-size: .95rem; align-items: flex-start; }
  .set-nav a svg { margin-top: .15rem; }
  .set-nav a b { display: block; color: var(--text); }
  .set-nav a small { display: block; font-weight: 500; font-size: .8rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11.5rem; }
  .set-nav a:hover { background: var(--surface-2); }
  .set-nav a.on { background: var(--surface-3); color: var(--text); box-shadow: inset 3px 0 0 var(--accent-hi); }
  .set-nav a.on small { color: var(--muted); }
}
.set-sec { scroll-margin-top: 4rem; padding-bottom: .6rem; }
.set-sec > h2 { font-size: 1.35rem; margin: .4rem 0 .7rem; }
.set-intro { color: var(--muted); font-size: .92rem; margin: -.3rem 0 .8rem; max-width: 44rem; }
.set-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); font-weight: 800; margin: 1.3rem 0 .45rem .2rem; scroll-margin-top: 4rem; }
.set-group { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 1rem; overflow: hidden; }
.set-group.is-private { border-color: rgba(255, 211, 138, .45); box-shadow: 0 0 0 1px rgba(255, 211, 138, .15), 0 0 28px rgba(255, 211, 138, .08); }
.set-row { display: flex; align-items: center; gap: .6rem 1.2rem; padding: .85rem 1.1rem; border-top: 1px solid var(--line); min-width: 0; flex-wrap: wrap; scroll-margin-top: 4rem; margin: 0; }
.set-group > .set-row:first-child { border-top: 0; }
.set-label { flex: 1 1 16rem; min-width: 0; }
.set-label b { display: block; font-weight: 700; }
.set-label small { display: block; color: var(--muted); font-size: .86rem; line-height: 1.4; margin-top: .1rem; overflow-wrap: anywhere; }
.set-ctl { display: flex; align-items: center; gap: .5rem; flex: 0 1 auto; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.set-ctl form { margin: 0; }
.set-ctl .inline input { width: min(15rem, 60vw); }
.set-value { color: var(--muted); font-weight: 700; }
.set-status { font-size: .82rem; font-weight: 800; padding: .15rem .6rem; border-radius: 999px; }
.set-status.ok { color: var(--ok); background: var(--ok-bg); }
.set-toggle { cursor: pointer; }
.set-toggle:hover { background: var(--surface-1); }
.set-toggle .switch { margin: 0; }
.set-stack { display: block; }
.set-stack .set-label { margin-bottom: .7rem; }
.set-fold { display: block; padding: 0; }
.set-fold > summary { display: flex; align-items: center; gap: .6rem 1.2rem; padding: .85rem 1.1rem; cursor: pointer; list-style: none; flex-wrap: wrap; }
.set-fold > summary::-webkit-details-marker { display: none; }
.set-fold > summary:hover { background: var(--surface-1); }
.set-fold[open] > summary .button { background: var(--surface-3); }
.set-fold > :not(summary) { margin-left: 1.1rem; margin-right: 1.1rem; }
.set-fold > :last-child { margin-bottom: 1rem; }
.set-form { max-width: 26rem; }
.device-row .art { width: 2.4rem; height: 2.4rem; border-radius: .6rem; display: grid; place-items: center; font-weight: 900; color: #fff; flex: none; }
.device-row .set-label { flex-basis: 10rem; }
.danger-zone { border-color: rgba(255, 154, 168, .22); }
.set-row .bigcode { margin: 0; font-size: 1.2rem; }
.welcome-privacy { text-align: left; display: grid; gap: 1rem; max-width: 34rem; margin: 0 auto; }
.welcome-switches { margin: 0; }

/* --- Playlists ------------------------------------------------------------------------------------- */
.pl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.pl-card { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .5rem 1rem; align-items: center; padding: .9rem; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--line); }
.pl-card[data-live] { border-color: rgba(143, 211, 255, .35); }
.pl-art { width: 5.2rem; height: 5.2rem; border-radius: .7rem; overflow: hidden; display: grid; place-items: center; color: rgba(255, 255, 255, .9); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.pl-art svg { width: 2.4rem; height: 2.4rem; }
.pl-art img { width: 100%; height: 100%; object-fit: cover; }
.pl-art.mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pl-body { min-width: 0; }
.pl-title { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.pl-title b { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pl-status { margin-top: .3rem; color: var(--muted); font-size: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .2rem; }
.pl-status .bar { flex: 1 1 100%; height: .3rem; margin-top: .4rem; border-radius: 999px; background: var(--surface-3); overflow: hidden; display: block; max-width: 22rem; }
.pl-status .bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--accent-hi)); transition: width .6s; }
.pl-where { margin-top: .2rem; color: var(--faint); font-size: .82rem; overflow-wrap: anywhere; }
.pl-where b { color: var(--muted); font-weight: 700; }
.pl-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.pl-actions form { margin: 0; display: flex; gap: .4rem; }
.pl-actions select { min-height: 2.2rem; padding: .2rem .6rem; font-size: .88rem; width: auto; }
.pl-remove { margin-left: auto !important; }
.svc { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 800; padding: .1rem .55rem .1rem .35rem; border-radius: 999px; white-space: nowrap; }
.svc svg { width: .95rem; height: .95rem; }
.svc.spotify { background: rgba(30, 215, 96, .14); color: #8ff0b4; }
.svc.youtube { background: rgba(255, 60, 60, .15); color: #ffaaaa; }
.svc.ytmusic { background: rgba(255, 90, 120, .15); color: #ffb3c4; }
.pl-art.spotify, .pl-card .pl-art:not(.mosaic):has(svg) { background-blend-mode: normal; }
.url-box { position: relative; }
.svc-guess { display: block; min-height: 1.1rem; font-size: .8rem; font-weight: 700; color: var(--faint); margin: -.1rem 0 .3rem; }
.svc-guess.ok { color: var(--ok); } .svc-guess.warn { color: var(--warn); }
.plex-lists li > .pill, .plex-lists li > .svc { flex: none; }
.plex-lists li > .svc { margin-left: auto; }
.plex-lists li > .pill:not(.svc + .pill) { margin-left: auto; }

/* --- Album: songs we don't have yet ---------------------------------------------------------------- */
.album-main { min-width: 0; }
/* Album page: songs missing from the server sit in the tracklist at their place, with Add */
.album-gaps { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .5rem 1.1rem .6rem; margin: 0 .6rem; border-bottom: 1px solid var(--line); }
.album-gaps p { margin: 0; }
.album-gaps .gaps-line { color: var(--muted); font-size: .9rem; min-width: 0; }
.album-gaps .gaps-line b { color: var(--text); }
.album-gaps.complete { border-bottom: 0; padding-bottom: 0; }
.tracklist li.missing .t { color: var(--muted); font-weight: 600; }
.tracklist li.missing .s { color: var(--faint); }
.tracklist li.missing .n { opacity: .6; }
.tracklist li.missing .add-pill { flex: none; }

/* --- Profile ---------------------------------------------------------------------------------------- */
.people-mini.compact { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .2rem .6rem; margin-bottom: .6rem; }
.profile-cards { margin-top: .6rem; }

/* --- Stats: listening, ratings, you on the site ---------------------------------------------------- */
.stats-more { margin-top: 1.8rem; }
.stats-more > .card-head h2 { font-size: 1.35rem; }
.mini-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .mini-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mini-kpis > div { padding: .8rem 1rem; border-radius: 1rem; background: var(--surface-2); border: 1px solid var(--line); }
.mini-kpis b { display: block; font-family: var(--display); font-size: 1.7rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mini-kpis span { color: var(--muted); font-size: .85rem; }
.mini-kpis.tight { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.mini-kpis.tight b { font-size: 1.35rem; }
.mini-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: .5rem; }
.mini-kpis.three b { font-size: 1.35rem; }
@media (max-width: 480px) { .mini-kpis.three { gap: .45rem; } .mini-kpis.three > div { padding: .65rem .7rem; } .mini-kpis.three b { font-size: 1.1rem; } }
.time-note { margin: 0 0 1.6rem; }
.stats-grid.two { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .stats-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; }
  .stats-grid.two .chart-card { grid-column: auto; grid-row: auto; } }
.chart.hours { grid-template-columns: repeat(24, minmax(0, 1fr)); gap: .2rem; height: 6rem; }
.chart.hours .fill { border-radius: .3rem .3rem .1rem .1rem; }
.chart-labels.hours { display: flex; justify-content: space-between; }
.weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; margin-top: .9rem; font-size: .75rem; color: var(--faint); text-align: center; }
.weekdays i { display: block; height: .45rem; border-radius: 999px; margin-bottom: .3rem; background: linear-gradient(90deg, var(--accent-lo), var(--pink)) left / var(--v) 100% no-repeat, var(--surface-3); }
.rank .av.sq { border-radius: .45rem; }
.rank .name small { display: block; color: var(--muted); font-weight: 500; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
.album-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.album-mini a { display: grid; gap: .15rem; color: var(--text); text-decoration: none; min-width: 0; }
.album-mini img, .album-mini .gen { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .6rem; display: grid; place-items: center; font-weight: 900; color: #fff; margin-bottom: .3rem; }
.album-mini b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-mini small { color: var(--muted); font-size: .8rem; }
.bars { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.bars li { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) 2rem; gap: .6rem; align-items: center; }
.bars .lbl { color: var(--warn); letter-spacing: .05em; font-size: .85rem; }
.bars .bar { height: .55rem; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bars .bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb45e, var(--warn)); border-radius: 999px; }
.bars .muted { text-align: right; font-variant-numeric: tabular-nums; }
.set-label small { font-weight: 400; }
.set-label small b { display: inline; font-weight: 800; }
.svc-guess { margin: .3rem 0 0; }
.svc-guess:empty { display: none; }
.album-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 520px) { .album-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plex-lists li { padding-right: 1.2rem; }
@media (max-width: 1023px) { .set-nav { top: var(--top-h, 3.4rem); } }
.tracklist li.missing .t { white-space: normal; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 600px) { .album-gaps { margin: 0 .2rem; padding: .5rem .6rem .7rem; } }
.pl-status { display: block; }
.pl-status .bar { display: block; }

/* === 6.2: charm ======================================================================================= */
/* Kal's new moods: party (hat + confetti), love (heart eyes), dizzy (errors), cool (shades), confused (?) */
.kal .kal-hearts, .kal .kal-spirals, .kal .kal-shades, .kal .kal-hat, .kal .kal-confetti, .kal .kal-q { display: none; }
.kal-party .kal-hat, .kal-party .kal-confetti { display: inline; }
.kal-party .kal-confetti > * { animation: kal-confetti 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.kal-party .kal-confetti > :nth-child(2n) { animation-delay: -1.2s; }
.kal-party .kal-bob { animation: kal-jump .9s ease-in-out infinite; }
@keyframes kal-confetti { 50% { transform: translateY(-8px) rotate(40deg); } }
.kal-love .kal-open, .kal-dizzy .kal-open, .kal-cool .kal-open { display: none; }
.kal-love .kal-hearts { display: inline; animation: kal-beat 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes kal-beat { 50% { transform: scale(1.12); } }
.kal-dizzy .kal-spirals { display: inline; }
.kal-dizzy .kal-spirals path { animation: kal-spin 1.6s linear infinite; transform-box: fill-box; transform-origin: center; }
.kal-dizzy .kal-smile { display: none; } .kal-dizzy .kal-frown { display: inline; }
.kal-dizzy .kal-bob { animation: kal-wobble 2s ease-in-out infinite; }
@keyframes kal-spin { to { transform: rotate(360deg); } }
@keyframes kal-wobble { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.kal-cool .kal-shades { display: inline; }
.kal-confused .kal-q { display: inline; animation: kal-z 2.6s ease-in-out infinite; }
.kal.poked .kal-bob { animation: kal-jump .45s ease-out 1; }
.kal.spun { animation: kal-spin .9s ease-in-out 1; }
svg.kal { cursor: pointer; }   /* build 16: every Kal can be poked (CSS, no page watcher) */
@media (prefers-reduced-motion: reduce) { .kal.spun { animation: none; } }

/* Stage colours: alpha = warm apricot, beta = sky blue, release = mint green (tinted to sit on the night purple) */
:root { --alpha: #ffb07a; --alpha-bg: rgba(255, 150, 90, .15); --beta: #8cc8ff; --beta-bg: rgba(110, 180, 255, .15);
  --internal: #ff8fcf; --internal-bg: rgba(255, 110, 190, .15);   /* build 30: pink, so Internal never looks like Beta */
  --release: #86efbf; --release-bg: rgba(110, 230, 170, .14); }
.stage-pill { display: inline-block; font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: .08rem .45rem; border-radius: 999px; vertical-align: 2px; }
.stage-pill.alpha { color: var(--alpha); background: var(--alpha-bg); box-shadow: inset 0 0 0 1px rgba(255, 176, 122, .35); }
.stage-pill.internal { color: var(--internal); background: var(--internal-bg); box-shadow: inset 0 0 0 1px rgba(255, 143, 207, .45); }
.stage-pill.beta { color: var(--beta); background: var(--beta-bg); box-shadow: inset 0 0 0 1px rgba(140, 200, 255, .35); }
.stage-pill.release { color: var(--release); background: var(--release-bg); box-shadow: inset 0 0 0 1px rgba(134, 239, 191, .35); }

/* Badges */
.badge-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .6rem .18rem .4rem; border-radius: 999px; font-size: .78rem; font-weight: 800;
  color: var(--bc, var(--accent-hi)); background: var(--bb, var(--info-bg)); box-shadow: inset 0 0 0 1px var(--bl, rgba(195, 164, 255, .3)); white-space: nowrap; vertical-align: middle; }
.badge-chip svg { width: 1rem; height: 1rem; flex: none; }
.badge-chip.big { font-size: .9rem; padding: .35rem .85rem .35rem .5rem; }
.badge-chip.big svg { width: 1.3rem; height: 1.3rem; }
.badge-chip.locked { --bc: var(--faint); --bb: var(--surface-2); --bl: var(--line); filter: grayscale(1); opacity: .75; }
.c-dev { --bc: #f0b6ff; --bb: linear-gradient(135deg, rgba(167, 123, 255, .28), rgba(243, 168, 255, .22)); --bl: rgba(243, 168, 255, .5); box-shadow: inset 0 0 0 1px var(--bl), 0 0 14px rgba(243, 168, 255, .25); }
.c-alpha { --bc: var(--alpha); --bb: var(--alpha-bg); --bl: rgba(255, 176, 122, .4); }
.c-beta { --bc: var(--beta); --bb: var(--beta-bg); --bl: rgba(140, 200, 255, .4); }
.c-release { --bc: var(--release); --bb: var(--release-bg); --bl: rgba(134, 239, 191, .4); }
.c-violet { --bc: var(--accent-hi); --bb: rgba(167, 123, 255, .16); --bl: rgba(195, 164, 255, .35); }
.c-pink { --bc: var(--pink); --bb: rgba(243, 168, 255, .14); --bl: rgba(243, 168, 255, .35); }
.c-gold { --bc: var(--warn); --bb: rgba(255, 211, 138, .13); --bl: rgba(255, 211, 138, .35); }
.c-blue { --bc: var(--blue); --bb: rgba(143, 211, 255, .13); --bl: rgba(143, 211, 255, .35); }
.c-mint { --bc: var(--mint); --bb: rgba(159, 243, 214, .12); --bl: rgba(159, 243, 214, .32); }
.hero-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin: .45rem 0 .1rem; }
.badge-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }
.badge-grid li { display: grid; gap: .45rem; justify-items: start; padding: .8rem .9rem; border-radius: 1rem; background: var(--glass); border: 1px solid var(--line); }
.badge-grid small { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.locked-badges { margin-top: .9rem; }
.locked-badges > summary { cursor: pointer; color: var(--muted); font-weight: 700; margin-bottom: .7rem; }
.badge-tile { background: linear-gradient(135deg, #ffb07a, #f3a8ff); }

/* Fixes: "Added by" picture and name on one line; tiny faces in quiet places */
.added-by { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; }
.added-by a { line-height: 1.5rem; }
.foot-kao { color: var(--faint); opacity: .6; margin-left: .4rem; font-size: .85em; }
.toast .kao-t { opacity: .75; margin-left: .35rem; }

/* === 6.3 ============================================================================================ */
/* The stage tag sits like a superscript after the name (it used to push into the bell). */
.rail-top { gap: .5rem; min-width: 0; }
.rail-top .wordmark { min-width: 0; flex: 0 1 auto; gap: .6rem; }
.wordmark .stage-pill { background: var(--alpha-bg); -webkit-background-clip: border-box; background-clip: border-box;
  font-size: .5rem; padding: .05rem .32rem; align-self: flex-start; margin: .15rem 0 0 -.35rem; letter-spacing: .1em; flex: none; }
.wordmark .stage-pill.alpha { color: var(--alpha); background: var(--alpha-bg); }
.wordmark .stage-pill.internal { color: var(--internal); background: var(--internal-bg); }
.wordmark .stage-pill.beta { color: var(--beta); background: var(--beta-bg); }
.wordmark .stage-pill.release { color: var(--release); background: var(--release-bg); }
.rail-top .bell { flex: none; width: 2rem; height: 2rem; margin-right: -.6rem; }
/* Names shrink to fit (app.js fitText); headings also break very long words as a last resort. */
h1[data-fit] { overflow-wrap: normal; max-width: 100%; }
b[data-fit], span[data-fit] { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-head > div, .set-who, .home-hero, .welcome-step { min-width: 0; max-width: 100%; }
.rail nav a.dev-link { color: #f0b6ff; }
.rail nav a.dev-link:hover { background: rgba(243, 168, 255, .1); }
.dev-tag { margin-left: auto; font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: .05rem .4rem; border-radius: 999px;
  color: #f0b6ff; background: rgba(243, 168, 255, .14); box-shadow: inset 0 0 0 1px rgba(243, 168, 255, .35); }
/* Shy Kal: his two outer tentacles are the ones over his eyes, so they leave the bottom row. */
.kal-shy .kal-tents .t1, .kal-shy .kal-tents .t5 { display: none; }

/* === 6.4 ============================================================================================ */
/* Empty states: sleepy Kal (the box version is kept in ~/admin/brand/unused/). */
.kal-empty .kal { width: 7rem; }

/* The poke easter egg: while he spins, his eyes spin too (and stay dizzy a moment). */
.kal.dizzy-now .kal-open { display: none; }
.kal.dizzy-now .kal-spirals { display: inline; }
.kal.dizzy-now .kal-spirals path { animation: kal-spin .5s linear infinite; transform-box: fill-box; transform-origin: center; }
.kal.dizzy-now .kal-hands, .kal.dizzy-now .kal-hearts, .kal.dizzy-now .kal-shades { display: none; }

/* The artist picker's Next button: the step's slide-in left a transform behind, which pinned
   the "fixed" bar to the bottom of the long list instead of the screen. Fade only there. */
.welcome-step.wide { animation: fade-in .35s ease both; }
@keyframes fade-in { from { opacity: 0; } }
.welcome-step.wide #taste-form { padding-bottom: 5rem; }

/* End of the welcome tour: one burst of confetti, then it's gone. */
.kal-party .kal-confetti > * { animation-iteration-count: 2; }
.kal-party .kal-bob { animation-iteration-count: 2; }
.confetti-burst { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti-burst i { position: absolute; left: var(--x0); top: var(--y0); width: var(--w); height: var(--h); border-radius: 2px; background: var(--c);
  opacity: 0; will-change: transform, opacity; animation: confetti-fly var(--d) cubic-bezier(.15, .6, .35, 1) var(--delay) forwards; }
@keyframes confetti-fly {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .confetti-burst { display: none; } }

/* Phones: album rows on two lines, so titles get the width (6.5.1) */
@media (max-width: 520px) {
  .tracks .tracklist li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; column-gap: .7rem; row-gap: .15rem; align-items: center; }
  .tracks .tracklist li > .n { grid-row: 1 / span 2; }
  .tracks .tracklist li > .meta { grid-column: 2; grid-row: 1; }
  .tracks .tracklist li > .dur { grid-column: 3; grid-row: 1; min-width: 0; }
  .tracks .tracklist li > .rate { grid-column: 2 / 4; grid-row: 2; justify-self: start; margin-left: -.25rem; }
  .tracks .tracklist li > .icon-btn, .tracks .tracklist li > .pl { display: none; }
  .tracks .tracklist li.missing > .add-pill { grid-column: 3; grid-row: 1 / span 2; }
  .tracks .tracklist li.missing > .dur { display: none; }
  .tracks .tracklist .rate .star { width: 1.75rem; height: 1.75rem; padding: .22rem; }
}
/* Phones: library song rows on two lines too (title + length, then stars) */
@media (max-width: 520px) {
  .list li:has(> .rate) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .8rem; row-gap: .1rem; }
  .list li:has(> .rate) > .art, .list li:has(> .rate) > .art-wrap { grid-row: 1 / span 2; }
  .list li:has(> .rate) > .meta { grid-column: 2; grid-row: 1; }
  .list li:has(> .rate) > .dur { grid-column: 3; grid-row: 1; align-self: start; padding-top: .15rem; }
  .list li:has(> .rate) > .rate { grid-column: 2 / 4; grid-row: 2; justify-self: start; margin-left: -.25rem; }
  .list li:has(> .rate) > .icon-btn { display: none; }
  .list li:has(> .rate) .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Phones: every other week label on Stats, and "Skip the tour" on one line */
@media (max-width: 520px) { .chart-labels .odd-week { visibility: hidden; } }
.welcome .skip, a.skip { white-space: nowrap; flex: none; }
/* Phones (6.5.1): library filters on one line, profile head stacked, picker bar tidy */
@media (max-width: 520px) {
  .lib-bar .filters { flex-wrap: nowrap; gap: .35rem; width: 100%; max-width: 100%; }
  .lib-bar .filters button { padding: 0 .4rem; min-height: 2.4rem; font-size: .88rem; flex: 1 1 0; min-width: 0; white-space: nowrap; }
  .lib-bar .filters button small { margin-left: .2rem; }
  .profile-head { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .profile-head .avatar { width: 5.2rem; height: 5.2rem; font-size: 2.1rem; }
  .sticky-save { gap: .6rem; padding-inline: var(--gutter); }
  .sticky-save #taste-count { flex: 1 1 auto; min-width: 0; font-size: .85rem; line-height: 1.25; }
  .sticky-save .button, .sticky-save button { flex: none; padding-inline: 1rem; }
}
@media (max-width: 520px) { .list li:has(> .rate) .rate .star { width: 1.75rem; height: 1.75rem; padding: .22rem; } }
/* Sidebar top: logo, name, stage tag and bell fit side by side (6.6.0) */
.rail-top .wordmark { gap: .35rem; }
.rail-top .wordmark img { width: 1.85rem; height: 1.85rem; }
.rail-top .wordmark > span:not(.stage-pill) { font-size: 1.28rem; }
.rail-top .wordmark .stage-pill { margin-left: -.35rem; letter-spacing: .03em; padding: .05rem .26rem; font-size: .48rem; }
/* Album page: a song we have, filed on another album (6.7) */
.tracklist li.elsewhere .t { color: var(--text); font-weight: 600; text-decoration: none; }
.tracklist li.elsewhere .s a { color: var(--accent-hi); }
.tracklist li.elsewhere .n { opacity: .8; }

/* ===== 7.0 ================================================================================== */
/* Previews: one button look everywhere. The ring fills up over the 30 seconds (--p, 0..1). */
.preview-btn { position: relative; }
.pv-ico { display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; flex: none; }
.pv-ico svg { width: 100%; height: 100%; }
.pv-stop { display: none; }
[aria-pressed="true"] > .pv-ico .pv-play { display: none; }
[aria-pressed="true"] > .pv-ico .pv-stop { display: block; }
.preview-btn.loading > .pv-ico, .tn.loading > .pv-ico { animation: pv-pulse 1s ease-in-out infinite; }
@keyframes pv-pulse { 50% { opacity: .35; } }
.preview-btn.playing::after, .tn.playing::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: conic-gradient(var(--accent-hi) calc(var(--p, 0) * 360deg), rgba(255, 255, 255, .12) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
.preview-btn.small.secondary.playing::after { border-radius: 999px; background: none; }
.preview-btn.small.secondary.playing { box-shadow: inset 0 0 0 1px var(--accent-hi); color: var(--accent-hi); }
/* On a cover (recommendations) and on a list row's picture (search, library songs) */
.pv-float, .pv-art { position: absolute; z-index: 2; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: rgba(9, 7, 15, .66); box-shadow: 0 2px 10px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pv-float { left: .4rem; top: .4rem; width: 2.2rem; height: 2.2rem; }   /* top left: "Not for me" is top right */
.pv-float .pv-ico { width: 1.1rem; height: 1.1rem; }
.pv-float:hover, .pv-art:hover { transform: none; filter: none; background: rgba(9, 7, 15, .85); box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.pv-float.playing, .pv-art.playing { background: rgba(125, 77, 255, .75); }
.art-wrap { position: relative; flex: none; line-height: 0; }
.art-wrap > .art { display: block; }
/* Build 18: the whole picture is the preview button (a big, easy target); the rest of the row opens the song. */
.pv-art { inset: 0; width: 100%; height: 100%; border-radius: .5rem; background: rgba(9, 7, 15, 0); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .15s; }
.pv-art .pv-ico { width: 1.35rem; height: 1.35rem; opacity: 0; transition: opacity .15s; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .7)); }
.pv-art:hover, li:hover .pv-art { background: rgba(9, 7, 15, .45); box-shadow: none; }
li:hover .pv-art .pv-ico, .pv-art:focus-visible .pv-ico, .pv-art.playing .pv-ico, .pv-art.loading .pv-ico { opacity: 1; }
.pv-art.playing, .pv-art.loading { background: rgba(125, 77, 255, .55); }
.pv-art.playing::after { border-radius: .5rem; inset: 3px; }
@media (hover: none) { .pv-art { background: rgba(9, 7, 15, .22); } .pv-art .pv-ico { opacity: .95; } }
.pv-float { width: 2.6rem; height: 2.6rem; }   /* bigger on covers too (build 18) */
.pv-float .pv-ico { width: 1.25rem; height: 1.25rem; }

/* Tracklists: the number is the preview button (play icon on hover; on touch screens always) */
.tracklist .tn { position: relative; width: 1.9rem; height: 1.9rem; min-height: 0; padding: 0; margin: 0 -.15rem 0 0; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: none; box-shadow: none; color: var(--faint); font-weight: 500; font-size: 1rem;
  font-variant-numeric: tabular-nums; text-align: center; }
.tracklist .tn > * { grid-area: 1 / 1; }
.tracklist .tn .pv-ico { opacity: 0; color: var(--text); width: 1rem; height: 1rem; }
.tracklist .tn:hover { transform: none; filter: none; box-shadow: none; background: var(--surface-3); }
.tracklist li:hover .tn .num, .tracklist .tn:focus-visible .num, .tracklist .tn[aria-pressed="true"] .num { opacity: 0; }
.tracklist li:hover .tn .pv-ico, .tracklist .tn:focus-visible .pv-ico, .tracklist .tn[aria-pressed="true"] .pv-ico { opacity: 1; }
.tracklist .tn[aria-pressed="true"] { color: var(--accent-hi); }
.tracklist .tn[aria-pressed="true"] .pv-ico { color: var(--accent-hi); }
@media (hover: none) {
  .tracklist .tn .num { opacity: 0; }
  .tracklist .tn .pv-ico { opacity: .85; color: var(--muted); }
}
.tracklist a.t { color: var(--text); }
.tracklist a.t:hover { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.tracklist li.current { background: rgba(167, 123, 255, .12); box-shadow: inset 3px 0 0 var(--accent-hi); }
.tracklist li.current a.t { color: var(--accent-hi); }
.tracks-head { padding: .6rem 1.1rem .2rem; margin: 0; }
.tracks-head > span { white-space: nowrap; flex: none; }
.tracks-head h2 { font-size: 1.1rem; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracks-head h2 a { color: inherit; font-size: inherit; }
.list .meta a.t, .song-list a.t { color: var(--text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }

/* Album page: Download album sits with Send to… and Pin, same look */
.form-actions .add-pill.small.secondary { min-height: 2.4rem; padding: 0 1rem; font-size: .9rem; }
.form-actions .add-pill.small.secondary .i svg { width: 1.05rem; height: 1.05rem; }

/* Playlists (7.0): the downloader first, then your playlists, then what's in your Plex */
.pl-top { padding: 1.6rem 0 .9rem; }
.pl-top h1 { margin: 0 0 .3rem; }
.pl-top .lede { margin: 0; max-width: 44rem; }
.pl-composer { background: linear-gradient(135deg, rgba(125, 77, 255, .16), rgba(143, 211, 255, .06)), var(--glass); border: 1px solid rgba(167, 123, 255, .3);
  border-radius: var(--radius); padding: 1.1rem 1.2rem 1rem; margin: 0 0 1.8rem; box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, .25); }
.pl-composer form { margin: 0; }
.pl-url-label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; font-weight: 800; margin: 0 0 .45rem; }
.svc-row { display: inline-flex; flex-wrap: wrap; gap: .3rem; font-weight: 800; }
.pl-composer #pl-url { min-height: 3.3rem; font-size: 1.05rem; }
.pl-opts { display: grid; gap: .6rem; margin-top: .7rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
.seg { border: 0; margin: 0; padding: .25rem; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; border-radius: 999px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.seg label { margin: 0; position: relative; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0 .9rem; border-radius: 999px; font-weight: 800; font-size: .92rem;
  color: var(--muted); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.seg input:checked + span { background: var(--text); color: var(--bg); }
.seg input:focus-visible + span { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.pl-when { display: flex; align-items: center; gap: .6rem; margin: 0; font-weight: 700; color: var(--muted); font-size: .92rem; white-space: nowrap; }
.pl-when[hidden] { display: none; }
.pl-when select { width: auto; flex: 1 1 auto; min-height: 2.9rem; }
.pl-name { min-height: 2.9rem; }
.pl-go { width: 100%; }
.pl-mode-hint { margin: .6rem 0 0; }
@media (min-width: 900px) {
  .pl-opts { grid-template-columns: auto auto minmax(10rem, 1fr) auto; }
  .pl-when select { flex: none; min-width: 8rem; }
  .pl-go { width: auto; }
}
.pl-cols { display: grid; gap: 0 1.6rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1150px) { .pl-cols:has(> .pl-plex) { grid-template-columns: minmax(0, 1fr) 21rem; } }
.pl-yours .card-head .filters { margin: 0; }
.pl-list { gap: .6rem; }
.pl-card { grid-template-columns: 4.4rem minmax(0, 1fr); padding: .75rem; gap: .55rem .9rem; align-items: start; }
.pl-art { width: 4.4rem; height: 4.4rem; }
.pl-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .25rem; }
.pl-status { margin-top: .3rem; font-size: .88rem; }
.pl-actions { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .45rem; max-width: none; }
.pl-actions form { min-width: 0; }
.pl-actions .pl-freq select { width: 100%; min-height: 2.4rem; }
.pl-remove { margin-left: 0 !important; }
/* Phones: the daily time gets its own full-width line, Sync now and Remove share the next */
@media (max-width: 599px) {
  .pl-actions { grid-template-columns: 1fr 1fr; }
  .pl-actions .pl-freq { grid-column: 1 / -1; order: -1; }
  .pl-actions form:not(.pl-freq) button { width: 100%; }
}
/* Wider screens: the buttons sit under the playlist's details (not beside them, where they squeezed the text) */
@media (min-width: 600px) {
  .pl-card { grid-template-columns: 4.4rem minmax(0, 1fr); align-items: start; }
  .pl-actions { grid-column: 2; grid-template-columns: auto 12rem auto; justify-content: start; }
}
.pl-times { margin: .9rem 0 0; }
.pl-plex .plex-lists { padding: .5rem .9rem; }
.plex-lists li { padding-right: .65rem; }
.plex-lists .meta { min-width: 0; flex: 1 1 auto; }
.plex-lists .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Visual audit (7.0): footer's little face never breaks onto its own line */
.site-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem .4rem; }
.foot-kao { margin-left: 0; white-space: nowrap; }
/* Visual audit (7.0): "Show all" and similar links in a section head never break over two lines */
.card-head > a, .card-head .head-actions > a { white-space: nowrap; flex: none; }
/* Visual audit (7.0): on the smallest phones the name and its tag make room for the bell */
@media (max-width: 360px) {
  .mobile-top .wordmark { gap: .45rem; font-size: 1.25rem; }
  .mobile-top .wordmark img { width: 2rem; height: 2rem; }
  .mobile-top .wordmark .stage-pill { font-size: .55rem; padding: .05rem .3rem; letter-spacing: .04em; }
}
/* Visual audit (7.0): "Jump back in" on narrow phones: smaller picture, titles may use two lines */
@media (max-width: 400px) {
  .quick { gap: .5rem; }
  .quick-item { gap: .55rem; padding-right: .5rem; }
  .quick-item img, .quick-item .gen { width: 3.1rem; height: 3.1rem; }
  .quick-item .qt b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .88rem; line-height: 1.2; overflow-wrap: anywhere; }
  .quick-item .qt small { font-size: .74rem; }
}

/* ===== 8.0 ================================================================================== */
/* Album, song and artist pages on phones: Play (with Preview or Follow beside it when there is one;
   Download album gets its own row), then the other buttons two by two in even rows; "Report a problem" is a quiet line under them. */
@media (max-width: 600px) {
  .detail-meta .form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .detail-meta .form-actions > * { width: 100%; min-width: 0; justify-content: center; margin: 0; }
  .detail-meta .form-actions > .button:first-child:not(:has(+ .preview-btn, + .act-follow-artist)) { grid-column: 1 / -1; }
  .detail-meta .form-actions > .add-pill { grid-column: 1 / -1; }   /* Download album: its own row */
  .detail-meta .form-actions > .button:first-child { min-height: 2.9rem; }
  .detail-meta .form-actions > button, .detail-meta .form-actions > .add-pill { min-height: 2.6rem; padding: 0 .6rem; font-size: .9rem; white-space: nowrap; }
  .detail-meta .form-actions > button span, .detail-meta .form-actions > .add-pill span { overflow: hidden; text-overflow: ellipsis; }
  .detail-meta .discover-actions > :first-child, .detail-meta .discover-actions > :nth-child(even):last-child { grid-column: 1 / -1; }   /* build 16: like the library pages */
  .detail-meta .discover-actions > :first-child { min-height: 2.9rem; }
  .detail-meta .form-actions > .act-report { grid-column: 1 / -1; min-height: 2rem; background: none; box-shadow: none; color: var(--faint); font-size: .84rem; font-weight: 600; }
}
/* The artist and album names on album and song pages look like links (they are) */
.detail-meta .lede a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(195, 164, 255, .55);
  text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .15s, text-decoration-color .15s; }
.detail-meta .lede a::after { content: " ›"; color: var(--accent-hi); font-weight: 800; }
.detail-meta .lede a:hover { color: var(--accent-hi); text-decoration-color: var(--accent-hi); }

/* Home: a bigger greeting; the search bar stays put on computers (it lines up with the greeting's top) */
.home-hero { align-items: flex-start; }
.home-hero h1 { font-size: clamp(2.05rem, 1.4rem + 2.6vw, 3.45rem); line-height: 1.08; }
@media (min-width: 701px) { .home-search.compact { align-self: flex-start; } }

/* Banners from the admin site, and the Plex reminder */
.banners { display: grid; gap: .5rem; margin: .9rem 0 0; }
.site-banner { display: flex; align-items: center; gap: .7rem; padding: .6rem .6rem .6rem .8rem; border-radius: .9rem;
  background: rgba(143, 211, 255, .1); border: 1px solid rgba(143, 211, 255, .35); color: var(--text); font-size: .93rem; }
.site-banner[hidden] { display: none; }
.site-banner.warn { background: rgba(255, 211, 138, .1); border-color: rgba(255, 211, 138, .45); }
.site-banner.good { background: rgba(143, 240, 196, .09); border-color: rgba(143, 240, 196, .4); }
.site-banner p { margin: 0; flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.site-banner a { font-weight: 800; white-space: nowrap; }
.sb-ico { width: 1.7rem; height: 1.7rem; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: .9rem;
  background: rgba(143, 211, 255, .2); color: var(--blue); }
.site-banner.warn .sb-ico { background: rgba(255, 211, 138, .22); color: var(--warn); }
.site-banner.good .sb-ico { background: rgba(143, 240, 196, .2); color: var(--ok); }
.sb-ico.plex { background: #e5a00d; color: #1f1f1f; }
.sb-ico svg { width: 1rem; height: 1rem; }
.sb-x { flex: none; width: 2rem; height: 2rem; min-height: 0; padding: .45rem; }
.site-banner.plex-nag { background: linear-gradient(135deg, rgba(229, 160, 13, .16), rgba(167, 123, 255, .1)); border-color: rgba(229, 160, 13, .5); }
.plex-nag form { margin: 0; flex: none; }
@media (max-width: 600px) {
  .site-banner.plex-nag { flex-wrap: wrap; }
  .site-banner.plex-nag p { flex: 1 1 calc(100% - 5rem); }
  .site-banner.plex-nag form { flex: 1 1 auto; margin-left: 2.4rem; }
  .site-banner.plex-nag form button { width: 100%; }
}
/* The You tab has a dot while Plex isn't connected */
.tabs a.needs { position: relative; }
.tabs a.needs::after { content: ""; position: absolute; top: .55rem; left: calc(50% + .55rem); width: .55rem; height: .55rem; border-radius: 50%;
  background: #e5a00d; box-shadow: 0 0 0 2px var(--bg), 0 0 8px rgba(229, 160, 13, .8); }

/* Report a bug: a small link where people look for it (side menu foot, page foot, You) */
.linkish { display: inline; min-height: 0; padding: 0; background: none; box-shadow: none; color: inherit; font: inherit; font-weight: inherit;
  text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { transform: none; filter: none; box-shadow: none; color: var(--text); }
.rail-links { display: flex; flex-direction: column; gap: .2rem; }
.rail-links .linkish { align-self: flex-start; font-size: .78rem; color: var(--faint); margin-left: .6rem; }
.site-foot .linkish { color: var(--faint); font-size: inherit; }
.more-list .more-btn { display: flex; justify-content: space-between; width: 100%; min-height: 0; padding: .8rem 1rem; border-radius: 0; background: none; box-shadow: none;
  color: var(--text); font-weight: 700; font-size: 1rem; border-top: 1px solid var(--line); text-align: left; }
.more-list .more-btn:hover { background: var(--surface-2); transform: none; filter: none; box-shadow: none; }
.sheet textarea { margin: .4rem 0 0; }

/* Badges like Discord's: a row of small icons; the line below says what the chosen one is */
.badge-card { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem; }
.badge-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.bdg { width: 2.6rem; height: 2.6rem; min-height: 0; padding: .55rem; border-radius: .75rem; display: grid; place-items: center; box-shadow: none;
  background: var(--bdg-bg, var(--surface-3)); color: var(--bdg, var(--text)); transition: transform .12s, box-shadow .12s; }
.bdg svg { width: 100%; height: 100%; }
.bdg:hover { transform: translateY(-2px); filter: none; box-shadow: none; }
.bdg.on { box-shadow: 0 0 0 2px var(--bdg, var(--accent-hi)), 0 0 14px var(--bdg-bg, transparent); }
.bdg.locked { filter: grayscale(1); opacity: .35; }
.bdg.locked.on { opacity: .6; }
.bdg.c-dev { --bdg: #9ff3d6; --bdg-bg: rgba(159, 243, 214, .16); }
.bdg.c-alpha { --bdg: var(--alpha, #ffb07a); --bdg-bg: rgba(255, 176, 122, .16); }
.bdg.c-beta { --bdg: #8cc8ff; --bdg-bg: rgba(140, 200, 255, .16); }
.bdg.c-release { --bdg: #86efbf; --bdg-bg: rgba(134, 239, 191, .16); }
.bdg.c-gold { --bdg: #ffd38a; --bdg-bg: rgba(255, 211, 138, .15); }
.bdg.c-pink { --bdg: #f3a8ff; --bdg-bg: rgba(243, 168, 255, .15); }
.bdg.c-blue { --bdg: #8fd3ff; --bdg-bg: rgba(143, 211, 255, .15); }
.bdg.c-violet { --bdg: #c3a4ff; --bdg-bg: rgba(195, 164, 255, .16); }
.bdg.c-mint { --bdg: #9ff3d6; --bdg-bg: rgba(159, 243, 214, .15); }
.badge-info { margin: .7rem 0 0; font-size: .9rem; color: var(--muted); min-height: 1.3em; }
.badge-info b { color: var(--text); }

/* Toasts on phones: across the screen above the tab bar (and the download bar), never cut off */
@media (max-width: 600px) {
  .toast { left: .75rem; right: .75rem; max-width: none; transform: translateY(1rem); justify-content: center; text-align: center; flex-wrap: wrap;
    bottom: calc(var(--tabbar) + 5rem + env(safe-area-inset-bottom)); padding: .8rem 1rem; line-height: 1.35; }
  .toast.show { transform: none; }
  .toast .kao-t { white-space: nowrap; }
}

/* Settings: compact lists keep the switch on the title's line, also on phones */
.set-group.compact .set-row { padding: .7rem 1rem; flex-wrap: nowrap; align-items: flex-start; }
.set-group.compact .set-label { flex: 1 1 auto; }
.set-group.compact .set-label small { font-size: .82rem; }
.set-group.compact .set-ctl { flex: none; }
.set-group.compact .set-row:not(.set-toggle) { flex-wrap: wrap; }
.set-group.compact select.pref-select { width: auto; min-height: 2.4rem; padding-block: .2rem; }
.vol-ctl { display: flex; align-items: center; gap: .6rem; }
.vol-ctl input[type=range] { width: min(12rem, 40vw); min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; -webkit-appearance: auto; appearance: auto; accent-color: var(--accent); }
.vol-ctl output { min-width: 2.8rem; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; }
.vol-ctl .pv-test { position: relative; }

/* Share from iPhone */
.ios-steps .steps li { margin-bottom: 1rem; }
.ios-steps .button { margin-bottom: .3rem; }
.copy-line { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.copy-line code { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; padding: .5rem .7rem; border-radius: .6rem; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); font-size: .88rem; }
.sync-full { color: var(--warn); }
.set-group.compact .set-row:has(> .set-ctl > select) { flex-wrap: nowrap; align-items: center; }
@media (min-width: 1024px) and (max-width: 1279px) { .home-hero h1 { font-size: 2.4rem; } }   /* small laptops: next to the search bar, fewer lines */
@media (max-width: 380px) {   /* the narrowest phones: Play on its own row, smaller text so labels fit */
  .detail-meta .form-actions > .button:first-child { grid-column: 1 / -1; }
  .detail-meta .form-actions > button, .detail-meta .form-actions > .add-pill { font-size: .82rem; padding: 0 .4rem; gap: .35rem; }
  .detail-meta .form-actions .btn-ico { width: 1rem; height: 1rem; }
  .detail-meta .form-actions:has(> .preview-btn, > .act-follow-artist) > .act-pick { grid-column: 1 / -1; }   /* no lone half-row */
}
/* iPhone Home Screen app (build 11): iOS 26's Liquid Glass blurs the top edge of the screen under the
   status bar, and the top bar's logo, name and buttons sat inside it. In the Home Screen app only (not
   Safari, not Android), the bar reaches 8px further down (build 84; 20px left a visible gap) so its contents just clear the glass.
   The media query applies it before the page shows; app.js adds .ios-app as a fallback. */
@media (display-mode: standalone) {
  @supports (-webkit-touch-callout: none) {
    .mobile-top { padding-top: calc(.6rem + env(safe-area-inset-top) + 8px); }
  }
}
html.ios-app .mobile-top { padding-top: calc(.6rem + env(safe-area-inset-top) + 8px); }
/* iPad Home Screen app (build 25): the same Liquid Glass strip sits over the top of the sidebar layout,
   which had no top bar to push down. There, the sidebar and the page start below the glass, and a dark
   frosted strip sits behind the clock and battery so the page doesn't scroll into the blur. */
@media (min-width: 1024px) {
  @media (display-mode: standalone) {
    @supports (-webkit-touch-callout: none) { :root { --glass-top: calc(env(safe-area-inset-top) + 8px); } }
  }
  html.ios-app { --glass-top: calc(env(safe-area-inset-top) + 8px); }
  .rail { padding-top: calc(1.8rem + var(--glass-top, 0px)); }
  .stage { padding-top: calc(.5rem + var(--glass-top, 0px)); }
  .set-nav { top: var(--glass-top, 0px); }
  .home-side { top: calc(1.5rem + var(--glass-top, 0px)); }
  .shell::before { content: ""; position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: var(--glass-top, 0px); pointer-events: none;
    background: linear-gradient(to bottom, rgba(9, 7, 15, .92), rgba(9, 7, 15, .6)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}

/* --- Discover (build 12): artists, albums and songs that aren't on the server yet ---------------- */
.discover-list li > .add-pill, .discover-list li > .have-pill { flex: none; margin-left: auto; }
.discover-list li.have .s { color: var(--ok, var(--muted)); }
.discover-list .meta { min-width: 0; flex: 1; }
a.have-pill { text-decoration: none; }
a.have-pill:hover { filter: brightness(1.08); }
.about { margin: 0 0 1.2rem; padding: .8rem 1rem; }
.about p { margin: .6rem 0 0; color: var(--muted); white-space: pre-line; line-height: 1.5; }
.chip .chip-tag { font-size: .72rem; font-weight: 700; color: var(--muted); background: var(--surface-3); border-radius: 999px; padding: .1rem .45rem; }
@media (max-width: 600px) {
  .discover-list li { flex-wrap: nowrap; gap: .6rem; }
  .discover-list li > .dur { display: none; }
  .discover-list li > .have-pill span:last-child { display: none; }
  .discover-list li > .have-pill { padding: 0 .55rem; }
}
/* Playlists → "How playlists work" (build 14) */
.pl-top .help-link { display: inline-block; margin-left: .35rem; font-weight: 700; white-space: nowrap;
  text-decoration: underline; text-decoration-color: rgba(195, 164, 255, .55); text-underline-offset: .2em; }
.pl-brought { font-size: .85rem; color: var(--muted); margin-top: .2rem; } .pl-brought b { color: var(--text); }
.dlbar.failed { border-color: var(--err); }
.dlbar.failed .spin::after { content: "!"; color: var(--err); }
.dlbar.failed .bar > span { background: var(--err); }
/* Stats: songs added over 7 days / 12 weeks / a year (build 15) */
.chart-head { flex-wrap: wrap; gap: .5rem; }
.range-pick { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: .2rem; gap: .1rem; }
.range-pick button { background: none; border: 0; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 700; padding: .35rem .75rem; border-radius: 999px; cursor: pointer; min-height: 2rem; }
.range-pick button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.chart-total { margin: .5rem 0 0; }
.chart.few { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.chart-labels.few { grid-template-columns: repeat(7, minmax(0, 1fr)); }
/* Home: leaderboard (build 15) */
.leaderboard .card-head { flex-wrap: wrap; gap: .4rem; }
.lb-sub { margin: -.2rem 0 .6rem; }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.lb-row { display: flex; align-items: center; gap: .6rem; padding: .4rem .45rem; border-radius: .7rem; min-width: 0; }
.lb-row.is-me { background: var(--surface-2); }
.lb-row > a { display: flex; align-items: center; gap: .55rem; min-width: 0; flex: 1; color: var(--text); }
.lb-row > a b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lb-row .face { width: 2.1rem; height: 2.1rem; flex: none; }
.lb-place { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: .85rem; color: var(--muted); background: var(--surface-2); }
.lb-row.p1 .lb-place { background: linear-gradient(135deg, #ffe08a, #f5a623); color: #3a2400; }
.lb-row.p2 .lb-place { background: linear-gradient(135deg, #eef1f6, #aab3c2); color: #20252e; }
.lb-row.p3 .lb-place { background: linear-gradient(135deg, #ffc7a1, #c9733c); color: #2e1404; }
.lb-n { flex: none; font-size: .82rem; color: var(--muted); } .lb-n b { color: var(--text); font-size: .95rem; }
.lb-gap { text-align: center; color: var(--faint); line-height: 1; }
.lb-foot { margin: .7rem 0 0; }
/* Profile: badges next to the name (build 15) */
.badge-strip { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .7rem; margin: .55rem 0 .2rem; }
.badge-strip .bdg { width: 2.25rem; height: 2.25rem; padding: .45rem; border-radius: .65rem; }
.badge-strip .bdg.more { font-weight: 900; font-size: .82rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); padding: 0; }
.badge-strip .bdg.more svg { width: 1.1rem; height: 1.1rem; }
.profile-hero { z-index: 10; }   /* build 16: the badge list opens over the sections below, not under them */
.badge-strip { position: relative; }
.badge-pop { display: none; position: absolute; z-index: 40; top: calc(100% + .5rem); left: 0;
  width: min(23rem, calc(100vw - 2 * var(--gutter))); max-height: min(28rem, 62vh); overflow: auto; padding: .35rem 0 .2rem;
  background: #1e1830; border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .4); }
.badge-more.open .badge-pop { display: block; }
@media (hover: hover) { .badge-more:hover .badge-pop, .badge-more:focus-within .badge-pop { display: block; } }
.badge-more { position: static; }
.badge-more::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .6rem; }   /* keeps hover across the gap */
.pop-h { margin: .55rem 1rem .35rem; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.badge-list { list-style: none; margin: 0 0 .3rem; padding: 0; display: block; }
.badge-list li { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .6rem 1rem; border-top: 1px solid var(--line); }
.badge-list li:first-child { border-top: 0; }
.badge-list li > span:not(.pill) { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.badge-list b { color: var(--text); font-size: .95rem; }
.badge-list small { color: var(--muted); font-size: .84rem; line-height: 1.35; }
.badge-list .bdg { flex: none; width: 2.3rem; height: 2.3rem; padding: .45rem; pointer-events: none; }
.badge-list .pill { flex: none; }
.badge-list.locked li { opacity: .7; }
.badge-list.locked .bdg { filter: grayscale(1); }
.badge-info { margin: .25rem 0 0; font-size: .88rem; color: var(--muted); } .badge-info b { color: var(--text); }
.choose-badges { display: grid; gap: .4rem; margin: .4rem 0; }
.check-row { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: .6rem; background: var(--surface-2); cursor: pointer; }
.check-row input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
/* Report a bug (build 16): a list like Settings rows, then labelled sections and one Send button */
#sheet-title:focus { outline: none; }
.bug-intro { margin: 0 0 .8rem; color: var(--muted); }
.bug-list { display: block; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.bug-kind { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .8rem; width: 100%; padding: .75rem 1rem; min-height: 3.4rem;
  border-top: 1px solid var(--line); color: var(--text); font-weight: 700; line-height: 1.3; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bug-kind:first-child { border-top: 0; }
.bug-kind:hover { background: var(--surface-2); }
.bug-kind:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; }
.bug-kind-t { flex: 1; min-width: 0; }
.bug-chev { flex: none; width: .5rem; height: .5rem; border-right: 2px solid var(--faint); border-top: 2px solid var(--faint); transform: rotate(45deg); margin-right: .2rem; }
.bug-ico { flex: none; width: 2.1rem; height: 2.1rem; border-radius: .65rem; display: grid; place-items: center; background: var(--info-bg); color: var(--accent-hi); }
.bug-ico svg { width: 1.15rem; height: 1.15rem; }
.bug-picked { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border-radius: .9rem; background: var(--surface-2); margin: .1rem 0 .3rem; }
.bug-picked b { flex: 1; min-width: 0; line-height: 1.3; }
.bug-picked .linkish { flex: none; font-weight: 700; }
.bug-label { margin: 1rem 0 .45rem; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.bug-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.bug-chip { all: unset; box-sizing: border-box; padding: .5rem .9rem; border-radius: 999px; font-size: .9rem; font-weight: 700; cursor: pointer;
  background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); -webkit-tap-highlight-color: transparent; }
.bug-chip:hover { background: var(--surface-3); }
.bug-chip:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.bug-chip[aria-pressed="true"] { background: var(--accent-hi); color: var(--on-accent); box-shadow: none; }
.bug-chip[aria-pressed="true"]::before { content: "✓ "; }
.bug-note { width: 100%; box-sizing: border-box; min-height: 5rem; resize: vertical; }
.bug-sent { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.bug-sent-row { display: flex; align-items: center; gap: 1rem; padding: .65rem 1rem; border-top: 1px solid var(--line); margin: 0; font-size: .9rem; }
.bug-sent-row:first-child { border-top: 0; }
.bug-sent-row:not(.bug-toggle) > span:first-child { color: var(--muted); flex: none; min-width: 4rem; }
.bug-sent-row > b { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.bug-toggle { cursor: pointer; align-items: flex-start; }
.bug-toggle-t { flex: 1 1 auto; display: grid; gap: .15rem; min-width: 0; } .bug-toggle-t small { color: var(--muted); line-height: 1.4; }
.bug-toggle input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--accent); }
.bug-foot { margin-top: 1rem; }
.bug-send { width: 100%; }

.range-pick button:hover { color: var(--text); background: var(--surface-3); transform: none; box-shadow: none; filter: none; }
.range-pick button[aria-pressed="true"]:hover { background: var(--accent); color: var(--on-accent); }
@media (hover: none) { .range-pick button:hover { background: none; color: var(--muted); } .range-pick button[aria-pressed="true"]:hover { background: var(--accent); color: var(--on-accent); } }

/* --- Help (build 16): the Settings layout, rows with numbered steps and questions that open ---------- */
.help-top { display: grid; gap: 1rem; margin: .4rem 0 1.4rem; }
.help-top h1 { margin: .15rem 0 .35rem; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); }
.help-top .lede { margin: 0; max-width: 40rem; }
.help-search { max-width: 34rem; margin: 0; cursor: text; }
@media (min-width: 1024px) { .help-top { grid-template-columns: minmax(0, 1fr) 24rem; align-items: end; } }
.help-short { margin: -.2rem 0 .8rem; color: var(--muted); line-height: 1.5; max-width: 44rem; }
.help-row .set-label small { font-size: .92rem; line-height: 1.5; color: var(--muted); }
.help-row .set-label small a { font-weight: 700; }
.help-row { flex-wrap: nowrap; align-items: flex-start; }
.step-n { flex: none; width: 1.75rem; height: 1.75rem; margin-top: .05rem; border-radius: 50%; display: grid; place-items: center;
  font-weight: 900; font-size: .85rem; background: var(--info-bg); color: var(--accent-hi); box-shadow: inset 0 0 0 1px rgba(167, 123, 255, .3); }
.help-q > summary { flex-wrap: nowrap; }
.help-q .set-label b { font-weight: 700; }
.help-q .q-chev { flex: none; width: .55rem; height: .55rem; margin: .45rem .2rem 0 auto; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(45deg); transition: transform .15s ease; }
.help-q[open] .q-chev { transform: rotate(-135deg); margin-top: .7rem; }
.help-q > p { margin: -.3rem 1.1rem 1rem; color: var(--muted); line-height: 1.5; font-size: .92rem; }
.help-none { margin-bottom: 1rem; }
.set-main .set-title:first-of-type { margin-top: 1.3rem; }
/* Stats → Where it came from (build 16): three equal columns, number over its label, in any card width */
.stats-grid .split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; align-items: start; }
.stats-grid .split > span { display: grid; justify-items: start; gap: .3rem; min-width: 0; }
/* Build 17: recommendation tiles open the song's page (anywhere but their buttons) */
.tile.rec.row-link { cursor: pointer; }
.tile.rec.row-link .t { color: var(--text); }
.tile.rec.row-link:hover .t { text-decoration: underline; text-underline-offset: .15em; }
.tile.rec.row-link:hover .cover img { filter: brightness(1.06); }
/* Search (build 17): "Already on Kalomori" is compact, so what you can add comes sooner */
.have-compact { margin-bottom: 1.6rem; }
.have-compact .card-head { align-items: baseline; gap: .6rem; margin-bottom: .5rem; }
.have-compact h2 { font-size: 1.1rem; margin: 0; }
.have-compact .card-head .sub { margin: 0; font-size: .85rem; }
.have-compact .chips-row { margin-bottom: .5rem; }
.have-compact .shelf { --n: 3.4; --gap: .7rem; }
@media (min-width: 700px) { .have-compact .shelf { --n: 5.4; } }
@media (min-width: 1280px) { .have-compact .shelf { --n: 7.4; } }
.have-compact .shelf .tile .t { font-size: .85rem; } .have-compact .shelf .tile .s { font-size: .78rem; }
.have-compact .list li { padding-top: .35rem; padding-bottom: .35rem; }
.have-compact .list .art { width: 2.4rem; height: 2.4rem; }
.have-more { margin: .3rem 0 0 .2rem; }
/* Profile (build 17): "Choose" sits in the badge row, shaped like the badges */
.badge-edit { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: .35rem; height: 2.25rem; padding: 0 .75rem 0 .6rem;
  border-radius: .65rem; background: var(--surface-2); color: var(--muted); font-size: .85rem; font-weight: 700; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent; }
.badge-edit svg { width: 1rem; height: 1rem; }
.badge-edit:hover { background: var(--surface-3); color: var(--text); }
.badge-edit:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

/* --- Settings & Help (build 17): one section at a time, fading between them ------------------------- */
.pager-on > .set-sec { animation-duration: .26s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); animation-fill-mode: both; }
.pager-on > .set-sec.pg-in-down { animation-name: pg-in-down; }
.pager-on > .set-sec.pg-in-up { animation-name: pg-in-up; }
.pager-on > .set-sec.pg-out-up { animation: pg-out-up .14s ease-in both; }
.pager-on > .set-sec.pg-out-down { animation: pg-out-down .14s ease-in both; }
@keyframes pg-in-down { from { opacity: 0; transform: translateY(18px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pg-in-up { from { opacity: 0; transform: translateY(-18px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pg-out-up { to { opacity: 0; transform: translateY(-12px); } }
@keyframes pg-out-down { to { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .pager-on > .set-sec { animation: none !important; } }
.pg-steps { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1.6rem 0 .4rem; }
.pg-step { display: grid; gap: .15rem; padding: .8rem 1rem; border-radius: var(--radius); background: var(--card-bg); border: 1px solid var(--line);
  color: var(--text); transition: background .15s, border-color .15s; min-width: 0; }
.pg-step:hover { text-decoration: none; background: var(--surface-2); border-color: var(--line-2); }
.pg-step small { color: var(--faint); font-size: .78rem; font-weight: 700; }
.pg-step b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-step.next { text-align: right; grid-column: 2; }
.pager-all .pg-steps { display: none; }
.pager-all > .set-sec + .set-sec { margin-top: 1.6rem; }
.help-intro { margin: -.1rem 0 .4rem; color: var(--muted); line-height: 1.6; max-width: 46rem; font-size: 1rem; }
.help-results { margin: 0 0 1rem; }
.paged .set-sec > h2 { font-size: 1.5rem; }

/* ===== Build 18: Search, one mixed list =================================================== */
.find-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; margin: 0 0 .9rem; }
.find-note { margin: 0; color: var(--muted); font-size: .92rem; }
.find-note:empty { display: none; }
.find-note .mood-tag { color: var(--accent-hi); text-transform: capitalize; }
.find-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0 0 0 auto; font-size: .8rem; color: var(--faint); }
.find-legend .lg { display: inline-flex; align-items: center; gap: .35rem; }
.find-legend i { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.find-legend .on i { background: var(--ok); } .find-legend .part i { background: var(--blue); } .find-legend .add i { background: var(--accent-hi); opacity: .6; }
/* On the server at a glance: a green tick on the picture; partly = a blue "3/12" and a blue ring on albums. */
.state-dot { position: absolute; z-index: 3; right: -.3rem; bottom: -.3rem; display: grid; place-items: center; pointer-events: none;
  min-width: 1.25rem; height: 1.25rem; border-radius: 999px; font-size: .68rem; font-weight: 900; line-height: 1; }
.state-dot.on { width: 1.25rem; padding: 0; color: #0b2b1e; background: var(--ok); box-shadow: 0 0 0 2px var(--bg, #0d0916); }
.state-dot.on svg { width: .85rem; height: .85rem; }
.state-dot.part { padding: 0 .4rem; color: #08263a; background: var(--blue); box-shadow: 0 0 0 2px var(--bg, #0d0916); }
.tile .cover > .state-dot { right: .45rem; bottom: .45rem; height: 1.6rem; min-width: 1.6rem; font-size: .78rem; }
.tile .cover > .state-dot.on { width: 1.6rem; }
.tile .cover > .state-dot.on svg { width: 1.05rem; height: 1.05rem; }
.f-album.partial .cover { box-shadow: inset 0 0 0 2px var(--blue), 0 0 1.4rem rgba(143, 211, 255, .25); }
.f-album.partial .cover img { opacity: .92; }
.f-album.full .cover { box-shadow: inset 0 0 0 2px rgba(143, 240, 196, .55); }
.f-album .cover img { position: relative; z-index: 0; }
.f-album.partial .s::before { content: "Partly here · "; color: var(--blue); font-weight: 700; }
/* The best-matching artist, big; the others small */
.f-hero-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.f-hero { display: flex; align-items: center; gap: 1.1rem; color: inherit; padding: .5rem 1.2rem .5rem .5rem; margin: 0 0 .9rem -.5rem;
  border-radius: 999px 1.2rem 1.2rem 999px; transition: background .15s; min-width: 0; }
.f-hero-wrap .f-hero { margin-bottom: 0; }
.f-hero-wrap { margin-bottom: .9rem; }
.f-hero:hover { background: var(--surface-2); text-decoration: none; }
.f-hero-pic { position: relative; width: 6.5rem; height: 6.5rem; flex: none; }
.f-hero-pic > img, .f-hero-pic > .gen { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
  font-family: var(--display); font-weight: 900; font-size: 2.4rem; color: #fff; box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .45); }
.f-hero.on .f-hero-pic > img { box-shadow: 0 0 0 3px rgba(143, 240, 196, .5), 0 .8rem 2rem rgba(0, 0, 0, .45); }
.f-hero-pic > .state-dot { right: .25rem; bottom: .25rem; width: 1.7rem; height: 1.7rem; }
.f-hero-pic > .state-dot svg { width: 1.1rem; height: 1.1rem; }
.f-hero-name { font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.1; overflow-wrap: anywhere; }
.f-hero-meta { min-width: 0; }
.f-hero-meta .eyebrow { margin: 0 0 .15rem; }
.f-hero-meta .s { color: var(--muted); font-size: .9rem; margin-top: .25rem; }
@media (max-width: 600px) { .f-hero-pic { width: 5rem; height: 5rem; } .f-hero { gap: .85rem; } }
.f-artists .chip { position: relative; }
.f-artists .chip .state-dot { position: static; margin-left: -.2rem; box-shadow: none; }
.f-artists .chip.on { box-shadow: inset 0 0 0 1px rgba(143, 240, 196, .35); }
/* Song rows: the picture is a bit bigger (it's the preview button) */
.f-songs .art { width: 3.6rem; height: 3.6rem; }
.f-songs li.on .t { color: var(--text); }
.f-songs li:not(.on) .art { filter: saturate(.9); }
.mood-chips { margin-top: .2rem; }
.mood-chips + .mood-chips { margin-top: .6rem; }
.mood-chip { font-weight: 700; }
.genre-chip { color: var(--muted); }
.has-results .paste-hint { display: none; }
@media (max-width: 600px) {
  .find-head { margin-bottom: .6rem; }
  .find-legend { margin: 0; gap: .2rem .7rem; font-size: .72rem; }
  .find-legend .add { display: none; }
}
@media (max-width: 600px) {
  .f-artists { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
  .f-artists::-webkit-scrollbar { display: none; }
  .f-artists li { flex: none; }
}

/* ===== Build 19: Your taste (genres, moods) ========== */
.taste-chips { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; }
.taste-chips legend { padding: 0; margin: 0 0 .6rem; font-weight: 800; font-size: 1.05rem; }
.taste-chips legend small, .taste-artists-h small { font-weight: 600; font-size: .82rem; color: var(--faint); margin-left: .4rem; }
.pick-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pick-chip { position: relative; display: inline-flex; cursor: pointer; margin: 0; }
.pick-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pick-chip span { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .95rem; border-radius: 999px; font-weight: 700; font-size: .92rem;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, box-shadow .15s, color .15s; }
.pick-chip:hover span { background: var(--surface-3); }
.pick-chip input:checked + span { color: var(--on-accent); background: linear-gradient(135deg, var(--accent-hi), var(--accent)); box-shadow: 0 0 1rem rgba(167, 123, 255, .35); }
.pick-chip input:checked + span::before { content: "✓"; font-weight: 900; }
.pick-chip input:focus-visible + span { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.pick-chips.moods .pick-chip input:checked + span { background: linear-gradient(135deg, var(--blue), #6aa8ff); color: #071a2c; box-shadow: 0 0 1rem rgba(143, 211, 255, .35); }
.taste-artists-h { font-size: 1.05rem; margin: .4rem 0 .6rem; }
.welcome-step .taste-chips { text-align: left; }
.welcome-list.ticks { list-style: none; padding: 0; margin: 1rem auto 1.4rem; }
.welcome-list.ticks li { padding-left: 1.6rem; position: relative; margin-bottom: .6rem; }
.welcome-list.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 900; }
.set-note { margin: .2rem 0 .6rem; padding: 0 .2rem; }

/* ===== Build 20: search rows bigger; "On Kalomori" small and in the flow; Load more ============== */
.f-songs li { gap: 1rem; padding: .7rem .75rem; margin: 0 -.75rem; }
.f-songs .art { width: 4.4rem; height: 4.4rem; border-radius: .6rem; }
.f-songs .pv-art { border-radius: .6rem; }
.f-songs .pv-art .pv-ico { width: 1.6rem; height: 1.6rem; }
.f-songs .meta .t { font-size: 1.06rem; }
.f-songs .meta .s { font-size: .94rem; display: flex; align-items: center; gap: .45rem; min-width: 0; }
.f-songs .album-col { font-size: .92rem; }
.f-songs .dur { font-size: .92rem; }
.f-songs li > .rate { margin-left: auto; }
.f-songs li > .add-pill { margin-left: auto; }
.on-mini { display: inline-flex; align-items: center; gap: .3rem; flex: none; color: var(--ok); font-size: .74rem; font-weight: 800; }
.on-mini i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px rgba(143, 240, 196, .7); }
@media (max-width: 600px) {
  .on-mini-t { display: none; }
  .f-songs .art { width: 3.9rem; height: 3.9rem; }
  .f-songs .rate .star { padding: .15rem; }
  .f-songs .rate .star svg { width: 1rem; height: 1rem; }
}
.f-more { display: block; margin: 1rem auto 0; min-width: 12rem; }
.f-songs .empty.end { justify-content: center; color: var(--faint); }
/* Album badges: small, in the corner */
.tile .cover > .state-dot { right: .4rem; bottom: .4rem; height: 1.15rem; min-width: 1.15rem; font-size: .66rem; box-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.tile .cover > .state-dot.on { width: 1.15rem; }
.tile .cover > .state-dot.on svg { width: .8rem; height: .8rem; }
.f-album.full .cover { box-shadow: none; }
.tracklist .linked-from { color: var(--blue); font-weight: 700; }
.tracklist .linked-from a { color: var(--blue); }
.f-songs li { flex-wrap: nowrap; }
.f-songs li > .rate { flex: none; order: 9; }
.f-songs .rate .star { width: 1.6rem; height: 1.6rem; padding: .18rem; }
@media (max-width: 600px) {
  .f-songs li { gap: .75rem; }
  .f-songs .album-col, .f-songs .dur { display: none; }
  .f-songs .rate .star { width: 1.25rem; height: 1.25rem; padding: .08rem; }
  .f-songs .rate .unrate { display: none; }
}
/* Search rows stay one line on phones too (a rule for song lists with stars made them two lines). */
@media (max-width: 900px) { .list.f-songs li { display: flex; grid-template-columns: none; } .list.f-songs li > .rate { grid-column: auto; grid-row: auto; margin-left: auto; } }

/* Build 34/36: Settings → Music apps: the "make one" form on one line, the sign-in details selectable in one tap */
#apps-add { flex-wrap: nowrap; }
#apps-add > input { min-width: 0; }
@media (max-width: 420px) { #apps-add { flex-wrap: wrap; } #apps-add > input, #apps-add > button { flex: 1 1 100%; } }
.apps-signin { border-color: var(--accent, #a78bfa); }
.apps-signin .set-ctl { flex-wrap: nowrap; justify-content: flex-end; gap: .6rem; min-width: 0; flex: 1 1 auto; }
.apps-signin .set-ctl > button { flex: none; }
.apps-signin code { user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; font-size: .9rem; }
.apps-signin .bigcode { font-size: 1.05rem; padding: .45rem .7rem; letter-spacing: .03em; }
.apps-steps { margin: .2rem 0 1rem; padding-left: 1.4rem; display: grid; gap: .45rem; }
.apps-steps b { font-weight: 700; }


/* ===== Build 39: You page, Settings on its own, mute, notification pictures ====================== */
.you-page { max-width: 46rem; }
.you-head { padding-bottom: .6rem; }
.you-settings, .you-list a, .you-list button { display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 0; padding: .8rem 1rem; color: var(--text);
  text-align: left; font: inherit; background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; }
.you-settings { margin: .4rem 0 1rem; border: 1px solid rgba(167, 123, 255, .45); border-radius: var(--radius); background: linear-gradient(135deg, rgba(167, 123, 255, .16), rgba(143, 211, 255, .08)); }
.you-list { display: grid; margin: 0 0 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--glass); }
.you-list > * + * { border-top: 1px solid var(--line); }
.you-settings:hover, .you-list a:hover, .you-list button:hover { background: var(--surface-2); text-decoration: none; transform: none; filter: none; }
.you-settings > span:nth-child(2), .you-list a > span:nth-child(2), .you-list button > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.you-list b, .you-settings b { font-weight: 800; }
.you-list small, .you-settings small { color: var(--muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.you-ico { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .8rem; background: var(--surface-2); color: var(--accent-hi); }
.you-ico svg { width: 1.3rem; height: 1.3rem; }
.you-settings .you-ico { background: linear-gradient(135deg, var(--accent-hi), var(--accent)); color: var(--on-accent); }
.you-list .chev, .you-settings .chev { color: var(--faint); font-size: 1.3rem; }
.you-list .badge { position: static; }
.you-out { display: flex; justify-content: center; margin: 0 0 2rem; }
.back-you { display: none; margin-right: .5rem; color: var(--accent-hi); letter-spacing: 0; text-transform: none; font-size: .9rem; }
.top-actions .gear { color: var(--muted); width: 2.2rem; height: 2.2rem; border-radius: 50%; }
.top-actions .gear svg { width: 1.45rem; height: 1.45rem; }
.top-actions .gear[aria-current] { color: var(--text); background: var(--surface-2); }
@media (max-width: 1023px) { .back-you { display: inline; } }
@media (min-width: 1024px) { .you-page { margin-top: 1rem; } }
.set-group.is-muted .set-toggle { opacity: .5; }
.set-group.is-private + .set-title + .set-group .set-toggle { opacity: .75; }
.set-intro b { color: var(--text); }

.note-pic { position: relative; flex: none; display: inline-grid; }
.note-pic .art { display: block; }
.notes .note-tile, .note-tile { display: grid; place-items: center; color: #fff; }
.note-tile svg { width: 56%; height: 56%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.note-chip { position: absolute; right: -.3rem; bottom: -.3rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center; color: #fff;
  box-shadow: 0 0 0 2px var(--bg, #0a0810); }
.note-chip svg { width: .82rem; height: .82rem; }
.k-ready { background: linear-gradient(135deg, #37d39a, #1f9d8a); }
.k-failed { background: linear-gradient(135deg, #ffb347, #ff6a5c); }
.k-release { background: linear-gradient(135deg, #a77bff, #6a5cff); }
.k-share { background: linear-gradient(135deg, #5cc8ff, #4b7dff); }
.k-follow { background: linear-gradient(135deg, #ff8fc7, #c45cff); }
.k-badge { background: linear-gradient(135deg, #ffd36a, #ff9a4a); }
.k-app { background: linear-gradient(135deg, #58e0d0, #3a8bff); }
.k-access { background: linear-gradient(135deg, #ffe08a, #e0a030); }
.k-bell { background: linear-gradient(135deg, #8a8fa8, #5b6078); }
.note-kind { display: inline-block; margin-right: .45rem; padding: 0 .45rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #0b0a12; vertical-align: .08em; }
.code-show { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.access-ended { max-width: 34rem; margin: 1rem auto; }
#listening { flex-wrap: wrap; }
#listening .set-label { flex: 1 1 13rem; }
#listening .set-ctl, #listening select { max-width: 100%; }

/* ===== Build 40: set up your music player (one step at a time) =================================== */
.listen { max-width: 40rem; margin: 0 auto; padding-bottom: 2rem; }
.listen-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0 1rem; }
.listen-top .back-you { display: inline; }
.listen-dots { display: flex; gap: .4rem; }
.listen-dots i { width: 1.6rem; height: .35rem; border-radius: 999px; background: var(--surface-3, rgba(255,255,255,.14)); }
.listen-dots i.on { background: linear-gradient(90deg, var(--accent-hi), var(--accent)); }
.listen-step { padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); margin-bottom: 1rem; }
.listen-step h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin: .2rem 0 .6rem; outline: none; }
.listen-step .lede { color: var(--muted); margin: 0 0 1rem; }
.listen-choices { display: grid; gap: .7rem; margin: 1rem 0; }
.listen-choice { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 0; padding: 1rem 1.1rem; text-align: left; font: inherit; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 1.1rem; box-shadow: none; cursor: pointer; }
.listen-choice:hover:not(:disabled) { border-color: var(--accent-hi); background: var(--surface-3, var(--surface-2)); transform: none; filter: none; }
.listen-choice:disabled { opacity: .5; cursor: default; }
.listen-choice { white-space: normal; overflow: hidden; height: auto; }
.listen-choice > span:last-child { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1; }
.listen-choice .pill { display: inline-block; vertical-align: .15em; font-size: .7rem; }
.listen-choice b { font-size: 1.1rem; }
.listen-choice small { color: var(--muted); font-size: .9rem; font-weight: 500; }
.listen-choice .pill.ok { color: var(--ok); margin-left: .3rem; }
.lc-ico { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 1rem; color: #fff; }
.lc-ico svg { width: 1.8rem; height: 1.8rem; }
.lc-ico.app { background: linear-gradient(135deg, #58e0d0, #3a8bff); }
.lc-ico.plex { background: linear-gradient(135deg, #f6c343, #e5a00d); color: #1c1503; }
.lc-emoji { flex: none; font-size: 1.9rem; width: 3.2rem; text-align: center; }
.listen-creds .set-ctl { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.listen-creds code { overflow-wrap: anywhere; user-select: all; }
.listen-creds .bigcode { font-size: 1.05rem; padding: .45rem .7rem; letter-spacing: .03em; }
.listen-wait { display: flex; align-items: center; gap: .9rem; margin: 1rem 0; padding: .9rem 1rem; border-radius: 1rem; background: rgba(143, 211, 255, .08); border: 1px dashed rgba(143, 211, 255, .4); }
.listen-wait > span:last-child { display: flex; flex-direction: column; }
.listen-wait small { color: var(--muted); }
.listen-wait .spin { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 3px solid rgba(143, 211, 255, .25); border-top-color: var(--blue, #8fd3ff); animation: listen-spin 1s linear infinite; }
@keyframes listen-spin { to { transform: rotate(360deg); } }
.listen-help { margin: .6rem 0; color: var(--muted); }
.listen-help summary { cursor: pointer; font-weight: 700; color: var(--text); }
.listen-step label { display: block; font-weight: 700; margin: .6rem 0 .3rem; }

/* ===== Build 41: owner tools (/dev) and the owner's buttons on profiles, albums and songs ========= */
.dev { max-width: 60rem; }
.dev-top { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; margin: .6rem 0 1rem; }
.dev-top h1 { margin: 0; font-size: clamp(1.7rem, 6vw, 2.4rem); }
.dev-bar { display: flex; align-items: center; gap: .6rem; margin: 0; }
.dev-lock { max-width: 30rem; scroll-margin: 5rem 0 8rem; }
.dev-lock label { display: block; font-weight: 700; margin: 0 0 .4rem; }
.dev-lock-row { display: flex; gap: .6rem; align-items: stretch; }
.dev-lock-row input { flex: 1 1 auto; min-width: 0; margin: 0; }
.dev-lock-row button { flex: none; }
.dev-lock .hint { margin: .8rem 0 0; }
.dev-jump { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.4rem; }
.dev-jump a { padding: .3rem .85rem; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--text); font-weight: 700; font-size: .88rem; }
.dev-jump a:hover { text-decoration: none; background: var(--surface-2); }
.dev h2[id], .dev-new { scroll-margin-top: 5rem; }
.dev-new { margin: 0 0 1.4rem; border-color: rgba(120, 230, 190, .5); }
.dev-new h2 { margin-top: 0; }
.dev-sub { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 1.2rem 0 .5rem; }
.dev-none { margin: 0; }
.dev-old { margin-top: .9rem; }
.dev-old summary { cursor: pointer; font-weight: 700; color: var(--muted); padding: .3rem 0; }
.dev-old[open] summary { margin-bottom: .5rem; }
.dev-tiles { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; }
.dev-tiles li { padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--glass); display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.dev-tiles b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.dev-tiles span { color: var(--muted); font-size: .84rem; }
.dev-tiles li.warn { border-color: rgba(255, 211, 138, .55); }
.dev-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem 1rem; margin-bottom: 0; }
.dev-form label { display: flex; flex-direction: column; gap: .3rem; font-weight: 700; font-size: .9rem; min-width: 0; }
.dev-form label[hidden] { display: none; }
.dev-form select, .dev-form input { width: 100%; min-width: 0; margin: 0; }
.dev-form .wide { grid-column: 1 / -1; }
.dev-form .form-actions { margin: 0; }
.dev-keys code, .dev-new code { overflow-wrap: anywhere; user-select: all; }
/* Rows here show everything: names and details wrap instead of being cut off, buttons drop below on a phone. */
.dev .list li { flex-wrap: wrap; align-items: flex-start; }
.dev .list li:hover { background: none; }
.dev .list .art { width: 2.6rem; height: 2.6rem; }
.dev .list .meta { flex: 1 1 11rem; }
.dev .list .t { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.dev .list .s { display: block; overflow: visible; }
.dev .list .t .pill { margin-left: .15rem; }
.dev-row-acts { display: flex; gap: .4rem; flex: none; margin-left: auto; align-self: center; }
.dev-members li > a.button { flex: none; margin-left: auto; align-self: center; }
.dev li.dim { opacity: .6; }
.dev .pill.warn, .dev-mod .pill.warn { color: #ffd38a; }
.dev-mod { margin: 0 0 2rem; border-color: rgba(255, 211, 138, .45); scroll-margin-top: 5rem; }
.dev-mod h2 { margin: 0 0 .4rem; font-size: 1.15rem; overflow-wrap: anywhere; }
.dev-mod h2 small { font-size: .8rem; font-weight: 600; white-space: nowrap; }
.dev-mod .alert { margin: .4rem 0 .6rem; }
.dev-state { margin: 0; color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }
.dev-state b { color: #ffd38a; font-weight: 700; }
.dev-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: .9rem; }
.dev-acts h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 .1rem; flex-basis: 100%; }
.dev-acts > div { display: flex; flex-wrap: wrap; gap: .45rem; align-content: flex-start; }
.dev-acts form { margin: 0; }
.dev-hint { font-size: .85rem; color: var(--muted); margin: -.8rem 0 1.4rem; }
.rail nav a.dev-link { white-space: nowrap; }
.dev-open { margin-left: auto; font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: .05rem .4rem; border-radius: 999px;
  color: #bdf6df; background: rgba(120, 230, 190, .15); }
@media (max-width: 560px) {
  .dev-row-acts { margin-left: 3.5rem; }
  .dev-keys .meta { flex-basis: calc(100% - 3.5rem); }
  .dev-members li { flex-wrap: nowrap; }
  .dev-members .meta { flex: 1 1 0; }
}
.you-dev { border-color: rgba(255, 211, 138, .45); background: linear-gradient(135deg, rgba(255, 211, 138, .12), rgba(255, 143, 199, .06)); }
.you-dev .you-ico { background: linear-gradient(135deg, #ffd38a, #ff9a4a); color: #1c1503; }

/* ===== Build 42: preview bubbles on profile music, songs on repeat, phone shelves ================ */
.grid-cards.picks > .tile .pv-float, .shelf > .tile .pv-float { left: .45rem; top: .45rem; }
.tile > .pv-float + .eye { left: auto; }
.played-songs .plays { flex: none; color: var(--muted); font-weight: 800; font-variant-numeric: tabular-nums; padding: 0 .3rem; }
.song-list .art-wrap .pv-art { inset: 0; width: 100%; height: 100%; border-radius: inherit; background: rgba(9, 7, 15, .35); opacity: 0; }
.song-list .art-wrap:hover .pv-art, .song-list .art-wrap .pv-art.playing, .song-list .art-wrap .pv-art:focus-visible { opacity: 1; }
@media (hover: none) { .song-list .art-wrap .pv-art { opacity: 1; background: rgba(9, 7, 15, .28); } }
.song-list .art-wrap { border-radius: .5rem; overflow: hidden; }
.song-list .art-wrap .pv-ico { width: 1.2rem; height: 1.2rem; }

/* Phones: a shelf always rests with a cover lined up at the left edge, whole, never cut or faded; two whole covers
   show and a sliver of the next one (fading out) says there's more. At the very end the last cover lines up on the
   right and the sliver is on the left instead. (Before, the left cover was faded and cut wherever you stopped.) */
@media (max-width: 899px) {
  .shelf { --n: 2.22; --gap: .8rem; scroll-padding-inline: 0; scroll-snap-type: x mandatory; scroll-snap-stop: normal;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), rgba(0, 0, 0, .25)); mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), rgba(0, 0, 0, .25)); }
  .shelf:not(.at-start):not(.at-end) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), rgba(0, 0, 0, .25)); mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), rgba(0, 0, 0, .25)); }
  .shelf.at-end:not(.at-start) { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.2rem), rgba(0, 0, 0, .25)); mask-image: linear-gradient(to left, #000 calc(100% - 2.2rem), rgba(0, 0, 0, .25)); }
  .shelf > .tile:last-child { scroll-snap-align: end; }
}
@media (min-width: 600px) and (max-width: 899px) { .shelf { --n: 3.22; } }

/* --- Playlists (build 46): a playlist's page, the playlist grid, "Add to playlist" ------------------------ */
.k-playlist { background: linear-gradient(135deg, #9ff3d6, #4bb8a0); }
.pl-cover-big { position: relative; }
.pl-mosaic, .pl-tile-cover.mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: 100%; height: 100%; }
.pl-mosaic img, .pl-tile-cover.mosaic img { width: 100%; height: 100%; object-fit: cover; min-width: 0; min-height: 0; }
.pl-pic-form { position: absolute; left: .6rem; right: .6rem; bottom: .6rem; margin: 0; }
.pl-pic-btn { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .45rem .7rem; border-radius: 999px; cursor: pointer;
  font-size: .85rem; font-weight: 800; color: #fff; background: rgba(9, 7, 15, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.pl-pic-btn svg { width: 1.05rem; height: 1.05rem; flex: none; }
.pl-pic-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pl-pic-btn:has(input:focus-visible) { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.pl-by { color: var(--muted); margin: .45rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.pl-by a { color: var(--text); font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; }
.pl-by .face { width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: .7rem; object-fit: cover; display: inline-grid; place-items: center; }
.pl-desc { white-space: pre-line; }
.pl-where { margin: .5rem 0 0; }
.pl-actions-top { margin-top: .8rem; flex-wrap: wrap; }
.pl-actions-top form { margin: 0; }
.pl-sync-box { margin-top: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; padding: .7rem .8rem; border-radius: .8rem;
  background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line); }
.pl-sync-box form { margin: 0; }
.pl-sync-box .hint { flex-basis: 100%; margin: 0; }
.pl-sync-what { font-weight: 600; color: var(--muted); }

.pl-tracks { padding: .4rem .5rem .6rem; }
.sel-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; padding: .45rem .6rem; min-height: 2.9rem; border-bottom: 1px solid var(--line); }
.sel-all { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--muted); cursor: pointer; margin: 0; }
.sel-bar input, .pl-songs .pick input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); margin: 0; }
.sel-n { color: var(--accent-hi); font-weight: 800; font-size: .9rem; }
.sel-acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: .45rem; }
.sel-bar.on { position: sticky; top: 0; z-index: 6; background: #1a1427; border-radius: .7rem; box-shadow: 0 .5rem 1.2rem rgba(0, 0, 0, .45); }
@media (max-width: 1023px) { .sel-bar.on { top: 3.4rem; } }
.pl-songs { list-style: none; margin: 0; padding: .3rem 0 0; counter-reset: none; }
.pl-songs li { display: flex; align-items: center; gap: .7rem; padding: .4rem .4rem; border-radius: .6rem; min-width: 0; }
.pl-songs li:hover { background: var(--surface-2); }
.pl-songs li.sel { background: rgba(167, 123, 255, .14); }
.pl-songs .pick { flex: none; display: grid; place-items: center; width: 1.9rem; height: 2.6rem; margin: 0; cursor: pointer; }
.pl-thumb { position: relative; flex: none; width: 2.8rem; height: 2.8rem; border-radius: .45rem; overflow: hidden; background: var(--surface-2); }
.pl-thumb img, .pl-thumb .gen { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; font-weight: 900; }
.pl-songs .meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pl-songs .t { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-songs .s { color: var(--muted); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-songs .s a { color: var(--muted); }
.pl-songs .dur { flex: none; color: var(--faint); font-size: .88rem; font-variant-numeric: tabular-nums; min-width: 2.7rem; text-align: right; }
.pl-missing { margin: .6rem .6rem 0; }
.pl-removed { margin-top: 1.2rem; }
.pl-removed-list li { display: flex; align-items: center; gap: .6rem; }
.pl-removed-list .check-row { flex: 1 1 auto; min-width: 0; }
.pl-removed-list .s, .pl-removed-list .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pl-mine .card-head { flex-wrap: wrap; gap: .6rem 1rem; }
.pl-new-form { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; flex: 0 1 34rem; min-width: 0; }
.pl-new-form .button { flex: none; }
.pl-new-form input { flex: 1 1 12rem; min-width: 0; }
.pl-new-form button { flex: none; }
.pl-grid { margin-top: .4rem; }
.pl-tile .t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.pl-flags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.pl-flags .pill { font-size: .72rem; }
.pl-invites .list li { display: flex; align-items: center; gap: .8rem; }
.pl-inv-link { display: flex; align-items: center; gap: .8rem; flex: 1 1 auto; min-width: 0; color: var(--text); }
.pl-inv-link .meta { display: flex; flex-direction: column; min-width: 0; }
.pl-inv-link .s { color: var(--muted); font-size: .86rem; }
.pl-comp-h { font-size: 1.15rem; margin: 0 0 .2rem; }

.pl-picker .hint { margin: .7rem 0 .4rem; }
.pl-pick-list { max-height: 40vh; overflow-y: auto; }
.pl-pick-songs { max-height: 28vh; overflow-y: auto; }
.pl-pick { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .45rem .5rem; border-radius: .7rem; text-align: left; min-height: 0;
  background: transparent; color: var(--text); box-shadow: none; font-weight: 600; }
.pl-pick:hover { background: var(--surface-2); transform: none; box-shadow: none; }
.pl-pick .art { width: 2.8rem; height: 2.8rem; border-radius: .45rem; object-fit: cover; flex: none; display: grid; place-items: center; }
.pl-pick .meta { display: flex; flex-direction: column; min-width: 0; }
.pl-pick .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-pick .s { color: var(--muted); font-size: .84rem; font-weight: 500; }
.pl-new-row { display: flex; gap: .5rem; margin: 0; }
.pl-new-row input { flex: 1 1 auto; min-width: 0; }
.pl-find { width: 100%; margin-bottom: .6rem; }
.pl-find-list { max-height: 50vh; overflow-y: auto; }
.pl-find-list .s, .pl-find-list .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-people li { display: flex; align-items: center; gap: .7rem; }
.pl-people .art { width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; display: grid; place-items: center; }
.pl-people .meta { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.pl-people .s { color: var(--muted); font-size: .84rem; }
.pl-people select { flex: none; width: auto; }
.pl-invite { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 0; }
.pl-invite input { flex: 1 1 10rem; min-width: 0; }
.pl-invite select { flex: 0 0 auto; width: auto; }
.pl-link { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.pl-link .switch { margin: 0; flex: 1 1 16rem; }
.pl-link small { display: block; color: var(--muted); font-weight: 400; }
.pl-edit-form { display: grid; gap: .45rem; }
@media (max-width: 520px) {
  .pl-songs .dur { display: none; }
  .pl-new-form { flex-basis: 100%; }
  .sel-acts { margin-left: 0; flex-basis: 100%; }
  .sel-acts .small { flex: 1 1 0; padding-inline: .6rem; }
}

/* Build 49: Back in the phone's top bar, drawn like the bell and gear beside it (no disc, muted, lights up when pressed) */
.top-back { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; margin: 0 .15rem 0 -.55rem; border-radius: 50%;
  color: var(--muted); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.top-back:hover, .top-back:active { color: var(--text); background: var(--surface-2); text-decoration: none; }
.top-back svg { width: 1.6rem; height: 1.6rem; }
.has-back .mobile-top .wordmark { margin-right: auto; min-width: 0; }
/* Smaller phones (build 49): the bar keeps everything on one line, with or without Back: things get a little
   smaller first, then the stage tag (Internal / Alpha / Beta) goes, then, next to Back on the smallest, the name. */
@media (max-width: 430px) {
  .mobile-top .wordmark { gap: .5rem; font-size: 1.25rem; min-width: 0; }
  .mobile-top .wordmark img { width: 2rem; height: 2rem; }
  .mobile-top .wordmark .stage-pill { font-size: .6rem; padding: .12rem .4rem; }
  .mobile-top .top-actions { gap: .15rem; }
  .mobile-top .top-actions .bell, .mobile-top .top-actions .gear { width: 2.2rem; height: 2.2rem; }
  .mobile-top .me { width: 2.15rem; height: 2.15rem; }
}
@media (max-width: 400px) {
  .mobile-top .wordmark { font-size: 1.12rem; gap: .4rem; }
  .mobile-top .wordmark img { width: 1.85rem; height: 1.85rem; }
  .mobile-top .wordmark .stage-pill { font-size: .55rem; padding: .1rem .32rem; letter-spacing: .04em; }
  .mobile-top .top-actions .bell, .mobile-top .top-actions .gear { width: 2.05rem; height: 2.05rem; }
  .has-back .mobile-top .top-back { width: 2.1rem; margin-left: -.6rem; }
}
@media (max-width: 359px) { .mobile-top .wordmark .stage-pill { display: none; } }
@media (max-width: 345px) { .has-back .mobile-top .wordmark > span:not(.stage-pill) { display: none; } }

/* Build 47: a playlist's page has a view mode and an Edit mode */
#pl-page:not(.editing) .edit-only { display: none !important; }
#pl-page.editing .view-only { display: none !important; }
#pl-page:not(.editing):not(.selecting) .sel-only { display: none !important; }
#pl-page.selecting .sel-acts .edit-only { display: none !important; }
#pl-page.editing .pl-head .detail-cover { outline: 2px dashed rgba(195, 164, 255, .55); outline-offset: 4px; }
.pl-link-row { display: flex; flex-wrap: wrap; gap: .5rem; flex-basis: 100%; }
.pl-link-row[hidden] { display: none; }
.pl-link-url { flex: 1 1 14rem; min-width: 0; font-size: .9rem; }
.pl-rules-line { margin: .6rem 0 0; }

/* Build 47: smart playlist rules */
.smart-card { display: grid; gap: 1rem; padding: 1.1rem; }
.smart-name { display: grid; gap: .35rem; max-width: 28rem; }
.smart-mode { margin: 0; }
.sm-group { border: 1px solid var(--line); border-radius: .9rem; padding: .8rem .9rem 1rem; margin: 0 0 .9rem; display: grid; gap: .7rem; min-width: 0; }
.sm-group legend { font-weight: 800; padding: 0 .3rem; }
.sm-group .hint { margin: 0; }
.sm-pick { display: grid; gap: .4rem; min-width: 0; }
.sm-pick-h { font-weight: 700; color: var(--muted); font-size: .9rem; }
.sm-add { display: flex; gap: .5rem; flex-wrap: wrap; }
.sm-add input, .sm-add select { flex: 1 1 14rem; min-width: 0; }
.sm-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.sm-chips .chip { display: inline-flex; align-items: center; gap: .3rem; }
.chip-x { min-height: 0; padding: 0 .25rem; background: none; box-shadow: none; color: inherit; font-size: .8rem; }
.chip-x:hover { transform: none; background: none; box-shadow: none; }
.sm-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.sm-row select { flex: 1 1 12rem; width: auto; }
.sm-rules { display: grid; gap: .5rem; margin: .7rem 0; }
.sm-rule { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1.6fr) auto; gap: .4rem; align-items: center; }
.sm-pick-text { color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-adv-foot { display: grid; gap: .6rem; margin-top: .9rem; }
.sm-adv-foot label { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-weight: 600; color: var(--muted); }
.sm-adv-foot input { width: 6rem; }
.sm-adv-foot select { width: auto; }
.smart-preview { border-top: 1px solid var(--line); padding-top: .8rem; }
.sm-count { margin: 0 0 .4rem; }
.sm-sample .t, .sm-sample .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-sample .meta { display: flex; flex-direction: column; min-width: 0; }
.sm-sample .s { color: var(--muted); font-size: .85rem; }
@media (max-width: 600px) { .sm-rule { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sm-rule > :nth-child(3) { grid-column: 1 / 2; } }
/* build 47 fixes: nothing wider than the phone in the rules form; the share sheet's list rows stay inside it */
.smart-card { grid-template-columns: minmax(0, 1fr); }
.smart-card input, .smart-card select { max-width: 100%; }
.smart-name input { width: 100%; }
.sm-row select { flex: 1 1 10rem; min-width: 0; }
.sm-group > * { min-width: 0; }
.pl-people li { margin: 0; }
.own-origin { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .9rem; color: var(--muted); }
.own-origin select { width: auto; max-width: 100%; }

/* Build 48: New playlist setup, ⋯ on each playlist */
.pl-new-btn { flex: none; }
.pl-setup { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; min-width: 0; }
.pl-setup input { width: 100%; box-sizing: border-box; }
.pl-setup-q { margin: .6rem 0 0; font-weight: 700; }
.pl-kinds { display: grid; gap: .55rem; }
.pl-kind { display: flex; align-items: center; justify-content: flex-start; gap: .9rem; text-align: left; white-space: normal; padding: .8rem .9rem; border-radius: .9rem; min-height: 0; width: 100%; min-width: 0; box-sizing: border-box;
  background: var(--surface-1); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; }
.pl-kind:hover { transform: none; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.pl-kind.on { background: rgba(167, 123, 255, .16); box-shadow: inset 0 0 0 2px var(--accent); }
.pl-kind-ico { flex: none; width: 2.6rem; height: 2.6rem; border-radius: .7rem; display: grid; place-items: center; background: var(--surface-2); color: var(--accent-hi); }
.pl-kind-ico svg { width: 1.5rem; height: 1.5rem; }
.pl-kind-t { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pl-kind-t small { color: var(--muted); font-size: .86rem; line-height: 1.35; }
.pl-tile { position: relative; }
.pl-more { position: absolute; z-index: 3; top: .4rem; right: .4rem; width: 2.1rem; height: 2.1rem; min-height: 0; padding: 0; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: rgba(9, 7, 15, .65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.pl-more:hover { transform: none; background: rgba(9, 7, 15, .85); }
.pl-more svg { width: 1.3rem; height: 1.3rem; }
.pl-menu { display: grid; gap: .4rem; }
.pl-menu-item { width: 100%; text-align: left; background: var(--surface-1); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; }
.pl-menu-item:hover { transform: none; background: var(--surface-2); }
.pl-menu-item.pl-del { color: var(--err); }
.own-privacy { margin: .2rem 0 1rem; }
.pl-filter { margin: .2rem 0 .9rem; }
.pl-setup small.hint { margin-top: -.2rem; }
#sheet .pl-composer { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }

/* Build 53: buttons on shelf tiles (Add on "Picked for you"…) had their glow cut off by the scrolling shelf.
   The shelf gets room around its tiles (and the same negative margin, so nothing moves), and buttons on
   tiles get a softer, closer glow that fits in it. */
.shelf { padding: .5rem .75rem 1.15rem; margin: 0 -.75rem; scroll-padding-inline: .75rem; }
.shelf .tile .tile-actions button:not(.secondary) {
  box-shadow: 0 3px 12px rgba(125, 77, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .35); }
.shelf .tile .tile-actions button:not(.secondary):hover {
  transform: translateY(-1px); box-shadow: 0 4px 16px rgba(125, 77, 255, .42), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* Build 53: the import form inside the New playlist window: always stacked (on computers it used to switch to its
   page layout, four things across, crushed into the narrow window), with room between the parts. */
#sheet .pl-composer form { display: grid; gap: .75rem; }
#sheet .pl-url-label { margin: 0; }
#sheet .pl-opts { grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-top: 0; }
#sheet .pl-when { white-space: normal; flex-wrap: wrap; }
#sheet .pl-when select { flex: 1 1 10rem; min-width: 0; }
#sheet .pl-go { width: 100%; }
#sheet .pl-mode-hint { margin: 0; }
#sheet .pl-composer > .hint, #sheet .pl-composer > .alert { margin: 0 0 .8rem; }
/* The window's scrolling part clipped the glow of its buttons at the edges: room around them, same width. */
#sheet-body { padding: .35rem .6rem 1rem; margin: 0 -.6rem; }
#sheet-body button:not(.secondary):not(.icon-btn):not(.pl-kind):not(.pl-pick):not(.pl-menu-item):not(.create-opt):not(.vis-choice):not(.share-face):not(.share-person):not(.star):not(.unrate) { box-shadow: 0 3px 12px rgba(125, 77, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* ===== Build 54: Search like YouTube Music ========== */
/* Suggestions under the box */
.search-wrap { position: relative; z-index: 30; }
.hero:has(.search-wrap) { z-index: 40; }   /* the suggestions open over the results below */
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + .45rem); list-style: none; margin: 0; padding: .4rem;
  max-height: min(70vh, 30rem); overflow-y: auto; overscroll-behavior: contain; border-radius: 1.1rem;
  background: #1a1428; border: 1px solid var(--line-2); box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .6); }
.suggest .sg { display: flex; align-items: center; gap: .75rem; min-height: 2.9rem; padding: .25rem .4rem .25rem .8rem; border-radius: .7rem;
  cursor: pointer; color: var(--text); }
.suggest .sg:hover, .suggest .sg.active { background: var(--surface-3); }
.suggest .sg-ico { display: grid; place-items: center; width: 1.2rem; flex: none; color: var(--muted); }
.suggest .sg-ico svg { width: 1.15rem; height: 1.15rem; }
.suggest .sg-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.suggest .sg-t b { color: var(--text); font-weight: 800; }
.suggest .recent .sg-t { color: var(--accent-hi); }
.suggest .sg-side { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; min-height: 0; padding: 0; border-radius: 50%;
  color: var(--muted); background: transparent; box-shadow: none; }
.suggest .sg-side:hover { color: var(--text); background: var(--surface-2); transform: none; box-shadow: none; filter: none; }
.suggest .sg-side svg { width: 1.1rem; height: 1.1rem; }
.suggest .sg-sep { padding: .55rem .8rem .25rem; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  border-top: 1px solid var(--line); margin-top: .3rem; }
.suggest .sg-item { padding: .2rem .4rem; }
.suggest .sg-link { display: flex; align-items: center; gap: .75rem; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.suggest .sg-art { width: 2.6rem; height: 2.6rem; flex: none; border-radius: .4rem; object-fit: cover; display: grid; place-items: center; font-weight: 900; }
.suggest .sg-art.round { border-radius: 50%; }
.suggest .sg-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.suggest .sg-meta .sg-t { color: var(--text); font-weight: 700; }
.suggest .sg-s { color: var(--muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest .on-mini { margin-right: .5rem; }

/* Filters */
.f-tabs { display: flex; gap: .45rem; margin: 0 0 1rem; overflow-x: auto; scrollbar-width: none; padding: .15rem; }
.f-tabs::-webkit-scrollbar { display: none; }
.f-tab { flex: none; min-height: 2.35rem; padding: 0 1rem; border-radius: .7rem; font-size: .93rem; font-weight: 700; color: var(--text);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.f-tab:hover { background: var(--surface-3); transform: none; filter: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.f-tab[aria-pressed="true"] { color: var(--bg, #0d0916); background: var(--text); box-shadow: none; }
.f-tab[hidden] { display: none; }
.head-tools { display: flex; align-items: center; gap: .6rem; }
.card-head .f-all { flex: none; }

/* Top result next to the first songs (stacked on phones) */
/* Build 56: side by side only when the results themselves are wide enough (not on iPads, where the sidebar
   takes the room): measured on the results area, not the screen. */
#results-area { container-type: inline-size; }
@container (min-width: 960px) {
  .f-top-row.has-top { display: grid; grid-template-columns: minmax(20rem, 2fr) 3fr; gap: 0 2rem; align-items: start; }
  .f-top-row.has-top .f-songs .album-col { display: none; }   /* titles need the room beside the Top result */
}
.f-top-wrap .f-hero, .f-top-wrap .f-hero-wrap { margin-left: 0; }
.f-top-wrap .f-hero { padding: 1rem; border-radius: 1.2rem; background: var(--surface-1); border: 1px solid var(--line); width: 100%; }
.f-top-wrap .f-hero-wrap { flex-direction: column; align-items: stretch; }
.f-top-wrap .f-hero-wrap .f-hero-lib { align-self: flex-start; }
.f-top { display: flex; gap: 1.1rem; align-items: center; padding: 1rem; border-radius: 1.2rem; background: var(--surface-1); border: 1px solid var(--line); }
.f-top.on { box-shadow: inset 0 0 0 1px rgba(143, 240, 196, .25); }
.f-top-pic { position: relative; width: 8.5rem; aspect-ratio: 1; flex: none; border-radius: .8rem; }
.f-top-pic.wide { width: 11rem; aspect-ratio: 16 / 9; }
.f-top-pic > img, .f-top-pic > .gen { width: 100%; height: 100%; object-fit: cover; border-radius: .8rem; display: grid; place-items: center;
  font-size: 2.4rem; font-weight: 900; box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .45); }
.f-top-pic > .state-dot { right: .4rem; bottom: .4rem; width: 1.6rem; height: 1.6rem; }
.f-top-pic .pv-float { left: .45rem; top: .45rem; }
.f-top-meta { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.f-top-meta .eyebrow { margin: 0; }
.f-top-name { font-family: var(--display); font-weight: 900; font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.15; color: var(--text);
  overflow-wrap: break-word; hyphens: manual; }
.f-top-ver { color: var(--muted); font-size: .9rem; font-weight: 700; }
.f-top-acts .rate { flex-wrap: wrap; }
.f-top-meta { flex: 1 1 auto; }
.f-top-meta .s { color: var(--muted); font-size: .9rem; }
.f-top-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .55rem; }
@media (max-width: 600px) {
  .f-top { gap: .85rem; padding: .8rem; }
  .f-top-pic { width: 6.2rem; } .f-top-pic.wide { width: 8rem; }
}

/* Videos (16:9) and playlists */
.f-videos { --n: 1.6; }
@media (min-width: 600px) { .f-videos { --n: 2.4; } }
@media (min-width: 900px) { .f-videos { --n: 3.3; } }
@media (min-width: 1500px) { .f-videos { --n: 4.3; } }
.f-video .cover { aspect-ratio: 16 / 9; }
.f-video .cover > img { object-fit: cover; }
.v-dur { position: absolute; right: .4rem; bottom: .4rem; z-index: 2; padding: .1rem .4rem; border-radius: .35rem; font-size: .75rem; font-weight: 800;
  color: #fff; background: rgba(0, 0, 0, .75); line-height: 1.4; }
.f-video .cover > .state-dot { right: auto; left: .45rem; bottom: .45rem; }
.f-vrow .art-wrap.wide .art { width: 5.6rem; height: 3.15rem; object-fit: cover; }
.f-vrow .art-wrap.wide .pv-art { border-radius: .5rem; }

/* A pasted link: its picture and name */
.link-head { display: flex; gap: 1.1rem; align-items: center; margin-bottom: .9rem; }
.link-pic { position: relative; width: 7.5rem; aspect-ratio: 1; flex: none; border-radius: .8rem; overflow: hidden; background: var(--surface-2); }
.link-pic.wide { width: 11rem; aspect-ratio: 16 / 9; }
.link-pic > img, .link-pic > .gen { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; font-size: 2rem; font-weight: 900; }
.link-pic .pv-float { left: .45rem; top: .45rem; }
.link-pic .skel { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .08) 50%, transparent 80%) var(--surface-2);
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .link-pic .skel { animation: none; } }
.link-meta { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.link-meta .eyebrow { margin-bottom: .1rem; }
.link-title { font-family: var(--display); font-weight: 900; font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.15; overflow-wrap: anywhere; }
.link-head.loading .link-title { color: var(--muted); font-family: inherit; font-weight: 600; font-size: 1rem; }
.link-sub { color: var(--muted); font-size: .92rem; }
.link-sub:empty, .link-extra:empty { display: none; }
.link-extra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--muted); font-size: .88rem; font-weight: 700; margin-top: .2rem; }
.link-tracks { list-style: none; margin: 0 0 .8rem; padding: .3rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.link-tracks li { position: relative; display: flex; gap: .6rem; align-items: baseline; padding: .3rem 0; font-size: .92rem; min-width: 0; }
.link-tracks .lt { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-tracks .la { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.link-tracks .state-dot { position: static; width: 1rem; height: 1rem; align-self: center; box-shadow: none; flex: none; }
.link-tracks .state-dot svg { width: .7rem; height: .7rem; }
.link-tracks .more { color: var(--faint); }
@media (max-width: 600px) { .link-pic { width: 5.6rem; } .link-pic.wide { width: 8rem; } .link-head { gap: .85rem; } }

/* YouTube Music's Moods & genres */
.ytm-sec h3 { margin: .4rem 0 .6rem; font-size: 1rem; color: var(--muted); }
.ytm-sec + .ytm-sec { margin-top: 1rem; }
.ytm-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 46%), 1fr)); }
.ytm-mood { position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 3rem;
  padding: .45rem .8rem .45rem 1.15rem; border-radius: .6rem; text-align: left; white-space: normal; line-height: 1.2; font-weight: 800; font-size: .95rem;
  color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.ytm-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: .38rem; }
.ytm-mood:hover { background-color: var(--surface-3); transform: none; filter: none; }
.card-head:has(> .f-all), .card-head:has(.head-tools .f-all) { flex-wrap: nowrap; align-items: flex-start; }
/* Build 56: no big gap between the search box and the filters once there are results */
.has-results .hero { padding-bottom: .5rem; margin-bottom: 0; }
.has-results .search-wrap { margin-bottom: .9rem; }

/* ================================================================================================
   Build 58 (2026-10-17): laid out like Spotify. Same colours, glass and type; only where things sit.
   Computers: the sidebar is two panels (the pages; Your Library with your playlists), a top bar over the
   page (Back / Forward, Home, search, bell, your picture) and a player bar while a preview plays.
   Phones: your picture on the left of the top bar on the five tabs, + on Playlists, the same player bar.
   ================================================================================================ */

@media (min-width: 1024px) {
  :root { --rail: 19rem; }
  .shell { grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .rail { grid-column: 1; grid-row: 1 / span 2; gap: .5rem; padding: .5rem 0 .5rem .5rem; background: none; border-right: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; }
  .rail-panel { border-radius: .9rem; background: rgba(7, 5, 12, .5); border: 1px solid var(--line);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .rail-main { padding: 1rem .6rem .6rem; flex: none; }
  .rail-main .rail-top { padding: 0 .4rem .7rem; }
  .rail-main nav { gap: .1rem; }
  .rail-main nav a { padding: .5rem .8rem; font-size: 1rem; }
  .rail-lib { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: .7rem .5rem .6rem; }
  .lib-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .3rem 0 .3rem; }
  .lib-title { display: flex; align-items: center; gap: .8rem; padding: .45rem .5rem; border-radius: .7rem; color: var(--muted); font-weight: 800; font-size: 1rem; }
  .lib-title svg { width: 1.45rem; height: 1.45rem; flex: none; }
  .lib-title:hover, .lib-title[aria-current="page"] { color: var(--text); text-decoration: none; }
  .lib-title[aria-current="page"] svg { color: var(--accent-hi); filter: drop-shadow(0 0 6px rgba(167, 123, 255, .7)); }
  .lib-new { width: 2.1rem; height: 2.1rem; min-height: 0; padding: 0; border-radius: 50%; background: var(--surface-2); color: var(--text); box-shadow: none; }
  .lib-new:hover { background: var(--surface-3); box-shadow: none; transform: none; }
  .lib-new svg { width: 1.2rem; height: 1.2rem; }
  .lib-chips { display: flex; flex-wrap: wrap; gap: .35rem; padding: .55rem .5rem .35rem; }
  .lib-chips .chip { min-height: 1.85rem; padding: 0 .75rem; font-size: .8rem; }
  .lib-list { list-style: none; margin: .2rem 0 0; padding: 0 .1rem; overflow-y: auto; flex: 1 1 auto; min-height: 4rem; scrollbar-width: thin; }
  .lib-list li { margin: 0; }
  .lib-row { display: flex; align-items: center; gap: .75rem; padding: .4rem .5rem; border-radius: .6rem; color: var(--text); text-decoration: none; min-width: 0; }
  .lib-row:hover { background: var(--surface-2); text-decoration: none; }
  .lib-row[aria-current="page"] { background: var(--surface-3); }
  .lib-row[aria-current="page"] .lib-name { color: var(--accent-hi); }
  .lib-art { width: 2.9rem; height: 2.9rem; border-radius: .45rem; flex: none; object-fit: cover; display: grid; place-items: center; font-weight: 900; overflow: hidden; }
  .lib-meta { min-width: 0; display: flex; flex-direction: column; }
  .lib-name { font-weight: 700; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lib-sub { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lib-sub .lib-dot { color: var(--accent-hi); }
  .lib-empty { color: var(--muted); font-size: .88rem; padding: .6rem .6rem; list-style: none; }
  .rail-lib .rail-foot { margin-top: .4rem; padding-top: .6rem; }

  .stage { grid-column: 2; grid-row: 2; padding-top: .2rem; }
}

/* The player bar: what's previewing (both widths). On phones it sits above the tabs, where the downloading bar goes. */
.pvbar { position: fixed; z-index: 21; left: .5rem; right: .5rem; bottom: calc(var(--tabbar) + .45rem + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "art text play stop" "time time time time";
  align-items: center; column-gap: .75rem; row-gap: .35rem; padding: .5rem .6rem .5rem .5rem; border-radius: .9rem;
  background: rgba(38, 27, 62, .96); border: 1px solid var(--line-2); box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .55), 0 0 2rem rgba(125, 77, 255, .25);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.pvb-art { grid-area: art; width: 2.8rem; height: 2.8rem; border-radius: .5rem; overflow: hidden; display: grid; place-items: center; font-weight: 900; }
.pvb-art img { width: 100%; height: 100%; object-fit: cover; }
.pvb-text { grid-area: text; min-width: 0; display: flex; flex-direction: column; }
.pvb-text b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvb-text small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvb-time { grid-area: time; display: flex; align-items: center; gap: .55rem; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pvb-time .bar { flex: 1; height: 4px; }
.pvb-play { grid-area: play; min-height: 2.3rem; padding: 0 .9rem; font-size: .85rem; }
.pvb-stop { grid-area: stop; width: 2.4rem; height: 2.4rem; min-height: 0; padding: 0; border-radius: 50%; background: var(--text); color: var(--on-accent); box-shadow: none; }
.pvb-stop:hover { box-shadow: 0 0 1.2rem rgba(255, 255, 255, .35); }
.pvb-stop svg { width: 1.1rem; height: 1.1rem; }
body.has-pvbar .dlbar { display: none; }
body.has-pvbar .stage { padding-bottom: calc(var(--tabbar) + 7rem + env(safe-area-inset-bottom)); }
body.has-pvbar .toast { bottom: calc(var(--tabbar) + 7.5rem + env(safe-area-inset-bottom)); }
@media (max-width: 520px) { .pvb-play span { display: none; } .pvb-play { width: 2.4rem; padding: 0; } }
@media (min-width: 1024px) {
  .pvbar { left: calc(var(--rail) + 1rem); right: 1rem; bottom: .8rem; grid-template-columns: auto minmax(10rem, 1fr) minmax(12rem, 1.4fr) auto auto;
    grid-template-areas: "art text time play stop"; column-gap: 1.1rem; padding: .55rem .8rem .55rem .55rem; }
  body.has-pvbar .stage { padding-bottom: 7rem; }
  body.has-pvbar .toast { bottom: 6.5rem; }
}

/* Play in player: the device list (like Spotify's Connect) */
.play-on { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .4rem; }
.play-on button, .play-on a { width: 100%; justify-content: flex-start; gap: .9rem; min-height: 3.6rem; padding: .5rem .9rem; text-align: left;
  background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); border-radius: .8rem; }
.play-on button:hover, .play-on a:hover { background: var(--surface-3); transform: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.play-on .po-ico { width: 2.3rem; height: 2.3rem; border-radius: .6rem; display: grid; place-items: center; flex: none; background: var(--surface-3); }
.play-on .po-ico svg { width: 1.3rem; height: 1.3rem; }
.play-on .po-ico.plex { background: rgba(255, 196, 92, .16); color: #ffcf7a; }
.play-on .po-ico.app { background: var(--info-bg); color: var(--accent-hi); }
.play-on span.po-t { display: flex; flex-direction: column; min-width: 0; }
.play-on small { color: var(--muted); font-weight: 600; font-size: .8rem; white-space: normal; }
.play-on .pill { margin-left: auto; }
.play-remember { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .88rem; }
.play-remember input { width: 1.1rem; height: 1.1rem; }
.play-group { display: inline-flex; align-items: stretch; gap: 2px; }
.play-group .act-play-pick { min-height: 0; width: 2.4rem; padding: 0; border-radius: 0 999px 999px 0; }
.play-group .act-play-pick svg { width: 1.3rem; height: 1.3rem; }
.pvb-time .bar { margin-top: 0; }
.pvb-time .bar > span { transition: none; }

/* ================================================================================================
   Build 59 (2026-10-17): playlists like Spotify's. A big header, a row of actions, the songs as a table,
   Find more under them; Create, Edit details and Share windows.
   ================================================================================================ */
.pl-hero { display: flex; align-items: flex-end; gap: 1.6rem; padding-top: 1.4rem; }
.pl-hero-cover { position: relative; width: clamp(9rem, 22vw, 14.5rem); aspect-ratio: 1; flex: none; border-radius: .7rem; overflow: hidden;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .55); background: var(--surface-2); }
.pl-hero-cover > img, .pl-hero-cover > .gen, .pl-hero-cover > .pl-mosaic { width: 100%; height: 100%; object-fit: cover; }
.pl-empty-cover { display: grid; place-items: center; }
.pl-empty-cover svg { width: 38%; height: 38%; opacity: .85; }
.pl-cover-edit { position: absolute; inset: 0; min-height: 0; border-radius: 0; flex-direction: column; gap: .4rem; opacity: 0; background: rgba(9, 7, 15, .62);
  box-shadow: none; color: var(--text); font-size: .9rem; transition: opacity .15s; }
.pl-cover-edit svg { width: 2.2rem; height: 2.2rem; }
.pl-cover-edit:hover, .pl-cover-edit:focus-visible { opacity: 1; transform: none; filter: none; box-shadow: none; }
@media (hover: none) { .pl-cover-edit { opacity: 1; inset: auto .45rem .45rem auto; width: 2.4rem; height: 2.4rem; border-radius: 50%; padding: 0; } .pl-cover-edit span { display: none; } .pl-cover-edit svg { width: 1.2rem; height: 1.2rem; } }
.pl-hero-meta { min-width: 0; flex: 1; }
.pl-hero h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 4.6rem); line-height: 1.02; margin: .3rem 0 .55rem; overflow-wrap: anywhere; }
.pl-name-btn { all: unset; cursor: text; border-radius: .4rem; }
.pl-name-btn:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.pl-name-btn:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.pl-desc { color: var(--muted); margin: 0 0 .5rem; max-width: 46rem; }
.pl-desc.empty .linkish { color: var(--faint); font-size: .92rem; }
.vis-pill { all: unset; cursor: pointer; letter-spacing: .08em; padding: .05rem .5rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); }
.vis-pill:hover { color: var(--text); }
.vis-pill.vis-profile { color: var(--ok); box-shadow: inset 0 0 0 1px rgba(143, 240, 196, .4); }
.vis-pill.vis-link { color: var(--blue); box-shadow: inset 0 0 0 1px rgba(143, 211, 255, .4); }
.pl-by { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0; font-size: .95rem; color: var(--muted); }
.pl-owner { display: inline-flex; align-items: center; gap: .45rem; color: var(--text); }
.pl-owner .face { width: 1.6rem; height: 1.6rem; }
.pl-with { display: inline-flex; align-items: center; gap: .2rem; }
.pl-with .face { width: 1.5rem; height: 1.5rem; margin-left: -.2rem; box-shadow: 0 0 0 2px var(--bg); }
.pl-stat::before { content: "·"; margin-right: .6rem; }
@media (max-width: 700px) {
  .pl-hero { flex-direction: column; align-items: stretch; gap: 1rem; padding-top: .6rem; }
  .pl-hero-cover { width: min(62vw, 15rem); align-self: center; }
  .pl-hero h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
}

.pl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: .4rem 0 1.1rem; }
.play-group.big .act-play { min-height: 3.4rem; padding: 0 1.6rem 0 1.3rem; font-size: 1.02rem; }
.play-group.big .act-play .btn-ico { width: 1.5rem; height: 1.5rem; }
.play-group.big .act-play-pick { width: 2.8rem; }
.round-btn { width: 2.9rem; height: 2.9rem; min-height: 0; padding: 0; border-radius: 50%; background: none; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
.round-btn:hover { color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); transform: none; filter: none; }
.round-btn svg { width: 1.35rem; height: 1.35rem; }
.pl-save { min-height: 2.9rem; }
.pl-saved { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .9rem; color: var(--ok); }
.pl-saved svg { width: 1.2rem; height: 1.2rem; }
.pl-filter-box { margin-left: auto; display: flex; align-items: center; gap: .4rem; padding: 0 .7rem; border-radius: 999px; background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line); }
.pl-filter-box svg { width: 1.05rem; height: 1.05rem; color: var(--muted); flex: none; }
.pl-filter-box input { border: 0; background: none; min-height: 2.4rem; padding: 0; width: 12rem; font-size: .92rem; }
.pl-filter-box input:focus { box-shadow: none; }
@media (max-width: 600px) { .pl-filter-box { margin-left: 0; flex: 1 1 100%; } .pl-filter-box input { width: 100%; } }
.pl-sync-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: -.4rem 0 1rem; color: var(--muted); font-size: .88rem; }
.pl-sync-line form { margin: 0; }
.pl-vis-note { margin: -.6rem 0 1rem; }

/* The songs: #, title, album, date added, length, then ⋮⋮ and ⋯ */
.pl-tracks { margin-bottom: 1.4rem; }
.pl-thead, .pl-rows > li { display: grid; grid-template-columns: 2.2rem minmax(0, 4fr) minmax(0, 3fr) minmax(6.5rem, 1.6fr) 3.3rem 4.4rem;
  align-items: center; column-gap: 1rem; }
.pl-thead { padding: 0 .8rem .5rem; border-bottom: 1px solid var(--line); margin-bottom: .4rem; color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.pl-thead .c-n { text-align: center; }
.pl-thead .c-d svg { width: 1.05rem; height: 1.05rem; }
.pl-rows { list-style: none; margin: 0; padding: 0; }
.pl-rows > li { padding: .32rem .8rem; border-radius: .55rem; min-height: 3.6rem; }
.pl-rows > li:hover, .pl-rows > li.sel { background: var(--surface-2); }
.pl-rows > li.sel { box-shadow: inset 0 0 0 1px rgba(167, 123, 255, .35); }
.pl-rows .c-n { display: grid; place-items: center; }
.pl-rows .tn { position: relative; width: 2rem; height: 2rem; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: none; box-shadow: none; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.pl-rows .tn > * { grid-area: 1 / 1; }
.pl-rows .tn .pv-ico { opacity: 0; color: var(--text); width: 1rem; height: 1rem; }
.pl-rows .tn:hover { transform: none; filter: none; box-shadow: none; background: var(--surface-3); }
.pl-rows li:hover .tn .num, .pl-rows .tn:focus-visible .num, .pl-rows .tn[aria-pressed="true"] .num { opacity: 0; }
.pl-rows li:hover .tn .pv-ico, .pl-rows .tn:focus-visible .pv-ico, .pl-rows .tn[aria-pressed="true"] .pv-ico { opacity: 1; }
.pl-rows .tn[aria-pressed="true"], .pl-rows .tn[aria-pressed="true"] .pv-ico { color: var(--accent-hi); }
@media (hover: none) { .pl-rows .tn .num { opacity: 0; } .pl-rows .tn .pv-ico { opacity: .85; color: var(--muted); } }
.pl-rows .c-t { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.pl-thumb { width: 2.75rem; height: 2.75rem; border-radius: .35rem; flex: none; object-fit: cover; display: grid; place-items: center; font-weight: 900; }
.pl-rows .meta { min-width: 0; display: flex; flex-direction: column; }
.pl-rows .meta .t { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-rows .meta .s, .pl-rows .c-al, .pl-rows .c-ad, .pl-rows .c-d { color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-rows .c-al a { color: var(--muted); }
.pl-rows .c-al a:hover { color: var(--text); }
.pl-rows .c-ad { display: flex; align-items: center; gap: .45rem; }
.pl-rows .c-ad .face { width: 1.5rem; height: 1.5rem; }
.pl-rows .c-d { font-variant-numeric: tabular-nums; }
.pl-rows .c-x { display: flex; align-items: center; justify-content: flex-end; gap: .1rem; }
.row-more { width: 2.2rem; height: 2.2rem; min-height: 0; padding: 0; border-radius: 50%; background: none; box-shadow: none; color: var(--muted); }
.row-more:hover { color: var(--text); background: var(--surface-3); transform: none; filter: none; box-shadow: none; }
.row-more svg { width: 1.2rem; height: 1.2rem; }
.grip { width: 1.9rem; height: 2.2rem; display: grid; place-items: center; color: var(--faint); cursor: grab; touch-action: none; border-radius: .4rem; }
.grip svg { width: 1.1rem; height: 1.1rem; }
.grip:hover { color: var(--text); background: var(--surface-3); }
@media (hover: hover) { .pl-rows > li:not(:hover) .row-more, .pl-rows > li:not(:hover) .grip { opacity: 0; } .pl-rows > li .row-more:focus-visible { opacity: 1; } }
.pl-rows > li.dragging { background: var(--surface-3); box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .5), inset 0 0 0 1px var(--accent); position: relative; z-index: 2; }
.pl-rows > li.dragging .grip { cursor: grabbing; }
#pl-page.selecting .pl-rows > li > .c-n { display: none; }
#pl-page.selecting .pl-thead .c-n { visibility: hidden; }
.pl-rows .pick { display: grid; place-items: center; margin: 0; cursor: pointer; }
.pl-rows .pick input { width: 1.2rem; height: 1.2rem; }
#pl-page.selecting .sel-bar { position: sticky; top: 0; z-index: 5; background: rgba(22, 17, 34, .96); border-radius: .7rem; margin-bottom: .5rem; }
@media (min-width: 1024px) { #pl-page.selecting .sel-bar { top: 4rem; } }
@media (max-width: 1023px) { #pl-page.selecting .sel-bar { top: calc(3.5rem + env(safe-area-inset-top)); } }
@media (max-width: 1100px) { .pl-thead, .pl-rows > li { grid-template-columns: 2.2rem minmax(0, 4fr) minmax(0, 3fr) 3.3rem 4.4rem; } .pl-thead .c-ad, .pl-rows > li > .c-ad { display: none; } }
@media (max-width: 760px) {
  .pl-thead { display: none; }
  .pl-rows > li { grid-template-columns: 2rem minmax(0, 1fr) auto; column-gap: .7rem; padding: .3rem .2rem; }
  .pl-rows > li > .c-al, .pl-rows > li > .c-d { display: none; }
  .pl-rows .row-more, .pl-rows .grip { opacity: 1; }
}

/* Find more (editors): search the library and Recommended, one tap adds */
.pl-find { margin: 1.6rem 0 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.pl-find h2 { margin-bottom: .8rem; }
.pl-find-box { max-width: 34rem; min-height: 3.1rem; margin-bottom: .8rem; }
.pl-find-box input { min-height: 2.7rem; }
.pl-recs { margin-top: .8rem; }
.pl-recs .card-head { align-items: flex-end; margin-bottom: .4rem; }
.pl-recs h3 { margin: 0; font-size: 1.15rem; }
.pl-recs .sub { margin: 0; }
.pl-rows.compact > li { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) auto; min-height: 3.4rem; }
.pl-rows.compact .empty { display: block; color: var(--muted); font-size: .92rem; padding: .5rem .8rem; min-height: 0; }
.pl-thumb-wrap { position: relative; flex: none; line-height: 0; }
.pl-thumb-wrap .pv-art { border-radius: .35rem; }
.find-add { min-width: 5.4rem; }
.find-add.done { color: var(--ok); box-shadow: inset 0 0 0 1px rgba(143, 240, 196, .35); }
@media (max-width: 760px) { .pl-rows.compact > li { grid-template-columns: minmax(0, 1fr) auto; } .pl-rows.compact > li > .c-al { display: none; } }

/* Create */
.create-menu, .vis-choices { display: grid; gap: .5rem; }
.create-opt, .vis-choice { width: 100%; justify-content: flex-start; gap: .9rem; min-height: 4rem; padding: .7rem 1rem; text-align: left; white-space: normal;
  background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); border-radius: .9rem; }
#sheet-body .create-opt, #sheet-body .vis-choice { box-shadow: inset 0 0 0 1px var(--line); }
.create-opt:hover, .vis-choice:hover { background: var(--surface-3); transform: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.co-ico { width: 2.8rem; height: 2.8rem; border-radius: .7rem; display: grid; place-items: center; flex: none; background: var(--info-bg); color: var(--accent-hi); }
.co-ico svg { width: 1.45rem; height: 1.45rem; }
.co-t, .vis-choice { display: flex; flex-direction: column; align-items: flex-start; }
.co-t small, .vis-choice small { color: var(--muted); font-weight: 600; font-size: .85rem; line-height: 1.35; }
.vis-choice { gap: .15rem; min-height: 3.4rem; }
#sheet-body .vis-choice[aria-checked="true"] { background: var(--info-bg); box-shadow: inset 0 0 0 2px var(--accent); }
.vis-choice[aria-checked="true"] b::after { content: " ✓"; color: var(--accent-hi); }

/* Edit details */
.pl-details { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 1rem 1.2rem; align-items: start; }
.pl-details .form-actions { grid-column: 1 / -1; justify-content: flex-end; }
.pl-details-picbox { display: grid; gap: .45rem; }
.pl-details-pic { width: 100%; aspect-ratio: 1; border-radius: .6rem; overflow: hidden; background: var(--surface-2); }
.pl-details-pic > * { width: 100%; height: 100%; object-fit: cover; }
.pl-details-pic .gen { display: grid; place-items: center; }
.pl-details textarea { resize: vertical; }
@media (max-width: 520px) { .pl-details { grid-template-columns: 1fr; } .pl-details-picbox { grid-template-columns: 6rem 1fr; align-items: center; } .pl-details-pic { grid-row: span 2; } }

/* Share: the playlist, faces to send it to, who has it, who can open it, the link */
.share-pl h3 { font-size: .95rem; margin: 1.1rem 0 .5rem; color: var(--muted); }
.share-card { display: flex; align-items: center; gap: .9rem; padding: .6rem; border-radius: .9rem; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.share-card > img, .share-card > .gen { width: 3.6rem; height: 3.6rem; border-radius: .5rem; object-fit: cover; flex: none; display: grid; place-items: center; }
.share-card-meta { display: flex; flex-direction: column; min-width: 0; }
.share-card-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-card-meta small { color: var(--muted); }
.share-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.share-head h3 { margin-bottom: .3rem; }
.switch.mini { margin: .6rem 0 .2rem; align-items: center; font-size: .88rem; color: var(--muted); font-weight: 700; }
.share-find { width: 100%; min-height: 2.5rem; margin-bottom: .55rem; font-size: .92rem; }
.share-faces { list-style: none; margin: 0; padding: .2rem .1rem .4rem; display: grid; grid-auto-flow: column; grid-auto-columns: 4.6rem; gap: .5rem; overflow-x: auto; scrollbar-width: thin; }
.share-faces .empty { grid-column: 1 / -1; color: var(--muted); font-size: .9rem; white-space: nowrap; }
.share-face { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 4.6rem; border-radius: .7rem; padding: .3rem 0; }
.share-face:focus-visible { outline: 2px solid var(--accent-hi); }
.sf-pic { position: relative; }
.sf-pic .face { width: 3.5rem; height: 3.5rem; font-size: 1.3rem; box-shadow: 0 0 0 2px transparent; transition: box-shadow .15s, transform .15s; }
.share-face:hover .sf-pic .face { box-shadow: 0 0 0 2px var(--line-2); transform: scale(1.04); }
.share-faces.collab .share-face:hover .sf-pic .face { box-shadow: 0 0 0 2px var(--pink); }
.share-face.sent .sf-pic .face { box-shadow: 0 0 0 2px var(--accent); }
.sf-pic .i { position: absolute; right: -.15rem; bottom: -.15rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px var(--panel); }
.sf-pic .i svg { width: .9rem; height: .9rem; }
.sf-name { font-size: .78rem; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.share-people { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.share-person { min-height: 0; padding: .3rem .8rem .3rem .3rem; gap: .5rem; border-radius: 999px; background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
#sheet-body .share-person { box-shadow: inset 0 0 0 1px var(--line); }
.share-person:hover { background: var(--surface-3); transform: none; }
.share-person.is-edit { box-shadow: inset 0 0 0 1px rgba(243, 168, 255, .45); }
.share-person .face { width: 2rem; height: 2rem; }
.share-person .meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.share-person small { color: var(--muted); font-weight: 600; font-size: .75rem; }
.share-pl .pl-link-row { margin-top: .8rem; }

/* Build 58: profiles, easier to read at a glance */
.profile-hero .counts { gap: .2rem 0; }
.profile-hero .counts > *:not(:last-child)::after { content: "·"; margin: 0 .55rem; color: var(--faint); }
.profile-hero .counts a { color: var(--muted); }
.profile-hero .counts a:hover { color: var(--text); }
.h-count { font-size: .85rem; font-weight: 700; color: var(--faint); font-family: system-ui, sans-serif; margin-left: .25rem; }
.limit5:not(.all) > li:nth-child(n+6) { display: none; }
.show-all { margin: .1rem 0 0 .4rem; font-weight: 800; font-size: .88rem; color: var(--muted); }
.show-all:hover { color: var(--text); }
.song-list .rank { width: 1.3rem; flex: none; text-align: right; color: var(--faint); font-variant-numeric: tabular-nums; font-weight: 700; }
.profile-songs { align-items: start; gap: 0 1.6rem; }
.profile-songs .section { margin-bottom: 1.6rem; }
.profile-songs .card { margin-bottom: .3rem; }
.shelf.circles .cover { border-radius: 50%; }
.shelf.circles .tile { text-align: center; }
.people-shelf .cover > .face-big { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font-size: 2.6rem; font-weight: 900; object-fit: cover; color: #fff; }
.head-link { margin: -.6rem 0 .6rem; font-size: .88rem; }
.profile-hero .eyebrow { margin-bottom: .2rem; }
@media (max-width: 600px) {
  .pl-bar { gap: .55rem; }
  .play-group.big .act-play { min-height: 3rem; padding: 0 1.1rem 0 .9rem; font-size: .95rem; }
  .pl-save { width: 2.9rem; height: 2.9rem; min-height: 0; padding: 0; border-radius: 50%; }
  .pl-save span { display: none; }
  .pl-saved { font-size: 0; } .pl-saved svg { width: 1.5rem; height: 1.5rem; }
}
.profile-songs > .section:only-child { max-width: 46rem; }
@media (min-width: 1024px) { html { scroll-padding-top: 4.8rem; } }   /* build 58: anchors land below the top bar */

/* Build 59: the iPad Home Screen app again (build 25's --glass-top). Build 58's sidebar panels, top bar and page
   started at the very top, under iOS's glass strip with the clock and battery: everything starts below it, the
   top bar sticks just under it, and what sticks below the top bar (Settings' menu, Home's side column, the
   selection bar, anchors) leaves room for both. --glass-top is 0 everywhere else. */
@media (min-width: 1024px) {
  .rail { padding-top: calc(.5rem + var(--glass-top, 0px)); }
  .stage { padding-top: .2rem; }
  .set-nav { top: calc(4.6rem + var(--glass-top, 0px)); }
  .home-side { top: calc(4.8rem + var(--glass-top, 0px)); }
  #pl-page.selecting .sel-bar { top: calc(4rem + var(--glass-top, 0px)); }
  html { scroll-padding-top: calc(4.8rem + var(--glass-top, 0px)); }
}
@media (max-width: 1023px) {
  html.ios-app #pl-page.selecting .sel-bar { top: calc(3.5rem + env(safe-area-inset-top) + 8px); }
}

/* Build 60: one sidebar, joined to a top bar that runs across the whole width (owner: not two floating parts).
   The top bar has the name where the sidebar is, then search, What's new, the bell and your picture; no Back,
   Forward or Home there (Back stays on phones). Both are the sidebar's old surface, so they read as one frame. */
@media (min-width: 1024px) {
  :root { --tb-h: 4.3rem; }
  .shell { grid-template-rows: auto 1fr; }
  .rail { grid-column: 1; grid-row: 2; top: calc(var(--tb-h) + var(--glass-top, 0px)); height: calc(100vh - var(--tb-h) - var(--glass-top, 0px));
    padding: .9rem .7rem .8rem; gap: 0; background: rgba(7, 5, 12, .5); border-right: 1px solid var(--line);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .rail-main { flex: none; padding: 0 0 .8rem; border-bottom: 1px solid var(--line); }
  .rail-lib { padding: .8rem 0 0; }
  .stage { grid-column: 2; grid-row: 2; padding-top: .6rem; }
  .set-nav { top: calc(var(--tb-h) + 1rem + var(--glass-top, 0px)); }
  .home-side { top: calc(var(--tb-h) + 1rem + var(--glass-top, 0px)); }
  #pl-page.selecting .sel-bar { top: calc(var(--tb-h) + .3rem + var(--glass-top, 0px)); }
  html { scroll-padding-top: calc(var(--tb-h) + 1rem + var(--glass-top, 0px)); }
}
/* Build 60: profile song lists in columns across the page (as many as fit), rows like the rest, no box */
.song-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: .15rem 1.4rem; padding: 0; }
.song-grid > li { margin: 0; padding: .45rem .55rem; }
.song-grid .art { width: 3rem; height: 3rem; }
.song-grid .s { -webkit-line-clamp: 1; }
.limit6:not(.all) > li:nth-child(n+7) { display: none; }
.song-grid + .show-all { margin-top: .4rem; }

/* Build 61: Back in the top bar, only on phones and tablets (iPads get the sidebar layout); the top bar's search
   has Search's suggestion list under it. */
.tb-back { display: none; }
@media (min-width: 1024px) {
  html.touch-os .tb-back { display: grid; }
  .tb-back { place-items: center; width: 2.6rem; height: 2.6rem; flex: none; margin-right: -.4rem; border-radius: 50%; color: var(--text);
    background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px var(--line); }
  .tb-back:hover { background: var(--surface-3); text-decoration: none; }
  .tb-back svg { width: 1.35rem; height: 1.35rem; }
}
@media (min-width: 1024px) and (hover: none) and (pointer: coarse) { .tb-back { display: grid; } }

/* ================================================================================================
   Build 62 (2026-10-17): the owner's round of tidying. No search in the top bar (Home, Search and Find more have
   it), a quiet Back, icons instead of worded buttons on album / song / artist pages, a round Play with the
   player's name beside it, and ratings like an app store's.
   ================================================================================================ */
.home-hero { z-index: 6; }   /* Home's search suggestions open over the shelves below */
@media (min-width: 1024px) {
  .tb-back { width: 2.4rem; height: 2.4rem; margin: 0 -.2rem 0 -.6rem; background: none; box-shadow: none; color: var(--muted); }
  .tb-back:hover { background: var(--surface-2); color: var(--text); }
  .tb-back svg { width: 1.5rem; height: 1.5rem; }
}

/* Play in player: one round button; the player it uses is the quiet word beside it (tap to choose another) */
.play-group { display: inline-flex; align-items: center; gap: .55rem; }
.play-group .act-play { width: 3.2rem; height: 3.2rem; min-height: 0; padding: 0; border-radius: 50%; flex: none; }
.play-group .act-play svg { width: 1.55rem; height: 1.55rem; margin-left: .15rem; }
.play-group.big .act-play { width: 3.6rem; height: 3.6rem; min-height: 0; padding: 0; }
.play-group.big .act-play svg { width: 1.75rem; height: 1.75rem; }
.play-group .act-play-pick { width: auto; min-height: 2.2rem; padding: 0 .35rem 0 .2rem; gap: .1rem; border-radius: .6rem; background: none; box-shadow: none;
  color: var(--muted); font-size: .9rem; font-weight: 700; }
.play-group .act-play-pick:hover { color: var(--text); background: var(--surface-2); transform: none; filter: none; box-shadow: none; }
.play-group .act-play-pick svg { width: 1.1rem; height: 1.1rem; }
.play-group.big .act-play-pick { width: auto; }
@media (max-width: 600px) { .play-group.big .act-play { width: 3.2rem; height: 3.2rem; padding: 0; } }

/* A page's actions: Play, then round icon buttons (their names are tooltips) */
.detail-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 1rem; }
.detail-acts form { margin: 0; }
.detail-acts .round-btn { width: 2.75rem; height: 2.75rem; }
.detail-acts .round-btn svg { width: 1.25rem; height: 1.25rem; }
.detail-acts .round-btn[aria-pressed="true"] { color: var(--accent-hi); box-shadow: inset 0 0 0 1px rgba(167, 123, 255, .55); }
.detail-acts .round-btn.danger-quiet:hover { color: var(--err); }
.detail-acts .act-follow-artist { min-height: 2.75rem; }
.detail-acts .play-group { margin-right: .3rem; }
.pv-round .pv-ico { width: 1.25rem; height: 1.25rem; }
.pv-round[aria-pressed="true"] { color: var(--accent-hi); }
.genre-pills { margin: .55rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.detail-grid:not(:has(> aside)) { grid-template-columns: minmax(0, 1fr); }

/* Ratings: the average, its stars and how many (tap: the details), and Tap to rate */
.rating-box { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin: .7rem 0 .2rem; }
.rb-sum { min-height: 0; padding: .3rem .8rem .3rem .3rem; gap: .65rem; border-radius: .8rem; background: none; box-shadow: none; color: var(--text); }
.rb-sum:hover { background: var(--surface-2); transform: none; filter: none; box-shadow: none; }
.rb-avg { font-family: var(--display); font-size: 2.2rem; font-weight: 900; line-height: 1; min-width: 2.4ch; text-align: center; }
.rb-col { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.rb-col .stars-static { font-size: 1rem; letter-spacing: .05em; }
.rb-n { color: var(--muted); font-size: .82rem; font-weight: 700; }
.rb-mine { display: flex; align-items: center; gap: .55rem; padding-left: 1.2rem; border-left: 1px solid var(--line); }
.rb-label { color: var(--muted); font-size: .82rem; font-weight: 700; }
@media (max-width: 520px) { .rb-mine { padding-left: 0; border-left: 0; flex-basis: 100%; } }
.stars-static span { color: var(--faint); }
.stars-static span.on { color: #ffd38a; }

.rate-chip { min-height: 0; height: 2rem; padding: 0 .65rem 0 .5rem; gap: .3rem; border-radius: 999px; flex: none; font-size: .82rem;
  background: var(--surface-1); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); font-variant-numeric: tabular-nums; }
.rate-chip:hover { background: var(--surface-3); transform: none; filter: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.rate-chip svg { width: .95rem; height: .95rem; color: #ffd38a; }
.rate-chip b { font-weight: 800; }
.rate-chip small { color: var(--muted); font-weight: 700; font-size: .78rem; }
.rate-chip.none svg { color: var(--faint); }
.rate-chip.mine { box-shadow: inset 0 0 0 1px rgba(255, 211, 138, .55); }
.tracklist .rate-chip, .list .rate-chip { margin-left: auto; }

/* The details window */
.rs-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; align-items: center; }
.rs-big { display: flex; flex-direction: column; align-items: center; }
.rs-avg { font-family: var(--display); font-size: 3.6rem; font-weight: 900; line-height: 1; }
.rs-big small { color: var(--muted); font-weight: 700; font-size: .82rem; }
.rs-bars { display: grid; gap: .3rem; }
.rs-row { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: center; gap: .5rem; }
.rs-s { font-size: .62rem; letter-spacing: .02em; color: var(--muted); text-align: right; }
.rs-bar { height: .42rem; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.rs-bar > span { display: block; height: 100%; border-radius: 999px; background: #ffd38a; transition: width .3s; }
.rs-n { color: var(--muted); font-size: .88rem; text-align: right; margin: .4rem 0 .9rem; }
.rs-mine { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem .9rem; border-radius: .9rem;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.rs-label { font-weight: 800; }
.rate.big .star { width: 2.4rem; height: 2.4rem; }
.rate.big .star svg { width: 1.7rem; height: 1.7rem; }
.rs-h { font-size: .95rem; color: var(--muted); margin: 1.1rem 0 .4rem; }
.rs-who { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.rs-who a { display: flex; align-items: center; gap: .7rem; padding: .35rem .4rem; border-radius: .7rem; color: var(--text); }
.rs-who a:hover { background: var(--surface-2); text-decoration: none; }
.rs-who .face { width: 2.1rem; height: 2.1rem; }
.rs-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play-group .act-play:has(+ .act-play-pick) { border-radius: 50%; }   /* build 58's split pill is gone */
.rb-avg:empty { display: none; }
/* Phones: the rating chip stays on the song's line, beside its length */
@media (max-width: 520px) {
  .tracks .tracklist li:has(> .rate-chip) { grid-template-columns: 1.4rem minmax(0, 1fr) auto auto; }
  .tracks .tracklist li > .rate-chip { grid-column: 3; grid-row: 1 / span 2; }
  .tracks .tracklist li:has(> .rate-chip) > .dur { grid-column: 4; grid-row: 1 / span 2; }
  .rate-chip { height: 1.9rem; padding: 0 .5rem; }
  .rate-chip.none:not(.mine) small { display: none; }
}

/* ================================================================================================
   Build 63 (2026-10-17): no top bar on computers (owner's request). The sidebar stays (pages, then Your
   playlists) and runs the full height again, with Kalomori's name and the bell at its top as before build 58.
   --tb-h is 0, so everything that sat under the top bar (sticky menus, anchors) sits at the top again.
   On touch screens what scrolls says so: the sidebar is one scroll with a fade + arrow while there's more below,
   and rows that scroll sideways fade at the edge where there's more.
   ================================================================================================ */
@media (min-width: 1024px) {
  :root { --tb-h: 0px; }
  .shell { grid-template-rows: none; }
  .rail { grid-row: 1; padding-top: calc(1rem + var(--glass-top, 0px)); overflow-y: auto; scrollbar-width: thin; }   /* a short window: the sidebar scrolls instead of cutting off */
  .stage { grid-row: 1; padding-top: calc(.9rem + var(--glass-top, 0px)); }
  .rail-main .rail-top { padding: 0 .3rem .9rem .5rem; }
  .rail-main .rail-top .bell { margin-right: 0; }
  /* Back on iPads: a quiet arrow at the top of the page */
  .tb-back { margin: -.3rem 0 .2rem -.6rem; }
}
/* iPads and other touch screens with the sidebar: one scroll for the whole sidebar (no small box inside a box) */
@media (min-width: 1024px) {
  html.touch-os .rail { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  html.touch-os .rail-lib { flex: none; }
  html.touch-os .lib-list { overflow: visible; flex: none; min-height: 0; }
}
@media (min-width: 1024px) and (hover: none) and (pointer: coarse) {
  .rail { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .rail-lib { flex: none; }
  .lib-list { overflow: visible; flex: none; min-height: 0; }
}
.scroll-cue { display: none; }
@media (min-width: 1024px) {
  .rail .scroll-cue { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: center; align-items: flex-end; flex: none;
    height: 3.2rem; margin: -3.2rem -.7rem 0; padding-bottom: .55rem; pointer-events: none; opacity: 0; transition: opacity .2s;
    background: linear-gradient(to bottom, rgba(7, 5, 12, 0), rgba(7, 5, 12, .96) 75%); }
  .rail.more-below .scroll-cue { opacity: 1; }
  .scroll-cue svg { width: 1.4rem; height: 1.4rem; color: var(--muted); animation: cue-bob 1.6s ease-in-out infinite; }
}
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }
/* Rows that scroll sideways (shelves of covers, filters, tabs): a fade on the side that has more */
.x-more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.2rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3.2rem), transparent); }
.x-more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3.2rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 3.2rem), transparent); }
.x-more-left.x-more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.4rem, #000 calc(100% - 3.2rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.4rem, #000 calc(100% - 3.2rem), transparent); }

/* Build 64: Play in player a little longer (owner's request): a short pill instead of a circle */
.play-group .act-play, .play-group .act-play:has(+ .act-play-pick) { width: 4.3rem; border-radius: 999px; }
.play-group.big .act-play { width: 4.8rem; }
@media (max-width: 600px) { .play-group.big .act-play { width: 4.3rem; } }

/* Build 65: Play is bigger and easy to spot (owner's request); on phones the song / album / artist page is tidied:
   cover centred, Play on its own line with the player's name beside it, the other buttons in a row under it. */
.play-group .act-play, .play-group .act-play:has(+ .act-play-pick) { width: 5rem; height: 3.5rem; }
.play-group .act-play svg { width: 1.75rem; height: 1.75rem; }
.play-group.big .act-play { width: 5.6rem; height: 3.8rem; }
.play-group.big .act-play svg { width: 1.9rem; height: 1.9rem; }
@media (max-width: 600px) {
  .detail-head .detail-cover { margin-inline: auto; width: min(17rem, 74vw); }
  .detail-acts { gap: .65rem .5rem; margin-top: 1.1rem; }
  .detail-acts .play-group { flex: 1 0 100%; margin-right: 0; }
  .play-group .act-play, .play-group .act-play:has(+ .act-play-pick), .play-group.big .act-play { width: 6.2rem; height: 3.8rem; }
  .play-group .act-play svg, .play-group.big .act-play svg { width: 1.95rem; height: 1.95rem; }
  .detail-acts .round-btn { width: 2.9rem; height: 2.9rem; }
}

/* Build 66: Play half as long again (owner's request) */
.play-group .act-play, .play-group .act-play:has(+ .act-play-pick) { width: 7.5rem; }
.play-group.big .act-play { width: 8.4rem; }
@media (max-width: 600px) {
  .play-group .act-play, .play-group .act-play:has(+ .act-play-pick), .play-group.big .act-play { width: 9.3rem; }
}
.play-group { max-width: 100%; min-width: 0; }
.play-group .act-play-pick { min-width: 0; flex: 0 1 auto; }
.play-group .act-play-pick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play-group .act-play-pick svg { flex: none; }

/* Build 67 (owner's request): on phones an album's songs have Add to a playlist where the rating chip was
   (rating stays on the song's own page), and Play is half as long again. */
@media (max-width: 520px) {
  #album-tracks li > .rate-chip { display: none; }
  #album-tracks li:has(> .act-addpl) { grid-template-columns: 1.4rem minmax(0, 1fr) auto auto; }
  #album-tracks li > .act-addpl { display: inline-grid; place-items: center; grid-column: 3; grid-row: 1 / span 2; width: 2.5rem; height: 2.5rem; }
  #album-tracks li:has(> .act-addpl) > .dur { grid-column: 4; grid-row: 1 / span 2; }
}
.play-group .act-play, .play-group .act-play:has(+ .act-play-pick) { width: 11.25rem; }
.play-group.big .act-play { width: 12.6rem; }
@media (max-width: 600px) {
  .play-group .act-play, .play-group .act-play:has(+ .act-play-pick), .play-group.big .act-play { width: 13.95rem; max-width: 62%; }
}

/* Build 68 (owner's request): no "Tap to rate" under the average (tap the average to rate); on phones the genre is
   part of the line under the name instead of a tag of its own. */
.rating-box { gap: .6rem; }
.lede-genre { display: none; }
@media (max-width: 600px) {
  .lede-genre { display: inline; }
  .detail-meta .genre-pills { display: none; }
}

/* Build 71: Get a music app: the phone's apps, one recommended (free), then other free and paid ones */
.listen-os { margin-bottom: 1rem; }
.listen-os .chip { margin: 0 .4rem .4rem 0; }
.listen-os .chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.app-card { border-radius: 1.1rem; padding: 1.1rem 1.2rem; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); margin: .4rem 0 1.2rem; }
.app-card.rec { box-shadow: inset 0 0 0 2px rgba(167, 123, 255, .55), 0 0 2rem rgba(125, 77, 255, .18); }
.app-card-head { display: flex; align-items: center; gap: .9rem; }
.app-card-head b { display: block; font-size: 1.35rem; }
.app-card-head small { display: flex; gap: .35rem; margin-top: .2rem; }
.app-ico { width: 3.4rem; height: 3.4rem; flex: none; border-radius: .9rem; display: grid; place-items: center; font-weight: 900; font-size: 1.5rem;
  background: linear-gradient(135deg, var(--accent-hi), var(--accent)); color: var(--on-accent); }
.app-ico.sm { width: 2.6rem; height: 2.6rem; border-radius: .7rem; font-size: 1.1rem; background: var(--surface-3); color: var(--text); }
.app-why { margin: .8rem 0 .2rem; padding-left: 1.2rem; color: var(--muted); }
.app-why li { margin: .2rem 0; }
.app-card .form-actions { margin-top: .8rem; }
.app-card .button { width: 100%; justify-content: center; }
.app-more-h { font-size: 1rem; color: var(--muted); margin: 1rem 0 .4rem; }
.app-more { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
.app-more li { display: flex; align-items: center; gap: .8rem; padding: .55rem .6rem; border-radius: .8rem; background: var(--surface-1); }
.app-more-t { flex: 1; min-width: 0; }
.app-more-t small { display: block; color: var(--muted); font-size: .85rem; }
.pill.paid { color: #ffd38a; }

/* Build 72: Play says "Play" beside its icon, and is a quarter shorter than build 67's (owner's request) */
.play-group .act-play, .play-group .act-play:has(+ .act-play-pick) { width: 8.45rem; gap: .45rem; font-size: 1.1rem; font-weight: 800; }
.play-group.big .act-play { width: 9.45rem; font-size: 1.15rem; }
.play-group .act-play svg { margin-left: 0; }
.play-word { line-height: 1; }
@media (max-width: 600px) {
  .play-group .act-play, .play-group .act-play:has(+ .act-play-pick), .play-group.big .act-play { width: 10.45rem; font-size: 1.15rem; }
}

/* Build 73 (owner's report): playlists. "with" no longer runs into the first picture; on phones Play has its own line
   and the other buttons sit in one even row under it, like a song's page (In your playlists is a round ✓ there). */
.pl-with { gap: .4rem; }
.pl-with .face { margin-left: 0; }
.pl-with a + a .face { margin-left: -.55rem; }
@media (max-width: 600px) {
  .pl-bar { flex-wrap: wrap; align-items: center; gap: .65rem .5rem; }
  .pl-bar .play-group { flex: 1 0 100%; margin-right: 0; }
  .pl-bar .round-btn { width: 2.9rem; height: 2.9rem; margin: 0; }
  .pl-bar .pl-saved { width: 2.9rem; height: 2.9rem; display: inline-flex; justify-content: center; align-items: center; gap: 0; border-radius: 50%; margin: 0;
    box-shadow: inset 0 0 0 1px var(--line-2); }
  .pl-bar .pl-saved svg { width: 1.35rem; height: 1.35rem; }
  .pl-bar .pl-filter-box { flex: 1 0 100%; }
}

/* Build 74 (owner's request): no "played" headphones in album song lists (the buttons close up), and the preview
   player bar on computers more like Spotify's: narrower and taller, centred under the page, with the cover and name on
   the left, Stop above the 30 seconds in the middle, and Play in player on the right. */
@media (min-width: 1024px) {
  .pvbar { left: calc(var(--rail) + (100vw - var(--rail)) / 2); right: auto; transform: translateX(-50%);
    width: min(56rem, calc(100vw - var(--rail) - 2rem)); bottom: 1rem; min-height: 5.2rem;
    grid-template-columns: auto minmax(8rem, 1fr) minmax(14rem, 1.5fr) auto;
    grid-template-areas: "art text stop play" "art text time play"; column-gap: 1.1rem; row-gap: .3rem;
    padding: .7rem 1rem .7rem .7rem; border-radius: 1rem; }
  .pvb-art { width: 3.8rem; height: 3.8rem; border-radius: .55rem; }
  .pvb-text b { font-size: 1rem; }
  .pvb-stop { justify-self: center; width: 2.3rem; height: 2.3rem; }
  .pvb-time { align-self: start; }
  body.has-pvbar .stage { padding-bottom: 8rem; }
}

/* Build 75 (owner's report: too small, Stop in an odd place): the player bar in three parts, like Spotify's.
   Computers and iPads: the width of the page, what's playing on the left, Stop centred above the 30 seconds in the
   middle of the bar, Play in player on the right. Phones: what's playing, Play and Stop on one line, the time under it. */
.pvbar { display: grid; transform: none; }
.pvb-left { grid-area: left; display: flex; align-items: center; gap: .8rem; min-width: 0; }
.pvb-mid { grid-area: mid; display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 0; }
.pvb-right { grid-area: right; display: flex; justify-content: flex-end; align-items: center; }
.pvb-time { width: 100%; align-self: stretch; }
@media (max-width: 1023px) {
  .pvbar { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "left right stop" "time time time"; }
  .pvb-mid { display: contents; }
  .pvb-stop { grid-area: stop; }
  .pvb-time { grid-area: time; }
}
@media (min-width: 1024px) {
  .pvbar { left: calc(var(--rail) + 1rem); right: 1rem; width: auto; bottom: .9rem; min-height: 5.6rem;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 2fr) minmax(0, 1fr); grid-template-areas: "left mid right";
    column-gap: 1.5rem; padding: .75rem 1.2rem .75rem .8rem; }
  .pvb-art { width: 4rem; height: 4rem; border-radius: .6rem; }
  .pvb-text b { font-size: 1.05rem; }
  .pvb-text small { font-size: .88rem; }
  .pvb-stop { width: 2.6rem; height: 2.6rem; }
  .pvb-stop svg { width: 1.15rem; height: 1.15rem; }
  .pvb-time { font-size: .78rem; }
  .pvb-play { min-height: 2.6rem; padding: 0 1.2rem; font-size: .92rem; }
  body.has-pvbar .stage { padding-bottom: 8.5rem; }
}

/* Build 76 (owner's report): Stop on the same line as the 30 seconds, in the middle of the bar, everything on one
   line and centred top to bottom; the bar's button just says Play. */
@media (min-width: 1024px) {
  .pvbar { min-height: 5rem; align-items: center; }
  .pvb-mid { flex-direction: row; align-items: center; gap: .9rem; width: 100%; max-width: 40rem; justify-self: center; }
  .pvb-time { flex: 1; width: auto; }
}

/* Build 78: Default player on each device */
.pd-list .set-ctl { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.pd-select { min-width: 10rem; max-width: 100%; }
.pd-this { margin-left: .5rem; font-size: .7rem; vertical-align: middle; }