/* =====================================================================
   SANGITIFY — core styles (mobile-first)
   Theme lives in CSS variables: change the palette in :root only.
   ===================================================================== */

:root {
  --bg: #080A0F;
  --bg-2: #0E1118;
  --card: #141923;
  --card-2: #1B2130;
  --card-hover: #1F2637;
  --purple: #9B5CFF;
  --blue: #5C7CFF;
  --pink: #FF4FA3;
  --success: #35D07F;
  --danger: #FF5A6A;
  --text: #FFFFFF;
  --text-2: #9CA3AF;
  --text-3: #6B7280;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --glass: rgba(14, 17, 24, 0.72);
  --glass-strong: rgba(14, 17, 24, 0.9);
  --shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.7);
  --grad: linear-gradient(135deg, var(--purple), var(--pink));
  --grad-cool: linear-gradient(135deg, var(--blue), var(--purple));
  --focus: 0 0 0 3px rgba(155, 92, 255, 0.55);

  --font: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Oriya", "Noto Sans Devanagari", sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --gutter: 16px;
  --header-h: 60px;
  --nav-h: 64px;
  --mini-h: 64px;
  --sidebar-w: 248px;
  --bar-h: 84px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

html[data-theme="light"] {
  --bg: #F5F4FA;
  --bg-2: #FFFFFF;
  --card: #FFFFFF;
  --card-2: #F0EEF8;
  --card-hover: #ECE9F7;
  --text: #14141C;
  --text-2: #5B6170;
  --text-3: #8A8FA0;
  --border: rgba(20, 20, 40, 0.08);
  --border-strong: rgba(20, 20, 40, 0.16);
  --glass: rgba(255, 255, 255, 0.78);
  --glass-strong: rgba(255, 255, 255, 0.94);
  --shadow: 0 18px 40px -20px rgba(40, 20, 90, 0.25);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
[hidden]:not(.player) { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 1000; background: var(--purple); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); }
.skip-link:focus { top: 12px; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.fill { fill: currentColor; stroke: none; }
svg.i.sm { width: 18px; height: 18px; }
svg.i.lg { width: 28px; height: 28px; }

/* ---------- App frame ---------- */
.app { min-height: 100vh; min-height: 100dvh; }
.ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.ambient::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 70vh;
  background:
    radial-gradient(40% 50% at 20% 30%, hsla(var(--ambient-h, 265), 90%, 60%, .22), transparent 70%),
    radial-gradient(35% 45% at 80% 10%, hsla(calc(var(--ambient-h, 265) + 60), 90%, 60%, .14), transparent 70%);
  filter: blur(10px);
  transition: background 1.2s var(--ease);
}
html[data-theme="light"] .ambient::before { opacity: .55; }

.main {
  padding: calc(var(--header-h) + 8px) var(--gutter) calc(var(--nav-h) + var(--mini-h) + 40px + var(--safe-b));
  max-width: 100%;
  min-width: 0;
}
.view { min-height: 60vh; }
.view-inner > * + * { margin-top: 28px; }
.view-inner > .back-btn + * { margin-top: 8px; }
.view-inner > div:not([class]) > * + *, .view-inner > section > div:not([class]) > * + * { margin-top: 28px; }
.view-inner > .chips + .chips { margin-top: 10px; }
.page-hero .info > * + * { margin-top: 10px; }

/* ---------- Header ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--header-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 var(--gutter);
  background: linear-gradient(to bottom, var(--bg) 30%, transparent);
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.topbar.scrolled { background: var(--glass-strong); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 var(--border); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .08em; font-size: 1rem; }
.brand img { width: auto; height: 32px; max-width: 160px; object-fit: contain; }
.brand.logo-only img { height: 38px; max-width: 200px; }
.brand span { background: linear-gradient(90deg, var(--text), var(--text) 55%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topbar .brand { margin-right: auto; }
.topbar .search-field { display: none; }
.icon-btn {
  position: relative; display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--text); transition: background .2s, transform .15s;
}
.icon-btn:hover { background: var(--card); }
.icon-btn:active { transform: scale(.92); }
.icon-btn .dot {
  position: absolute; top: 8px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; background: var(--pink); color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg);
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--grad-cool); color: #fff; font-weight: 600; font-size: .85rem;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Search field ---------- */
.search-field {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 16px; border-radius: 99px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text-2); transition: border-color .2s, background .2s;
}
.search-field:focus-within { border-color: rgba(155, 92, 255, .6); background: var(--card-2); }
.search-field input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font-size: var(--fs-md); }
.search-field input::placeholder { color: var(--text-3); }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-field .clear { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--text-2); }
.search-field .clear:hover { background: var(--card-hover); }
.suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: var(--glass-strong); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 6px;
  box-shadow: var(--shadow); max-height: 60vh; overflow: auto;
}
.suggest a, .suggest button {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  min-height: 44px; padding: 8px 12px; border-radius: var(--r-md); color: var(--text);
}
.suggest [aria-selected="true"], .suggest a:hover, .suggest button:hover { background: var(--card-hover); }
.suggest small { color: var(--text-2); margin-left: auto; font-size: var(--fs-xs); }
.suggest svg.i { color: var(--text-2); }

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--glass-strong); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-top: 1px solid var(--border);
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 11px; font-weight: 500; color: var(--text-3); position: relative; transition: color .2s;
}
.bottom-nav a svg.i { transition: transform .25s var(--ease), filter .25s; }
.bottom-nav a.on { color: var(--text); }
.bottom-nav a.on svg.i { color: #fff; filter: drop-shadow(0 0 8px rgba(255, 79, 163, .75)) drop-shadow(0 0 14px rgba(155, 92, 255, .6)); transform: translateY(-1px); }
.bottom-nav a.on::before {
  content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 4px 4px; background: var(--grad);
}
html[data-theme="light"] .bottom-nav a.on svg.i { color: var(--purple); }

/* ---------- Sidebar (desktop) ---------- */
.sidebar { display: none; }

/* ---------- Section headers ---------- */
.section { min-width: 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head h2 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.section-head p { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }
.section-head a.more { color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; padding: 8px 0 8px 12px; }
.section-head a.more:hover { color: var(--text); }

/* ---------- Greeting & hero ---------- */
.greeting { padding-top: 6px; }
.greeting h1 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.greeting p { color: var(--text-2); margin-top: 4px; font-size: var(--fs-sm); }
.hero {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  padding: 26px 22px 22px; min-height: 196px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 79, 163, .45), transparent 60%),
    radial-gradient(90% 120% at 0% 100%, rgba(92, 124, 255, .45), transparent 60%),
    linear-gradient(135deg, #1a1030, #0f1426);
  border: 1px solid var(--border-strong);
  isolation: isolate;
  color: #fff;
}
.hero h2 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; max-width: 14ch; }
.hero p { color: rgba(255, 255, 255, .78); margin-top: 8px; font-size: var(--fs-sm); max-width: 32ch; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero .wave { position: absolute; right: -8px; bottom: -6px; z-index: -1; opacity: .55; display: flex; align-items: flex-end; gap: 5px; height: 120px; }
.hero .wave i { display: block; width: 7px; border-radius: 6px; background: linear-gradient(to top, rgba(255, 255, 255, .05), rgba(255, 255, 255, .55)); height: 40%; transform-origin: bottom; }
.hero.banner { background-size: cover; background-position: center; }
.hero.banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 10, 15, .85), rgba(8, 10, 15, .2)); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 99px;
  font-weight: 600; font-size: var(--fs-sm); white-space: nowrap;
  transition: transform .15s var(--ease), background .2s, box-shadow .2s, opacity .2s;
  background: var(--card-2); color: var(--text); border: 1px solid var(--border);
}
.btn:hover { background: var(--card-hover); }
.btn:active { transform: scale(.96); }
.btn.primary { background: var(--grad); color: #fff; border: 0; box-shadow: 0 10px 30px -10px rgba(255, 79, 163, .6); }
.btn.primary:hover { box-shadow: 0 12px 34px -8px rgba(255, 79, 163, .75); }
.btn.light { background: #fff; color: #10121a; border: 0; }
.btn.ghost { background: transparent; }
.btn.glass { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: #fff; backdrop-filter: blur(8px); }
.btn.danger { background: rgba(255, 90, 106, .12); color: var(--danger); border-color: rgba(255, 90, 106, .3); }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: var(--fs-xs); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.on { background: rgba(155, 92, 255, .18); border-color: rgba(155, 92, 255, .5); color: var(--text); }
.play-fab {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad); color: #fff; box-shadow: 0 12px 30px -8px rgba(255, 79, 163, .7);
  transition: transform .15s var(--ease);
}
.play-fab:active { transform: scale(.92); }
.play-fab svg.i { width: 26px; height: 26px; }

/* ---------- Chips ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px;
  border-radius: 99px; background: var(--card); border: 1px solid var(--border); color: var(--text-2);
  font-size: var(--fs-sm); font-weight: 500; transition: all .2s;
}
.chip:hover { color: var(--text); }
.chip.on, .chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: transparent; }

/* ---------- Generated artwork ("aurora tiles") ---------- */
.art {
  --h: 270;
  position: relative; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 1; width: 100%;
  background:
    radial-gradient(70% 70% at 25% 20%, hsl(var(--h) 90% 66% / .95), transparent 60%),
    radial-gradient(60% 60% at 85% 80%, hsl(calc(var(--h) + 55) 90% 58% / .9), transparent 62%),
    radial-gradient(80% 60% at 70% 10%, hsl(calc(var(--h) + 180) 80% 55% / .55), transparent 65%),
    linear-gradient(160deg, hsl(calc(var(--h) + 20) 45% 22%), hsl(calc(var(--h) + 60) 50% 12%));
  isolation: isolate;
}
.art::after {
  /* waveform glyph printed on every generated cover */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 12%; height: 22%; z-index: 1;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 3px, transparent 3px 7px);
  -webkit-mask: radial-gradient(60% 100% at 50% 100%, #000 40%, transparent 72%);
  mask: radial-gradient(60% 100% at 50% 100%, #000 40%, transparent 72%);
  opacity: .5; mix-blend-mode: overlay;
}
.art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; opacity: 0; transition: opacity .35s; }
.art > img.loaded { opacity: 1; }
.art .initial {
  position: absolute; left: 10%; top: 9%; z-index: 1; color: rgba(255, 255, 255, .92);
  font-weight: 700; font-size: clamp(.9rem, 3.4vw, 1.15rem); line-height: 1.1; letter-spacing: -.01em;
  max-width: 80%; text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.art.round { border-radius: 50%; }
.art.round::after { display: none; }
.art.round .initial { inset: 0; left: 0; top: 0; max-width: none; display: grid; place-items: center; font-size: 1.6rem; }

/* ---------- Music card ---------- */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; min-width: 0; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }

.card { position: relative; min-width: 0; border-radius: var(--r-lg); transition: transform .25s var(--ease); }
.card .cover { position: relative; border-radius: var(--r-md); transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.card .cover .art { box-shadow: 0 10px 28px -14px hsl(var(--h) 80% 50% / .6); }
.card:hover .cover { transform: translateY(-3px); }
.card:hover .cover .art { box-shadow: 0 18px 38px -12px hsl(var(--h) 90% 60% / .65); }
.card .meta { padding: 10px 2px 0; min-width: 0; }
.card .title { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .sub { font-size: var(--fs-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.card .sub a:hover { color: var(--text); text-decoration: underline; }
.card .play {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad); color: #fff; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(8px) scale(.9); transition: all .25s var(--ease);
}
.card:hover .play, .card:focus-within .play, .card.is-playing .play { opacity: 1; transform: none; }
.card .overlay-btn {
  position: absolute; top: 6px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(8, 10, 15, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff;
  opacity: 0; transition: opacity .2s;
}
.card .overlay-btn.like { left: 6px; }
.card .overlay-btn.more { right: 6px; }
.card .overlay-btn.like.on { color: var(--pink); opacity: 1; }
.card:hover .overlay-btn, .card:focus-within .overlay-btn { opacity: 1; }
.card .badges { position: absolute; left: 8px; bottom: 8px; z-index: 3; display: flex; gap: 4px; }
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: .02em; color: #fff; background: rgba(8, 10, 15, .6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.badge.yt { background: rgba(230, 33, 23, .85); }
.badge.sp { background: rgba(30, 185, 84, .85); }
.badge.sg { background: rgba(155, 92, 255, .85); }
.badge.demo { background: rgba(255, 255, 255, .18); }
.card.is-playing .cover .art { box-shadow: 0 0 0 2px var(--pink), 0 18px 40px -10px rgba(255, 79, 163, .6); }
.card .progress { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 3; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.card .progress i { display: block; height: 100%; background: var(--grad); }

/* Wide card (continue listening) */
.rail.wide { grid-auto-columns: 78%; }
.wide-card {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--border); transition: background .2s;
  min-width: 0; position: relative; overflow: hidden;
}
.wide-card:hover { background: var(--card-hover); }
.wide-card .art { width: 64px; flex: none; border-radius: var(--r-sm); }
.wide-card .meta { flex: 1; min-width: 0; }
.wide-card .title { font-weight: 600; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wide-card .sub { color: var(--text-2); font-size: var(--fs-xs); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wide-card .bar { height: 3px; border-radius: 3px; margin-top: 8px; background: var(--border-strong); overflow: hidden; }
.wide-card .bar i { display: block; height: 100%; background: var(--grad); }
.wide-card .play-sm { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); flex: none; }

/* ---------- Track list rows ---------- */
.tracklist { display: flex; flex-direction: column; gap: 2px; }
.row {
  display: grid; grid-template-columns: auto 48px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 60px; padding: 6px 6px 6px 4px; border-radius: var(--r-md); position: relative;
  transition: background .15s;
}
.row.no-num { grid-template-columns: 48px minmax(0, 1fr) auto; padding-left: 6px; }
.row:hover, .row:focus-within { background: var(--card); }
.row .num { width: 22px; text-align: center; color: var(--text-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; font-weight: 600; }
.row .art { width: 48px; border-radius: 10px; }
.row .art::after { display: none; }
.row .art .initial { font-size: .7rem; left: 8%; top: 8%; }
.row .meta { min-width: 0; }
.row .title { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .sub { font-size: var(--fs-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.row .sub .badge { height: 16px; font-size: 9px; padding: 0 5px; flex: none; }
.row .actions { display: flex; align-items: center; gap: 2px; }
.row .actions .icon-btn { width: 40px; height: 40px; color: var(--text-2); }
.row .actions .icon-btn:hover { color: var(--text); }
.row .actions .like.on { color: var(--pink); }
.row .dur { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; display: none; }
.row.is-playing .title { color: var(--pink); }
.row .hit { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.row > *:not(.hit) { position: relative; z-index: 1; }
.row .meta { pointer-events: none; }
.row .meta a { pointer-events: auto; }
.row .rank-trend { font-size: 10px; margin-top: 2px; }

/* equalizer shown on the playing row/card */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; background: var(--pink); border-radius: 2px; height: 40%; }

/* ---------- Mood orbs ---------- */
.rail.orbs { grid-auto-columns: 86px; gap: 12px; }
.orb { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); }
.orb .ball {
  --h: 280;
  position: relative; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem;
  background:
    radial-gradient(circle at 30% 28%, hsl(var(--h) 100% 82% / .95), transparent 34%),
    radial-gradient(circle at 70% 75%, hsl(calc(var(--h) + 40) 90% 55%), transparent 70%),
    hsl(calc(var(--h) - 15) 70% 38%);
  box-shadow: 0 10px 26px -8px hsl(var(--h) 90% 55% / .7), inset 0 -8px 18px rgba(0, 0, 0, .25);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.orb:hover .ball, .orb:focus-visible .ball { transform: translateY(-4px) scale(1.04); box-shadow: 0 16px 34px -8px hsl(var(--h) 90% 60% / .85), inset 0 -8px 18px rgba(0, 0, 0, .25); }
.orb:hover { color: var(--text); }
.orb:focus-visible { box-shadow: none; }

/* ---------- Category tiles (discover) ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile {
  --h: 270;
  position: relative; overflow: hidden; min-height: 104px; padding: 14px; border-radius: var(--r-lg);
  display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; color: #fff;
  background:
    radial-gradient(90% 90% at 100% 100%, hsl(calc(var(--h) + 40) 90% 60% / .75), transparent 60%),
    linear-gradient(140deg, hsl(var(--h) 70% 42%), hsl(calc(var(--h) + 25) 60% 24%));
  transition: transform .25s var(--ease), box-shadow .25s;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px hsl(var(--h) 90% 55% / .8); }
.tile b { font-size: var(--fs-md); font-weight: 700; line-height: 1.2; }
.tile small { color: rgba(255, 255, 255, .78); font-size: var(--fs-xs); }
.tile .glyph { position: absolute; right: 10px; bottom: 6px; font-size: 2.2rem; opacity: .9; transform: rotate(-12deg); z-index: -1; line-height: 1; }
.tile .native { position: absolute; right: 12px; bottom: 8px; font-size: 1.7rem; font-weight: 700; opacity: .35; z-index: -1; }
.tile.big { min-height: 132px; }

/* ---------- Mixes & playlist cards ---------- */
.mix .art { --h: 280; }
.mix .mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; z-index: 2; }
.mix .mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mix .label {
  position: absolute; left: 10px; bottom: 10px; z-index: 3; padding: 4px 10px; border-radius: 8px;
  background: rgba(8, 10, 15, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-weight: 700; font-size: var(--fs-xs); color: #fff;
}

/* ---------- Artist card ---------- */
.artist-card { text-align: center; }
.artist-card .art { box-shadow: 0 10px 28px -14px hsl(var(--h) 80% 50% / .6); }
.artist-card .title { margin-top: 10px; font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artist-card .sub { font-size: var(--fs-xs); color: var(--text-2); }

/* ---------- Page headers (song, artist, album, playlist) ---------- */
.page-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-top: 4px; }
.page-hero .art { width: min(62vw, 260px); border-radius: var(--r-lg); box-shadow: 0 30px 60px -24px hsl(var(--h) 90% 55% / .75); }
.page-hero .art.round { border-radius: 50%; }
.page-hero .kicker { color: var(--text-2); font-size: var(--fs-xs); font-weight: 500; }
.page-hero h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.page-hero .by { color: var(--text-2); font-size: var(--fs-sm); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.page-hero .by a { color: var(--text); font-weight: 600; }
.page-hero .by a:hover { text-decoration: underline; }
.page-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.page-actions .icon-btn { background: var(--card); border: 1px solid var(--border); }
.page-actions .icon-btn.on { color: var(--pink); border-color: rgba(255, 79, 163, .4); }
.back-btn { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-size: var(--fs-sm); min-height: 40px; }
.back-btn:hover { color: var(--text); }
.about { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; color: var(--text-2); font-size: var(--fs-sm); }
.about h3 { color: var(--text); font-size: var(--fs-md); margin-bottom: 6px; }
.meta-list { display: flex; flex-wrap: wrap; gap: 8px; }
.meta-list span { font-size: var(--fs-xs); color: var(--text-2); background: var(--card); border: 1px solid var(--border); padding: 5px 10px; border-radius: 99px; }
.source-note { font-size: var(--fs-xs); color: var(--text-3); text-align: center; }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--border-strong); color: var(--text); font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.textarea { min-height: 110px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--purple); box-shadow: var(--focus); }
.form-error { color: var(--danger); font-size: var(--fs-sm); min-height: 1.2em; }
.form-note { color: var(--text-2); font-size: var(--fs-xs); }
.auth-card { max-width: 420px; margin: 8px auto 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 26px 20px; }
.auth-card h1 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; }
.auth-card > p { color: var(--text-2); margin: 6px 0 20px; font-size: var(--fs-sm); }
.auth-card .switch { text-align: center; color: var(--text-2); font-size: var(--fs-sm); margin-top: 16px; }
.auth-card .switch a { color: var(--text); font-weight: 600; }

/* toggles & list settings */
.settings-group { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.settings-group + .settings-group { margin-top: 16px; }
.settings-group h3 { font-size: var(--fs-xs); color: var(--text-2); font-weight: 600; padding: 14px 16px 4px; }
.setting { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 16px; border-top: 1px solid var(--border); width: 100%; text-align: left; }
.settings-group h3 + .setting { border-top: 0; }
.setting .txt { flex: 1; min-width: 0; }
.setting .txt b { display: block; font-weight: 500; font-size: var(--fs-sm); }
.setting .txt small { display: block; color: var(--text-2); font-size: var(--fs-xs); }
.setting.danger b { color: var(--danger); }
.setting:is(a, button):hover { background: var(--card-hover); }
.switch-toggle { position: relative; width: 48px; height: 28px; flex: none; }
.switch-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch-toggle span { position: absolute; inset: 0; border-radius: 99px; background: var(--border-strong); transition: background .2s; }
.switch-toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.switch-toggle input:checked + span { background: var(--grad); }
.switch-toggle input:checked + span::after { transform: translateX(20px); }
.switch-toggle input:focus-visible + span { box-shadow: var(--focus); }
.segmented { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--card-2); border: 1px solid var(--border); }
.segmented button { min-height: 34px; padding: 0 14px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.segmented button[aria-pressed="true"] { background: var(--text); color: var(--bg); }

/* ---------- States ---------- */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 44px 20px; border-radius: var(--r-xl); border: 1px dashed var(--border-strong); color: var(--text-2);
}
.empty .glyph { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--purple); margin-bottom: 4px; }
.empty .glyph svg.i { width: 28px; height: 28px; }
.empty h3 { color: var(--text); font-size: var(--fs-md); font-weight: 600; }
.empty p { font-size: var(--fs-sm); max-width: 34ch; }
.empty .btn { margin-top: 8px; }
.skel { background: linear-gradient(90deg, var(--card) 0%, var(--card-2) 50%, var(--card) 100%); background-size: 200% 100%; border-radius: var(--r-md); }
.skel-card .skel.cover { aspect-ratio: 1; }
.skel-card .skel.line { height: 12px; margin-top: 10px; width: 80%; }
.skel-card .skel.line.short { width: 50%; margin-top: 6px; }
.skel.title { height: 20px; width: 40%; margin-bottom: 14px; }
.skel-row { display: flex; align-items: center; gap: 12px; height: 60px; }
.skel-row .skel.sq { width: 48px; height: 48px; flex: none; }
.skel-row .skel.l { height: 12px; width: 60%; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--border-strong); border-top-color: var(--pink); }
.load-more { display: flex; justify-content: center; padding: 18px 0; }
.offline-bar {
  position: fixed; left: 50%; top: calc(var(--header-h) + 6px); z-index: 70; transform: translateX(-50%);
  background: var(--glass-strong); border: 1px solid var(--border-strong); padding: 8px 16px; border-radius: 99px;
  font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow);
}

/* ---------- Toasts ---------- */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + var(--mini-h) + 24px + var(--safe-b)); z-index: 300; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 99px; pointer-events: auto;
  background: var(--text); color: var(--bg); font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--shadow);
}
.toast svg.i { width: 18px; height: 18px; }
.toast.error { background: var(--danger); color: #fff; }
.toast button { color: inherit; text-decoration: underline; font-weight: 700; margin-left: 4px; }

/* ---------- Modal & bottom sheet ---------- */
.scrim { position: fixed; inset: 0; z-index: 200; background: rgba(4, 5, 8, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 210; max-height: 88vh; overflow: auto; overscroll-behavior: contain;
  background: var(--bg-2); border-radius: var(--r-xl) var(--r-xl) 0 0; border: 1px solid var(--border-strong); border-bottom: 0;
  padding: 10px 12px calc(16px + var(--safe-b));
}
.sheet .grab { width: 40px; height: 5px; border-radius: 5px; background: var(--border-strong); margin: 0 auto 10px; }
.sheet .sheet-head { display: flex; align-items: center; gap: 12px; padding: 6px 8px 14px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.sheet .sheet-head .art { width: 52px; flex: none; border-radius: 10px; }
.sheet .sheet-head .art::after { display: none; }
.sheet .sheet-head .art .initial { font-size: .7rem; }
.sheet .sheet-head b { display: block; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet .sheet-head small { color: var(--text-2); font-size: var(--fs-sm); }
.sheet .sheet-head > div { min-width: 0; }
.sheet h2 { font-size: var(--fs-lg); padding: 6px 8px 12px; }
.menu-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 0 12px; border-radius: var(--r-md); text-align: left; font-size: var(--fs-md); }
.menu-item:hover, .menu-item:focus-visible { background: var(--card); }
.menu-item svg.i { color: var(--text-2); }
.menu-item small { margin-left: auto; color: var(--text-3); font-size: var(--fs-xs); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger svg.i { color: var(--danger); }
.modal {
  position: fixed; left: 50%; top: 50%; z-index: 210; transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px)); max-height: 86vh; overflow: auto;
  background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: var(--r-xl); padding: 22px; box-shadow: var(--shadow);
}
.modal h2 { font-size: var(--fs-lg); font-weight: 700; }
.modal p { color: var(--text-2); font-size: var(--fs-sm); margin-top: 8px; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.modal .form { margin-top: 16px; }

/* share grid */
.share-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 6px 4px 10px; }
.share-grid a, .share-grid button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); padding: 6px 0; border-radius: var(--r-md); }
.share-grid a:hover, .share-grid button:hover { background: var(--card); color: var(--text); }
.share-grid .ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; }

/* ---------- Library / profile ---------- */
.lib-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lib-shortcut { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--border); min-height: 68px; transition: background .2s; }
.lib-shortcut:hover { background: var(--card-hover); }
.lib-shortcut .ic { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; color: #fff; flex: none; }
.lib-shortcut b { font-size: var(--fs-sm); display: block; }
.lib-shortcut small { font-size: var(--fs-xs); color: var(--text-2); }
.pl-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-md); min-height: 64px; }
.pl-row:hover { background: var(--card); }
.pl-row .art { width: 56px; flex: none; border-radius: 10px; }
.pl-row .art::after { display: none; }
.pl-row b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.pl-row small { color: var(--text-2); font-size: var(--fs-xs); }
.profile-head { display: flex; align-items: center; gap: 16px; }
.profile-head .avatar { width: 76px; height: 76px; font-size: 1.6rem; box-shadow: 0 12px 30px -10px rgba(155, 92, 255, .7); }
.profile-head h1 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; }
.profile-head p { color: var(--text-2); font-size: var(--fs-sm); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; min-width: 0; }
.stat b { display: block; font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat small { color: var(--text-2); font-size: var(--fs-xs); }
.stat.wide { grid-column: 1 / -1; }
.report-hero {
  border-radius: var(--r-xl); padding: 26px 22px; overflow: hidden; position: relative;
  background: radial-gradient(80% 120% at 100% 0%, rgba(255, 79, 163, .55), transparent 60%), radial-gradient(80% 120% at 0% 100%, rgba(92, 124, 255, .5), transparent 60%), #120f22;
  color: #fff; border: 1px solid var(--border-strong);
}
.report-hero small { color: rgba(255, 255, 255, .75); font-size: var(--fs-sm); }
.report-hero h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-top: 4px; }
.report-hero .big { font-size: 3rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-top: 18px; }

/* history groups */
.day-group h3 { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; margin: 18px 0 6px 4px; }

/* notifications */
.notif { display: flex; gap: 12px; padding: 14px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--border); position: relative; }
.notif + .notif { margin-top: 10px; }
.notif.unread::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--pink); }
.notif .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-cool); color: #fff; flex: none; }
.notif b { display: block; font-size: var(--fs-sm); }
.notif p { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }
.notif small { color: var(--text-3); font-size: var(--fs-xs); }
.notif img { width: 100%; border-radius: var(--r-md); margin-top: 10px; }

/* onboarding */
.onboard { position: fixed; inset: 0; z-index: 250; background: var(--bg); overflow: auto; padding: 24px var(--gutter) calc(110px + var(--safe-b)); }
.onboard .ob-inner { max-width: 640px; margin: 0 auto; }
.onboard .steps { display: flex; gap: 6px; margin-bottom: 26px; }
.onboard .steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--border-strong); }
.onboard .steps i.on { background: var(--grad); }
.onboard h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.onboard .lede { color: var(--text-2); margin: 8px 0 22px; }
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pick {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 14px;
  border-radius: var(--r-lg); background: var(--card); border: 1.5px solid var(--border); text-align: left;
  transition: border-color .2s, background .2s, transform .15s;
}
.pick:active { transform: scale(.97); }
.pick b { font-size: var(--fs-sm); font-weight: 600; }
.pick small { display: block; color: var(--text-2); font-size: var(--fs-xs); }
.pick .em { font-size: 1.4rem; }
.pick[aria-pressed="true"] { border-color: var(--pink); background: rgba(255, 79, 163, .08); }
.pick[aria-pressed="true"]::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--grad) center/12px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"), var(--grad);
}
.pick.artist { flex-direction: column; text-align: center; padding: 14px 8px; }
.pick.artist .art { width: 64px; }
.onboard .ob-foot {
  position: fixed; left: 0; right: 0; bottom: 0; padding: 14px var(--gutter) calc(14px + var(--safe-b));
  background: linear-gradient(to top, var(--bg) 70%, transparent); display: flex; gap: 10px; justify-content: center;
}
.onboard .ob-foot .btn { flex: 1; max-width: 300px; }

/* install / consent bars */
.install-bar {
  position: fixed; left: 12px; right: 12px; z-index: 80; bottom: calc(var(--nav-h) + var(--mini-h) + 20px + var(--safe-b));
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-lg);
  background: var(--glass-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border-strong); box-shadow: var(--shadow);
}
.install-bar img { width: 42px; height: 42px; }
.install-bar div { flex: 1; min-width: 0; }
.install-bar b { font-size: var(--fs-sm); display: block; }
.install-bar small { color: var(--text-2); font-size: var(--fs-xs); }

/* ads (clearly separated, never inside the player) */
.ad-slot { border-radius: var(--r-lg); border: 1px solid var(--border); padding: 10px; background: var(--card); overflow: hidden; }
.ad-slot::before { content: "Advertisement"; display: block; font-size: 10px; color: var(--text-3); margin-bottom: 6px; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--text-3); font-size: var(--fs-xs); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; }
.site-footer a { color: var(--text-2); }
.site-footer a:hover { color: var(--text); }

/* ---------- Static pages (privacy, terms…) ---------- */
.prose { max-width: 720px; color: var(--text-2); font-size: var(--fs-md); }
.prose h1 { color: var(--text); font-size: var(--fs-2xl); letter-spacing: -.02em; line-height: 1.15; margin-bottom: 8px; }
.prose h2 { color: var(--text); font-size: var(--fs-lg); margin: 28px 0 8px; }
.prose p, .prose ul { margin-top: 10px; }
.prose ul { list-style: disc; padding-left: 20px; }
.prose a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.notice { padding: 12px 14px; border-radius: var(--r-md); background: rgba(53, 208, 127, .12); border: 1px solid rgba(53, 208, 127, .35); color: var(--text); font-size: var(--fs-sm); }
.notice.error { background: rgba(255, 90, 106, .12); border-color: rgba(255, 90, 106, .35); }

/* ---------- Tablet (≥ 768px): hybrid layout ---------- */
@media (min-width: 480px) {
  .rail { grid-auto-columns: 30%; }
  .rail.wide { grid-auto-columns: 56%; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  :root { --gutter: 24px; }
  .greeting h1 { font-size: var(--fs-2xl); }
  .rail { grid-auto-columns: 22%; gap: 18px; }
  .rail.wide { grid-auto-columns: 40%; }
  .rail.orbs { grid-auto-columns: 96px; }
  .orb .ball { width: 88px; height: 88px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
  .hero { padding: 36px 34px; min-height: 230px; }
  .hero h2 { font-size: 2.2rem; }
  .row .dur { display: block; }
  .row { grid-template-columns: auto 48px minmax(0, 1fr) auto auto; }
  .row.no-num { grid-template-columns: 48px minmax(0, 1fr) auto auto; }
  .tracklist.two-col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .lib-shortcuts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-hero { flex-direction: row; align-items: flex-end; text-align: left; gap: 28px; }
  .page-hero .art { width: 220px; flex: none; }
  .page-hero .by { justify-content: flex-start; }
  .page-hero h1 { font-size: 2.4rem; }
  .page-hero .page-actions { justify-content: flex-start; }
  .page-hero .info { min-width: 0; }
  .auth-card { padding: 34px; margin-top: 30px; }
  .sheet { left: 50%; right: auto; width: 480px; transform: translateX(-50%); bottom: 24px; border-radius: var(--r-xl); border-bottom: 1px solid var(--border-strong); }
  .install-bar { left: auto; right: 24px; width: 380px; }
  .pick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Desktop (≥ 1024px): sidebar + player bar ---------- */
@media (min-width: 1024px) {
  :root { --gutter: 32px; --header-h: 72px; }
  .sidebar {
    display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: var(--bar-h); z-index: 50;
    width: var(--sidebar-w); padding: 22px 14px 14px; background: var(--bg-2); border-right: 1px solid var(--border); overflow-y: auto;
  }
  .sidebar .brand { padding: 0 10px 22px; }
  .sidebar nav a {
    display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 12px; border-radius: var(--r-md);
    color: var(--text-2); font-weight: 500; font-size: var(--fs-sm); transition: color .2s, background .2s;
  }
  .sidebar nav a:hover { color: var(--text); background: var(--card); }
  .sidebar nav a.on { color: var(--text); background: linear-gradient(90deg, rgba(155, 92, 255, .22), rgba(255, 79, 163, .06)); }
  .sidebar nav a.on svg.i { color: var(--pink); filter: drop-shadow(0 0 6px rgba(255, 79, 163, .6)); }
  .sidebar h4 { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; margin: 22px 12px 8px; }
  .sidebar .side-playlists a { font-size: var(--fs-sm); }
  .sidebar .side-foot { margin-top: auto; padding-top: 16px; }
  .sidebar .side-ad { margin-top: 16px; }
  .topbar { left: var(--sidebar-w); gap: 16px; padding: 0 var(--gutter); }
  .topbar .brand { display: none; }
  .topbar .search-field { display: flex; flex: 1; max-width: 520px; margin-right: auto; }
  .main { margin-left: var(--sidebar-w); padding: calc(var(--header-h) + 8px) var(--gutter) calc(var(--bar-h) + 48px); }
  .bottom-nav { display: none; }
  .view-inner > * + *, .view-inner > div:not([class]) > * + * { margin-top: 36px; }
  .view-inner > .chips + .chips { margin-top: 10px; }
  .rail { grid-auto-columns: calc((100% - 4 * 20px) / 5); gap: 20px; margin: 0; padding: 4px 0 10px; overflow-x: auto; }
  .rail.wide { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
  .rail.orbs { grid-auto-columns: 104px; }
  .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 20px; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .tile { min-height: 124px; padding: 18px; }
  .tile.big { min-height: 160px; }
  .toasts { bottom: calc(var(--bar-h) + 20px); }
  .install-bar { bottom: calc(var(--bar-h) + 20px); }
  .mobile-only { display: none !important; }
  .content-with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
}
@media (min-width: 1280px) {
  .rail { grid-auto-columns: calc((100% - 5 * 20px) / 6); }
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  :root { --sidebar-w: 272px; }
  .rail { grid-auto-columns: calc((100% - 6 * 22px) / 7); gap: 22px; }
  .view { max-width: 1560px; }
}
@media (max-width: 1023px) {
  .desktop-only { display: none !important; }
}

/* =====================================================================
   SEO blocks (breadcrumbs, intro, related links, FAQ) + server-rendered
   fallback content that crawlers and no-JS visitors see
   ===================================================================== */
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); color: var(--text-3); }
.breadcrumbs li { display: flex; align-items: center; gap: 4px; min-width: 0; }
.breadcrumbs li + li::before { content: "›"; color: var(--text-3); }
.breadcrumbs a { color: var(--text-2); }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.view-inner > .seo-block:has(.breadcrumbs) { margin-top: 4px; }
.seo-intro { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.7; max-width: 72ch; }
.seo-intro p + p { margin-top: 10px; }
.seo-intro a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255, 79, 163, .6); text-underline-offset: 3px; }
.seo-intro h2, .seo-intro h3 { color: var(--text); font-size: var(--fs-md, 1.05rem); margin: 14px 0 6px; }
.seo-intro ul, .seo-intro ol { padding-left: 20px; margin: 8px 0; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.faq-item { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); padding: 0 16px; }
.faq-item + .faq-item { margin-top: 10px; }
.faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.3rem; color: var(--text-3); transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary h3 { font-size: var(--fs-sm); font-weight: 600; margin: 0; }
.faq-a { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.7; padding: 0 0 16px; }
.greeting .hello { color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; margin: 0 0 2px; }
.greeting .hello + h1 { margin-top: 0; }

/* Server-rendered content (replaced by the app after it loads) */
.ssr > * + * { margin-top: 24px; }
.ssr-head h1 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; }
.ssr-head .by { color: var(--text-2); margin-top: 6px; }
.ssr-head .seo-intro { margin-top: 10px; }
.ssr-list { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.ssr-list a { color: var(--text); font-weight: 500; }
.ssr-list .by { color: var(--text-3); font-size: var(--fs-sm); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: var(--fs-sm); }
.facts dt { color: var(--text-3); }
.facts dd { margin: 0; }
.ssr-pager { display: flex; flex-wrap: wrap; gap: 6px; }
.ssr-pager a, .ssr-pager span { min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); font-size: var(--fs-sm); }
.ssr-pager span { background: var(--text); color: var(--bg); }

/* =====================================================================
   Advertisements — always labelled, space reserved, never over the player
   ===================================================================== */
.ad-slot { position: relative; display: flex; flex-direction: column; justify-content: center; }
.ad-slot::before { content: attr(data-label); display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.ad-slot.sponsored { border-style: dashed; }
.ad-slot .ad-inner { width: 100%; display: block; text-align: center; overflow: hidden; }
.ad-slot .ad-inner img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.ad-slot ins.adsbygoogle { width: 100%; }
.side-ad.ad-slot { padding: 8px; }

.fx-ad { position: fixed; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); overflow: hidden; width: var(--fx-w); max-width: calc(100vw - 16px); }
.fx-ad .fx-label { position: absolute; left: 8px; top: 3px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); pointer-events: none; }
.fx-ad .fx-close { position: absolute; right: 2px; top: 2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: var(--text-2); background: var(--card); z-index: 2; }
.fx-ad .fx-close:hover { color: var(--text); }
.fx-ad .ad-inner { height: var(--fx-h); padding-top: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fx-ad .ad-inner img { max-height: 100%; width: auto; max-width: 100%; }
/* Phone bottom: above the mini player and bottom navigation */
.fx-mobile_bottom { left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + var(--mini-h) + var(--safe-b) + 16px + var(--fx-off)); }
body.no-player .fx-mobile_bottom { bottom: calc(var(--nav-h) + var(--safe-b) + 8px + var(--fx-off)); }
body.has-fx-bottom .main { padding-bottom: calc(var(--nav-h) + var(--mini-h) + 56px + var(--safe-b) + var(--fx-h)); }
body.has-fx-bottom .toasts { bottom: calc(var(--nav-h) + var(--mini-h) + 40px + var(--safe-b) + var(--fx-h)); }
/* Sticky top: directly below the header; content is pushed down */
.fx-sticky_top { left: 50%; transform: translateX(-50%); top: calc(var(--header-h) + var(--fx-off)); }
body.has-fx-top .main { padding-top: calc(var(--header-h) + 24px + var(--fx-h)); }
/* Desktop side ads live in reserved gutters only */
.fx-desktop_right, .fx-desktop_left { display: none; }
@media (min-width: 1024px) {
  .fx-mobile_bottom { bottom: calc(var(--bar-h) + 12px + var(--fx-off)); }
  body.has-fx-bottom .main { padding-bottom: calc(var(--bar-h) + 64px + var(--fx-h)); }
  .fx-sticky_top { left: calc(50% + var(--sidebar-w) / 2); }
}
@media (min-width: 1400px) {
  .fx-desktop_right { display: flex; right: var(--fx-off); top: calc(var(--header-h) + 16px); }
  body.has-fx-right .main { padding-right: calc(var(--fx-w) + var(--gutter)); }
}
@media (min-width: 1280px) {
  .fx-desktop_left { display: flex; left: calc(var(--sidebar-w) + var(--fx-off)); top: calc(var(--header-h) + 16px); }
  body.has-fx-left .main { padding-left: calc(var(--fx-w) + var(--gutter)); }
}
/* Never compete with the YouTube player or the full-screen player */
body.yt-active .fx-ad, html.fp-open .fx-ad { display: none !important; }

/* Rewarded perk card */
.reward-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--border); background: linear-gradient(120deg, rgba(155, 92, 255, .14), rgba(255, 79, 163, .08)), var(--card); }
.reward-card .rc-text { flex: 1; min-width: 200px; }
.reward-card .rc-text b { display: block; }
.reward-card .rc-text small { color: var(--text-2); font-size: var(--fs-sm); }
.reward-card .rc-actions { display: flex; gap: 8px; }
.reward-card .rc-note { flex-basis: 100%; margin: 0; font-size: var(--fs-xs); color: var(--text-3); }
.reward-card.on { background: linear-gradient(120deg, rgba(53, 208, 127, .14), transparent), var(--card); }

/* Email confirmation reminder */
.verify-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 12px 10px 16px; border-radius: var(--r-md); background: linear-gradient(90deg, rgba(155, 92, 255, .18), rgba(255, 79, 163, .1)); border: 1px solid var(--border); font-size: var(--fs-sm); }
.verify-banner span { flex: 1; min-width: 200px; }
.linklike { background: none; border: 0; padding: 0; color: var(--purple, #9B5CFF); text-decoration: underline; cursor: pointer; font: inherit; }

/* 6-digit email code */
.otp-input { font-size: 1.9rem; font-weight: 700; letter-spacing: .55em; text-align: center; padding-left: .55em; font-variant-numeric: tabular-nums; height: 64px; }
.otp-input::placeholder { letter-spacing: .55em; opacity: .35; }

/* ===================== Song dedications ===================== */
.ded-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ded-themes { display: flex; flex-wrap: wrap; gap: 8px; }
.ded-theme input { position: absolute; opacity: 0; pointer-events: none; }
.ded-theme span { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--card); font-size: var(--fs-sm); cursor: pointer; }
.ded-theme input:checked + span { background: var(--grad); border-color: transparent; color: #fff; }
.ded-theme input:focus-visible + span { box-shadow: var(--focus); }
.ded-page { --h: 340; position: relative; min-height: calc(100vh - 220px); display: grid; place-items: center; padding: 24px 0 40px; overflow: hidden; isolation: isolate; }
.ded-page::before { content: ""; position: absolute; inset: -20%; z-index: -2; background: radial-gradient(60% 50% at 30% 20%, hsl(var(--h) 85% 55% / .45), transparent 70%), radial-gradient(60% 50% at 80% 80%, hsl(calc(var(--h) + 50) 85% 55% / .35), transparent 70%); animation: fp-drift-a 18s ease-in-out infinite alternate; }
.ded-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fx-float { position: absolute; bottom: -40px; animation: fx-up linear infinite; opacity: 0; }
@keyframes fx-up { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(-110vh) rotate(25deg); opacity: 0; } }
.ded-env { position: relative; width: min(100%, 460px); perspective: 1200px; }
.ded-seal { width: 100%; aspect-ratio: 4 / 3; border-radius: 28px; display: grid; place-content: center; gap: 8px; text-align: center; color: #fff;
  background: linear-gradient(145deg, hsl(var(--h) 75% 45%), hsl(calc(var(--h) + 50) 75% 38%)); box-shadow: 0 40px 80px -30px hsl(var(--h) 90% 40% / .9); transition: transform .6s var(--ease), opacity .4s; }
.ded-seal span { font-size: 64px; animation: ded-beat 1.4s ease-in-out infinite; }
.ded-seal b { font-size: 1.6rem; letter-spacing: -.02em; }
.ded-seal small { opacity: .8; }
@keyframes ded-beat { 50% { transform: scale(1.12); } }
.ded-card { position: absolute; inset: 0; opacity: 0; transform: translateY(30px) scale(.96); pointer-events: none; padding: 28px 24px; border-radius: 28px; background: var(--glass-strong); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-strong); box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); transition: transform .7s var(--ease) .15s, opacity .5s .15s; }
.ded-env.open .ded-seal { transform: rotateX(80deg) translateY(-40px); opacity: 0; pointer-events: none; }
.ded-env.open .ded-card { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.ded-env.open { min-height: 0; }
.ded-env.open .ded-seal { position: absolute; inset: 0; }
.ded-kicker { color: var(--text-2); font-size: var(--fs-sm); }
.ded-card h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); margin: 4px 0 10px; letter-spacing: -.03em; }
.ded-msg { font-size: 1.15rem; line-height: 1.6; margin-bottom: 10px; }
.ded-from { color: var(--text-2); margin-bottom: 18px; }
.ded-song { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px; border-radius: 20px; background: rgba(255,255,255,.06); }
.ded-disc .art { width: 72px; border-radius: 50%; animation: fp-spin 12s linear infinite; }
.ded-meta b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ded-meta small { color: var(--text-2); }
.ded-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.ded-foot { margin-top: 18px; color: var(--text-3); font-size: var(--fs-xs); text-align: center; }
@media (prefers-reduced-motion: reduce) { .ded-seal span, .ded-disc .art, .ded-page::before { animation: none; } }

/* ===================== Listen together ===================== */
.together-hero { position: relative; max-width: 560px; margin: 10px auto 30px; padding: 28px 22px; border-radius: 28px; background: var(--glass-strong); border: 1px solid var(--border-strong); overflow: hidden; isolation: isolate; }
.together-hero h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); letter-spacing: -.03em; margin-bottom: 8px; }
.together-hero > p { color: var(--text-2); margin-bottom: 18px; }
.tg-orbs i { position: absolute; z-index: -1; width: 260px; aspect-ratio: 1; border-radius: 50%; filter: blur(60px); opacity: .5; animation: fp-drift-b 16s ease-in-out infinite alternate; }
.tg-orbs i:nth-child(1) { background: #5C7CFF; left: -80px; top: -80px; }
.tg-orbs i:nth-child(2) { background: #FF4FA3; right: -90px; top: 40px; animation-duration: 20s; }
.tg-orbs i:nth-child(3) { background: #35D07F; left: 30%; bottom: -120px; animation-duration: 24s; }
.tg-create { margin-bottom: 14px; }
.tg-join { display: flex; gap: 8px; }
.tg-join .input { flex: 1; }
.check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); }
.room-page { --h: 270; display: grid; gap: 18px; padding-bottom: 20px; }
.room-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.room-head h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); letter-spacing: -.03em; }
.room-head .by, .room-head .kicker { color: var(--text-2); font-size: var(--fs-sm); }
.room-btns { display: flex; gap: 8px; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #35D07F; box-shadow: 0 0 0 0 rgba(53,208,127,.6); animation: live-pulse 1.8s infinite; vertical-align: middle; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 8px rgba(53,208,127,0); } 100% { box-shadow: 0 0 0 0 rgba(53,208,127,0); } }
.room-join { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, hsl(var(--h) 70% 30% / .6), hsl(calc(var(--h) + 60) 70% 30% / .4)); }
.room-join .input { flex: 1; min-width: 180px; }
.room-now { display: flex; align-items: center; gap: 20px; padding: 18px; border-radius: 24px; background: radial-gradient(80% 120% at 0% 0%, hsl(var(--h) 80% 45% / .35), transparent), var(--card); }
.room-disc .art { width: 120px; border-radius: 50%; box-shadow: 0 20px 40px -18px hsl(var(--h) 90% 50% / .9); }
.room-disc.spin .art { animation: fp-spin 14s linear infinite; }
.room-meta h2 { font-size: 1.3rem; }
.room-meta p { color: var(--text-2); }
.room-meta .kicker { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; }
.room-react { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.room-react button { width: 48px; height: 48px; border-radius: 50%; font-size: 24px; background: var(--card); border: 1px solid var(--border); transition: transform .12s; }
.room-react button:active { transform: scale(1.25); }
.room-cols { display: grid; gap: 18px; grid-template-columns: 2fr 1fr; }
@media (max-width: 760px) { .room-cols { grid-template-columns: 1fr; } }
.room-cols h3 { font-size: var(--fs-md); margin-bottom: 8px; }
.room-people { list-style: none; display: grid; gap: 8px; padding: 0; }
.room-people li { display: flex; align-items: center; gap: 10px; }
.room-people .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 700; font-size: 14px; }
.room-pill { position: fixed; z-index: 47; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + var(--mini-h) + var(--safe-b) + 14px); display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 99px; background: var(--glass-strong); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border-strong); box-shadow: 0 12px 30px -12px rgba(0,0,0,.8); max-width: calc(100vw - 24px); }
.room-pill button { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px; font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; }
.room-pill button b { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.room-pill button small { color: var(--text-2); }
.room-pill .x { width: 34px; padding: 0; justify-content: center; }
html.fp-open .room-pill { display: none; }
@media (min-width: 1024px) { .room-pill { bottom: calc(var(--bar-h) + 14px); left: calc(50% + var(--sidebar-w) / 2); } }
#fx-layer { position: fixed; inset: 0; z-index: 170; pointer-events: none; overflow: hidden; }
.fx-react { position: absolute; bottom: 140px; display: grid; justify-items: center; animation: fx-react 3.1s ease-out forwards; }
.fx-react b { font-size: 40px; }
.fx-react small { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; }
@keyframes fx-react { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translateY(-30px) scale(1.1); } 100% { transform: translateY(-320px) scale(1); opacity: 0; } }

/* ===================== Story card ===================== */
.story-cta { display: flex; justify-content: center; margin: 6px 0 18px; }
.story-preview { display: grid; gap: 12px; justify-items: center; }
.story-preview img { width: min(70vw, 280px); border-radius: 18px; box-shadow: 0 30px 60px -25px rgba(0,0,0,.9); }
.ded-disc .initial { display: none; }

/* ---------- Battery: no live background blur on phones ----------
   backdrop-filter on fixed bars re-blurs everything that scrolls or animates
   behind them on every frame — the biggest GPU cost on mobile. Phones get
   solid glassy colours instead (looks the same, costs nothing). */
@media (max-width: 1023px) {
  .bottom-nav, .topbar.scrolled, .suggest, .room-pill { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .bottom-nav { background: rgba(10, 12, 18, .97); }
  html[data-theme="light"] .bottom-nav { background: rgba(255, 255, 255, .97); }
  .topbar.scrolled { background: rgba(10, 12, 18, .96); }
  html[data-theme="light"] .topbar.scrolled { background: rgba(255, 255, 255, .96); }
  .ambient::before { filter: none; }
}
html.sg-lite * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ---------- Android app mode ---------- */
.app-ann {
  position: fixed; left: 12px; right: 12px; top: calc(var(--header-h) + 8px + env(safe-area-inset-top, 0px)); z-index: 85;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(155, 92, 255, .95), rgba(255, 79, 163, .95)); color: #fff; font-size: var(--fs-sm); box-shadow: var(--shadow);
}
.app-ann span { flex: 1; min-width: 0; }
.app-ann button { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .18); }
.app-update { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px; background: rgba(8, 10, 15, .92); }
.app-update .au-card { width: min(360px, 100%); text-align: center; padding: 28px 22px; border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--border-strong); }
.app-update img { width: 72px; height: 72px; border-radius: 20px; margin: 0 auto 14px; display: block; }
.app-update h2 { font-size: var(--fs-xl); margin-bottom: 8px; }
.app-update p { color: var(--text-2); font-size: var(--fs-md); margin-bottom: 18px; }
.play-fab.attention { animation: attention 1.2s ease-in-out 3; }
@keyframes attention { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ---------- Listen Together 2.0: name step, live status, queue ---------- */
.room-joinpage { min-height: 60vh; place-items: center; }
.rj-card { width: min(440px, 100%); margin: 24px auto 0; padding: 26px 20px; border-radius: 24px; text-align: center;
  background: linear-gradient(160deg, hsl(var(--h) 60% 22%), hsl(calc(var(--h) + 40) 60% 24%) 60%, hsl(calc(var(--h) + 80) 55% 26%)); border: 1px solid var(--border-strong); }
.rj-card h1 { font-size: clamp(1.4rem, 5vw, 1.9rem); margin: 8px 0 4px; letter-spacing: -.02em; }
.rj-card .by { color: var(--text-2); font-size: var(--fs-sm); }
.rj-emoji { font-size: 40px; }
.rj-live { color: #7ff0b3; }
.rj-form { margin-top: 18px; text-align: left; }
.rj-form .form-note { text-align: center; }
.rj-login { margin-top: 14px; font-size: var(--fs-sm); color: var(--text-2); }
.rm-status { margin-left: auto; font-size: var(--fs-xs); padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.rm-status.live { background: rgba(53, 208, 127, .16); color: #7ff0b3; }
.rm-status.away { background: rgba(245, 194, 107, .16); color: #f5c26b; }
.room-people .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-add { display: flex; gap: 10px; flex-wrap: wrap; }
.room-add .btn { flex: 1 1 160px; }
.room-queue, .ra-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.room-queue li, .ra-list li { display: flex; align-items: center; gap: 12px; padding: 6px 4px; border-radius: 12px; }
.room-queue li:hover, .ra-list li:hover { background: var(--card); }
.rq-art { width: 46px; flex: none; }
.rq-art .art { width: 46px; border-radius: 10px; }
.rq-meta { flex: 1; min-width: 0; display: grid; }
.rq-meta b, .rq-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-meta small { color: var(--text-2); font-size: var(--fs-xs); }
.rq-btns { display: flex; gap: 2px; flex: none; }
.rq-btns button { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); }
.rq-btns button:hover { background: var(--card-2); color: var(--text); }
.ra-results { max-height: 52vh; overflow-y: auto; margin-top: 8px; }
.ra-heart { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; background: var(--grad); font-size: 20px; }
.ra-link { margin-top: 14px; display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.ra-link .row { display: flex; gap: 8px; }
.ra-link .input { flex: 1; }
.linklike { background: none; border: 0; color: var(--purple); font-size: var(--fs-xs); cursor: pointer; padding: 0 4px; }