/* =========================================================
   Music Explorer — project-scoped styles
   ========================================================= */

:root {
  --mu-bg:        #0a0f1c;
  --mu-surface:   #1a1f2e;
  --mu-raised:    #242938;
  --mu-border:    rgba(255,255,255,0.08);
  --mu-accent:    #6c5ce7;
  --mu-cyan:      #00d4ff;
  --mu-green:     #00b894;
  --mu-text:      #e8eaf0;
  --mu-muted:     #a0a9c0;
  --mu-dim:       #5a6080;
  --mu-player-h:  64px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--mu-bg);
  color: var(--mu-text);
  min-height: 100vh;
  padding-bottom: calc(var(--mu-player-h) + 8px);
}

a { color: var(--mu-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Header ──────────────────────────────────────────── */

.music-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem 1.5rem;
  background: var(--mu-surface);
  border-bottom: 1px solid var(--mu-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-link {
  color: var(--mu-muted);
  font-size: 0.85rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.back-link:hover { color: var(--mu-text); text-decoration: none; }

.music-logo {
  color: var(--mu-text);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--mu-accent), var(--mu-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.music-logo:hover { text-decoration: none; }

.header-search {
  display: flex;
  gap: 0.5rem;
  flex: 1;
  max-width: 520px;
  margin-left: auto;
}
.header-search input {
  flex: 1;
  padding: 0.45rem 0.85rem;
  background: var(--mu-bg);
  border: 1px solid var(--mu-border);
  border-radius: 6px;
  color: var(--mu-text);
  font-size: 0.9rem;
  outline: none;
}
.header-search input:focus { border-color: var(--mu-accent); }
.header-search button {
  padding: 0.45rem 1rem;
  background: var(--mu-accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.header-search button:hover { background: #7d6ff0; }

.music-main { max-width: 1320px; margin: 0 auto; padding: 1.5rem 1.5rem; }

/* ── Breadcrumb ──────────────────────────────────────── */

.breadcrumb {
  font-size: 0.82rem;
  color: var(--mu-muted);
  margin-bottom: 1.25rem;
}
.breadcrumb a { color: var(--mu-muted); }
.breadcrumb a:hover { color: var(--mu-text); }
.breadcrumb span { margin: 0 0.4rem; }

/* ── Shared buttons ──────────────────────────────────── */

.btn-primary {
  padding: 0.55rem 1.25rem;
  background: var(--mu-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}
.btn-primary:hover { background: #7d6ff0; }

.btn-play {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--mu-accent);
  background: transparent;
  color: var(--mu-accent);
  cursor: pointer;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.btn-play:hover { background: var(--mu-accent); color: #fff; }
.btn-play.playing { background: var(--mu-accent); color: #fff; }

/* ── INDEX PAGE ──────────────────────────────────────── */

.music-hero {
  text-align: center;
  padding: 3.5rem 1rem 2.5rem;
}
.music-hero h1 {
  font-size: 2.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--mu-accent), var(--mu-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.6rem;
}
.music-hero p {
  color: var(--mu-muted);
  font-size: 1.05rem;
  margin-bottom: 1.75rem;
}
.hero-search {
  display: flex;
  gap: 0.6rem;
  max-width: 480px;
  margin: 0 auto;
}
.hero-search input {
  flex: 1;
  padding: 0.7rem 1rem;
  background: var(--mu-surface);
  border: 1px solid var(--mu-border);
  border-radius: 8px;
  color: var(--mu-text);
  font-size: 1rem;
  outline: none;
}
.hero-search input:focus { border-color: var(--mu-accent); }

.section-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--mu-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.genre-grid-section { margin-bottom: 2.5rem; }

.genre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.85rem;
}

.genre-tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.2rem 1rem;
  background: var(--mu-surface);
  border: 1px solid var(--mu-border);
  border-left: 3px solid var(--tile-color, var(--mu-accent));
  border-radius: 10px;
  color: var(--mu-text);
  text-decoration: none;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.genre-tile:hover {
  background: var(--mu-raised);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  text-decoration: none;
}

.genre-name { font-weight: 700; font-size: 0.95rem; }
.genre-count { font-size: 0.78rem; color: var(--mu-muted); }

.genre-tile--0  { --tile-color: #6c5ce7; }
.genre-tile--1  { --tile-color: #00d4ff; }
.genre-tile--2  { --tile-color: #00b894; }
.genre-tile--3  { --tile-color: #fd79a8; }
.genre-tile--4  { --tile-color: #e17055; }
.genre-tile--5  { --tile-color: #fdcb6e; }
.genre-tile--6  { --tile-color: #74b9ff; }
.genre-tile--7  { --tile-color: #55efc4; }

.quick-filters-section { margin-bottom: 2rem; }
.quick-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.quick-chip {
  padding: 0.4rem 0.9rem;
  background: var(--mu-surface);
  border: 1px solid var(--mu-border);
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--mu-muted);
  transition: border-color 0.15s, color 0.15s;
}
.quick-chip:hover {
  border-color: var(--mu-accent);
  color: var(--mu-text);
  text-decoration: none;
}

/* ── BROWSE / SEARCH LAYOUT ──────────────────────────── */

.browse-layout {
  display: grid;
  grid-template-columns: 260px 1fr 220px;
  gap: 1.5rem;
  align-items: start;
}

/* ── Filter sidebar ──────────────────────────────────── */

.filter-sidebar {
  position: sticky;
  top: 60px;
  background: var(--mu-surface);
  border: 1px solid var(--mu-border);
  border-radius: 12px;
  padding: 1.1rem;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.filter-sidebar h3 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mu-muted);
  margin-bottom: 0.75rem;
}

.filter-section {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--mu-border);
}
.filter-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.filter-section h4 {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mu-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}

.subgenre-list { list-style: none; max-height: 220px; overflow-y: auto; }
.subgenre-list li { margin-bottom: 0.35rem; }
.subgenre-list label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--mu-text);
}
.subgenre-list label:hover { color: var(--mu-cyan); }
.subgenre-list input[type="checkbox"] { accent-color: var(--mu-accent); }
.subgenre-count { color: var(--mu-dim); font-size: 0.78rem; margin-left: auto; }

.decade-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.decade-row label { font-size: 0.8rem; color: var(--mu-muted); width: 28px; flex-shrink: 0; }
.decade-row input[type="number"] {
  flex: 1;
  padding: 0.35rem 0.5rem;
  background: var(--mu-bg);
  border: 1px solid var(--mu-border);
  border-radius: 5px;
  color: var(--mu-text);
  font-size: 0.85rem;
  outline: none;
  width: 80px;
}
.decade-row input:focus { border-color: var(--mu-accent); }

.toggle-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
  margin-bottom: 0.4rem;
}
.toggle-row input[type="checkbox"] { accent-color: var(--mu-accent); }

.sort-select {
  width: 100%;
  padding: 0.4rem 0.6rem;
  background: var(--mu-bg);
  border: 1px solid var(--mu-border);
  border-radius: 6px;
  color: var(--mu-text);
  font-size: 0.85rem;
  outline: none;
}
.sort-select:focus { border-color: var(--mu-accent); }

/* collapsible mood panel */
.collapsible-toggle {
  background: none;
  border: none;
  color: var(--mu-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  margin-bottom: 0.6rem;
}
.collapsible-toggle .arrow { transition: transform 0.2s; }
.collapsible-toggle.open .arrow { transform: rotate(90deg); }
.collapsible-body { display: none; }
.collapsible-body.open { display: block; }

.mood-note {
  font-size: 0.75rem;
  color: var(--mu-dim);
  margin-bottom: 0.65rem;
  line-height: 1.4;
}

.range-row {
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}
.range-row label { font-size: 0.78rem; color: var(--mu-muted); }
.range-row input[type="range"] { accent-color: var(--mu-accent); }
.range-val { font-size: 0.78rem; color: var(--mu-cyan); text-align: right; }

.filter-actions { margin-top: 0.9rem; display: flex; gap: 0.5rem; }
.btn-apply-filters {
  flex: 1;
  padding: 0.5rem;
  background: var(--mu-accent);
  color: #fff;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}
.btn-apply-filters:hover { background: #7d6ff0; }
.btn-clear-filters {
  padding: 0.5rem 0.75rem;
  background: transparent;
  color: var(--mu-muted);
  border: 1px solid var(--mu-border);
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.82rem;
}
.btn-clear-filters:hover { border-color: var(--mu-dim); color: var(--mu-text); }

/* ── Active filter chips ─────────────────────────────── */

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  min-height: 28px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: rgba(108,92,231,0.15);
  border: 1px solid rgba(108,92,231,0.4);
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--mu-text);
}
.filter-chip button {
  background: none;
  border: none;
  color: var(--mu-muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
}
.filter-chip button:hover { color: var(--mu-text); }

/* ── Results area ────────────────────────────────────── */

.results-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}
.results-header h2 { font-size: 1.2rem; font-weight: 700; }
.results-count { font-size: 0.85rem; color: var(--mu-muted); }
.mood-active-note { font-size: 0.78rem; color: var(--mu-cyan); }

/* ── Track table ─────────────────────────────────────── */

.track-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.track-table thead th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  color: var(--mu-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--mu-border);
}
.track-table tbody tr {
  border-bottom: 1px solid var(--mu-border);
  transition: background 0.1s;
}
.track-table tbody tr:hover { background: var(--mu-raised); }
.track-table td { padding: 0.6rem 0.75rem; vertical-align: middle; }

.col-num  { width: 36px; color: var(--mu-dim); font-size: 0.8rem; }
.col-play { width: 48px; }
.col-dur  { width: 64px; color: var(--mu-muted); font-size: 0.82rem; }
.col-year { width: 64px; color: var(--mu-muted); font-size: 0.82rem; }
.col-genre { width: 100px; }
.col-listens { width: 76px; color: var(--mu-muted); font-size: 0.82rem; text-align: right; }
.col-album { max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mu-muted); font-size: 0.82rem; }

.track-title-link { color: var(--mu-text); font-weight: 500; }
.track-title-link:hover { color: var(--mu-cyan); text-decoration: none; }
.track-artist-link { color: var(--mu-muted); font-size: 0.82rem; }
.track-artist-link:hover { color: var(--mu-text); }

.genre-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: rgba(108,92,231,0.15);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--mu-muted);
}
.genre-badge-sub {
  background: transparent;
  border: 1px solid rgba(108,92,231,0.3);
  color: var(--mu-dim);
  margin-left: 0.2rem;
}
.genre-more {
  font-size: 0.72rem;
  color: var(--mu-dim);
  margin-left: 0.2rem;
}
.cc-badge {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  background: rgba(0,184,148,0.15);
  border-radius: 3px;
  font-size: 0.7rem;
  color: var(--mu-green);
  margin-left: 0.3rem;
  vertical-align: middle;
}

/* ── Pagination ──────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.btn-page {
  padding: 0.45rem 1rem;
  background: var(--mu-surface);
  border: 1px solid var(--mu-border);
  border-radius: 7px;
  color: var(--mu-text);
  cursor: pointer;
  font-size: 0.85rem;
}
.btn-page:hover { border-color: var(--mu-accent); }
.btn-page:disabled { opacity: 0.35; cursor: default; }
.page-info { font-size: 0.82rem; color: var(--mu-muted); }

.empty-results {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--mu-muted);
}
.empty-results p { font-size: 1rem; }

/* ── Right rail ──────────────────────────────────────── */

.right-rail {
  position: sticky;
  top: 60px;
  background: var(--mu-surface);
  border: 1px solid var(--mu-border);
  border-radius: 12px;
  padding: 1rem;
}
.right-rail h3 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mu-muted);
  margin-bottom: 0.75rem;
}
.top-track-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mu-border);
}
.top-track-item:last-child { border-bottom: none; }
.top-track-rank { font-size: 0.8rem; color: var(--mu-dim); width: 16px; flex-shrink: 0; }
.top-track-info { flex: 1; min-width: 0; }
.top-track-title {
  font-size: 0.82rem;
  color: var(--mu-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.top-track-title:hover { color: var(--mu-cyan); text-decoration: none; }
.top-track-artist { font-size: 0.75rem; color: var(--mu-muted); }
.top-track-play { flex-shrink: 0; }

/* ── TRACK DETAIL ────────────────────────────────────── */

.track-detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  align-items: start;
}

.track-hero {
  background: var(--mu-surface);
  border: 1px solid var(--mu-border);
  border-radius: 14px;
  padding: 2rem;
  margin-bottom: 1.5rem;
}
.track-hero h1 { font-size: 1.8rem; font-weight: 800; margin-bottom: 0.4rem; }
.track-hero-artist { font-size: 1rem; color: var(--mu-muted); margin-bottom: 0.9rem; }
.track-hero-artist a { color: var(--mu-cyan); }

.track-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.1rem; }
.track-badge {
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  background: rgba(108,92,231,0.2);
  color: var(--mu-text);
}
.track-badge.cc { background: rgba(0,184,148,0.15); color: var(--mu-green); }
.track-badge.decade { background: rgba(0,212,255,0.1); color: var(--mu-cyan); }
.track-badge.dur { background: var(--mu-raised); color: var(--mu-muted); }

.track-play-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.btn-play-clip, .btn-play-full {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.15s;
}
.btn-play-clip {
  background: var(--mu-accent);
  color: #fff;
}
.btn-play-clip:hover { background: #7d6ff0; }
.btn-play-full {
  background: var(--mu-raised);
  color: var(--mu-text);
  border: 1px solid var(--mu-border);
}
.btn-play-full:hover { border-color: var(--mu-cyan); color: var(--mu-cyan); }
.limit-msg { font-size: 0.8rem; color: #fd79a8; }

.audio-features {
  background: var(--mu-surface);
  border: 1px solid var(--mu-border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.audio-features h3 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mu-muted);
  margin-bottom: 1rem;
}
.feature-bar-row {
  display: grid;
  grid-template-columns: 80px 1fr 42px;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.feature-label { font-size: 0.8rem; color: var(--mu-muted); }
.feature-bar-track {
  background: var(--mu-raised);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
}
.feature-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--mu-accent), var(--mu-cyan));
}
.feature-val { font-size: 0.78rem; color: var(--mu-cyan); text-align: right; }
.feature-tempo { font-size: 0.85rem; color: var(--mu-muted); }
.feature-tempo strong { color: var(--mu-text); }

.track-meta-table {
  font-size: 0.85rem;
  width: 100%;
  border-collapse: collapse;
}
.track-meta-table td { padding: 0.35rem 0; color: var(--mu-muted); }
.track-meta-table td:first-child { font-weight: 500; color: var(--mu-text); width: 40%; }
.album-tracklist td:first-child { width: 42px; }
.album-tracklist td:nth-child(2) { width: auto; }
.album-tracklist td { vertical-align: middle; padding: 0.3rem 0.4rem 0.3rem 0; }
.album-tracklist .album-current-row td { background: rgba(125, 111, 240, 0.10); }

/* ── Similar tracks ──────────────────────────────────── */

.similar-section {
  background: var(--mu-surface);
  border: 1px solid var(--mu-border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.similar-section h2 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mu-muted);
  margin-bottom: 0.85rem;
}
.similar-track-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mu-border);
}
.similar-track-item:last-child { border-bottom: none; }
.similar-track-info { flex: 1; min-width: 0; }
.similar-track-title {
  font-size: 0.88rem;
  color: var(--mu-text);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.similar-track-title:hover { color: var(--mu-cyan); text-decoration: none; }
.similar-track-artist { font-size: 0.78rem; color: var(--mu-muted); }
.similar-track-genre { font-size: 0.75rem; color: var(--mu-dim); }

.by-artist-section {
  background: var(--mu-surface);
  border: 1px solid var(--mu-border);
  border-radius: 12px;
  padding: 1.25rem;
}
.by-artist-section h2 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mu-muted);
  margin-bottom: 0.85rem;
}

/* ── PLAYER BAR ──────────────────────────────────────── */

.player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--mu-player-h);
  background: var(--mu-surface);
  border-top: 1px solid var(--mu-border);
  display: none;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
  z-index: 200;
  backdrop-filter: blur(8px);
}
.player-bar.active { display: flex; }

.player-info {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.player-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mu-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-artist { font-size: 0.78rem; color: var(--mu-muted); }

.player-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 2;
  max-width: 480px;
}
.btn-player-ctrl {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mu-accent);
  border: none;
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-player-ctrl:hover { background: #7d6ff0; }
.btn-player-ctrl:disabled { opacity: 0.35; cursor: default; }
.btn-player-ctrl:disabled:hover { background: var(--mu-accent); }
.player-scrubber {
  flex: 1;
  accent-color: var(--mu-accent);
  cursor: pointer;
  height: 4px;
}
.player-time { font-size: 0.78rem; color: var(--mu-muted); white-space: nowrap; }

.player-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.btn-player-icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--mu-border);
  background: transparent;
  color: var(--mu-muted);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.btn-player-icon:hover { border-color: var(--mu-cyan); color: var(--mu-cyan); }
.btn-player-icon[aria-pressed="true"] { border-color: var(--mu-accent); color: var(--mu-accent); background: rgba(108,92,231,0.15); }
.btn-download:hover { border-color: var(--mu-green); color: var(--mu-green); }
.player-limit-msg { font-size: 0.75rem; color: #fd79a8; max-width: 180px; }

.volume-widget { display: flex; align-items: center; gap: 0.4rem; }
.volume-slider {
  width: 0;
  opacity: 0;
  pointer-events: none;
  transition: width 0.2s ease, opacity 0.2s ease;
  accent-color: var(--mu-accent);
  cursor: pointer;
  height: 4px;
}
.volume-slider.open { width: 72px; opacity: 1; pointer-events: auto; }

/* ── SEARCH PAGE ─────────────────────────────────────── */

.search-hero {
  margin-bottom: 1.25rem;
}
.search-hero h2 { font-size: 1.3rem; font-weight: 700; }
.search-hero p { color: var(--mu-muted); font-size: 0.88rem; margin-top: 0.25rem; }

/* ── Mobile ──────────────────────────────────────────── */

@media (max-width: 1100px) {
  .browse-layout {
    grid-template-columns: 240px 1fr;
  }
  .right-rail { display: none; }
}

@media (max-width: 820px) {
  .browse-layout {
    grid-template-columns: 1fr;
  }

  .filter-sidebar {
    position: static;
    max-height: none;
  }
  .filter-sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    background: var(--mu-surface);
    border: 1px solid var(--mu-border);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mu-text);
    cursor: pointer;
    margin-bottom: 0.85rem;
  }
  .filter-sidebar.collapsed { display: none; }

  .track-table thead .col-genre,
  .track-table .col-genre { display: none; }
  .track-table thead .col-listens,
  .track-table .col-listens { display: none; }
  .track-table thead .col-album,
  .track-table .col-album { display: none; }

  .track-detail-layout { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .music-header { gap: 0.75rem; }
  .header-search { display: none; }
  .music-main { padding: 1rem 0.85rem; }
  .music-hero h1 { font-size: 2rem; }
  .genre-grid { grid-template-columns: repeat(2, 1fr); }
  .player-bar { padding: 0 0.85rem; gap: 0.6rem; }
  .player-controls { max-width: none; }
  .player-info { flex: 1.5; }
}