/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Layout & typography (never themed) ── */
  --topbar-h: 68px;
  --sidebar-left-w: 168px;
  --sidebar-right-w: 210px;
  --player-h: 22px;
  --font: -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* ── Dark theme (default) ── */
  --chrome-bg: #2a2a2a;
  --chrome-border: #1a1a1a;
  --sidebar-bg: #2d2d2d;
  --sidebar-hover: #363636;
  --sidebar-active-bg: #1a6db5;
  --sidebar-text: #b0b0b0;
  --sidebar-label: #777;
  --content-bg: #1e1e1e;
  --content-text: #ccc;
  --card-bg: #2a2a2a;
  --card-shadow: 0 1px 3px rgba(0,0,0,.4);
  --accent: #1a6db5;
  --accent-hover: #1558a0;
  --player-bg: #1e1e1e;
  --player-text: #ccc;
  --player-accent: #1a6db5;
  /* text scale */
  --text-bright: #ddd;
  --text-secondary: #bbb;
  --text-muted: #aaa;
  --text-dim: #888;
  --text-faint: #666;
  --text-subtle: #555;
  --text-ghost: #444;
  /* borders */
  --border-subtle: #2a2a2a;
  --border-mid: #3a3a3a;
  --border-strong: #484848;
  --border-ui: #333;
  /* surfaces */
  --trackbox-bg: #363636;
  --dropdown-bg: #323232;
  --input-bg: #444;
  --input-focus-bg: #3a3a3a;
  --surface-deep: #333;
  --code-bg: #222;
  --surface-elevated: #3d3d3d;
  --player-bar-border: #111;
  --art-placeholder-bg: #333;
  --highlight-bg: rgba(255,255,255,.07);
  /* track list */
  --track-border: #2a2a2a;
  --track-hover-bg: #263040;
  --track-playing-bg: #1a3a58;
  --track-selected-bg: #1e2e3e;
  --track-selected-hover-bg: #253545;
  --track-alt-bg: #242424;
  /* accent tints */
  --accent-bg-subtle: rgba(26,109,181,.12);
  --accent-bg-dim: rgba(26,109,181,.14);
  --accent-bg: rgba(26,109,181,.25);
  /* playing state */
  --playing-color: #c9763a;
  --playing-color-pulse: #ff9800;
  --playing-text: #5aadff;
  --playing-bg-subtle: rgba(201,118,58,.08);
  /* destructive */
  --destructive: #c0392b;
  --destructive-text: #e05252;
  /* Rdio nav icons: drawn for a light rail, so the tones simply swap roles here */
  --nav-icon-filter: none;
}

/* ── Light theme ── */
[data-theme="light"] {
  --chrome-bg: #e6e6e6;
  --chrome-border: #c8c8c8;
  --sidebar-bg: #d8d8d8;
  --sidebar-hover: #cccccc;
  --sidebar-active-bg: #1a6db5;
  --sidebar-text: #444;
  --sidebar-label: #888;
  --content-bg: #f0f0f0;
  --content-text: #333;
  --card-bg: #e6e6e6;
  --card-shadow: 0 1px 3px rgba(0,0,0,.12);
  --accent: #1a6db5;
  --accent-hover: #1558a0;
  --player-bg: #e6e6e6;
  --player-text: #333;
  --player-accent: #1a6db5;
  --text-bright: #111;
  --text-secondary: #333;
  --text-muted: #555;
  --text-dim: #666;
  --text-faint: #777;
  --text-subtle: #888;
  --text-ghost: #999;
  --border-subtle: #d4d4d4;
  --border-mid: #c4c4c4;
  --border-strong: #b0b0b0;
  --border-ui: #c8c8c8;
  --trackbox-bg: #d4d4d4;
  --dropdown-bg: #f0f0f0;
  --input-bg: #d8d8d8;
  --input-focus-bg: #ccc;
  --surface-deep: #d0d0d0;
  --code-bg: #e8e8e8;
  --surface-elevated: #e0e0e0;
  --player-bar-border: #c0c0c0;
  --art-placeholder-bg: #d0d0d0;
  --highlight-bg: rgba(0,0,0,.05);
  --track-border: #d4d4d4;
  --track-hover-bg: #d8e8f4;
  --track-playing-bg: #c4daf0;
  --track-selected-bg: #cce0f0;
  --track-selected-hover-bg: #c0d8ec;
  --track-alt-bg: #ebebeb;
  --accent-bg-subtle: rgba(26,109,181,.10);
  --accent-bg-dim: rgba(26,109,181,.12);
  --accent-bg: rgba(26,109,181,.18);
  --playing-color: #c9763a;
  --playing-color-pulse: #ff9800;
  --playing-text: #1a6db5;
  --playing-bg-subtle: rgba(201,118,58,.10);
  --destructive: #c0392b;
  --destructive-text: #e05252;
  --nav-icon-filter: none;
}

/* ── iTunes theme ── */
[data-theme="itunes"] {
  /* chrome: midpoint of the F7F7F7→C4C7CA toolbar gradient */
  --chrome-bg: #d0d3d6;
  --chrome-border: #b0b3b6;
  --sidebar-bg: #e1e5eb;
  --sidebar-hover: #d2d6dc;
  --sidebar-active-bg: #b2c1d8;
  --sidebar-text: #222;
  --sidebar-label: #666;
  --content-bg: #f5f8fd;
  --content-text: #111;
  --card-bg: #f5f8fd;
  --card-shadow: 0 1px 2px rgba(0,0,0,.10);
  --accent: #3875d7;
  --accent-hover: #2a62c0;
  --player-bg: #d0d3d6;
  --player-text: #111;
  --player-accent: #3875d7;
  --text-bright: #000;
  --text-secondary: #222;
  --text-muted: #444;
  --text-dim: #666;
  --text-faint: #888;
  --text-subtle: #999;
  --text-ghost: #bbb;
  --border-subtle: #e4e8ee;
  --border-mid: #c8ccd2;
  --border-strong: #b0b3b6;
  --border-ui: #d0d4d8;
  /* track box: the slightly olive/green panel in the topbar */
  --trackbox-bg: #eaedd6;
  --dropdown-bg: #f5f5f5;
  --input-bg: #ffffff;
  --input-focus-bg: #ffffff;
  --surface-deep: #e4e7ea;
  --code-bg: #f0f2f5;
  --surface-elevated: #e8eaec;
  --player-bar-border: #b0b3b6;
  --art-placeholder-bg: #ccd0d6;
  --highlight-bg: rgba(0,0,0,.05);
  --track-border: #e4e8ee;
  --track-hover-bg: #ebf0f8;
  --track-playing-bg: #dde8f8;
  --track-selected-bg: #b2c1d8;
  --track-selected-hover-bg: #a6b8d0;
  --track-alt-bg: #eef1f8;
  --accent-bg-subtle: rgba(56,117,215,.08);
  --accent-bg-dim: rgba(56,117,215,.12);
  --accent-bg: rgba(56,117,215,.18);
  --playing-color: #3875d7;
  --playing-color-pulse: #5a9aff;
  --playing-text: #3875d7;
  --playing-bg-subtle: rgba(56,117,215,.08);
  --destructive: #c0392b;
  --destructive-text: #e05252;
  --nav-icon-filter: none;
}

/* iTunes-specific structural overrides */

/* Toolbar: the classic F7F7F7→C4C7CA brushed-aluminum gradient */
[data-theme="itunes"] .topbar {
  background: linear-gradient(to bottom, #f7f7f7, #c4c7ca);
  border-bottom-color: #b0b3b6;
}

/* Player buttons: silver gradient pill, not accent-colored */
[data-theme="itunes"] .player-btn {
  background: linear-gradient(to bottom, #f7f7f7, #d8dbde);
  border: 1px solid #aaaaaa;
  color: #444;
}
[data-theme="itunes"] .player-btn:hover {
  background: linear-gradient(to bottom, #ffffff, #e0e3e6);
  color: #111;
}
[data-theme="itunes"] .play-pause {
  background: linear-gradient(to bottom, #f7f7f7, #c4c7ca);
  border: 1px solid #aaaaaa;
  color: #333;
}
[data-theme="itunes"] .play-pause:hover {
  background: linear-gradient(to bottom, #ffffff, #d0d3d6);
  color: #111;
}

/* Track box: olive-tinted border to complement the #eaedd6 background */
[data-theme="itunes"] .topbar-track-box {
  border-color: #c8cba8;
}

/* Selected sidebar items use #b2c1d8 which is too light for white text */
[data-theme="itunes"] .nav-item.active {
  color: #111;
}

/* ── Midnight theme ── */
[data-theme="midnight"] {
  --chrome-bg: #111;
  --chrome-border: #060606;
  --sidebar-bg: #141414;
  --sidebar-hover: #1c1c1c;
  --sidebar-active-bg: #7c3aed;
  --sidebar-text: #888;
  --sidebar-label: #444;
  --content-bg: #0d0d0d;
  --content-text: #a0a0a0;
  --card-bg: #111;
  --card-shadow: 0 1px 3px rgba(0,0,0,.8);
  --accent: #7c3aed;
  --accent-hover: #6d28d9;
  --player-bg: #0d0d0d;
  --player-text: #a0a0a0;
  --player-accent: #7c3aed;
  --text-bright: #c8c8c8;
  --text-secondary: #aaa;
  --text-muted: #888;
  --text-dim: #666;
  --text-faint: #444;
  --text-subtle: #333;
  --text-ghost: #252525;
  --border-subtle: #111;
  --border-mid: #1c1c1c;
  --border-strong: #2a2a2a;
  --border-ui: #1c1c1c;
  --trackbox-bg: #1c1c1c;
  --dropdown-bg: #1a1a1a;
  --input-bg: #1a1a1a;
  --input-focus-bg: #111;
  --surface-deep: #1a1a1a;
  --code-bg: #0a0a0a;
  --surface-elevated: #1c1c1c;
  --player-bar-border: #060606;
  --art-placeholder-bg: #1a1a1a;
  --highlight-bg: rgba(255,255,255,.05);
  --track-border: #111;
  --track-hover-bg: #1c1428;
  --track-playing-bg: #181030;
  --track-selected-bg: #161030;
  --track-selected-hover-bg: #1c143a;
  --track-alt-bg: #111;
  --accent-bg-subtle: rgba(124,58,237,.12);
  --accent-bg-dim: rgba(124,58,237,.14);
  --accent-bg: rgba(124,58,237,.25);
  --playing-color: #9b59b6;
  --playing-color-pulse: #c084fc;
  --playing-text: #a78bfa;
  --playing-bg-subtle: rgba(155,89,182,.10);
  --destructive: #c0392b;
  --destructive-text: #e05252;
  --nav-icon-filter: brightness(.75);
}

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 13px;
  background: var(--chrome-bg);
  color: var(--content-text);
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: var(--font); }

/* ===== Topbar ===== */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--chrome-bg);
  border-bottom: 1px solid var(--chrome-border);
  display: flex;
  align-items: center;
  padding: 0 16px 0 0;
  gap: 0;
  z-index: 100;
}

/* Left: the Rdio mark, then search. In the 2012 client the search field runs
   past the sidebar's right edge rather than sitting in its column, so this
   cluster is sized on its own instead of mirroring --sidebar-left-w. */
.topbar-brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 10px 0 14px;
  color: var(--text-bright);
  transition: color .1s;
}
.topbar-brand:hover { color: #fff; }
[data-theme="light"] .topbar-brand,
[data-theme="itunes"] .topbar-brand { color: var(--accent); }

.topbar-brand-mark {
  width: 26px;
  height: auto;
  display: block;
}

.topbar-search-wrap {
  width: 234px;
  flex-shrink: 0;
  position: relative;
  padding-right: 12px;
}

/* An <input> has no pseudo-elements, so the magnifier is a sibling. Masking
   Rdio's own glyph (single-tone, alpha-carried) lets it take the theme colour. */
.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  background-color: var(--text-dim);
  -webkit-mask: url(/static/icons/search_input_icon.png) no-repeat center / contain;
  mask: url(/static/icons/search_input_icon.png) no-repeat center / contain;
  pointer-events: none;
}

/* Center: controls + track box + volume as one unit */
.topbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}

/* iTunes-style track info box */
.topbar-track-box {
  flex: 1;
  max-width: 500px;
  height: calc(var(--topbar-h) - 18px);
  display: flex;
  align-items: stretch;
  background: var(--trackbox-bg);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  overflow: hidden;
  min-width: 180px;
}

.topbar-track-box .player-art {
  aspect-ratio: 1;
  height: 100%;
  width: auto;
  flex-shrink: 0;
  border-radius: 0;
  object-fit: cover;
}

.topbar-track-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  min-width: 0;
  overflow: hidden;
}

.topbar-title-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  overflow: hidden;
  white-space: nowrap;
}

/* Invisible spacer matches the width of the leading "0:00" time stamp */
.player-time-spacer {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  visibility: hidden;
  flex-shrink: 0;
}

.topbar-title-row .player-artist {
  flex: 1;
  min-width: 0;
}

.player-fav-btn {
  font-size: 14px;
  color: var(--text-ghost);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
  line-height: 1;
  transition: color .1s;
}
.player-fav-btn.starred { color: var(--playing-color); }
.player-fav-btn:hover   { color: var(--playing-color-pulse); }

/* Back / forward, styled as one segmented control to match the search field it
   sits beside. The Mac wrapper is a bare WKWebView with no browser chrome, so
   these are the only way back. */
.topbar-history {
  flex-shrink: 0;
  display: flex;
  height: 26px;
  margin-right: 12px;
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  overflow: hidden;
  background: var(--input-bg);
}

.topbar-hist-btn {
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: background .1s, color .1s;
}
.topbar-hist-btn + .topbar-hist-btn { border-left: 1px solid var(--border-mid); }
.topbar-hist-btn:hover:not(:disabled) { background: var(--highlight-bg); color: var(--text-bright); }
.topbar-hist-btn:active:not(:disabled) { background: var(--accent); color: #fff; }
.topbar-hist-btn:disabled { color: var(--text-faint); cursor: default; }

/* Right: settings gear beside the user menu, as in the 2012 client */
.topbar-settings-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 2px;
  border-radius: 4px;
  opacity: .75;
  transition: background .1s, opacity .1s;
}
.topbar-settings-btn:hover { background: var(--highlight-bg); opacity: 1; }

/* Right: user dropdown */
.topbar-user-wrap {
  flex-shrink: 0;
  position: relative;
  margin-left: 4px;
}

.topbar-user-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text-muted);
  border-radius: 4px;
  transition: background .1s, color .1s;
}
.topbar-user-btn:hover { background: var(--highlight-bg); color: var(--text-bright); }

.topbar-user-arrow {
  font-size: 9px;
  color: var(--text-faint);
}

.topbar-user-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  background: var(--dropdown-bg);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  z-index: 200;
  overflow: hidden;
}

.topbar-dropdown-item {
  display: block;
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--text-secondary);
  transition: background .08s, color .08s;
}
.topbar-dropdown-item:hover { background: var(--surface-elevated); color: #fff; }

.topbar-dropdown-divider {
  height: 1px;
  background: var(--border-strong);
  margin: 2px 0;
}


.search-input {
  width: 100%;
  padding-left: 28px;
  height: 26px;
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  border-radius: 13px;
  color: var(--text-bright);
  padding-right: 12px;
  font-size: 12px;
  outline: none;
}
.search-input::placeholder { color: var(--text-dim); }
.search-input:focus { border-color: var(--accent); background: var(--input-focus-bg); }


/* ===== App body layout ===== */
.app-body {
  position: fixed;
  top: var(--topbar-h);
  bottom: var(--player-h);
  left: 0;
  right: 0;
  display: flex;
  overflow: hidden;
}

/* ===== Left Sidebar ===== */
.sidebar-left {
  width: var(--sidebar-left-w);
  min-width: 120px;
  max-width: 280px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--chrome-border);
  overflow: hidden;
  position: relative;
}

/* Resize handle — shared by both rails (left grabs its right edge, right its left) */
.sidebar-left-resize-handle,
.sidebar-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  z-index: 10;
  transition: background .15s;
}
.sidebar-left-resize-handle { right: 0; }
.sidebar-resize-handle      { left: 0; }
.sidebar-left-resize-handle:hover, .sidebar-left-resize-handle.resizing,
.sidebar-resize-handle:hover,      .sidebar-resize-handle.resizing {
  background: var(--accent);
}

/* scrollable nav area */
.sidebar-nav-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0 8px;
}

.nav-section {
  margin-bottom: 2px;
}

/* Collapsible section header */
.nav-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sidebar-label);
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  transition: color .1s;
  font-family: var(--font);
}
.nav-section-toggle:hover { color: var(--text-muted); }

.nav-section-arrow {
  font-size: 7px;
  transition: transform .15s;
  flex-shrink: 0;
}
.nav-section.collapsed .nav-section-arrow { transform: rotate(-90deg); }
.nav-section.collapsed .nav-section-items { display: none; }

.nav-section-items {
  padding-bottom: 4px;
}

/* Collections section: header row holds toggle + add button */
.nav-section-header {
  display: flex;
  align-items: center;
}
.nav-section-header .nav-section-toggle {
  flex: 1;
}

.nav-collection-add {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  font-size: 16px;
  line-height: 1;
  color: var(--text-subtle);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .1s, background .1s;
}
.nav-collection-add:hover { color: var(--content-text); background: var(--highlight-bg); }

/* Inline new-collection input */
.nav-collection-input {
  display: block;
  width: calc(100% - 16px);
  margin: 4px 8px;
  height: 24px;
  background: var(--input-focus-bg);
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--text-bright);
  padding: 0 8px;
  font-size: 12px;
  font-family: var(--font);
  outline: none;
}

/* Collection nav item drop-target highlight */
.nav-item.collection-drop-over {
  background: var(--accent-bg) !important;
  color: var(--playing-text) !important;
  outline: 1px solid var(--accent);
}

/* Playlist nav item: name + hover action buttons */
a.playlist-nav-item {
  display: flex;
  align-items: center;
  position: relative;
}
.nav-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-item-actions {
  display: flex;
  gap: 1px;
  opacity: 0;
  flex-shrink: 0;
  margin-left: 4px;
  transition: opacity .1s;
}
a.playlist-nav-item:hover .nav-item-actions { opacity: 1; }
.nav-item-btn {
  font-size: 11px;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 2px;
  color: var(--text-subtle);
  transition: color .1s, background .1s;
}
.nav-item-btn:hover {
  color: var(--text-bright);
  background: var(--highlight-bg);
}

/* Playlist nav item drop-target highlight */
.nav-item.playlist-drop-over {
  background: var(--accent-bg) !important;
  color: var(--playing-text) !important;
  outline: 1px solid var(--accent);
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--chrome-bg);
  color: var(--text-bright);
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  padding: 8px 18px;
  font-size: 12.5px;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
}
.toast.toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.toast-error {
  border-color: var(--destructive);
  color: var(--destructive-text);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 10px;
  color: var(--sidebar-text);
  font-size: 12px;
  transition: background .1s;
  white-space: nowrap;
  overflow: hidden;
}

/* Rdio's own 64px nav art, drawn for a light rail. It is two-tone in RGB
   (#8994 9B body, white highlights), so it is recoloured by filter rather than
   by a mask — a mask reads only alpha and would flatten, e.g., the Collection
   icon's back sheets into its front grid. */
.nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  filter: var(--nav-icon-filter);
}
/* The selection fills are saturated enough that the artwork reads unfiltered;
   brightening it flattened the two tones into one white blob. */
.nav-item.active .nav-icon { filter: none; }

/* The archive has no heart or star — Rdio had no favourites nav — so the two
   favourites rows use the app's own glyph at the same weight as the raster set. */
.nav-icon-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: var(--playing-color);
  filter: none;
}
.nav-item.active .nav-icon-glyph { color: #fff; }
[data-theme="itunes"] .nav-item.active .nav-icon-glyph { color: var(--playing-color); }

/* Favorite Tracks is pinned above the server's playlists. Set apart by spacing,
   not a rule: neither rail uses row separators. */
.nav-item-pinned { margin-bottom: 3px; }
.nav-item:hover { background: var(--sidebar-hover); color: var(--text-bright); }
.nav-item.active { background: var(--sidebar-active-bg); color: #fff; }

.nav-empty {
  display: block;
  font-size: 11px;
  color: var(--text-subtle);
  padding: 3px 16px 5px;
  font-style: italic;
}


/* ===== Main content ===== */
.content {
  flex: 1;
  overflow-y: auto;
  background: var(--content-bg);
  padding: 24px 28px;
}

/* .page-header is defined in the settings section with flex layout */

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-bright);
}

/* ===== Album grid ===== */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 20px;
}

.album-card {
  background: var(--card-bg);
  border-radius: 3px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: box-shadow .15s;
  cursor: pointer;
}
.album-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.2); }

/* Album artwork placeholder. The server answers missing covers with this same
   file (see ProxyCoverArt), so the two always agree; painting it behind every
   <img> as well means the tile is what shows while a real cover is still
   loading, instead of a hole. */
.album-art,
.album-detail-art,
.playlist-header-art,
.playlist-track-art,
.queue-item-art,
.queue-cover-art,
.player-art {
  background: var(--art-placeholder-bg) url(/static/icons/albumart-placeholder.png) center / cover no-repeat;
}

.album-art-wrap {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background: var(--art-placeholder-bg);
  overflow: hidden;
}

.album-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.album-art-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
}
.album-card:hover .album-art-overlay { opacity: 1; }

.play-album-icon {
  font-size: 36px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* Heart button on album cards */
.album-fav-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,.55);
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 13px;
  color: rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s;
  line-height: 1;
}
.album-card:hover .album-fav-btn { opacity: 1; }
.album-fav-btn.starred { color: var(--playing-color); opacity: 1; }
.album-fav-btn:hover   { color: var(--playing-color-pulse); }

/* Larger variant for album detail page */
.album-fav-btn--detail {
  position: static;
  width: 34px;
  height: 34px;
  font-size: 16px;
  background: var(--surface-deep);
  border-radius: 4px;
  opacity: 1;
  color: var(--text-muted);
  vertical-align: middle;
}
.album-fav-btn--detail.starred { color: var(--playing-color); }
.album-fav-btn--detail:hover   { color: var(--playing-color-pulse); }

.album-info {
  padding: 9px 10px 10px;
}

.album-name {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.album-name:hover { color: var(--accent); }

.album-artist {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Album detail ===== */
.album-detail {}

.album-detail-header {
  display: flex;
  gap: 24px;
  margin-bottom: 28px;
  align-items: flex-start;
}

.album-detail-art {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  flex-shrink: 0;
  cursor: grab;
}
.album-detail-art:active { cursor: grabbing; }

.album-detail-meta {
  padding-top: 6px;
}

.album-detail-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 4px;
}

.album-detail-artist {
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 4px;
}
.album-detail-year {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.album-detail-stats {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 14px;
}

.album-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.btn-play-all {
  background: var(--accent);
  color: #fff;
  border-radius: 3px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  transition: background .1s;
}
.btn-play-all:hover { background: var(--accent-hover); }

.album-notes {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 680px;
}

/* ===== Track list ===== */
.track-list {
  width: 100%;
  border-collapse: collapse;
}

.track-row {
  border-bottom: 1px solid var(--track-border);
  cursor: pointer;
  transition: background .08s;
}
.track-row:hover { background: var(--track-hover-bg); }
.track-row.playing { background: var(--track-playing-bg); }
.track-row[draggable="true"] { cursor: grab; }
.track-row[draggable="true"]:active { cursor: grabbing; }
.track-row.dragging { opacity: 0.4; }
.track-row.selected { background: var(--track-selected-bg); }
.track-row.selected:hover { background: var(--track-selected-hover-bg); }
.track-row.playing.selected { background: var(--track-playing-bg); }

.track-row td {
  padding: 8px 10px;
  vertical-align: middle;
}

.track-num {
  width: 44px;
  text-align: right;
  color: var(--text-muted);
  font-size: 12px;
  position: relative;
}

.track-number { display: inline; }
.track-play-btn {
  display: none;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 14px;
}
.track-row:hover .track-number { display: none; }
.track-row:hover .track-play-btn { display: inline; }

.track-title { font-weight: 500; color: var(--text-bright); }
.track-artist { color: var(--text-dim); font-size: 12px; }
.track-duration { color: var(--text-muted); font-size: 12px; text-align: right; white-space: nowrap; }

.track-fav {
  width: 32px;
  text-align: center;
}
.track-fav-btn {
  font-size: 13px;
  color: transparent;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0 2px;
  transition: color .1s;
  line-height: 1;
}
.track-row:hover .track-fav-btn { color: var(--text-ghost); }
.track-fav-btn.starred           { color: var(--playing-color) !important; }
.track-fav-btn:hover             { color: var(--playing-color-pulse) !important; }

/* ===== Right sidebar — queue ===== */
.sidebar-right {
  width: var(--sidebar-right-w);
  min-width: var(--sidebar-right-w);
  max-width: 600px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-left: 1px solid var(--chrome-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Tab bar — same micro-label type as .nav-section-toggle on the left rail */
.queue-tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--chrome-border);
}

.queue-tab {
  flex: 1;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sidebar-label);
  background: none;
  border-bottom: 2px solid transparent;
  transition: color .1s, border-color .1s;
  font-family: var(--font);
}
.queue-tab:hover { color: var(--text-muted); }
.queue-tab .nav-icon { width: 13px; height: 13px; opacity: .8; }
.queue-tab.active .nav-icon { opacity: 1; }
.queue-tab.active {
  color: var(--text-bright);
  border-bottom-color: var(--accent);
}

/* Panel wrapper */
.queue-panel {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.queue-top-area {
  flex-shrink: 0;
  border-bottom: 1px solid var(--chrome-border);
}

.queue-clear-row {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  gap: 6px;
}

.queue-remove-zone,
.queue-playnext-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 8px;
  padding: 11px 10px;
  border-radius: 3px;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  border: 2px dashed var(--border-mid);
  color: var(--text-subtle);
  user-select: none;
  transition: border-color .12s, color .12s, background .12s;
}

.queue-remove-zone.drag-over {
  border-color: var(--destructive);
  color: var(--destructive-text);
  background: rgba(192,57,43,.15);
}

.queue-playnext-zone.drag-over {
  border-color: var(--accent);
  color: var(--playing-text);
  background: var(--accent-bg-dim);
}

.queue-add-zone {
  flex: 1;
  border: 1px dashed var(--border-mid);
  border-radius: 3px;
  padding: 8px 6px;
  font-size: 10.5px;
  color: var(--text-ghost);
  text-align: center;
  transition: border-color .15s, color .15s, background .15s;
  user-select: none;
}
.queue-add-zone.drag-over {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg-subtle);
}

.queue-clear-btn {
  font-size: 11px;
  color: var(--text-subtle);
  padding: 2px 6px;
  flex-shrink: 0;
  border-radius: 3px;
  transition: color .1s, background .15s;
}
.queue-clear-btn:hover { color: var(--destructive-text); }

.queue-list {
  flex: 1;
  padding: 6px 0 8px;
}

.queue-empty {
  font-size: 11.5px;
  color: var(--text-ghost);
  text-align: center;
  padding: 20px 0;
}

/* Queue item */
.queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background .08s;
}
.queue-item:hover { background: var(--sidebar-hover); }
.queue-item:hover .queue-item-title { color: var(--text-bright); }

.queue-item-art {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--art-placeholder-bg);
}

.queue-item-info {
  flex: 1;
  min-width: 0;
}

.queue-item-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.queue-item.current .queue-item-title { color: var(--playing-text); }

.queue-item-artist {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-item-duration {
  font-size: 11px;
  color: var(--text-faint);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Currently-playing item highlight & animation */
.queue-item-current {
  border-left: 2px solid var(--playing-color);
}

.queue-album-current {
  border-left: 2px solid var(--playing-color);
}

.queue-album-track-current {
  background: var(--playing-bg-subtle);
}

@keyframes playing-pulse {
  0%, 100% { color: var(--playing-color); }
  50%       { color: var(--playing-color-pulse); }
}

.playing-title {
  animation: playing-pulse 2.5s ease-in-out infinite;
  color: var(--playing-color);
}

/* Drag-and-drop feedback */
.queue-item[draggable="true"] { cursor: grab; }
.queue-item[draggable="true"]:active { cursor: grabbing; }
.queue-item.dragging { opacity: 0.35; }
.queue-item.drop-before { border-top: 2px solid var(--accent); }
.queue-list.drop-end { padding-bottom: 6px; box-shadow: 0 -2px 0 var(--accent) inset; }

/* Drop target highlight on queue panel */
#panel-upnext[dragging-over] { background: var(--sidebar-hover); }

/* ===== Album queue items ===== */
.queue-album.drop-before { border-top: 2px solid var(--accent); }
.queue-album.dragging    { opacity: 0.35; }

.queue-album-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  cursor: grab;
  transition: background .08s;
}
.queue-album-header:active           { cursor: grabbing; }
.queue-album:hover .queue-album-header { background: var(--sidebar-hover); }
.queue-album-current .queue-album-header { cursor: default; }

.queue-album-toggle,
.queue-album-remove {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-faint);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid var(--border-mid);
  transition: color .1s, background .1s, border-color .1s;
}
.queue-album-toggle:hover,
.queue-album-remove:hover {
  color: var(--text-bright);
  background: var(--highlight-bg);
  border-color: var(--text-subtle);
}
.queue-album-remove { font-size: 18px; font-weight: 300; }

.queue-album-tracks {
  border-top: 1px solid var(--border-mid);
  padding: 2px 0;
}

.queue-album-track {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 54px;
  cursor: pointer;
  transition: background .08s;
}
.queue-album-track:hover { background: var(--sidebar-hover); }

.queue-album-track-title {
  flex: 1;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-album-track-duration {
  font-size: 11px;
  color: var(--text-faint);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ===== Playlist detail ===== */
/* Full width, matching .album-detail — the track table is the page here. */
.playlist-detail {}

.playlist-header {
  display: flex;
  gap: 24px;
  margin-bottom: 28px;
  align-items: flex-end;
}

.playlist-header-art {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  flex-shrink: 0;
}

/* No override: .playlist-header-art already paints the placeholder tile. */
.playlist-header-art-empty {}

/* Favorite Tracks has no cover to show, so it wears the app's heart instead. */
.playlist-header-art-favorites {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--art-placeholder-bg);
  color: var(--playing-color);
  font-size: 64px;
  line-height: 1;
}

.playlist-th-fav { width: 34px; }

.playlist-header-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sidebar-label);
  margin-bottom: 6px;
}

.playlist-header-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 6px;
  line-height: 1.1;
}

.playlist-header-stats {
  font-size: 12.5px;
  color: var(--text-faint);
  margin-bottom: 16px;
}

/* Playlist track table */
.playlist-track-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.playlist-col-heads th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 6px 10px 7px;
  border-bottom: 1px solid var(--border-ui);
  text-align: left;
  white-space: nowrap;
}

.track-num-head   { width: 40px; text-align: right !important; padding-right: 14px !important; }
.playlist-th-dur  { width: 56px; text-align: right !important; }
.playlist-th-album { color: var(--content-text); }

/* Alternating rows */
.playlist-track-list tbody .track-row:nth-child(odd)  { background: var(--content-bg); }
.playlist-track-list tbody .track-row:nth-child(even) { background: var(--track-alt-bg); }
.playlist-track-list .track-row:hover   { background: var(--track-hover-bg) !important; }
.playlist-track-list .track-row.playing { background: var(--track-playing-bg) !important; }

.playlist-track-list .track-row td {
  padding: 5px 10px;
  vertical-align: middle;
}

.playlist-track-list .track-num {
  padding-right: 14px;
}

/* Title cell: thumbnail + stacked title/artist */
.playlist-track-cell {
  display: flex;
  align-items: center;
  gap: 9px;
}

.playlist-track-art {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--art-placeholder-bg);
}

.playlist-track-text { min-width: 0; }

.playlist-track-text .track-title {
  font-weight: 500;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlist-track-text .track-artist {
  font-size: 11px;
  color: var(--sidebar-label);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlist-td-album {
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* ===== Queue sidebar cover art ===== */
.queue-cover-area {
  flex-shrink: 0;
  border-bottom: 1px solid var(--chrome-border);
}

/* Toggle sits at the TOP — always visible */
.queue-cover-toggle {
  width: 100%;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: var(--text-ghost);
  background: none;
  transition: color .1s, background .1s;
}
.queue-cover-toggle:hover { color: var(--text-dim); background: var(--code-bg); }

/* Collapsible artwork below the toggle */
.queue-cover-wrap {
  overflow: hidden;
  max-height: 400px;
  transition: max-height 0.22s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.queue-cover-area.collapsed .queue-cover-wrap {
  max-height: 0;
}

.queue-cover-art {
  display: block;
  max-height: 270px;
  max-width: calc(100% - 16px); /* 8px each side */
  width: auto;
  object-fit: cover;
  border-radius: 3px;
  margin: 8px;
}

/* ===== Player bar (thin anchor) ===== */
.player-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--player-h);
  background: var(--player-bg);
  border-top: 1px solid var(--player-bar-border);
  z-index: 100;
}

/* ===== Player controls (in topbar) ===== */
.player-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.player-btn {
  color: var(--text-muted);
  font-size: 13px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color .1s, background .1s;
}
.player-btn:hover { color: #fff; background: var(--highlight-bg); }

.play-pause {
  width: 34px;
  height: 34px;
  background: var(--player-accent);
  color: #fff;
  font-size: 15px;
}
.play-pause:hover { background: var(--accent-hover); }

.player-art {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}

.player-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.player-artist {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}
a.player-artist[href] {
  cursor: pointer;
}
a.player-artist[href]:hover {
  color: var(--text-secondary);
  text-decoration: underline;
}

.player-progress-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 80px;
}

.player-time {
  font-size: 10px;
  color: var(--text-faint);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.player-progress-bg {
  flex: 1;
  height: 4px;
  background: var(--input-bg);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.player-progress-fill {
  height: 100%;
  background: var(--player-accent);
  border-radius: 2px;
  width: 0%;
  pointer-events: none;
}

.player-progress-bg:hover .player-progress-fill { background: var(--playing-text); }

.player-vol {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 72px;
  height: 3px;
  background: var(--input-bg);
  border-radius: 2px;
  cursor: pointer;
  outline: none;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--player-accent);
  cursor: pointer;
}
.vol-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--player-accent);
  border: none;
  cursor: pointer;
}

/* ===== Login page ===== */
body.login-page {
  background: var(--content-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-wrap {
  width: 360px;
  padding: 40px 36px;
  background: var(--chrome-bg);
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
}

.login-logo {
  font-size: 38px;
  font-weight: 700;
  font-style: italic;
  color: var(--text-bright);
  letter-spacing: -2px;
  text-align: center;
  margin-bottom: 6px;
}

.login-tagline {
  text-align: center;
  color: var(--sidebar-label);
  font-size: 12.5px;
  margin-bottom: 26px;
}

.login-error {
  background: #5a1c1c;
  color: #ffaaaa;
  border-radius: 3px;
  padding: 9px 12px;
  font-size: 12px;
  margin-bottom: 16px;
  border: 1px solid #7a2a2a;
}

.login-form { display: flex; flex-direction: column; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 4px; }

.form-field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.form-field input {
  height: 36px;
  background: var(--surface-deep);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  color: var(--text-bright);
  padding: 0 10px;
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  transition: border-color .1s;
}
.form-field input:focus { border-color: var(--accent); }

.btn-signin {
  height: 38px;
  background: var(--accent);
  color: #fff;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 700;
  margin-top: 6px;
  transition: background .1s;
}
.btn-signin:hover { background: var(--accent-hover); }

/* ===== Login: Remember Me ===== */
.form-check { margin-top: -4px; }

.check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
}
.check-label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ===== Album card drag ===== */
.album-card[draggable="true"] { cursor: grab; }
.album-card[draggable="true"]:active { cursor: grabbing; }
.album-card.dragging { opacity: 0.5; }

/* ===== Infinite scroll sentinel ===== */
.load-more-sentinel { height: 1px; }

/* ===== Confirmation modal ===== */
.confirm-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--chrome-bg);
  color: var(--content-text);
  padding: 22px 24px 18px;
  min-width: 260px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
.confirm-modal::backdrop {
  background: rgba(0,0,0,.5);
}
.confirm-msg {
  font-size: 13px;
  margin-bottom: 18px;
  color: var(--text-bright);
}
.confirm-btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.confirm-btn {
  height: 30px;
  padding: 0 14px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  background: var(--surface-deep);
  transition: background .1s, color .1s;
}
.confirm-btn:hover { background: var(--surface-elevated); color: var(--text-bright); }
.confirm-btn-destructive {
  background: #6b2020;
  border-color: #7a2a2a;
  color: #ffaaaa;
}
.confirm-btn-destructive:hover { background: #7a2828; color: #ffcccc; }

/* ===== Settings page ===== */
.settings-page {
  max-width: 600px;
}

.settings-section {
  margin-bottom: 32px;
}

.settings-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-ui);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-row-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.settings-row-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
}

.settings-row-desc {
  font-size: 11.5px;
  color: var(--text-faint);
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  display: block;
  width: 38px;
  height: 22px;
  background: var(--input-bg);
  border-radius: 11px;
  transition: background .15s;
  position: relative;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform .15s, background .15s;
}

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

.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(16px);
  background: #fff;
}

/* ===== Theme selector ===== */
.theme-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.theme-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-swatch {
  width: 52px;
  height: 36px;
  border-radius: 5px;
  border: 2px solid var(--border-mid);
  overflow: hidden;
  display: grid;
  grid-template-columns: 30% 70%;
  transition: border-color .15s;
}

.theme-option input:checked + .theme-swatch {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.theme-swatch-sidebar { height: 100%; }
.theme-swatch-content { height: 100%; }

.theme-swatch-dark .theme-swatch-sidebar  { background: #2d2d2d; }
.theme-swatch-dark .theme-swatch-content  { background: #1e1e1e; }

.theme-swatch-light .theme-swatch-sidebar  { background: #d8d8d8; }
.theme-swatch-light .theme-swatch-content  { background: #f0f0f0; }

.theme-swatch-midnight .theme-swatch-sidebar  { background: #141414; }
.theme-swatch-midnight .theme-swatch-content  { background: #0d0d0d; }

.theme-swatch-itunes .theme-swatch-sidebar  { background: #e4e4e4; }
.theme-swatch-itunes .theme-swatch-content  { background: #ffffff; }

.theme-label {
  font-size: 11px;
  color: var(--text-faint);
}

/* ===== Page subtitle (used on collection detail) ===== */
.page-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}

.page-subtitle {
  font-size: 12px;
  color: var(--text-faint);
}

/* ===== Collection title inline rename ===== */
.collection-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.collection-icon-btn {
  font-size: 14px;
  color: var(--text-subtle);
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1;
  transition: color .1s, background .1s;
}
.collection-icon-btn:hover { color: var(--text-secondary); background: var(--highlight-bg); }

.collection-title-input {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-bright);
  background: var(--card-bg);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 1px 8px;
  font-family: var(--font);
  outline: none;
  min-width: 160px;
}

/* ===== Settings values and token ===== */
.settings-number-input {
  width: 72px;
  padding: 4px 8px;
  background: var(--input-bg);
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  color: var(--content-text);
  font-size: 13px;
  text-align: right;
  flex-shrink: 0;
}
.settings-number-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--input-focus-bg);
}

.settings-value {
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.settings-reveal-btn {
  font-size: 11.5px;
  color: var(--text-faint);
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  padding: 3px 10px;
  transition: color .1s, border-color .1s;
  flex-shrink: 0;
}
.settings-reveal-btn:hover { color: var(--content-text); border-color: var(--text-faint); }


/* ── Save bar ──
   Sticks to the bottom of the settings column so the button is reachable
   without scrolling back down on a short window. */
.settings-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 0 4px;
  margin-top: 8px;
  background: var(--content-bg);
  border-top: 1px solid var(--border-ui);
}

.settings-actions-hint {
  font-size: 11.5px;
  color: var(--playing-color);
}

.btn-save-settings {
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border-radius: 3px;
  padding: 7px 20px;
  transition: background .12s, opacity .12s;
}
.btn-save-settings:hover:not(:disabled) { background: var(--accent-hover); }
/* Disabled is the resting state here — it is how the page says "nothing to
   save" — so it has to read as calm rather than as broken. */
.btn-save-settings:disabled {
  background: var(--surface-deep);
  color: var(--text-subtle);
  cursor: default;
}

.settings-token-wrap {
  padding: 10px 0 4px;
}

.settings-token {
  display: block;
  font-family: "SF Mono", "Fira Mono", "Consolas", monospace;
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--code-bg);
  border: 1px solid var(--border-ui);
  border-radius: 3px;
  padding: 8px 12px;
  word-break: break-all;
  user-select: all;
}

/* ===== Offline album ===== */
.album-offline .album-art {
  filter: grayscale(80%) brightness(0.6);
}

.album-offline-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
}

.album-offline-icon {
  font-size: 28px;
  opacity: 0.85;
}

.album-offline-label {
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 2px;
  font-style: italic;
}

/* ===== Artist links ===== */
.artist-link {
  display: block;
}
.artist-link:hover {
  text-decoration: underline;
  color: var(--content-text);
}
/* The album-detail-artist is displayed inline in the header */
.album-detail-artist.artist-link {
  display: inline;
}
/* track-artist link in tables */
td .artist-link {
  display: inline;
}
/* playlist stacked cell */
.playlist-track-text .artist-link {
  display: block;
}

/* ===== Artist page ===== */
.album-year {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 1px;
}

/* ===== Search results ===== */
.search-section {
  margin-bottom: 32px;
}

.search-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 12px;
}

.artist-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.artist-item {
  padding: 5px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border-mid);
  border-radius: 20px;
  color: var(--content-text);
  font-size: 13px;
}

.track-album {
  color: var(--text-dim);
  font-size: 12px;
}

/* ===== Utility ===== */
.hidden { display: none !important; }

.empty-state {
  color: var(--text-muted);
  font-size: 13px;
  padding: 40px 0;
}