:root {
  --bg-deep: #070A0B;
  --off-white: #0A0D0E;
  --off-white-rgb: 10, 13, 14;
  --content-bg-rgb: 10, 13, 14;
  --surface: #12171A;
  --raised: #1A2125;
  --sunk: #070A0B;
  --hover-tint-rgb: 230, 237, 239;

  --accent: #FFB020;
  --accent-dark: #E09A10;
  --accent-rgb: 255, 176, 32;
  --on-lamp: #0A0D0E;

  --ink: #E6EDEF;
  --ink-dim: #94A3A8;
  --ink-faint: #84939A;

  --line: #232C31;
  --line-strong: #64737A;
  --edge: #2E393F;

  --sidebar-text: #E6EDEF;
  --sidebar-text-dim: rgba(230, 237, 239, .74);
  --sidebar-ink: #E6EDEF;
  --sidebar-ink-dim: #94A3A8;
  --sidebar-tint-rgb: 230, 237, 239;

  --ambient-op-1: 0.05;
  --ambient-op-2: 0.035;
  --ambient-op-3: 0.03;

  --signal: #3BD684;
  --danger: #FF5252;

  --font-display: "Archivo", "Helvetica Neue", sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  --radius-2xl: 4px;
}

:root[data-mode="daylight"] {
  --bg-deep: #DCE0DC;
  --off-white: #E9EBE8;
  --off-white-rgb: 233, 235, 232;
  --content-bg-rgb: 233, 235, 232;
  --surface: #FFFFFF;
  --raised: #F3F5F2;
  --sunk: #DCE0DC;
  --hover-tint-rgb: 18, 23, 26;

  --accent: #8F5400;
  --accent-dark: #7A4800;
  --accent-rgb: 143, 84, 0;
  --on-lamp: #FFFFFF;

  --ink: #12171A;
  --ink-dim: #4C585C;
  --ink-faint: #586468;

  --line: #D2D8D3;
  --line-strong: #717C73;
  --edge: #B9C1BA;

  --sidebar-text: #12171A;
  --sidebar-text-dim: rgba(18, 23, 26, .72);
  --sidebar-ink: #12171A;
  --sidebar-ink-dim: #4C585C;
  --sidebar-tint-rgb: 18, 23, 26;

  --signal: #158247;
  --danger: #D32020;
}

body { background: var(--off-white); }

.app-window { background: var(--off-white); }

.content {
  background: var(--off-white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.brand-mark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.brand-mark img { filter: none; }

.sidebar { background: var(--surface); border-right: 1px solid var(--line); }
.sidebar-scene { display: none; }

.nav-item {
  border-radius: 0;
  font-weight: 500;
  font-size: 13px;
  padding-left: 15px;
}
.nav-item::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 20px;
  margin-top: -10px;
  border-radius: 0 2px 2px 0;
  background: transparent;
  transition: background .2s ease;
}
.nav-item:hover::after { background: var(--edge); }
.nav-item.is-active::after {
  background: var(--accent);
  box-shadow: 0 0 10px -1px var(--accent);
}
.nav-item.is-active { color: var(--ink); background: var(--raised); }
.nav-item:hover { background: var(--raised); }

.nav-section-label,
.sidebar-section-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.tile-art,
.media-card-art,
.feature-art,
.compact-art,
.player-hero-art,
.track-play-btn,
.artist-detail-photo {
  border-radius: 3px;
}

.tile-art,
.media-card-art,
.compact-art {
  border: 1px solid var(--line);
  background-color: var(--raised);
}
.tile:hover .tile-art,
.media-card:hover .media-card-art {
  border-color: var(--line-strong);
}

.track-row {
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
.track-row::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform .2s ease;
}
.track-row:hover::after,
.track-row.is-playing::after { transform: scaleY(1); }
.track-row:hover { background: var(--raised); }
.track-row.is-playing { background: var(--raised); }
.track-row.is-playing .track-title-main { color: var(--accent); }

.track-play-btn { background-color: var(--raised); border: 1px solid var(--line); }

.row-duration,
.track-count,
.track-counts,
.tile-sub,
.media-card-sub,
.rank-num,
.pager-status,
.row-index {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.row-wave span { border-radius: 0; background: var(--edge); }
.track-row:hover .row-wave span { background: var(--line-strong); }
.track-row.is-playing .row-wave span { background: var(--accent); }

.player-bar {
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.player-hero-art {
  filter: none;
  background:
    radial-gradient(120% 90% at 30% 20%, #2A3439 0%, #131A1D 55%, #0B0F11 100%);
}
.player-bar.is-playing .player-hero-art { filter: none; }

.transport-btn { border-radius: 3px; color: var(--ink-dim); }
.transport-btn:hover { color: var(--ink); background: var(--raised); }
.play-btn {
  background: var(--accent);
  color: var(--on-lamp);
  border-radius: 3px;
  box-shadow: 0 0 18px -4px var(--accent);
}
.play-btn:hover { background: var(--accent-dark); color: var(--on-lamp); }
.play-btn svg { color: var(--on-lamp); }

.player-time,
.scrub-time,
.player-duration {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.btn-primary, .btn-signin {
  color: var(--on-lamp);
  border-radius: 3px;
}
.btn-primary:hover, .btn-signin:hover { background: var(--accent-dark); color: var(--on-lamp); }
.btn-secondary, .btn-signup {
  border-radius: 3px;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
  background: transparent;
}
.btn-secondary:hover, .btn-signup:hover {
  color: var(--ink);
  border-color: var(--edge);
  background: var(--raised);
}

.icon-btn { border-radius: 3px; color: var(--ink-dim); }
.icon-btn:hover { color: var(--ink); background: var(--raised); }

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], input[type="tel"],
input[type="url"], input[type="search"], select, textarea,
.topbar-search-input, .home-search-input, .admin-search {
  background: var(--sunk);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--font-body);
}
input:focus, select:focus, textarea:focus,
.topbar-search-input:focus, .home-search-input:focus, .admin-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .16);
}

.filter-chip-btn,
.genre-chip,
.az-chip,
.pager-btn {
  border-radius: 100px;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
  background: transparent;
}
.filter-chip-btn:hover,
.genre-chip:hover,
.az-chip:hover,
.pager-btn:hover {
  color: var(--ink);
  border-color: var(--edge);
  background: var(--raised);
}
.az-chip.is-active,
.pager-btn.is-active,
.filter-chip.is-filtered .filter-chip-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-lamp);
}

.section-title-row h2,
.section-head h2,
.content-header h1,
.content-header h2,
.heading-block h1 {
  font-family: var(--font-display);
  letter-spacing: .11em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.section-title-row,
.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  border-top: 0;
  padding-top: 0;
}
.section-title-row h2,
.section-head h2 { order: 1; flex: none; }
.section-title-row::after,
.section-head::after {
  content: "";
  order: 2;
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
  align-self: center;
}
.section-chev { order: 4; flex: none; color: var(--ink-faint); }
.section-meta { order: 3; }
.section-title-row:hover .section-chev { color: var(--accent); }

.modal, .modal-panel, .card, .panel,
.acct-card, .profile-details, .admin-panel, .admin-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.tile-badge.is-favorite,
.media-card-badge.is-favorite { color: var(--danger); }

.avatar, .profile-avatar-img, .topbar-avatar { border-radius: 3px; }

.switch-track { background: var(--edge); }
.switch input:checked + .switch-track { background: var(--accent); }

.legal-page-body { background: var(--off-white); }
.legal-page h1, .legal-page h2 { font-family: var(--font-display); }
.credit-artist { color: var(--ink); }

.tile-placeholder,
.media-card-placeholder,
.feature-placeholder,
.compact-placeholder {
  background: linear-gradient(145deg, var(--raised), var(--surface));
  color: var(--ink-faint);
}
.tile-placeholder svg,
.media-card-placeholder svg { opacity: .55; }

:root[data-mode="daylight"] .transport-btn:hover {
  color: var(--ink);
  background: rgba(18, 23, 26, .07);
}

@media (prefers-reduced-motion: reduce) {
  .ambient span { animation: none; }
}