:root,
[data-theme="nocturne"] {
  --bg: #07070b;
  --bg-2: #0d0c14;
  --surface: rgba(18, 17, 27, 0.74);
  --surface-strong: rgba(25, 23, 37, 0.94);
  --surface-soft: rgba(255, 255, 255, 0.055);
  --surface-hover: rgba(255, 255, 255, 0.09);
  --text: #f7f6fb;
  --muted: #9b98a9;
  --faint: #6f6b7c;
  --line: rgba(255, 255, 255, 0.085);
  --accent: #9a7cff;
  --accent-2: #5ae0ff;
  --accent-3: #ff65ba;
  --accent-rgb: 154, 124, 255;
  --success: #74e6ba;
  --danger: #ff758f;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
  --player: rgba(9, 9, 14, 0.88);
}

[data-theme="emerald"] {
  --bg: #05100d;
  --bg-2: #091914;
  --surface: rgba(12, 31, 25, 0.76);
  --surface-strong: rgba(13, 39, 30, 0.95);
  --surface-soft: rgba(255, 255, 255, 0.05);
  --surface-hover: rgba(255, 255, 255, 0.085);
  --text: #f2fff9;
  --muted: #9ab8ab;
  --faint: #6e8d80;
  --line: rgba(216, 255, 238, 0.1);
  --accent: #65e6ad;
  --accent-2: #66d9ff;
  --accent-3: #b2ff88;
  --accent-rgb: 101, 230, 173;
  --success: #78f0b9;
  --danger: #ff8090;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.44);
  --player: rgba(4, 17, 13, 0.9);
}

[data-theme="velvet"] {
  --bg: #11060c;
  --bg-2: #1a0913;
  --surface: rgba(35, 13, 26, 0.76);
  --surface-strong: rgba(46, 15, 33, 0.95);
  --surface-soft: rgba(255, 255, 255, 0.052);
  --surface-hover: rgba(255, 255, 255, 0.09);
  --text: #fff5fa;
  --muted: #c19caa;
  --faint: #8f6b79;
  --line: rgba(255, 227, 241, 0.1);
  --accent: #ff6dad;
  --accent-2: #bd7cff;
  --accent-3: #ffbc68;
  --accent-rgb: 255, 109, 173;
  --success: #7ce3bb;
  --danger: #ff7088;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.46);
  --player: rgba(18, 6, 13, 0.9);
}

[data-theme="pearl"] {
  --bg: #eef0f7;
  --bg-2: #f7f8fc;
  --surface: rgba(255, 255, 255, 0.7);
  --surface-strong: rgba(255, 255, 255, 0.96);
  --surface-soft: rgba(23, 25, 36, 0.05);
  --surface-hover: rgba(23, 25, 36, 0.075);
  --text: #1b1b24;
  --muted: #686977;
  --faint: #90919f;
  --line: rgba(28, 28, 39, 0.09);
  --accent: #6f5ae7;
  --accent-2: #168eb7;
  --accent-3: #d94d92;
  --accent-rgb: 111, 90, 231;
  --success: #2fa273;
  --danger: #d94d66;
  --shadow: 0 30px 90px rgba(40, 38, 70, 0.15);
  --player: rgba(250, 250, 255, 0.9);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { background: var(--bg); }
body {
  margin: 0;
  overflow: hidden;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 16% 12%, rgba(var(--accent-rgb), 0.16), transparent 31%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent-2) 13%, transparent), transparent 26%),
    linear-gradient(145deg, var(--bg), var(--bg-2));
  transition: background 700ms cubic-bezier(.2,.8,.2,1), color 400ms ease;
}
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgba(var(--accent-rgb), 0.35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-hover); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

.app-root { min-height: 100vh; position: relative; isolation: isolate; }
.ambient {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -2;
}
.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  width: 38vw;
  height: 38vw;
  min-width: 420px;
  min-height: 420px;
  filter: blur(80px);
  border-radius: 50%;
  opacity: 0.15;
  animation: floatBlob 16s ease-in-out infinite alternate;
}
.ambient::before { left: -11vw; top: -14vw; background: var(--accent); }
.ambient::after { right: -11vw; bottom: -15vw; background: var(--accent-2); animation-delay: -7s; }
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

@keyframes floatBlob {
  to { transform: translate(8vw, 6vh) scale(1.13); }
}
@keyframes introRise {
  0% { opacity: 0; transform: translateY(28px) scale(.975); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes shimmer {
  0% { transform: translateX(-140%); }
  100% { transform: translateX(140%); }
}
@keyframes bars {
  0%,100% { transform: scaleY(.28); }
  50% { transform: scaleY(1); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulseRing {
  0% { transform: scale(.85); opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; }
}

.onboarding {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
}
.onboarding-card {
  width: min(660px, 100%);
  position: relative;
  padding: 62px 58px 52px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 36px;
  background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface) 78%, transparent));
  backdrop-filter: blur(34px) saturate(140%);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: introRise 900ms cubic-bezier(.16,1,.3,1) both;
}
.onboarding-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.08) 50%, transparent 65%);
  transform: translateX(-140%);
  animation: shimmer 6s ease-in-out infinite 1.3s;
  pointer-events: none;
}
.brand-mark {
  width: 96px;
  height: 96px;
  margin: 0 auto 28px;
  position: relative;
  border-radius: 30px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), .2), color-mix(in srgb, var(--accent-2) 13%, transparent));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 54px rgba(var(--accent-rgb), .2);
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(var(--accent-rgb), .32);
  border-radius: 38px;
  animation: pulseRing 2.7s ease-out infinite;
}
.brand-glyph {
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -5px;
  transform: translateX(-2px);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  color: transparent;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 14px var(--success); }
.onboarding h1 {
  margin: 22px 0 10px;
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(44px, 7vw, 72px);
  letter-spacing: -.055em;
  line-height: .98;
}
.gradient-word { background: linear-gradient(115deg, var(--accent), var(--accent-2), var(--accent-3)); -webkit-background-clip: text; color: transparent; }
.onboarding-copy { max-width: 490px; margin: 0 auto; color: var(--muted); font-size: 17px; line-height: 1.72; }
.primary-cta {
  margin-top: 34px;
  min-width: 250px;
  border: 0;
  border-radius: 18px;
  padding: 16px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent-2) 78%, var(--accent)));
  color: #09090c;
  box-shadow: 0 18px 40px rgba(var(--accent-rgb), .26);
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}
[data-theme="pearl"] .primary-cta { color: white; }
.primary-cta:hover { transform: translateY(-3px) scale(1.015); filter: saturate(115%); box-shadow: 0 24px 54px rgba(var(--accent-rgb), .33); }
.primary-cta:active { transform: translateY(0) scale(.985); }
.primary-cta.secondary { background: var(--surface-soft); color: var(--text); box-shadow: none; border: 1px solid var(--line); }
.privacy-note { margin: 18px 0 0; color: var(--faint); font-size: 13px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.lock-icon { width: 8px; height: 8px; border-radius: 2px; background: var(--success); }
.support-note { margin-top: 16px; font-size: 12px; color: var(--faint); }

.shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 104px;
  opacity: 0;
  animation: introRise 720ms cubic-bezier(.16,1,.3,1) forwards;
}
.sidebar {
  grid-row: 1;
  min-height: 0;
  padding: 22px 16px 20px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter: blur(26px);
  display: flex;
  flex-direction: column;
}
.brand-row { height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 10px 16px; }
.brand-mini {
  width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center;
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; font-weight: 800; font-size: 17px; color: #0b0b0f;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 28px rgba(var(--accent-rgb), .2);
}
.brand-name { font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; font-weight: 800; letter-spacing: -.04em; font-size: 17px; }
.nav-section { margin-top: 20px; }
.nav-label { padding: 0 13px 8px; color: var(--faint); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.nav-item {
  width: 100%; border: 0; background: transparent; cursor: pointer; border-radius: 13px;
  padding: 11px 13px; display: flex; align-items: center; gap: 12px; color: var(--muted); font-weight: 650;
  transition: color 170ms ease, background 170ms ease, transform 170ms ease;
}
.nav-item:hover { color: var(--text); background: var(--surface-soft); transform: translateX(2px); }
.nav-item.active { color: var(--text); background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), var(--surface-soft)); }
.nav-icon { width: 20px; text-align: center; font-size: 17px; opacity: .88; }
.nav-count { margin-left: auto; color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.playlist-list { min-height: 0; overflow: auto; margin: 4px -4px 0; padding: 0 4px; }
.add-playlist {
  margin-top: 8px; border: 1px dashed var(--line); background: transparent; color: var(--muted); cursor: pointer;
}
.sidebar-bottom { margin-top: auto; display: grid; gap: 8px; padding-top: 14px; }
.sidebar-action {
  border: 1px solid var(--line); background: var(--surface-soft); color: var(--muted); border-radius: 13px; padding: 10px 12px; cursor: pointer;
  display: flex; align-items: center; gap: 10px; transition: 180ms ease;
}
.sidebar-action:hover { background: var(--surface-hover); color: var(--text); }

.main { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.topbar {
  min-height: 82px; display: flex; align-items: center; gap: 18px; padding: 16px 28px 12px; position: relative; z-index: 3;
}
.search-wrap { flex: 1; max-width: 560px; position: relative; }
.search-wrap input {
  width: 100%; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 16px;
  padding: 13px 18px 13px 44px; outline: 0; backdrop-filter: blur(20px); transition: border 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.search-wrap input:focus { border-color: rgba(var(--accent-rgb), .42); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .08); background: var(--surface-strong); }
.search-icon { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 15px; }
.top-actions { margin-left: auto; display: flex; gap: 10px; }
.icon-btn {
  width: 43px; height: 43px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer;
  display: grid; place-items: center; transition: 180ms ease; backdrop-filter: blur(18px);
}
.icon-btn:hover { color: var(--text); background: var(--surface-hover); transform: translateY(-2px); }
.icon-btn.active { color: var(--accent); border-color: rgba(var(--accent-rgb), .3); background: rgba(var(--accent-rgb), .1); }

.content { min-height: 0; overflow: auto; padding: 6px 28px 42px; scroll-behavior: smooth; }
.hero {
  position: relative; overflow: hidden; min-height: 248px; border: 1px solid var(--line); border-radius: 29px;
  background: linear-gradient(130deg, rgba(var(--accent-rgb), .16), color-mix(in srgb, var(--accent-2) 9%, var(--surface)) 52%, var(--surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05); padding: 34px 38px; display: flex; align-items: flex-end;
}
.hero::before { content:""; position:absolute; width:330px; height:330px; border-radius:50%; right:-70px; top:-120px; background: var(--accent); opacity:.13; filter:blur(12px); }
.hero::after { content:""; position:absolute; width:230px; height:230px; border-radius:50%; right:100px; bottom:-150px; background: var(--accent-2); opacity:.11; filter:blur(10px); }
.hero-copy { position: relative; z-index: 1; max-width: 640px; }
.hero-kicker { color: var(--accent-2); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 800; }
.hero h2 { margin: 10px 0 10px; font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -.052em; line-height: 1; }
.hero p { margin: 0; max-width: 570px; color: var(--muted); line-height: 1.6; }
.hero-stats { display:flex; gap:22px; margin-top:22px; color:var(--muted); font-size:13px; }
.hero-stats strong { color:var(--text); font-size:15px; }
.hero-orbit { position:absolute; right:60px; top:50%; transform:translateY(-50%); width:180px; height:180px; border:1px solid rgba(var(--accent-rgb),.2); border-radius:50%; }
.hero-orbit::before,.hero-orbit::after{content:"";position:absolute;border-radius:50%;border:1px solid var(--line);inset:22px;}
.hero-orbit::after{inset:51px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 60px rgba(var(--accent-rgb),.35);border:0;}

.section-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin:30px 2px 14px; }
.section-head h3 { margin:0; font-family:"Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; font-size:22px; letter-spacing:-.035em; }
.section-sub { color:var(--faint); font-size:13px; margin-top:4px; }
.section-actions { display:flex; align-items:center; gap:9px; }
.small-btn { border:1px solid var(--line); background:var(--surface-soft); color:var(--muted); border-radius:12px; padding:9px 12px; cursor:pointer; transition:170ms ease; }
.small-btn:hover { color:var(--text); background:var(--surface-hover); }
.small-btn.accent { color:var(--text); border-color:rgba(var(--accent-rgb),.28); background:rgba(var(--accent-rgb),.12); }

.track-table { border:1px solid var(--line); border-radius:22px; overflow:hidden; background:color-mix(in srgb,var(--surface) 76%,transparent); backdrop-filter:blur(18px); }
.track-header,.track-row { display:grid; grid-template-columns: 42px minmax(220px,1.8fr) minmax(160px,1fr) 86px 100px; align-items:center; gap:14px; }
.track-header { color:var(--faint); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:13px 18px; border-bottom:1px solid var(--line); }
.track-row { min-height:68px; padding:7px 18px; border-bottom:1px solid var(--line); transition:background 150ms ease, transform 150ms ease, opacity 150ms ease; position:relative; }
.track-row:last-child { border-bottom:0; }
.track-row:hover { background:var(--surface-hover); }
.track-row.playing { background:linear-gradient(90deg,rgba(var(--accent-rgb),.15),transparent); }
.track-row.dragging { opacity:.44; transform:scale(.995); }
.track-row.drag-over { box-shadow: inset 0 2px 0 var(--accent); }
.track-index { color:var(--faint); text-align:center; font-variant-numeric:tabular-nums; }
.row-play { width:32px;height:32px;border-radius:10px;border:0;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center; }
.track-row:hover .row-play { background:var(--surface-soft); color:var(--text); }
.row-playing-bars { height:18px; display:flex; align-items:end; justify-content:center; gap:2px; }
.row-playing-bars i { display:block; width:2px; height:100%; border-radius:2px; background:var(--accent); transform-origin:bottom; animation:bars .75s ease-in-out infinite; }
.row-playing-bars i:nth-child(2){animation-delay:-.22s}.row-playing-bars i:nth-child(3){animation-delay:-.43s}
.track-main { min-width:0; display:flex; align-items:center; gap:13px; }
.track-art { width:47px;height:47px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;color:rgba(255,255,255,.82);font-weight:800;font-size:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.15); }
.track-title { min-width:0; }
.track-title strong,.track-title span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track-title strong { font-size:14px; }
.track-title span { margin-top:3px; color:var(--faint); font-size:12px; }
.track-path { min-width:0;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.track-time { color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums; }
.row-actions { display:flex;justify-content:flex-end;gap:3px;opacity:.68; }
.track-row:hover .row-actions { opacity:1; }
.row-action { width:31px;height:31px;border-radius:9px;border:0;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:150ms ease; }
.row-action:hover { background:var(--surface-soft);color:var(--text); }
.row-action.liked { color:var(--accent-3); }
.drag-handle { cursor:grab; color:var(--faint); letter-spacing:-2px; user-select:none; }
.drag-handle:active { cursor:grabbing; }
.empty-state { border:1px dashed var(--line);border-radius:24px;padding:52px 24px;text-align:center;color:var(--muted);background:var(--surface-soft); }
.empty-state .empty-icon { width:66px;height:66px;border-radius:22px;margin:0 auto 17px;display:grid;place-items:center;background:rgba(var(--accent-rgb),.1);color:var(--accent);font-size:27px; }
.empty-state h4 { margin:0 0 8px;color:var(--text);font-size:18px; }
.empty-state p { margin:0 auto 20px;max-width:390px;line-height:1.6;font-size:14px; }

.player {
  grid-column:1 / -1; grid-row:2; min-width:0; border-top:1px solid var(--line); background:var(--player); backdrop-filter:blur(30px) saturate(145%);
  display:grid; grid-template-columns:minmax(260px,1fr) minmax(400px,1.25fr) minmax(260px,1fr);align-items:center;padding:12px 24px;position:relative;z-index:10;
}
.player::before { content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);opacity:.28; }
.now { min-width:0;display:flex;align-items:center;gap:13px; }
.now-art { width:62px;height:62px;border-radius:17px;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 12px 28px rgba(var(--accent-rgb),.18);color:#fff;font-weight:800; }
.now-info { min-width:0; }
.now-info strong,.now-info span { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.now-info strong { font-size:14px; }
.now-info span { margin-top:4px;color:var(--faint);font-size:12px; }
.player-center { display:grid;gap:8px; }
.transport { display:flex;align-items:center;justify-content:center;gap:10px; }
.transport-btn { width:34px;height:34px;border:0;background:transparent;color:var(--muted);border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:160ms ease; }
.transport-btn:hover { color:var(--text);background:var(--surface-soft); }
.transport-btn.on { color:var(--accent); }
.play-main { width:45px;height:45px;border-radius:50%;border:0;cursor:pointer;background:var(--text);color:var(--bg);display:grid;place-items:center;box-shadow:0 7px 22px rgba(0,0,0,.18);transition:180ms ease; }
.play-main:hover { transform:scale(1.07); }
.timeline { display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:10px;color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums; }
.timeline span:last-child { text-align:right; }
.range { width:100%;height:4px;appearance:none;background:linear-gradient(90deg,var(--accent) var(--fill,0%),var(--surface-hover) var(--fill,0%));border-radius:999px;cursor:pointer; }
.range::-webkit-slider-thumb { appearance:none;width:11px;height:11px;border-radius:50%;background:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.2);opacity:0;transition:opacity 130ms ease; }
.range:hover::-webkit-slider-thumb { opacity:1; }
.player-right { display:flex;justify-content:flex-end;align-items:center;gap:9px; }
.volume { width:110px; }

.popover {
  position:fixed;z-index:50;min-width:245px;border:1px solid var(--line);border-radius:20px;padding:9px;background:var(--surface-strong);backdrop-filter:blur(28px);box-shadow:var(--shadow);animation:introRise 180ms ease both;
}
.popover-title { padding:8px 10px 6px;color:var(--faint);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em; }
.popover button { width:100%;border:0;background:transparent;border-radius:11px;padding:10px 11px;text-align:left;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:10px; }
.popover button:hover { background:var(--surface-hover);color:var(--text); }

.modal-backdrop { position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.46);backdrop-filter:blur(8px);display:grid;place-items:center;padding:22px;animation:introRise 180ms ease both; }
.modal { width:min(480px,100%);border:1px solid var(--line);background:var(--surface-strong);border-radius:26px;padding:24px;box-shadow:var(--shadow); }
.modal h3 { margin:0;font-family:"Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;font-size:23px;letter-spacing:-.035em; }
.modal p { color:var(--muted);line-height:1.55;font-size:14px; }
.modal input { width:100%;border:1px solid var(--line);background:var(--surface-soft);color:var(--text);border-radius:14px;padding:13px 14px;outline:0; }
.modal-actions { margin-top:18px;display:flex;justify-content:flex-end;gap:9px; }
.modal-actions button { border:1px solid var(--line);background:var(--surface-soft);color:var(--muted);border-radius:12px;padding:10px 14px;cursor:pointer; }
.modal-actions .confirm { border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#0a0a0e;font-weight:800; }
[data-theme="pearl"] .modal-actions .confirm { color:white; }

.theme-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px; }
.theme-card { border:1px solid var(--line);background:var(--surface-soft);border-radius:18px;padding:12px;text-align:left;cursor:pointer;transition:180ms ease; }
.theme-card:hover { transform:translateY(-2px);border-color:rgba(var(--accent-rgb),.3); }
.theme-card.selected { box-shadow:0 0 0 2px var(--accent); }
.theme-preview { height:85px;border-radius:13px;margin-bottom:10px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08); }
.theme-preview::before { content:"";position:absolute;inset:12px 46% 12px 10px;border-radius:8px;background:rgba(255,255,255,.08); }
.theme-preview::after { content:"";position:absolute;left:58%;right:10px;bottom:15px;height:8px;border-radius:8px;background:rgba(255,255,255,.15);box-shadow:0 -16px 0 rgba(255,255,255,.08),0 -32px 0 rgba(255,255,255,.06); }
.theme-card strong { display:block;font-size:13px; }.theme-card span{color:var(--faint);font-size:11px;}
.preview-nocturne { background:linear-gradient(145deg,#0b0911,#20173a 60%,#0d2430); }
.preview-emerald { background:linear-gradient(145deg,#06110d,#103425 60%,#0b2831); }
.preview-velvet { background:linear-gradient(145deg,#13070e,#411529 60%,#2a1739); }
.preview-pearl { background:linear-gradient(145deg,#e8e9f1,#ffffff 55%,#dce9f6); }

.toast-stack { position:fixed;right:22px;bottom:126px;z-index:80;display:grid;gap:10px;pointer-events:none; }
.toast { min-width:260px;max-width:360px;border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:var(--surface-strong);box-shadow:var(--shadow);backdrop-filter:blur(20px);display:flex;align-items:center;gap:10px;animation:introRise 240ms ease both; }
.toast-dot { width:9px;height:9px;border-radius:50%;background:var(--success);box-shadow:0 0 12px var(--success); }
.toast.error .toast-dot{background:var(--danger);box-shadow:0 0 12px var(--danger);}
.toast span{font-size:13px;color:var(--muted);}

.loading-overlay { position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(4,4,7,.68);backdrop-filter:blur(18px); }
.loading-card { width:min(390px,calc(100% - 40px));padding:30px;border:1px solid var(--line);border-radius:25px;background:var(--surface-strong);text-align:center;box-shadow:var(--shadow); }
.spinner { width:48px;height:48px;margin:0 auto 16px;border:3px solid var(--surface-hover);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite; }
.loading-card strong{display:block}.loading-card span{display:block;margin-top:6px;color:var(--muted);font-size:13px;}

@media (max-width: 1080px) {
  .shell { grid-template-columns: 210px minmax(0,1fr); }
  .track-header,.track-row { grid-template-columns:42px minmax(220px,1.7fr) minmax(120px,.8fr) 72px 92px; }
  .hero-orbit { opacity:.42; right:20px; }
  .player { grid-template-columns:minmax(220px,1fr) minmax(360px,1.3fr) 180px; }
}
@media (max-width: 820px) {
  body { overflow:auto; }
  .shell { min-height:100vh;height:auto;grid-template-columns:1fr;grid-template-rows:auto 1fr 96px; }
  .sidebar { grid-row:auto;position:sticky;top:0;z-index:20;flex-direction:row;align-items:center;padding:10px 14px;border-right:0;border-bottom:1px solid var(--line); }
  .brand-row { height:auto;padding:0;margin-right:auto }.brand-name{display:none}.nav-section,.playlist-list,.sidebar-bottom{display:none}
  .main { overflow:visible; }.content{overflow:visible;padding:6px 16px 30px}.topbar{padding:12px 16px}.hero{padding:28px 24px}.hero-orbit{display:none}
  .track-header { display:none; }.track-table{background:transparent;border:0;display:grid;gap:8px}.track-row{grid-template-columns:36px 1fr 80px;gap:8px;border:1px solid var(--line);border-radius:16px;padding:8px 10px;background:var(--surface)}
  .track-path,.track-time{display:none}.row-actions{grid-column:3}.player{grid-column:1;grid-row:3;position:sticky;bottom:0;grid-template-columns:1fr auto;padding:10px 14px}.player-center{display:none}.player-right{display:none}.now-art{width:52px;height:52px}.mobile-play{display:grid!important}
}
@media (max-width:560px) {
  .onboarding{padding:18px}.onboarding-card{padding:42px 22px 34px;border-radius:28px}.onboarding-copy{font-size:15px}.primary-cta{width:100%;min-width:0}
  .theme-grid{grid-template-columns:1fr 1fr}.hero{min-height:210px}.hero-stats{gap:12px;flex-wrap:wrap}.section-actions .small-btn:not(.accent){display:none}
}
.mobile-play { display:none; }