:root {
  --bg-deep: #0a0a0a;
  --accent: #1a1a1a;
  --accent-dark: #000000;
  --accent-rgb: 26, 26, 26;
  --off-white: #f0f0eb;
  --off-white-rgb: 240, 240, 235;
  --content-bg-rgb: 249, 249, 246;
  --surface: #ffffff;
  --hover-tint-rgb: 58, 46, 30;
  --ink: #1a1a1a;
  --ink-dim: #333333;
  --ink-faint: #63635d;
  --line: #deded4;
  --line-strong: #cbcbc0;
  --sidebar-text: #f4f1fa;
  --sidebar-text-dim: rgba(244, 241, 250, 0.74);
  --sidebar-ink: #14130f;
  --sidebar-ink-dim: rgba(20, 19, 15, 0.92);
  --sidebar-tint-rgb: 20, 19, 15;
  --ambient-op-1: 0.13;
  --ambient-op-2: 0.08;
  --ambient-op-3: 0.06;
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 30px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-pill: 100px;

  --text-2xs: 11px;
  --text-xs: 11.5px;
  --text-sm: 12.5px;
  --text-md: 13.5px;
  --text-lg: 15px;
  --text-xl: 18px;
  --text-2xl: 23px;
  --text-3xl: 26px;
  --text-4xl: 32px;

  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 52px;

  --danger: #d81f49;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
a { color: inherit; }
svg { display: block; }
p { margin: 0; }

.ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ambient span { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; transition: opacity .3s ease; }
.ambient span:first-child { width: 48vmax; height: 48vmax; top: -18vmax; left: -14vmax; background: var(--accent); opacity: var(--ambient-op-1); animation: ambient-drift-1 28s ease-in-out infinite; }
.ambient span:nth-child(2) { width: 42vmax; height: 42vmax; bottom: -18vmax; right: -14vmax; background: var(--accent-dark); opacity: var(--ambient-op-2); animation: ambient-drift-2 32s ease-in-out infinite; }
.ambient span:nth-child(3) { width: 34vmax; height: 34vmax; top: 32%; left: 55%; background: var(--accent); opacity: var(--ambient-op-3); animation: ambient-drift-3 36s ease-in-out infinite; }
@keyframes ambient-drift-1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(7vmax, 9vmax); } }
@keyframes ambient-drift-2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-8vmax, -6vmax); } }
@keyframes ambient-drift-3 { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7vmax); } }
@media (prefers-reduced-motion: reduce) {
  .ambient span { animation: none; }
}

.app-window {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--off-white);
}

.topbar {
  position: relative;
  z-index: 40;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  background: var(--off-white);
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font: 800 15px/1 var(--font-display);
  letter-spacing: .08em;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark img { width: 22px; height: 22px; flex-shrink: 0; filter: invert(1); }

.topbar-search { position: relative; flex: 1 1 auto; max-width: 690px; margin: 0 auto; }
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }

@media (min-width: 761px) {
  .topbar-search {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(690px, calc(100% - 480px));
    max-width: none;
    margin: 0;
  }
}
#topbarSearchBtn { display: none; }

.topbar-user { position: relative; }
.topbar-avatar {
  width: 36px; height: 36px;
  padding: 0; border: 1px solid var(--line-strong);
  border-radius: 50%;
  overflow: hidden;
  background: var(--accent);
  display: block;
}
.topbar-avatar:hover { border-color: var(--accent); }
.topbar-menu {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  z-index: 60;
  min-width: 216px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .16);
  display: flex; flex-direction: column;
}
.topbar-menu-name { font: 700 13px/1.3 var(--font-body); color: var(--ink); padding: 6px 10px 0; }
.topbar-menu-email { font-size: 11.5px; color: var(--ink-faint); padding: 0 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; }
.topbar-menu button {
  text-align: left; border: 0; background: transparent;
  padding: 9px 10px; border-radius: 8px;
  font: 600 13px/1 var(--font-body); color: var(--ink);
}
.topbar-menu button:hover { background: rgba(var(--hover-tint-rgb), .06); color: var(--accent); }

.menu-toggle-btn {
  display: none;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--hover-tint-rgb), .06);
  color: var(--ink);
  align-items: center;
  justify-content: center;
}
.menu-toggle-btn svg { width: 18px; height: 18px; }

.player-expand-btn { display: none; }
.player-backdrop { display: none; }

@media (max-width: 760px) {
  .player-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, .55);
  }
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, .55);
}

.window-body { flex: 1; min-height: 0; display: flex; }

.sidebar {
  position: relative;
  width: 248px;
  flex-shrink: 0;
  overflow: hidden;
  color: var(--sidebar-ink);
  transition: width .2s ease;
}
.sidebar-collapse-btn {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  width: 30px; height: 30px;
  border: 0; border-radius: 8px;
  background: rgba(var(--sidebar-tint-rgb), .10);
  color: var(--sidebar-ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.sidebar-collapse-btn:hover { background: rgba(var(--sidebar-tint-rgb), .18); }
.sidebar-collapse-btn svg { width: 16px; height: 16px; }
@media (min-width: 761px) {
  .sidebar-collapsed .sidebar { width: 64px; }
  .sidebar-collapsed .nav-label,
  .sidebar-collapsed .nav-item span { display: none; }
  .sidebar-collapsed .sidebar-inner { padding: 56px 10px 20px; }
  .sidebar-collapsed .nav-item { justify-content: center; padding: 10px 0; }
  .sidebar-collapsed .nav-item.is-active::before { left: -10px; }
  .sidebar-collapsed .sidebar-collapse-btn { top: 14px; right: 50%; transform: translateX(50%); }

}

.sidebar-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #f7f7f5;
  background-image: var(--sidebar-bg-url, url('sidebar-bg-v2.webp'));
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}
.sidebar-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(247, 247, 245, .95) 0,
      rgba(247, 247, 245, .92) var(--scene-veil-a, 320px),
      rgba(247, 247, 245, .55) var(--scene-veil-b, 440px),
      rgba(247, 247, 245, 0) var(--scene-veil-c, 580px));
}

.sidebar-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 56px 16px 20px;
}

.nav-group { margin-bottom: 26px; }
.nav-label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sidebar-ink-dim);
  margin: 0 0 12px 12px;
  font-weight: 700;
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--sidebar-ink-dim);
  font: 600 14.5px/1 var(--font-body);
  border-radius: 10px;
  text-align: left;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item:hover { color: var(--sidebar-ink); background: rgba(var(--sidebar-tint-rgb), .07); }
.nav-item.is-active { color: var(--sidebar-ink); background: rgba(var(--sidebar-tint-rgb), .13); }
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -20px; top: 8px; bottom: 8px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--sidebar-ink);
}

.site-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 22px;
  background: var(--off-white);
  border-top: 1px solid var(--line);
}
.site-footer-copy { margin: 0; font-size: 12px; color: var(--ink-faint); }
.site-footer-links { margin: 0; display: flex; align-items: center; gap: 8px; }
.site-footer-links button, .site-footer-links a {
  border: 0; background: none; padding: 0;
  font: 700 12px/1 var(--font-body);
  color: var(--ink-dim);
  cursor: pointer;
  text-decoration: none;
}
.site-footer-links button:hover, .site-footer-links a:hover { text-decoration: underline; }
.site-footer-links span { color: var(--ink-faint); font-size: 12px; }

.sidebar-signin { width: 100%; }

.profile-card {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--sidebar-tint-rgb), .14);
  box-shadow: 0 2px 10px rgba(var(--sidebar-tint-rgb), .10);
}
.profile-avatar-btn {
  position: relative;
  flex-shrink: 0;
  width: 46px; height: 46px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--accent);
  cursor: pointer;
  display: block;
}
.profile-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar-initial {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font: 700 18px/1 var(--font-display);
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}
.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: rgba(12, 11, 9, .68);
  color: #fff;
  opacity: 0;
  transition: opacity .15s ease;
}
.profile-avatar-overlay svg { width: 16px; height: 16px; }
.profile-avatar-overlay span { font: 700 8px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.profile-avatar-btn:hover .profile-avatar-overlay,
.profile-avatar-btn:focus-visible .profile-avatar-overlay { opacity: 1; }
.profile-card-email { margin: 1px 0 0; font-size: 11.5px; color: var(--sidebar-ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.content {
  flex: 1;
  min-width: 0;
  background: rgba(var(--content-bg-rgb), .94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow-y: auto;
  padding: 26px 44px 28px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  order: 3;
}
.content::-webkit-scrollbar { width: 8px; }
.content::-webkit-scrollbar-thumb { background: rgba(var(--hover-tint-rgb), .12); border-radius: 8px; }

.content-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.eyebrow { color: var(--accent); font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.content-header h1 { margin: 0; font: 800 32px/1.1 var(--font-display); color: var(--ink); }
.header-actions { position: relative; display: flex; align-items: center; gap: 14px; padding-top: 6px; }
.icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.avatar-user {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}

.home-view { display: flex; flex-direction: column; gap: 0; overflow-y: auto; }

.home-search-input-wrap { position: relative; display: flex; align-items: center; }
.home-search-icon { position: absolute; left: 14px; width: 17px; height: 17px; color: var(--ink-faint); pointer-events: none; }
.home-search-input {
  width: 100%;
  padding: 9px 16px 9px 40px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font: 500 14px/1.3 var(--font-body);
  color: var(--ink);
  background: var(--surface);
}
.home-search-input:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.home-search-input::-webkit-search-cancel-button { display: none; }

.search-results-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .16);
  padding: 8px;
  max-height: 420px;
  overflow-y: auto;
}
.search-results-group-label { margin: 0; padding: 8px 10px 4px; font: 700 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.search-result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.search-result-row:hover { background: rgba(var(--hover-tint-rgb), .05); }
.search-result-thumb {
  width: 36px; height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--line);
}
.search-result-thumb.is-round { border-radius: 8px; }
.search-result-text { flex: 1; min-width: 0; }
.search-result-title { display: block; font: 600 13.5px/1.3 var(--font-body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-sub { display: block; font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-section { padding: 22px 0 30px; border-bottom: 0; }
.home-section:first-child { padding-top: 4px; }
.home-section:last-child { padding-bottom: 8px; }

.section-title-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
  text-decoration: none;
  width: fit-content;
}
.section-title-row h2 { margin: 0; font: 800 23px/1.2 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.section-chev { font: 700 21px/1 var(--font-display); color: var(--ink-faint); transform: translateY(-1px); transition: transform .15s; }
a.section-title-row:hover .section-chev { transform: translate(3px, -1px); }
.feature-card { min-width: 0; cursor: pointer; }

.compact-grid {
  display: grid;
  grid-template-columns: repeat(var(--compact-cols, 3), minmax(0, 1fr));
  column-gap: 26px;
}
.compact-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  min-width: 0;
}
.compact-thumb {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint);
}
.compact-thumb svg { width: 20px; height: 20px; }
.compact-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.compact-title { font: 500 13.5px/1.3 var(--font-body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-artist { font-size: 12.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-genre {
  flex-shrink: 0;
  font: 600 10px/1 var(--font-body);
  color: var(--ink-faint);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  padding: 4px 8px;
  white-space: nowrap;
}
.compact-row .track-more-btn { width: 28px; height: 28px; }
.compact-row:hover { background: rgba(var(--hover-tint-rgb), .04); }

.tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, 168px);
  justify-content: start;
  gap: 22px 18px;
}
.tile { width: 168px; cursor: pointer; }
.tile-art {
  position: relative;
  width: 168px; height: 168px;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--line);
  margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center;
}
.tile-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: rgba(255, 255, 255, .7); }
.tile-placeholder svg { width: 38%; height: 38%; }
.tile-title { margin: 0; font: 500 13.5px/1.35 var(--font-body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-sub { margin: 1px 0 0; font-size: 12.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-badge {
  position: absolute;
  top: 7px; left: 7px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(20, 16, 10, .55);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.tile-badge svg { width: 12px; height: 12px; }
.tile-badge.is-favorite { color: #ff6b7a; }

.home-view { --home-cols: 4; --compact-cols: 3; --feature-cols: 3; }
.feature-row > :nth-child(n+7),
.compact-grid > :nth-child(n+16) { display: none; }

@media (max-width: 1180px) {
  .home-view { --home-cols: 3; --compact-cols: 2; --feature-cols: 2; }
  .feature-row > :nth-child(n+5),
  .compact-grid > :nth-child(n+11) { display: none; }
}

@media (max-width: 760px) {
  .player-bar {
    transition: height .26s cubic-bezier(.2,.7,.3,1), padding .26s cubic-bezier(.2,.7,.3,1);
  }
  @media (prefers-reduced-motion: reduce) {
    .player-bar { transition: none; }
  }
  body.player-open { overflow: hidden; }

  .player-bar:not(.is-expanded) .player-mini-progress {
    display: flex;
    align-items: flex-start;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 15px;
    padding-top: 0;
    background: transparent;
    cursor: pointer;
    touch-action: none;
    z-index: 3;
  }
  .player-bar:not(.is-expanded) .player-mini-progress::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--line);
  }
  .player-bar:not(.is-expanded) .player-mini-progress span {
    position: relative;
    display: block;
    height: 3px;
    width: 0;
    background: var(--accent);
    transition: width .25s linear;
  }
  .player-bar:not(.is-expanded) .player-mini-progress:focus-visible {
    outline: none;
  }
  .player-bar:not(.is-expanded) .player-mini-progress:focus-visible::before {
    background: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
  }

  .home-view { --home-cols: 2; --compact-cols: 1; --feature-cols: 2; }
  .feature-caption { padding: 12px 10px 8px; font-size: 11px; line-height: 1.35; }
  .feature-caption span { -webkit-line-clamp: 2; }
  .feature-row > :nth-child(n+5),
  .compact-grid > :nth-child(n+6) { display: none; }

  .tile-row:not(.marquee-track):not(.is-single-row) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-row:not(.marquee-track):not(.is-single-row) .tile { width: 100%; }
  .tile-row:not(.marquee-track):not(.is-single-row) .tile-art { width: 100%; height: auto; aspect-ratio: 1; }
  .tile-row:not(.marquee-track):not(.is-single-row) > :nth-child(n+5) { display: none; }
}

.section-head h2 .hl { color: var(--ink); }
.section-head h2:has(.hl) { color: var(--ink-faint); }

.media-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 20px 16px; }
.media-grid .media-card-art { box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }

.artists-view .media-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 24px 18px; }
.artists-view .media-card { width: 100%; }
.artists-view .media-card-art { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; }
.artists-view .media-card-title { font: 500 13.5px/1.35 var(--font-body); margin-top: 8px; }
.artists-view .media-card-subtitle { font-size: 12.5px; }

.marquee-viewport { overflow: hidden; }
.marquee-track.tile-row {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: media-marquee 46s linear infinite;
}
.marquee-viewport:hover .marquee-track { animation-play-state: paused; }

.tile-row.is-single-row { grid-auto-flow: column; grid-auto-columns: 168px; overflow: hidden; }
@keyframes media-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

.media-card {
  flex-shrink: 0;
  width: 130px;
  display: block;
  text-decoration: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.media-card-art {
  position: relative;
  width: 130px;
  height: 130px;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-card-art.is-round { border-radius: 10px; }
.media-card-badge {
  position: absolute;
  top: 6px; left: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(20, 16, 10, .55);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.media-card-badge svg { width: 12px; height: 12px; }
.media-card-badge.is-favorite { color: #ff6b7a; }
.media-card-badge.is-favorite svg path { fill: currentColor; }

.track-detail-head { display: flex; gap: 24px; margin-bottom: 28px; }
.track-detail-art {
  width: 160px; height: 160px; flex-shrink: 0;
  border-radius: 14px; overflow: hidden;
  background-image: linear-gradient(135deg, var(--accent), var(--accent-dark));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .7);
}
.track-detail-art svg { width: 34%; height: 34%; }
.track-detail-info { min-width: 0; padding-top: 4px; }
.track-detail-info h2 { margin: 0; font: 800 24px/1.25 var(--font-display); color: var(--ink); }
.track-detail-artist { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--ink-dim); }
.track-detail-meta { margin: 2px 0 0; font-size: 13px; color: var(--ink-faint); }
.track-detail-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.track-detail-actions .btn-primary { width: auto; padding: 10px 22px; }
.track-detail-actions .track-fav-btn { border: 1px solid var(--line-strong); }
.track-detail-stats { display: flex; gap: 16px; margin-top: 14px; }
.track-detail-stat { font-size: 12.5px; font-weight: 600; color: var(--ink-faint); }
.track-detail-lyrics { padding-top: 24px; border-top: 1px solid var(--line); max-width: 640px; }
.track-detail-lyrics h3 { margin: 0 0 12px; font: 700 15px/1 var(--font-display); color: var(--ink); }
.track-detail-lyrics-body { font-size: 14px; line-height: 1.7; color: var(--ink-dim); }

@media (max-width: 640px) {
  .track-detail-head { flex-direction: column; gap: 16px; }
  .track-detail-art { width: 120px; height: 120px; }
}
.media-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: rgba(255, 255, 255, .7); }
.media-card-placeholder svg { width: 40%; height: 40%; }
.media-card-title {
  margin: 8px 0 2px;
  font: 700 13px/1.3 var(--font-display);
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.media-card-subtitle { margin: 0; font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-card.is-round .media-card-title, .media-card.is-round .media-card-subtitle { text-align: left; }

.playlist-card { position: relative; }
.playlist-cover-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.5px;
}
.playlist-cover-collage div { background-size: cover; background-position: center; background-color: var(--line); }
.playlist-more-btn {
  position: absolute;
  top: 6px; right: 6px;
  width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.playlist-more-btn svg { width: 16px; height: 16px; }
.playlist-more-btn:hover { background: rgba(0, 0, 0, .65); }

.lower-grid { display: grid; grid-template-columns: 1fr; gap: 22px; flex: 1; min-height: 0; align-content: start; }
.trending { min-width: 0; }

.artist-detail-header { display: flex; gap: 20px; align-items: flex-start; width: 100%; }
.artist-detail-photo {
  width: 96px; height: 96px; flex-shrink: 0;
  border-radius: 12px; overflow: hidden;
  background-image: linear-gradient(135deg, var(--accent), var(--accent-dark));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .7);
}
.artist-detail-photo svg { width: 38%; height: 38%; }
.artist-detail-info { min-width: 0; padding-top: 6px; }
.artist-detail-stats { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-faint); }
.artist-detail-bio { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-dim); }
.artist-detail-info { flex: 1; }
.artist-detail-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.artist-detail-actions .btn-secondary { width: auto; margin-top: 0; padding: 8px 14px; font-size: 12.5px; }

@media (min-width: 761px) {
  .lower-grid:has(> .artist-detail-header:not([hidden])) {
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    gap: 30px;
    align-items: start;
  }
  .artist-detail-header:not([hidden]) {
    flex-direction: column;
    gap: 16px;
  }
  .artist-detail-header:not([hidden]) .artist-detail-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 14px;
  }
  .artist-detail-header:not([hidden]) .artist-detail-photo svg { width: 26%; height: 26%; }
  .artist-detail-header:not([hidden]) .artist-detail-info { width: 100%; padding-top: 0; }
  .artist-detail-header:not([hidden]) .artist-detail-stats { font-size: 13px; }
  .artist-detail-header:not([hidden]) .artist-detail-bio { margin-top: 10px; font-size: 14px; }
}

@media (max-width: 640px) {
  .artist-detail-header { gap: 14px; }
  .artist-detail-photo { width: 72px; height: 72px; }
}

.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-head h2 { margin: 0; font: 800 23px/1.2 var(--font-display); color: var(--ink); letter-spacing: -.01em; }

.track-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.track-list.is-dense { column-count: 2; column-gap: 28px; border-top: 0; }
.track-list.is-dense .track-row { break-inside: avoid; }

@media (min-width: 1100px) {
  .track-list.is-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
  .track-list.is-two-col .track-row { gap: 8px; }
  .track-list.is-two-col .track-info { flex: 0 0 178px; }
  .track-list.is-two-col .row-wave { flex: 1 1 0; min-width: 40px; }
  .track-list.is-two-col .track-counts { gap: 8px; }
  .track-list.is-two-col .track-actions { margin-left: 2px; }
}

.songs-pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.pager-count { margin: 0; font: 600 12.5px/1 var(--font-body); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.pager-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pager-btn {
  min-width: 34px; height: 32px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  font: 700 12.5px/1 var(--font-body); cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s, background .15s, color .15s;
}
.pager-btn:hover:not(:disabled):not(.is-current) { border-color: var(--accent); }
.pager-btn.is-current { background: var(--ink); border-color: var(--ink); color: var(--off-white); }
.pager-btn:disabled { opacity: .45; cursor: default; }
.pager-gap { color: var(--ink-faint); padding: 0 2px; }

@media (max-width: 760px) {
  .track-list.is-dense { column-count: 1; }
}
.track-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  border-radius: 10px;
}
.track-play-btn {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background-color: var(--line);
  background-size: cover;
  background-position: center;
  color: var(--ink-faint);
  display: flex; align-items: center; justify-content: center;
}
.track-play-btn.has-photo { color: transparent; }
.track-play-btn svg { width: 20px; height: 20px; }
.track-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.track-title-main { min-width: 0; font-size: 14.5px; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-artist-sub { min-width: 0; font-size: 12.5px; color: var(--ink-faint); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.track-row.is-playing { background: linear-gradient(90deg, rgba(var(--accent-rgb), .09), rgba(var(--accent-rgb), 0)); }
.track-row.is-playing .track-title-main { color: var(--accent); }

.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px;
}
.player-bar {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  height: 72px;
  padding: 0 16px;
  background: rgba(var(--off-white-rgb), .92);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--ink);
}

.player-collapse-btn { display: none; }

.player-hero { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-shrink: 0; text-align: left; }
.player-hero-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; width: 144px; overflow: hidden; }
.player-hero-art {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 28% 26%, var(--accent), transparent 55%),
    radial-gradient(circle at 74% 72%, var(--accent-dark), transparent 55%),
    #181818;
  filter: saturate(.5) brightness(.85);
  transition: filter .4s ease;
}
.player-bar.is-playing .player-hero-art { filter: saturate(1) brightness(1); }
.player-hero-note { width: 40%; height: 40%; color: rgba(255, 255, 255, .5); }
.player-hero-art.has-photo .player-hero-note { display: none; }
.buffering-indicator { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .25); }
.buffering-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: buffering-spin .8s linear infinite; }
@keyframes buffering-spin { to { transform: rotate(360deg); } }
#playerHeroPhoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player-hero-title {
  margin: 0;
  font: 700 13.5px/1.3 var(--font-display);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.player-hero-artist { margin: 0; font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.artist-info-bio { display: none; }

.player-transport, .player-secondary { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-shrink: 0; }
.player-transport { gap: 4px; }
.player-secondary { gap: 10px; }
.transport-btn {
  position: relative;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--ink-dim);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.transport-btn svg { width: 23px; height: 23px; }
.transport-btn:hover { color: var(--accent); background: rgba(var(--hover-tint-rgb), .08); }
.transport-btn:disabled { opacity: .35; cursor: default; }
.transport-btn:disabled:hover { color: var(--ink-dim); background: transparent; }
.transport-btn.is-active { color: var(--off-white); background: var(--ink); }
.repeat-one-dot { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--off-white); }
.play-btn { width: 52px; height: 52px; background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(var(--accent-rgb), .5); }
.play-btn:hover { background: var(--accent-dark); color: #fff; }
.play-btn svg { width: 30px; height: 30px; }
.time-current, .time-total { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; font-weight: 500; flex-shrink: 0; width: 36px; }
.time-current { text-align: right; }

.volume-wrap { display: flex; align-items: center; gap: 6px; }
.volume-bar {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--accent) var(--pct, 100%), var(--line) var(--pct, 100%));
  cursor: pointer;
}
.volume-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  cursor: pointer;
}
.volume-bar::-moz-range-thumb {
  width: 12px; height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  cursor: pointer;
}
.volume-bar::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line); }
.volume-bar::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--accent); }
.player-bar.is-muted .volume-bar { background: var(--line); }
.player-bar.is-muted .volume-bar::-webkit-slider-thumb,
.player-bar.is-muted .volume-bar::-moz-range-thumb { background: var(--line-strong); }

.player-scrub { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 12px; }
.scrub-track { position: relative; flex: 1; width: auto; height: 32px; background: transparent; cursor: pointer; overflow: hidden; }
.scrub-wave, .scrub-fill {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: flex-start;
  gap: 1px;
  pointer-events: none;
}
.scrub-wave span, .scrub-fill span {
  flex: 0 0 2px; width: 2px;
  border-radius: 0;
  background: currentColor;
}
.scrub-wave { color: var(--line-strong); }
.scrub-fill {
  color: var(--accent);
  width: auto;
  clip-path: inset(0 calc(100% - var(--pct, 0%)) 0 0);
}
.scrub-handle { display: none; }

.avatar-img { object-fit: cover; }
.avatar-xl { width: 84px; height: 84px; font-size: 28px; }

.btn-primary, .btn-secondary, .btn-link, .btn-signin, .btn-signup {
  font: 700 13.5px/1 var(--font-body);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-primary, .btn-signin {
  border: 0;
  background: var(--accent);
  color: #fff;
  padding: 12px 18px;
  width: 100%;
}
.btn-primary:hover, .btn-signin:hover { background: var(--accent-dark); }
.btn-signin { width: auto; padding: 9px 18px; }
.btn-signup {
  width: auto;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
}
.btn-signup:hover { border-color: var(--accent); background: rgba(var(--hover-tint-rgb), .06); }
.btn-secondary {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 12px 18px;
  width: 100%;
  margin-top: 8px;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-link {
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  padding: 10px 0 0;
  width: 100%;
  text-align: center;
}
.btn-link:hover { color: var(--accent); }

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal {
  position: relative;
  width: 100%;
  max-width: 380px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 30px 70px rgba(10, 6, 20, .4);
}
.modal h2 { margin: 0 0 6px; font: 700 21px/1.2 var(--font-display); color: var(--ink); }
.modal-sub { font-size: 13.5px; color: var(--ink-dim); margin-bottom: 18px; }
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 30px; height: 30px;
  font: 600 15px/1 var(--font-body);
  border: 0; border-radius: 50%;
  background: rgba(var(--hover-tint-rgb), .05);
  color: var(--ink-dim);
  display: flex; align-items: center; justify-content: center;
}
.modal-close svg { width: 14px; height: 14px; }
.modal-close:hover { background: rgba(var(--hover-tint-rgb), .1); color: var(--ink); }
.modal-lg { max-width: 520px; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions .btn-primary, .modal-actions .btn-secondary { flex: 1; width: auto; margin-top: 0; }
.modal-legal-body h3 { font: 700 15px/1.3 var(--font-display); color: var(--ink); margin: 20px 0 6px; }
.modal-legal-body h3:first-child { margin-top: 0; }
.modal-legal-body p, .modal-legal-body li { font-size: 13.5px; line-height: 1.65; color: var(--ink-dim); margin-bottom: 8px; }
.modal-legal-body ul { padding-left: 20px; margin-bottom: 10px; }
.modal-legal-body a { color: var(--accent); }

.auth-step label, .modal form label, .support-panel form label { display: block; margin-bottom: 14px; }
.auth-step label span, .modal form label span, .support-panel form label span { display: block; }
.auth-step label, .modal form label, .support-panel form label {
  font: 600 12.5px/1 var(--font-body);
  color: var(--ink-dim);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font: 500 14px/1.3 var(--font-body);
  color: var(--ink);
  background: #ffffff;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
  background: var(--surface);
}
.form-error {
  font-size: 12.5px;
  color: #d81f49;
  background: rgba(216, 31, 73, .08);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
}
.form-success {
  font-size: 12.5px;
  color: #1f8a4c;
  background: rgba(31, 138, 76, .08);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
}

.auth-links { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 16px; }
.auth-links .btn-link { width: auto; padding: 0; text-align: left; }
.auth-links .btn-link:last-child { text-align: right; }

.password-hint { font-size: 12px; color: var(--ink-faint); margin: -8px 0 12px; }

.avatar-edit-row { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.avatar-upload-label { display: inline-flex; align-items: center; justify-content: center; width: auto; margin-top: 0; }
#lyricsReadView {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-dim);
  max-height: 40vh;
  overflow-y: auto;
  margin-bottom: 16px;
  white-space: pre-wrap;
}
#lyricsForm textarea { min-height: 220px; resize: vertical; font-family: var(--font-body); }

.upload-panel {
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
  background: rgba(var(--accent-rgb), .03);
}
.upload-panel form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.upload-panel input[type="text"] {
  flex: 1;
  min-width: 160px;
  margin-top: 0;
}
.upload-panel input[type="file"] { font-size: 12.5px; max-width: 200px; }
.upload-panel .btn-primary { width: auto; padding: 10px 16px; }
.upload-hint { font-size: 12px; color: var(--ink-faint); margin-top: 8px; }
.upload-progress { margin-top: 10px; }
.upload-progress-track { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.upload-progress-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 4px; transition: width .15s linear; }
.upload-panel .btn-primary:disabled { opacity: .6; cursor: default; }
.upload-genre { flex-shrink: 0; }
.upload-genre .filter-menu { left: auto; right: 0; }

.track-genre-chip {
  flex-shrink: 0;
  font: 600 10.5px/1 var(--font-body);
  color: var(--ink-faint);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  padding: 4px 9px;
  white-space: nowrap;
}

.track-counts {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.track-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 11.5px/1 var(--font-body);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.track-count svg { width: 13px; height: 13px; flex-shrink: 0; }

@media (max-width: 720px) {
  .track-counts { gap: 10px; }
  .track-count { font-size: 11px; }
}
.row-wave {
  flex: 1 1 0;
  min-width: 40px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  overflow: hidden;
  cursor: pointer;
}
.row-wave span {
  flex: 0 0 2px; width: 2px;
  border-radius: 0;
  background: var(--line-strong);
  transition: background .12s;
}
.track-row:hover .row-wave span { background: var(--ink-faint); }
.track-row.is-playing .row-wave span { background: var(--accent); }
.row-duration {
  flex-shrink: 0;
  font: 600 11.5px/1 var(--font-body);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: right;
}
@media (max-width: 900px) {
  .row-wave { display: none; }
}
.track-meta { display: contents; }
@media (max-width: 520px) {
  .track-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "art info actions" "art meta meta";
    column-gap: 10px;
    row-gap: 3px;
    align-items: center;
  }
  .track-play-btn { grid-area: art; align-self: center; }
  .track-info { grid-area: info; }
  .track-actions { grid-area: actions; margin-left: 0; }
  .track-meta { grid-area: meta; display: flex; align-items: center; gap: 10px; min-width: 0; }
  .row-duration { min-width: 0; text-align: left; }
  .track-counts { gap: 10px; }
  .status-badge { grid-area: meta; justify-self: end; }
}

.track-actions { display: flex; align-items: center; gap: 2px; margin-left: 6px; flex-shrink: 0; }
.track-fav-btn, .track-more-btn {
  width: 32px; height: 32px;
  border: 0; background: transparent;
  color: var(--ink-faint);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.track-fav-btn svg, .track-more-btn svg { width: 16px; height: 16px; }
.track-fav-btn:hover, .track-more-btn:hover { background: rgba(var(--hover-tint-rgb), .06); color: var(--accent); }
.track-fav-btn.is-active { color: var(--accent); }
.track-fav-btn.is-active svg path { fill: currentColor; }

.track-more-menu {
  position: fixed;
  z-index: 120;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .16);
  padding: 8px;
  display: flex;
  flex-direction: column;
  min-width: 160px;
}
.track-more-menu button {
  display: block;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 8px;
  font: 600 13.5px/1 var(--font-body);
  color: var(--ink);
  cursor: pointer;
}
.track-more-menu button:hover { background: rgba(var(--hover-tint-rgb), .05); color: var(--accent); }
.track-more-menu button[data-action="delete"]:hover { color: #d81f49; }

.status-badge {
  font: 700 10.5px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}
.status-badge.status-pending { background: rgba(242, 161, 84, .16); color: #b96a1c; }
.status-badge.status-approved { background: rgba(79, 195, 138, .16); color: #1f8a4c; }
.status-badge.status-rejected { background: rgba(216, 31, 73, .1); color: #d81f49; }
.track-row.is-unapproved .track-title-main { color: var(--ink-dim); }

.empty-state { padding: 20px 4px; color: var(--ink-faint); font-size: 13.5px; text-align: center; }

.toast {
  position: fixed;
  left: 50%; bottom: 90px;
  transform: translate(-50%, 12px);
  z-index: 200;
  background: var(--ink);
  color: var(--off-white);
  font: 600 13px/1 var(--font-body);
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.stat-card-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), .1);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.stat-card-icon svg { width: 22px; height: 22px; }
.stat-card-value { margin: 0; font: 800 24px/1.1 var(--font-display); color: var(--ink); }
.stat-card-label { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-faint); }

.dashboard-panel { margin-bottom: 32px; }

.admin-section { margin-bottom: 8px; }
.admin-section h2 { font: 700 17px/1.3 var(--font-display); color: var(--ink); margin: 0 0 12px; }
.admin-section-hint { font-size: 13px; color: var(--ink-dim); margin: 0 0 14px; }
.admin-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.admin-row { padding: 14px 4px; border-bottom: 1px solid var(--line); }
.admin-row-main { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.admin-row-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); }
.admin-row-date { font-size: 12.5px; color: var(--ink-faint); }
.admin-row audio { width: 100%; height: 32px; margin-bottom: 8px; }
.admin-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-row-actions .btn-secondary { width: auto; margin-top: 0; padding: 8px 14px; font-size: 12.5px; }

.status-badge.status-duplicate { background: #fdeaea; color: #a3302f; border: 1px solid #f3c9c8; }
.admin-row-dupe { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: #a3302f; }
.admin-row-dupe strong { font-weight: 700; }

.admin-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-search {
  flex: 1;
  min-width: 180px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font: 500 13.5px/1.3 var(--font-body);
  color: var(--ink);
  background: #ffffff;
}
.admin-search:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-dim);
  font: 600 12.5px/1 var(--font-body);
}
.chip.is-active { background: var(--ink); color: var(--off-white); border-color: var(--ink); }
.chip:hover:not(.is-active) { border-color: var(--ink-faint); }

.az-btn {
  min-width: 26px; height: 26px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink-dim);
  font: 700 11.5px/1 var(--font-body);
  display: flex; align-items: center; justify-content: center;
}
.az-btn.is-active { background: var(--ink); color: var(--off-white); border-color: var(--ink); }
.az-btn:hover:not(.is-active) { border-color: var(--accent); color: var(--accent); }

.az-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-bottom: 10px; }

.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.filter-bar-spacer { flex: 1 1 auto; }
.filter-chip { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.filter-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-chip-btn .filter-chip-value { color: var(--accent); font-weight: 700; }
.filter-chip.is-filtered .filter-chip-btn .filter-chip-value { color: inherit; }
.filter-chip-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: var(--surface);
  color: var(--ink);
  font: 700 12px/1 var(--font-body);
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.filter-chip-btn:hover { border-color: var(--accent); }
.filter-chip-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.filter-chip-caret { transition: transform .15s; }
.filter-chip-btn[aria-expanded="true"] .filter-chip-caret { transform: rotate(180deg); }
.filter-chip.is-filtered .filter-chip-btn { border-color: var(--ink); background: var(--ink); color: var(--off-white); }
.filter-chip-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-dim);
}
.filter-chip-clear svg { width: 13px; height: 13px; }
.filter-chip-clear:hover { border-color: var(--accent); color: var(--accent); }

.filter-menu {
  position: absolute; top: calc(100% + 6px); left: 0; transform: none;
  z-index: 30; width: min(320px, calc(100vw - 40px));
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
  padding: 8px;
}
.filter-menu-search {
  display: block; width: 100%; margin: 0 0 6px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  font: 500 13px/1.3 var(--font-body); color: var(--ink); background: #ffffff;
}
.filter-chip:last-child .filter-menu { left: auto; right: 0; }
.filter-menu.is-flipped { top: auto; bottom: calc(100% + 6px); }
.filter-menu-list { max-height: var(--filter-menu-max, 260px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; }
.filter-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 7px 9px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-dim);
  font: 600 12.5px/1.2 var(--font-body); text-align: left;
}
.filter-option:hover { background: var(--bg-soft, rgba(0, 0, 0, .05)); color: var(--ink); }
.filter-option.is-active { background: var(--ink); color: var(--off-white); }
.filter-option-count { font-variant-numeric: tabular-nums; opacity: .6; font-weight: 700; }
.filter-menu-empty { margin: 6px 0 2px; text-align: center; font: 500 12px/1.3 var(--font-body); color: var(--ink-dim); }

@media (max-width: 760px) {
  .filter-bar { gap: 6px; }
  .filter-bar-spacer { display: none; }
  .filter-chip-btn { padding: 0 10px; gap: 5px; font-size: 11.5px; }
  .filter-chip-prefix { display: none; }
}

.artist-row-photo {
  width: 44px; height: 44px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--line);
  display: flex; align-items: center; justify-content: center;
}
.artist-row-photo img { width: 100%; height: 100%; object-fit: cover; }
.artist-row-initial { font: 700 16px/1 var(--font-display); color: var(--ink-faint); }
.user-table-photo { border-radius: 50%; }

.admin-artist-grid { margin-top: 4px; }
.admin-artist-card .btn-secondary { margin-top: 10px; padding: 7px 10px; font-size: 12px; }

.role-select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: 600 12.5px/1.3 var(--font-body);
  color: var(--ink);
  background: var(--surface);
}
.role-select:disabled { color: var(--ink-faint); background: rgba(var(--hover-tint-rgb), .04); cursor: not-allowed; }

.lock-btn { color: var(--ink-faint); }
.lock-btn:hover { color: var(--accent); background: rgba(var(--hover-tint-rgb), .06); }
.lock-btn:not(.is-locked) { color: #1f8a4c; }
.lock-btn:not(.is-locked):hover { color: #1f8a4c; background: rgba(31, 138, 76, .1); }

.upload-hint-inline {
  margin: 8px 0 0;
  font: 500 11.5px/1.45 var(--font-body);
  color: var(--ink-faint);
}
.char-count {
  display: block;
  margin-top: 5px;
  font: 600 11.5px/1 var(--font-body);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.char-count.is-near { color: var(--accent); }
.char-count.is-full { color: #d81f49; }

.artist-photo-preview {
  width: 96px; height: 96px;
  border-radius: 16px;
  object-fit: cover;
  background: var(--line);
}

.overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.overview-grid.is-wide { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.overview-grid.is-wide .overview-card-title { white-space: normal; line-height: 1.3; }
@media (max-width: 900px) {
  .overview-grid.is-wide { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
.overview-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s;
}
.overview-card:hover { border-color: var(--accent); }
.overview-card-title { font: 700 12.5px/1 var(--font-body); color: var(--ink-dim); }
.overview-card-value { font: 800 24px/1.2 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.overview-card-sub { font-size: 11.5px; color: var(--ink-faint); }

.admin-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.admin-tab {
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font: 700 13.5px/1 var(--font-body);
  padding: 10px 16px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.admin-tab:hover { color: var(--ink-dim); }
.admin-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }

.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
.admin-table th, .admin-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.admin-table th { color: var(--ink-faint); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .03em; }
.admin-table td { color: var(--ink-dim); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table-users td:first-child { width: 1%; }
.visitor-stat { font: 700 13px/1 var(--font-body); color: var(--ink); }
#visitorLogDate { padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 10px; font: 500 13px/1 var(--font-body); color: var(--ink); background: #ffffff; }

@media (min-width: 761px) {
  .player-bar {
    background: #16150f;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--sidebar-text);
    border-top: 0;
  }
  .player-hero-artist, .artist-info-bio, .time-current, .time-total { color: var(--sidebar-text-dim); }
  .transport-btn { color: var(--sidebar-text-dim); }
  .transport-btn:hover { color: var(--sidebar-text); background: rgba(255, 255, 255, .1); }
  .transport-btn:disabled:hover { color: var(--sidebar-text-dim); }
  .transport-btn.is-active { background: var(--sidebar-text); color: var(--bg-deep); }
  .repeat-one-dot { background: var(--bg-deep); }
  .scrub-track { background: transparent; }
  .scrub-wave { color: var(--line-strong); }
  .volume-bar { background: linear-gradient(to right, var(--accent) var(--pct, 100%), var(--line) var(--pct, 100%)); }
  .volume-bar::-moz-range-track { background: var(--line); }
  .scrub-fill { color: var(--accent); background: transparent; }
  .volume-bar::-moz-range-progress { background: var(--accent); }
  .volume-bar::-webkit-slider-thumb, .volume-bar::-moz-range-thumb { background: #fff; }
  .player-bar.is-muted .volume-bar { background: rgba(255, 255, 255, .25); }
  .player-bar.is-muted .volume-bar::-webkit-slider-thumb,
  .player-bar.is-muted .volume-bar::-moz-range-thumb { background: rgba(255, 255, 255, .45); }
}

@media (max-width: 760px) {
  body { overflow-y: auto; }
  .app-window { height: auto; min-height: 100%; }
  .window-body { flex-direction: column; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 45;
    height: 56px;
    padding: 0 12px;
    gap: 8px;
    background: var(--off-white);
  }
  .menu-toggle-btn { display: flex; }
  .brand-mark span { display: none; }
  .btn-signup { padding: 8px 11px; }
  .btn-signin { padding: 9px 13px; }

  #topbarSearchBtn { display: flex; }
  .topbar-search {
    position: absolute;
    left: 8px; right: 8px;
    top: 50%;
    transform: translateY(-50%);
    max-width: none;
    margin: 0;
    z-index: 2;
    display: none;
  }
  .topbar.is-searching .topbar-search { display: block; }
  .topbar.is-searching .brand-mark,
  .topbar.is-searching .menu-toggle-btn,
  .topbar.is-searching #themeToggle,
  .topbar.is-searching .btn-signup,
  .topbar.is-searching .btn-signin,
  .topbar.is-searching .topbar-user { visibility: hidden; }
  .topbar-menu { right: 0; min-width: 200px; }

  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 60;
    width: 82%;
    max-width: 300px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .35);
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-inner { padding: 24px 18px 18px; }
  .nav-group { margin-bottom: 16px; }

  .sidebar-scene {
    top: 0;
    bottom: auto;
    height: 100vh;
    height: 100lvh;
  }

  .content { padding: 20px 16px calc(96px + env(safe-area-inset-bottom, 0px)); overflow-y: visible; }
  .content-header h1 { font-size: 22px; }
  .header-actions { gap: 10px; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }

        
  .artists-view .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .artists-view .media-card-title { font-size: 13.5px; }

  .player-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 15px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 12px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .player-bar:not(.is-expanded) .player-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    margin-left: 2px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: transparent;
    color: var(--ink-dim);
  }
  .player-bar:not(.is-expanded) .player-expand-btn svg { width: 18px; height: 18px; }
  .player-bar:not(.is-expanded) .player-expand-btn:active { background: var(--raised); }
  .player-bar.is-expanded {
    z-index: 61;
    flex-direction: column;
    gap: 10px;
    padding: 10px 18px calc(24px + env(safe-area-inset-bottom, 0px));
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
  }

  .player-collapse-btn {
    width: 32px; height: 20px;
    border: 0;
    background: transparent;
    color: var(--ink-dim);
    align-self: center;
  }
  .player-bar.is-expanded .player-collapse-btn { display: flex; align-items: center; justify-content: center; }
  .player-collapse-btn svg { width: 20px; height: 20px; }

  .player-hero {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 10px;
    flex: 1;
    min-width: 0;
  }
  .player-hero-info { align-items: flex-start; }
  .player-bar.is-expanded .player-hero { flex-direction: column; text-align: center; gap: 4px; width: 100%; }
  .player-bar.is-expanded .player-hero-info { align-items: center; }

  .player-hero-art {
    display: flex;
    width: 40px; height: 40px;
    margin-bottom: 0;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .player-bar.is-expanded .player-hero-art { width: 220px; height: 220px; border-radius: 16px; margin-bottom: 8px; }

  .player-hero-title { font-size: 13.5px; -webkit-line-clamp: 1; }
  .player-bar.is-expanded .player-hero-title { font-size: 16px; -webkit-line-clamp: 2; }

  .artist-info-bio { display: none; }
  .player-bar.is-expanded .artist-info-bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  .player-transport { gap: 4px; flex-shrink: 0; }
  .player-bar:not(.is-expanded) .player-transport .transport-btn:not(.play-btn):not(#prevBtn):not(#nextBtn) { display: none; }
    .player-transport #prevBtn, .player-transport #nextBtn { display: flex; width: 36px; height: 36px; }
    .player-transport #prevBtn svg, .player-transport #nextBtn svg { width: 17px; height: 17px; }
  .player-bar.is-expanded .player-transport { gap: 16px; width: 100%; margin-top: 4px; }
  .player-bar.is-expanded .player-transport .transport-btn { display: flex; }

  .player-scrub, .player-secondary { display: none; }
  .player-bar.is-expanded .player-scrub, .player-bar.is-expanded .player-secondary { display: flex; width: 100%; }
  .player-scrub { padding: 0 4px; }
  .player-bar.is-expanded .player-scrub {
    margin: 8px 0;
    padding: 0;
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .player-bar.is-expanded .player-secondary { margin-top: 2px; }

  .icon-btn { width: 44px; height: 44px; }
  .play-btn { width: 40px; height: 40px; }
  .play-btn svg { width: 18px; height: 18px; }
  .player-bar.is-expanded .transport-btn { width: 50px; height: 50px; }
  .player-bar.is-expanded .play-btn { width: 64px; height: 64px; }
  .player-bar.is-expanded .play-btn svg { width: 34px; height: 34px; }
  .track-fav-btn, .track-more-btn { width: 40px; height: 40px; }

  .admin-toolbar { flex-direction: column; align-items: stretch; }
  .admin-row-actions .btn-secondary { min-height: 40px; }
}

.legal-page-body { overflow: auto; min-height: 100vh; background: var(--off-white); }
.legal-page { max-width: 720px; margin: 0 auto; padding: 60px 24px 80px; }
.legal-page .legal-back { display: inline-block; margin-bottom: 28px; font: 700 13.5px/1 var(--font-body); color: var(--ink-dim); text-decoration: none; }
.legal-page .legal-back:hover { color: var(--ink); text-decoration: underline; }
.legal-page h1 { font: 800 32px/1.2 var(--font-display); color: var(--ink); margin: 0 0 8px; }
.legal-page .legal-updated { font-size: 13px; color: var(--ink-faint); margin-bottom: 32px; }
.legal-page h2 { font: 700 18px/1.3 var(--font-display); color: var(--ink); margin: 28px 0 10px; }
.legal-page p, .legal-page li { font-size: 14.5px; line-height: 1.7; color: var(--ink-dim); margin-bottom: 10px; }
.legal-page ul { padding-left: 20px; margin-bottom: 14px; }
.legal-page a { color: var(--ink); text-decoration: underline; }

.legal-page .credit-list { list-style: none; padding-left: 0; margin: 16px 0 28px; border-top: 1px solid var(--line); }
.legal-page .credit-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.credit-artist { font: 600 14px/1.5 var(--font-body); color: var(--ink); flex: 0 0 auto; min-width: 168px; }
.credit-meta { font-size: 13px; line-height: 1.6; color: var(--ink-faint); flex: 1 1 260px; }
.credit-meta a { color: var(--ink-faint); text-decoration: underline; }
.credit-meta a:hover { color: var(--ink); }

@media (max-width: 560px) {
  .credit-artist { min-width: 0; flex-basis: 100%; }
  .credit-meta { flex-basis: 100%; }
}

.onair { margin-bottom: 26px; display: flex; flex-direction: column; gap: 26px; }
.section-meta {
  font: 500 10.5px/1 var(--font-mono, monospace);
  color: var(--ink-faint);
  letter-spacing: .08em;
  text-transform: uppercase;
  flex: none;
}

.auth-sub { margin: -4px 0 18px; font-size: 13.5px; color: var(--ink-faint); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label {
  display: block;
  margin-bottom: 0;
  font: 600 12px/1.3 var(--font-body);
  color: var(--ink-dim);
  letter-spacing: .02em;
}
.field > label .field-optional { display: inline; }
.field-optional {
  font-weight: 500;
  font-size: 11px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-left: 4px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-note { margin: 2px 0 0; font-size: 11.5px; }
.field-note.is-ok { color: var(--signal, #3BD684); }
.field-note.is-warn { color: var(--ink-faint); }

.pw-rules {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.pw-rules li {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-faint);
  transition: color .15s;
}
.pw-tick {
  width: 12px; height: 12px; flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  position: relative;
  transition: background .15s, border-color .15s;
}
.pw-rules li.is-met { color: var(--signal, #3BD684); }
.pw-rules li.is-met .pw-tick {
  background: var(--signal, #3BD684);
  border-color: var(--signal, #3BD684);
}
.pw-rules li.is-met .pw-tick::after {
  content: "";
  position: absolute;
  left: 3.5px; top: 1px;
  width: 3px; height: 6px;
  border: solid var(--surface);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.pw-rules li.is-unmet .pw-tick { border-color: var(--edge, var(--line-strong)); }

@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

.lang-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.lang-card {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 18px; text-align: left; cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color .16s, background .16s;
}
.lang-card:hover { border-color: var(--accent); background: var(--raised, var(--surface)); }
.lang-card-name { font: 700 15px/1.2 var(--font-display); color: var(--ink); }
.lang-card-eg {
  font-size: 12px; color: var(--ink-faint); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lang-card-stats {
  display: flex; gap: 16px; margin-top: 7px;
  font: 500 11px/1 var(--font-mono, monospace); color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.lang-card-stats b { color: var(--accent); font-weight: 500; }

.script-filter { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 16px; }
.script-btn {
  padding: 6px 13px; cursor: pointer;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-dim);
  font: 500 12px/1 var(--font-body);
  transition: color .15s, border-color .15s, background .15s;
}
.script-btn:hover { color: var(--ink); border-color: var(--accent); }
.script-btn.is-active {
  background: var(--accent); border-color: var(--accent); color: var(--on-lamp, #fff);
}

@media (max-width: 640px) {
  .lang-card { padding: 13px 14px; }
  .lang-card-stats { gap: 12px; }
}

.genre-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.genre-pill {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-dim);
  font: 500 12.5px/1 var(--font-body);
  cursor: pointer;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.genre-pill:hover {
  color: var(--ink);
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), .07);
}
.genre-pill-count {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.genre-pill.is-more { border-style: dashed; color: var(--ink-faint); }
.genre-pill.is-more:hover { color: var(--ink); }

@media (max-width: 640px) {
  .genre-pill { padding: 6px 11px; font-size: 12px; }
  .section-meta { display: none; }
}

.player-mini-progress { display: none; }

.onair-now,
.onair-analyser {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.onair-analyser { padding: 14px 16px 12px; }
.onair-now {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
}
.onair-art {
  position: relative; aspect-ratio: 1; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(145deg, var(--raised, #1A2125), var(--surface));
  display: grid; place-items: center;
}
.onair-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.onair-art.has-photo .onair-disc { display: none; }
.onair-disc {
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: repeating-radial-gradient(circle at 50% 50%,
    transparent 0 3px, rgba(var(--hover-tint-rgb), .10) 3px 4px);
  position: relative;
  animation: onairSpin 9s linear infinite;
  animation-play-state: paused;
}
.is-on-air .onair-disc { animation-play-state: running; }
.onair-disc::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 13%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--accent);
}
@keyframes onairSpin { to { transform: rotate(360deg); } }

.onair-meta { min-width: 0; display: flex; flex-direction: column; }
.onair-tech {
  margin: 0 0 6px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font: 500 10px/1.4 var(--font-mono, monospace);
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.onair-tech .onair-dot { background: var(--ink-faint); }
.is-on-air .onair-tech .onair-dot { background: var(--accent); }
.onair-title {
  margin: 0 0 2px; font: 800 clamp(20px, 2.4vw, 30px)/1.1 var(--font-display);
  letter-spacing: -.02em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.onair-artist {
  margin: 0 0 14px; font-size: 13.5px; color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.onair-wave-wrap { margin-top: auto; }
.onair-wave { display: block; width: 100%; height: 72px; cursor: pointer; touch-action: none; }
.onair-times {
  margin: 5px 0 0; display: flex; justify-content: space-between;
  font: 500 10px/1 var(--font-mono, monospace); color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .onair-now { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .onair-wave { height: 56px; }
  .onair-times span:nth-child(even) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .onair-disc { animation: none; }
}

.onair-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.onair-kicker {
  margin: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font: 500 10px/1.4 var(--font-mono, monospace);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
}
.onair-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint);
  transition: background .3s ease, box-shadow .3s ease;
}
.is-on-air .onair-dot {
  background: var(--accent);
  box-shadow: 0 0 8px 1px var(--accent);
  animation: onairBlink 1.6s steps(1) infinite;
}
@keyframes onairBlink { 0%, 62% { opacity: 1; } 63%, 100% { opacity: .3; } }
.onair-sep { opacity: .5; }
.onair-readout {
  margin: 0; display: flex; align-items: baseline; gap: 5px;
  font: 500 10px/1.4 var(--font-mono, monospace); color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.onair-label { letter-spacing: .16em; text-transform: uppercase; }
.onair-val { color: var(--accent); min-width: 42px; text-align: right; }
.onair-unit { margin-right: 10px; }
.onair-spectrum { display: block; width: 100%; height: 92px; }
.onair-scale {
  margin: 6px 0 0; display: flex; justify-content: space-between;
  font: 500 9.5px/1 var(--font-mono, monospace); color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.vu-stack { display: flex; flex-direction: column; gap: 3px; flex: none; margin-left: 6px; }
.vu-line { display: flex; align-items: center; gap: 5px; }
.vu-ch {
  font: 500 8.5px/1 var(--font-mono, monospace); color: var(--ink-faint); width: 6px;
}
.vu-canvas { display: block; width: 104px; height: 7px; }

@media (max-width: 1180px) { .vu-canvas { width: 68px; } }
@media (max-width: 960px) { .vu-stack { display: none; } }
@media (max-width: 640px) {
  .onair { padding: 12px 12px 10px; }
  .onair-spectrum { height: 72px; }
  .onair-scale span:nth-child(even) { display: none; }
  .onair-head { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .is-on-air .onair-dot { animation: none; }
}

.enrich-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.enrich-note {
  margin: 0 0 18px; font-size: 12.5px; line-height: 1.6;
  color: var(--ink-faint); max-width: 76ch;
}
.enrich-row {
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface); margin-bottom: 10px;
}
.enrich-row.is-done { opacity: .6; }
.enrich-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px;
}
.enrich-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 200px; }
.enrich-name { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.enrich-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); }
.enrich-missing { display: flex; gap: 6px; flex-wrap: wrap; }
.enrich-chip {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 100px; padding: 2px 8px;
}
.enrich-lookup { flex: none; width: auto; padding: 8px 16px; }
.enrich-result { border-top: 1px solid var(--line); padding: 14px; }
.enrich-candidate { display: flex; gap: 16px; flex-wrap: wrap; }
.enrich-photo { flex: none; width: 120px; }
.enrich-photo img {
  width: 120px; height: 120px; object-fit: cover;
  border-radius: 3px; border: 1px solid var(--line); display: block;
}
.enrich-text { flex: 1 1 320px; min-width: 0; }
.enrich-bio { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--ink-dim); }
.enrich-licence {
  margin: 6px 0 0; font-family: var(--font-mono); font-size: 10px;
  line-height: 1.5; color: var(--ink-faint);
}
.enrich-licence a { color: var(--ink-dim); }
.enrich-miss { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-faint); }
.enrich-warn { margin: 10px 0 0; font-size: 12.5px; color: var(--accent); }
.enrich-done { margin: 0; font-size: 13px; color: var(--signal); }
.enrich-actions { display: flex; gap: 8px; margin-top: 14px; }
.enrich-actions .btn-primary,
.enrich-actions .btn-secondary,
#enrichRescanBtn { width: auto; padding: 8px 16px; }

.lyrics-source {
  margin: 20px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}
.lyrics-source-label {
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 9.5px;
  color: var(--ink-faint);
  margin-right: 2px;
}
.lyrics-source a { color: var(--ink-dim); text-decoration: underline; }
.lyrics-source a:hover { color: var(--accent); }
.lyrics-source-note {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-faint);
  max-width: 62ch;
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--off-white), 0 0 0 4px var(--accent);
}

.support-panel { width: 100%; }
.support-panel form { margin: 0; }
.support-verify-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.support-verify-actions .btn-link { width: auto; margin-top: 0; padding: 0; }

.user-profile-view { display: flex; flex-direction: column; gap: 20px; }
#userProfileBody { display: flex; flex-direction: column; gap: 20px; }

.profile-page-head { display: flex; gap: 20px; align-items: flex-start; }
.profile-page-avatar {
  width: 104px; height: 104px; flex-shrink: 0;
  border-radius: 16px; overflow: hidden;
  background-image: linear-gradient(135deg, var(--accent), var(--accent-dark));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .8);
}
.profile-page-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-page-avatar svg { width: 38%; height: 38%; }
.profile-page-initial { font: 800 34px/1 var(--font-display); color: #fff; }
.profile-page-meta { min-width: 0; flex: 1; }
.profile-page-meta h2 { margin: 0 0 8px; font: 800 26px/1.15 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.profile-page-sub { margin: 8px 0 0; font-size: 13px; color: var(--ink-faint); }
.profile-page-bio { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-dim); max-width: 62ch; }
.profile-page-stats { display: flex; gap: 20px; margin-top: 14px; }
.profile-page-stats span { font-size: 13px; color: var(--ink-faint); }
.profile-page-stats strong { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.profile-page-actions { margin: 14px 0 0; }
.profile-page-actions .btn-secondary { width: auto; margin-top: 0; padding: 8px 16px; font-size: 12.5px; }
.profile-page-section { margin: 4px 0 0; font: 800 19px/1.2 var(--font-display); color: var(--ink); }

.rank-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: 100px;
  font: 700 12px/1 var(--font-body);
  border: 1px solid;
  white-space: nowrap;
}
.rank-badge svg { width: 15px; height: 15px; flex-shrink: 0; }
.rank-badge.tier-1 { color: #6c6f63; background: #f0f1ec; border-color: #dcded4; }
.rank-badge.tier-2 { color: #5c6b5a; background: #eef3ec; border-color: #d5e1d1; }
.rank-badge.tier-3 { color: #7a5c3a; background: #f7efe4; border-color: #e6d5bc; }
.rank-badge.tier-4 { color: #8a5a2b; background: #fbeedd; border-color: #ecd3ae; }
.rank-badge.tier-5 { color: #6b6b74; background: #f1f1f5; border-color: #d9d9e2; }
.rank-badge.tier-6 { color: #4a5b86; background: #eaeff8; border-color: #ccd8ec; }
.rank-badge.tier-7 { color: #8a6a12; background: #fbf1d4; border-color: #eedda9; }
.rank-badge.tier-8 {
  color: #1c6f7d;
  background: linear-gradient(135deg, #e6fbff 0%, #f4f0ff 50%, #e9fff7 100%);
  border-color: #b9e6ef;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7) inset, 0 2px 10px rgba(28, 111, 125, .14);
}

.profile-visibility {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 42px; height: 24px; flex-shrink: 0;
  border-radius: 100px;
  background: var(--line-strong);
  transition: background .18s ease;
  display: flex; align-items: center; padding: 3px;
}
.switch-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .18s ease;
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled + .switch-track { opacity: .55; }
.switch-label { font: 700 13px/1 var(--font-body); color: var(--ink); }
.profile-visibility-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-faint); }

.profile-details-form { gap: 14px; }
.profile-details-avatar { display: flex; flex-direction: column; gap: 6px; }
.profile-details-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 14px;
}
.profile-details-bio { grid-column: 1 / -1; }
.profile-details-form textarea { resize: vertical; }
.profile-details-form input,
.profile-details-form select,
.profile-details-form textarea { margin-top: 0; }

.account-security { display: flex; flex-direction: column; gap: 14px; }
.account-security-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: start;
}
.account-form {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.account-form h4 { margin: 0; font: 800 14px/1.2 var(--font-display); color: var(--ink); }
.account-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-faint); }
.account-form input,
.account-form select,
.account-form textarea { margin-top: 0; }
.account-form .btn-secondary { width: auto; margin-top: 2px; align-self: flex-start; padding: 8px 14px; font-size: 12.5px; }
.account-form .modal-sub { margin: 0; font-size: 12.5px; color: var(--ink-faint); }

.profile-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.profile-title-row h2 { margin: 0; }
.profile-title-row .profile-visibility { margin: 0; padding: 0; border: 0; background: none; }

.acct-card-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 22px;
}
.acct-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.acct-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acct-card-head h3 { margin: 0; font: 800 15px/1.2 var(--font-display); color: var(--ink); }
.acct-card-edit {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: transparent;
  color: var(--ink);
  font: 700 11.5px/1 var(--font-body);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.acct-card-edit:hover { border-color: var(--accent); background: rgba(var(--hover-tint-rgb), .06); }

.profile-readout { display: flex; flex-direction: column; margin: 0; }
.readout-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.readout-row:first-child { border-top: 0; padding-top: 0; }
.readout-row dt { flex: 0 0 92px; font: 600 12px/1.4 var(--font-body); color: var(--ink-faint); }
.readout-row dd { flex: 1; min-width: 0; margin: 0; font: 500 13.5px/1.5 var(--font-body); color: var(--ink); overflow-wrap: anywhere; }
.readout-empty { color: var(--ink-faint); font-style: italic; }
.readout-mask { letter-spacing: .2em; color: var(--ink-dim); }

@media (max-width: 520px) {
  .readout-row { flex-wrap: wrap; gap: 4px 12px; }
  .readout-row dt { flex: 0 0 100%; }
  .readout-row dd { flex: 1 1 auto; }
}

@media (max-width: 640px) {
  .profile-page-head { gap: 14px; }
  .profile-page-avatar { width: 76px; height: 76px; border-radius: 13px; }
  .profile-page-meta h2 { font-size: 21px; }
  .profile-page-initial { font-size: 26px; }
}

.activity-what { color: var(--ink-faint); }

.search-result-thumb.is-genre {
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--hover-tint-rgb), .08);
  color: var(--ink-faint);
}
.search-result-thumb.is-genre svg { width: 55%; height: 55%; }

/* ---------- Admin restructure ---------- */
.section-lead { margin: 0 0 18px; }
.section-lead h2 { margin: 0 0 4px; font: 700 17px/1.25 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.section-lead p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); }
.section-lead-sub { margin-top: 34px; }

.attention-bar {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px 18px; margin: 0 0 28px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 4px; background: var(--surface);
  text-align: left; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.attention-bar:hover { border-color: var(--line-strong); border-left-color: var(--accent); }
.attention-mark { flex-shrink: 0; display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 3px; background: var(--raised); color: var(--accent); }
.attention-mark svg { width: 18px; height: 18px; }
.attention-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.attention-title { font: 600 14.5px/1.3 var(--font-body); color: var(--ink); }
.attention-sub { font-size: 12.5px; color: var(--ink-faint); }
.attention-count { font: 700 24px/1 var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.attention-go { flex-shrink: 0; display: flex; color: var(--ink-faint); }
.attention-go svg { width: 18px; height: 18px; }

.metric-block { margin: 0 0 24px; }
.metric-block-label {
  margin: 0 0 10px; font: 700 10.5px/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.metric-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
.metric {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; background: var(--surface); text-align: left;
}
.metric.is-link { cursor: pointer; transition: background .15s ease; }
.metric.is-link:hover { background: var(--raised); }
.metric-value { font: 700 20px/1.1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.metric-label { font-size: 12px; color: var(--ink-dim); }

.nav-badge {
  margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 10px;
  background: var(--accent); color: var(--on-lamp);
  font: 700 11px/1.6 var(--font-mono); text-align: center; font-variant-numeric: tabular-nums;
}

.cmdk-trigger {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 9px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface);
  color: var(--ink-faint); font: 500 13px/1 var(--font-body); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.cmdk-trigger:hover { border-color: var(--line-strong); color: var(--ink-dim); }
.cmdk-trigger svg { width: 15px; height: 15px; }
.cmdk-trigger kbd {
  padding: 2px 5px; border: 1px solid var(--line); border-radius: 3px;
  font: 600 10.5px/1.4 var(--font-mono); color: var(--ink-faint); background: var(--raised);
}

.cmdk-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.5); display: flex; justify-content: center; padding: 12vh 16px 16px; }
.cmdk-panel {
  width: 100%; max-width: 540px; max-height: 60vh; display: flex; flex-direction: column;
  border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface);
  box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden;
}
.cmdk-input {
  width: 100%; padding: 15px 18px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink); font: 500 15px/1.3 var(--font-body); outline: none;
}
.cmdk-input::placeholder { color: var(--ink-faint); }
.cmdk-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.cmdk-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  border: 0; border-radius: 4px; background: transparent; color: var(--ink);
  font: 500 14px/1.3 var(--font-body); text-align: left; cursor: pointer;
}
.cmdk-item[aria-selected="true"] { background: var(--raised); }
.cmdk-item-group { margin-left: auto; font: 600 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.cmdk-empty { padding: 22px 18px; text-align: center; font-size: 13.5px; color: var(--ink-faint); }

@media (max-width: 760px) {
  .cmdk-trigger span, .cmdk-trigger kbd { display: none; }
  .cmdk-trigger { padding: 8px; }
  .cmdk-overlay { padding: 8vh 12px 12px; }
  .attention-count { font-size: 20px; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Catalogue toolbar ---------- */
.catalog-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 0 0 14px; margin: 0 0 14px;
  border-bottom: 1px solid var(--line);
}
.catalog-count {
  margin: 0; font: 600 12px/1 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.catalog-controls { display: flex; align-items: center; gap: 10px; }
.catalog-select { display: flex; align-items: center; gap: 8px; }
.catalog-select > span {
  font: 600 10.5px/1 var(--font-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.catalog-select select {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface); color: var(--ink);
  font: 500 13px/1.2 var(--font-body); cursor: pointer;
}
.catalog-density { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.density-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; padding: 0; border: 0; border-radius: 3px;
  background: transparent; color: var(--ink-faint); cursor: pointer;
}
.density-btn svg { width: 15px; height: 15px; }
.density-btn.is-active { background: var(--raised); color: var(--ink); }
.catalog-filters { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px; }
.media-grid.is-compact { grid-template-columns: 1fr; gap: 0; }
.media-grid.is-compact [data-artist-id] { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.media-grid.is-compact .media-card-art { width: 44px; height: 44px; flex-shrink: 0; border-radius: 3px; }
.media-grid.is-compact .media-card-title { font-size: 14px; }
.catalog-toolbar-songs { border-bottom: 0; padding-bottom: 8px; margin-bottom: 6px; }

@media (max-width: 760px) {
  .catalog-toolbar { gap: 10px; }
  .catalog-controls { width: 100%; justify-content: space-between; }
  .catalog-select select { flex: 1 1 auto; min-width: 0; }
}

.admin-page .sidebar-scene { --scene-veil-a: 520px; --scene-veil-b: 640px; --scene-veil-c: 760px; }
.metric { border: 0; }

.player-bar.is-expanded .vu-stack { display: flex; }