*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; }

/* Results type + sort row */
.type-sort-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.type-radios {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.sort-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
}
/* ══════════════════════════════════════════════
   RESPONSIVE / MOBILE
   ══════════════════════════════════════════════ */

/* ── Tablet (≤ 860px) ── */
@media (max-width: 860px) {
  #site-header { padding: 0.5rem 1rem; }
  #site-header img { height: 40px; }
}

/* ── Mobile (≤ 640px) ── */
@media (max-width: 640px) {
  #site-header { padding: 0.4rem 0.75rem; margin-bottom: 12px; }
  #site-header img { height: 32px; }
  .text-logo { font-size: 1.15rem; }

  #header-bar {
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-align: center;
    margin-bottom: 0.5rem;
  }
  #auth-bar { text-align: center; }

  #collection-tabs { padding: 0 0.4rem 1.25rem; }

  main { padding: 0.4rem 0.4rem 1rem; overflow-x: hidden; }

  /* Search row — allow button to flex so it never clips in narrow viewports */
  .search-row { width: 100%; }
  #search-btn {
    width: auto;
    min-width: 70px;
    flex: 0 0 auto;
  }

  /* Type/sort row — radios on top, Advanced+Sort+Clear+Hide on bottom */
  .type-sort-row {
    flex-wrap: wrap;
    gap: 0.4rem;
    row-gap: 0.5rem;
    padding: 0 0.2rem;
  }
  .type-sort-row > span { display: none; }
  .type-radios     { order: 1; flex-basis: 100%; justify-content: center; gap: 0.3rem; flex-wrap: wrap; }
  #advanced-toggle { order: 10; }
  .sort-label      { order: 10; }
  #hide-owned-label { order: 10; font-size: 0.72rem; }
  #clear-btn       { order: 10; }
  .type-radios label { font-size: 0.72rem; }

  /* Collection controls: radios + sort on same line */
  #cw-controls-row .type-radios { flex-basis: auto; }
  #cw-controls-row .sort-label  { order: 1; }

  /* Advanced filters — 2 per row on mobile */
  .filters {
    row-gap: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .filters label { min-width: 80px; flex: 1 1 45%; }

  /* Card grids — tighter on mobile */
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.65rem;
  }

  /* Card body — tighter padding on small cards */
  .card-body { padding: 0.5rem 0.6rem 0.6rem; }
  .card-title { font-size: 0.76rem; }

  /* Collection controls row — allow wrapping */
  #cw-controls-row { flex-wrap: wrap !important; row-gap: 0.3rem !important; }

  /* Collection tabs */
  .result-tab {
    padding: 0.4rem 0.75rem;
    font-size: 0.76rem;
  }

  /* Album popup — stack cover + meta vertically */
  #album-info .album-header,
  #version-info .album-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }
  #album-info .album-cover,
  #version-info .album-cover,
  #album-info .album-cover-placeholder,
  #version-info .album-cover-placeholder {
    width: 100px;
    height: 100px;
  }

  /* Modal boxes — full width with breathing room */
  #modal-box,
  #bio-full-box,
  #version-box,
  #series-box {
    max-width: 100%;
    margin: 0;
    max-height: 92vh;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  #modal-overlay,
  #bio-full-overlay,
  #version-overlay,
  #series-overlay {
    padding: 0.5rem;
    align-items: flex-end;  /* slide up from bottom on mobile */
  }

  /* Video overlay */
  #video-overlay { padding: 0.5rem; }
  #video-wrap { padding: 0.4rem; }

  /* Lightbox overlay */
  #lightbox-overlay { padding: 0.5rem; }
  #lightbox-img { max-width: 95vw; max-height: 75vh; }
  #lightbox-prev { left: 0.4rem; font-size: 1.1rem; width: 2.2rem; height: 2.2rem; }
  #lightbox-next { right: 0.4rem; font-size: 1.1rem; width: 2.2rem; height: 2.2rem; }
  #lightbox-close { top: 0.5rem; right: 0.5rem; }

  /* Pagination */
  #pagination { gap: 0.3rem; }
  #pagination .pag-arrow { padding: 0.4rem 0.7rem; font-size: 0.8rem; }
  #pagination .pag-num { padding: 0.35rem 0.55rem; min-width: 2rem; font-size: 0.8rem; }

  /* Modal actions — larger touch targets on mobile (not smaller) */
  .modal-actions { gap: 0.35rem; flex-wrap: wrap; }
  .modal-act-btn { font-size: 0.75rem; padding: 0.4rem 0.65rem; min-height: 36px; }
  .price-sparkline-row { flex-wrap: wrap; }

  /* Mini-player — stack info + controls on mobile when collapsed */
  body.player-open { padding-bottom: 80px; }
  .mini-player-bar {
    flex-wrap: wrap;
    padding: 0.3rem 0.5rem;
    gap: 0.15rem 0.4rem;
  }
  .mini-player-info {
    flex: 1 1 100%;
    justify-content: center;
  }
  .mini-player-title {
    text-align: center;
    white-space: normal;
    font-size: 0.74rem;
    line-height: 1.3;
  }
  .mini-player-controls {
    flex: 1 1 100%;
    justify-content: center;
  }
  .mini-player-controls button { padding: 0.4rem 0.55rem; font-size: 1rem; min-width: 40px; min-height: 40px; }
  .mini-player #video-nav button { padding: 0.45rem 0.8rem; min-height: 40px; font-size: 0.9rem; }

  /* Account page — tighter padding */
  .account-box { padding: 1rem; margin: 1rem auto; }
}

/* ── Small phone (≤ 400px) ── */
@media (max-width: 400px) {
  #site-header img { height: 28px; }
  #site-header { padding: 0.3rem 0.5rem; }

  .type-sort-row { font-size: 0.7rem; }

  /* Force 2-column grid so cards aren't tiny */
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .result-tab {
    padding: 0.35rem 0.4rem;
    font-size: 0.7rem;
    letter-spacing: 0;
  }

  /* Tighten blurb/bio padding */
  #blurb { padding: 0.65rem 0.85rem; font-size: 0.85rem; }
}


/* ══════════════════════════════════════════════════════════════════════
   THEME SYSTEM
   ══════════════════════════════════════════════════════════════════════

   Every theme defines the same set of semantic CSS variables. Switching
   themes means re-defining the :root block (or a [data-theme="..."]
   variant) with different values. The rest of the stylesheet only
   references var(--name) — no hardcoded colors should appear outside
   these blocks.

   Semantic variables:
     Surfaces:   --bg, --surface, --surface-raised, --surface-sunken,
                 --bg-elevated, --bg-hover
     Borders:    --border, --border-strong, --border-soft
     Text:       --fg, --text, --muted, --muted-dim, --text-disabled
     Accents:    --accent, --accent-hover, --accent-dim, --accent2,
                 --accent-hi, --accent-soft
     States:     --success, --success-bg, --success-border
                 --warning, --warning-bg, --warning-border
                 --danger,  --danger-bg,  --danger-border, --danger-bright
                 --inventory, --inventory-bg, --inventory-border
                 --favorite (star color)
     Aliases:    --link, --panel   (legacy hooks)
     Misc:       --radius, --input-h, --color-scheme

   Themes available (user picks via /admin → Theme dropdown):
     amber-dark    (default — original warm amber/black)
     earthy-dark   (dark green / maroon / burnt orange on warm charcoal)
     earthy-light  (light cream bg, dark brown text, maroon accents)
     slate-dark    (cool steel neutrals with teal accent)
     mossy-dark    (deep forest green primary, warm gold highlights)
   ══════════════════════════════════════════════════════════════════════ */

:root,
:root[data-theme="amber-dark"] {
  color-scheme: dark;
  --bg:              #080706;
  --bg-elevated:     #1a1610;
  --bg-hover:        #1f1a12;
  --surface:         #15120e;
  --surface-raised:  #221814;
  --surface-sunken:  #0e0c08;
  --border:          #2e2518;
  --border-strong:   #3d3225;
  --border-soft:     #221814;
  --fg:              #f5eed8;
  --text:            #e8dcc8;
  --muted:           #a89880;
  --muted-dim:       #8a7d6b;
  --text-disabled:   #555555;
  --accent:          #ff6b35;
  --accent-hover:    #ff8c5a;
  --accent-dim:      #a34420;
  --accent2:         #ff8c5a;
  --accent-hi:       #e8d44d;
  --accent-soft:     #3a2a0d;
  --success:         #6bcf8e;
  --success-bg:      #1a3a1a;
  --success-border:  #2a5a2a;
  --warning:         #d4a843;
  --warning-bg:      #2a2510;
  --warning-border:  #4a3f20;
  --danger:          #e05050;
  --danger-bright:   #ff6b6b;
  --danger-bg:       #2a1010;
  --danger-border:   #5a2828;
  --inventory:       #e8a84a;
  --inventory-bg:    #3a2a0d;
  --inventory-border:#6b4a18;
  --favorite:        #e8d44d;
  --link:            var(--accent);
  --panel:           var(--surface);
  --radius:          6px;
  --input-h:         28px;
}

/* ── Theme: Earthy Dark (green / maroon / burnt orange) ─────────────── */
:root[data-theme="earthy-dark"] {
  color-scheme: dark;
  --bg:              #1a1612;
  --bg-elevated:     #241e18;
  --bg-hover:        #2b241d;
  --surface:         #221c17;
  --surface-raised:  #2b241d;
  --surface-sunken:  #120f0c;
  --border:          #3d322a;
  --border-strong:   #4d4034;
  --border-soft:     #2b241d;
  --fg:              #f5eed8;
  --text:            #e8ddc4;
  --muted:           #9e8f76;
  --muted-dim:       #7a6c5a;
  --text-disabled:   #5a4f42;
  --accent:          #c9571f;   /* burnt orange */
  --accent-hover:    #dc6a2d;
  --accent-dim:      #7a3510;
  --accent2:         #dc6a2d;
  --accent-hi:       #d4a843;
  --accent-soft:     #2e1a0e;
  --success:         #5d8a4a;   /* dark green */
  --success-bg:      #1f2e18;
  --success-border:  #3d5a28;
  --warning:         #a08040;
  --warning-bg:      #2a2010;
  --warning-border:  #4a3920;
  --danger:          #8a2828;   /* maroon */
  --danger-bright:   #a83636;
  --danger-bg:       #2e1010;
  --danger-border:   #5a1f1f;
  --inventory:       #c9571f;
  --inventory-bg:    #2e1a0e;
  --inventory-border:#7a3510;
  --favorite:        #d4a843;
  --link:            var(--accent);
  --panel:           var(--surface);
  --radius:          6px;
  --input-h:         28px;
}

/* ── Theme: Earthy Light (sand bg, dark brown text, maroon accents) ── */
:root[data-theme="earthy-light"] {
  color-scheme: light;
  --bg:              #ebe0c4;   /* warm sand beige */
  --bg-elevated:     #ddd0ac;   /* darker sand for hover */
  --bg-hover:        #d4c69f;
  --surface:         #efe5cb;   /* slightly lighter sand for cards */
  --surface-raised:  #f5ecd3;   /* lightest, for modals */
  --surface-sunken:  #ddd0ac;   /* darker, for inputs */
  --border:          #c4b593;
  --border-strong:   #a08f6a;
  --border-soft:     #dccf9c;
  --fg:              #2e1f10;   /* dark brown */
  --text:            #3d2a18;
  --muted:           #6e5a3e;
  --muted-dim:       #8a7556;
  --text-disabled:   #a89878;
  --accent:          #8a2828;   /* maroon — replaces orange sitewide */
  --accent-hover:    #a83636;
  --accent-dim:      #5a1f1f;
  --accent2:         #a83636;
  --accent-hi:       #a6732a;
  --accent-soft:     #e8d8b8;   /* sand-tinted accent bg, not pink */
  --success:         #3d6b28;
  --success-bg:      #d4deb4;
  --success-border:  #8aa868;
  --warning:         #8a6020;
  --warning-bg:      #ead8a8;
  --warning-border:  #c4a062;
  --danger:          #8a2828;
  --danger-bright:   #b03030;
  --danger-bg:       #e8ccc4;
  --danger-border:   #b87878;
  --inventory:       #8a4018;
  --inventory-bg:    #e8d4b8;
  --inventory-border:#c4865a;
  --favorite:        #a6732a;
  --link:            var(--accent);
  --panel:           var(--surface);
  --radius:          6px;
  --input-h:         28px;
}

/* ── Theme: Slate Dark (cool steel with teal accent) ────────────────── */
:root[data-theme="slate-dark"] {
  color-scheme: dark;
  --bg:              #0f1418;
  --bg-elevated:     #1a2028;
  --bg-hover:        #232a35;
  --surface:         #161c24;
  --surface-raised:  #1e2530;
  --surface-sunken:  #0a0e12;
  --border:          #2a3340;
  --border-strong:   #3a4555;
  --border-soft:     #1e2530;
  --fg:              #e8edf5;
  --text:            #c8d0dc;
  --muted:           #7a8595;
  --muted-dim:       #5a6575;
  --text-disabled:   #45505a;
  --accent:          #2fa8a0;   /* teal */
  --accent-hover:    #44c0b8;
  --accent-dim:      #1a605c;
  --accent2:         #44c0b8;
  --accent-hi:       #d4b84a;
  --accent-soft:     #0f2a28;
  --success:         #5ac87a;
  --success-bg:      #122a18;
  --success-border:  #2a5a3a;
  --warning:         #d4b84a;
  --warning-bg:      #2a2510;
  --warning-border:  #4a4020;
  --danger:          #e05050;
  --danger-bright:   #ff6b6b;
  --danger-bg:       #2a1010;
  --danger-border:   #5a2828;
  --inventory:       #d4894a;
  --inventory-bg:    #2a1a10;
  --inventory-border:#6b4a20;
  --favorite:        #d4b84a;
  --link:            var(--accent);
  --panel:           var(--surface);
  --radius:          6px;
  --input-h:         28px;
}

/* ── Theme: Mossy Dark (deep forest green with warm gold highlights) ── */
:root[data-theme="mossy-dark"] {
  color-scheme: dark;
  --bg:              #0d140e;
  --bg-elevated:     #162017;
  --bg-hover:        #1e2a1f;
  --surface:         #121c13;
  --surface-raised:  #1a241b;
  --surface-sunken:  #080f08;
  --border:          #263028;
  --border-strong:   #384438;
  --border-soft:     #1a241b;
  --fg:              #e5ecd8;
  --text:            #c8d4b8;
  --muted:           #7f8a70;
  --muted-dim:       #5f6a52;
  --text-disabled:   #444d3a;
  --accent:          #6b9248;   /* deep moss green */
  --accent-hover:    #7fa858;
  --accent-dim:      #385020;
  --accent2:         #7fa858;
  --accent-hi:       #d4a843;   /* warm gold */
  --accent-soft:     #15241a;
  --success:         #88c270;
  --success-bg:      #1a2a15;
  --success-border:  #385a28;
  --warning:         #c49a3a;
  --warning-bg:      #2a2410;
  --warning-border:  #4a3f20;
  --danger:          #a84030;
  --danger-bright:   #c45040;
  --danger-bg:       #2a1410;
  --danger-border:   #5a2420;
  --inventory:       #c49a3a;
  --inventory-bg:    #2a2410;
  --inventory-border:#5a4620;
  --favorite:        #d4a843;
  --link:            var(--accent);
  --panel:           var(--surface);
  --radius:          6px;
  --input-h:         28px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Scrollbars ── */
* {
  scrollbar-width: thin;
  scrollbar-color: #3a3020 transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #2a3a44; border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: #3a5a6a; }

#site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.5rem;
  max-width: 1100px;
  margin: 0 auto 50px;
}

.header-logo-wrap { display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; line-height: 1; }
.header-logo-wrap .header-logo { margin: 0; }
.header-version {
  font-size: 0.58rem;
  color: #3d3d3d;
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
  padding-left: 0.15rem;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  user-select: none;
  pointer-events: none;
}
.header-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }

#site-header img {
  height: 48px;
  width: auto;
  display: block;
}

/* Text logo */
.text-logo {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.55rem;
  letter-spacing: 0.03em;
  line-height: 1;
  user-select: none;
}
.logo-hi {
  color: var(--accent);
  font-weight: 700;
}
.logo-lo {
  color: rgba(255, 107, 53, 0.3);
  font-weight: 400;
}
.logo-gap { width: 0.2em; display: inline-block; }
.text-logo:hover .logo-hi { color: var(--favorite); }
.text-logo:hover .logo-lo { color: rgba(232, 212, 77, 0.3); }

#site-tagline {
  font-size: 0.78rem;
  color: #6a5d4a;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Main nav ────────────────────────────────────────────────────────────── */
#main-nav {
  display: flex;
  align-items: center;
  position: relative;
}
#nav-tabs-wrap {
  position: relative;
  display: inline-flex;
}
#main-nav-tabs {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
}
/* ─ Nav rows ───────────────────────────────────────────────────────────── */
.nav-row {
  display: flex;
}
.nav-row-top .nav-tab-top { flex: 1 1 0; }
/* ─ Top row tabs (discover + auth) ─────────────────────────────────────── */
.nav-tab-top {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: inset -1px 0 0 var(--border);
  color: var(--muted);
  height: auto;
  padding: 0.3rem 1rem;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
}
.nav-tab-top:hover           { color: var(--text); background: none; }
.nav-tab-top.active          { color: var(--accent); font-weight: 600; background: rgba(255,107,53,0.08); }
.nav-tab-top:last-child      { box-shadow: none; }
/* Record tabs — disabled state + per-tab hover/active colors */
.nav-tab-top.nav-rec-disabled { color: #555; cursor: pointer; }
.nav-tab-top.nav-rec-disabled:hover { color: var(--accent); }
.nav-tab-top[data-rtab="collection"]:hover,
.nav-tab-top[data-rtab="collection"].active  { color: #6ddf70; }
.nav-tab-top[data-rtab="wantlist"]:hover,
.nav-tab-top[data-rtab="wantlist"].active    { color: #f0c95c; }
.nav-tab-top[data-rtab="lists"]:hover,
.nav-tab-top[data-rtab="lists"].active       { color: #a0ccf0; }
.nav-tab-top[data-rtab="inventory"]:hover,
.nav-tab-top[data-rtab="inventory"].active   { color: #cda0f5; }
.nav-tab-top[data-rtab="favorites"]:hover,
.nav-tab-top[data-rtab="favorites"].active   { color: var(--accent); }
/* ─ Auth popup ──────────────────────────────────────────────────────────── */
/* ─ Hamburger (desktop: hidden) ────────────────────────────────────────── */
#nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 36px;
  height: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 7px;
  cursor: pointer;
}
#nav-hamburger span {
  display: block;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
/* ─ Mobile nav ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #main-nav { padding: 0; }
  #nav-hamburger {
    display: flex !important;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 500;
    background: var(--surface);
    border-color: var(--accent);
  }
  #nav-tabs-wrap { position: fixed; top: 3.5rem; right: 1rem; z-index: 500; min-width: 200px; }
  #main-nav-tabs {
    display: none !important;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
  }
  #main-nav-tabs.mobile-open { display: flex !important; }
  .nav-row { flex-direction: column; }
  .nav-tab-top {
    box-shadow: none;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    padding: 0.65rem 1.2rem;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    text-align: left;
    width: 100%;
  }
  .nav-tab-top[data-rtab] { padding-left: 1.5rem; font-size: 0.78rem; }
}

/* ── Recent Searches pills (inline under results) ───────────────────────── */
#favorites-sort { height: 1.6rem; font-size: 0.7rem; padding: 0 0.3rem; }
#favorites-sample-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.pill-strip-wrap {
  overflow: hidden;
  max-height: 5.5rem;
  mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
}
/* ── Unified pill base ────────────────────────────────────────────────── */
.pill {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.2rem 0.65rem;
  font-size: 0.72rem;
  color: var(--muted-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  user-select: none;
  -webkit-appearance: none;
}
.pill:hover { border-color: var(--accent-dim); color: #bbb; }
.pill.active { border-color: var(--accent); color: var(--accent); background: #1e1408; }

/* ── Synonym expansion info bar ────────────────────────────────────────── */
.cw-synonym-info {
  font-size: 0.72rem;
  color: #665a45;
  text-align: center;
  margin-top: 0.2rem;
  line-height: 1.5;
}
.cw-synonym-info .syn-icon { color: var(--accent-dim); margin-right: 0.2rem; }
.cw-synonym-info .syn-term { color: var(--muted-dim); font-style: italic; }

/* My Records sub-tabs */
/* records-sub-tabs removed — now in header nav row 2 */

/* Lists table */
.lists-table-wrap {
  padding: 0 1rem;
  overflow-x: auto;
}
.lists-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.lists-table thead th {
  text-align: left;
  color: var(--muted-dim);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  user-select: none;
}
.lists-th-sortable { cursor: pointer; }
.lists-th-sortable:hover { color: var(--accent); }
.lists-th-items { text-align: right; }
.lists-table tbody tr { border-bottom: 1px solid var(--border); cursor: pointer; }
.lists-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.lists-table td { padding: 0.35rem 0.5rem; vertical-align: top; }
.lists-td-name { color: var(--muted); font-weight: 600; white-space: nowrap; }
.lists-td-items { text-align: right; color: var(--muted); white-space: nowrap; }
.lists-td-vis { color: var(--muted-dim); font-size: 0.75rem; white-space: nowrap; }
.lists-td-desc { color: var(--muted-dim); font-size: 0.75rem; max-width: 350px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lists-ext-link { color: #555; margin-left: 0.3rem; font-size: 0.7rem; text-decoration: none; }
.lists-ext-link:hover { color: var(--accent); }

/* Collection folder pill cloud */
.cw-folder-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  margin-bottom: 0.65rem;
}
/* .cw-folder-pill extends .pill — no overrides needed */
.cw-folder-manage-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 12px;
  padding: 0.15rem 0.45rem;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cw-folder-manage-btn:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--text);
}

/* ── Folder Manager modal ────────────────────────────────────────────── */
.folder-manager-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.folder-manager-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: 520px;
  width: 100%;
  max-height: 82vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.65);
}
.fm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.fm-header h3 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--text);
}
.fm-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  line-height: 1;
}
.fm-close:hover { color: var(--text); }
.quick-folder-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.quick-folder-picker-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  max-width: 360px;
  width: 100%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.qfp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.qfp-header h4 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 600;
}
.qfp-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.25rem;
}
.qfp-close:hover { color: var(--text); }
.qfp-list {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  overflow-y: auto;
  flex: 1;
}
.qfp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s;
}
.qfp-row:hover { background: rgba(255, 255, 255, 0.06); }
.qfp-row.is-current { color: var(--muted); }
.qfp-current-label {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fm-default-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--muted);
}
.fm-default-row label { color: var(--muted); }
.fm-default-row select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.3rem 0.45rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
}
.fm-default-row select:focus {
  outline: none;
  border-color: var(--accent);
}
.fm-default-status { font-size: 0.72rem; min-width: 4rem; }
.fm-create-row {
  display: flex;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.fm-create-row input[type="text"] {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.35rem 0.55rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-family: inherit;
}
.fm-create-row input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}
.fm-table-wrap {
  overflow-y: auto;
  flex: 1;
}
.fm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.fm-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  text-align: left;
  padding: 0.45rem 0.8rem;
  border-bottom: 1px solid var(--border);
}
.fm-table tbody td {
  padding: 0.45rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text);
  vertical-align: middle;
}
.fm-name { min-width: 0; }
.fm-name-input {
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 0.25rem 0.45rem;
  border-radius: 3px;
  font-size: 0.8rem;
  font-family: inherit;
  width: 100%;
  max-width: 280px;
}
.fm-count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  width: 60px;
}
.fm-actions {
  white-space: nowrap;
  width: 1%;
  text-align: right;
}
.fm-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.2rem 0.45rem;
  border-radius: 3px;
  font-size: 0.72rem;
  cursor: pointer;
  margin-left: 0.2rem;
  transition: all 0.12s;
  line-height: 1;
  font-family: inherit;
}
.fm-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}
.fm-btn-del:hover { border-color: #e06c75; color: #e06c75; }
.fm-btn-save:hover { border-color: #98c379; color: #98c379; }
.fm-btn-create {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
  font-weight: 600;
}
.fm-btn-create:hover {
  filter: brightness(1.1);
  color: #0a0a0a;
}
.fm-locked { color: var(--muted); opacity: 0.4; }
.fm-empty {
  text-align: center;
  color: var(--muted);
  padding: 1.2rem !important;
  font-style: italic;
}
.fm-footer-hint {
  padding: 0.5rem 1rem 0.7rem;
  font-size: 0.68rem;
  color: var(--muted);
  opacity: 0.7;
  text-align: center;
  border-top: 1px solid var(--border);
}

/* No-match drop popup — floated cover, text right */
.drop-nomatch {
  display: flex;
  gap: 1.2rem;
  padding: 1.25rem 1rem;
}
.drop-nomatch-cover {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.drop-nomatch-details {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.drop-nomatch-artist {
  font-size: 0.88rem;
  color: var(--accent);
}
.drop-nomatch-artist a { color: var(--accent); text-decoration: none; }
.drop-nomatch-artist a:hover { text-decoration: underline; text-underline-offset: 2px; }
.drop-nomatch-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
.drop-nomatch-title a { color: inherit; text-decoration: none; }
.drop-nomatch-title a:hover { text-decoration: underline; text-underline-offset: 2px; }
.drop-nomatch-line {
  font-size: 0.78rem;
  color: #9a8d78;
}
.drop-nomatch-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}
.drop-nomatch-tag {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.1rem 0.45rem;
  font-size: 0.65rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
a.drop-nomatch-tag:hover { border-color: var(--accent); color: var(--accent); }
.drop-nomatch-msg {
  font-size: 0.82rem;
  color: var(--muted-dim);
  font-style: italic;
  margin-top: 0.4rem;
}
.drop-nomatch-google {
  font-size: 0.75rem;
  color: var(--accent);
  text-decoration: none;
  margin-top: 0.15rem;
}
.drop-nomatch-google:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .drop-nomatch { flex-direction: column; align-items: center; text-align: center; }
  .drop-nomatch-cover { width: 160px; height: 160px; }
  .drop-nomatch-tags { justify-content: center; }
}

/* Mobile pill readability */
@media (max-width: 600px) {
  .pill {
    font-size: 0.78rem;
    padding: 0.3rem 0.75rem;
  }
  .pill-strip-wrap {
    max-height: 6.2rem;
  }
  .cw-folder-cloud {
    gap: 0.45rem;
  }
}

main {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.4rem 0 1.5rem;
}
#info-view, #privacy-view, #terms-view {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0.4rem 0 1.5rem;
}
@media (max-width: 1024px) { main, #info-view, #privacy-view, #terms-view { width: 94%; } }
@media (max-width: 640px)  { main, #info-view, #privacy-view, #terms-view { width: 97%; } }
@media (max-width: 400px)  { main, #info-view, #privacy-view, #terms-view { width: 99%; } }


/* ── Content narrow utility ── */
.content-narrow { max-width: 900px; margin-left: auto; margin-right: auto; }

/* ── Search form ── */
.search-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: center;
}

.swap-search-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: #555;
  cursor: pointer;
  font-size: 1rem;
  padding: 0 0.45rem;
  height: var(--input-h);
  line-height: var(--input-h);
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.swap-search-btn:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}
.swap-search-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

input[type="text"] {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: inherit;
  font-size: 0.78rem;
  height: var(--input-h);
  padding: 0 0.6rem;
  line-height: var(--input-h);
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}

input[type="text"]:focus {
  border-color: var(--accent);
}
/* Highlight fields that have content */
input[type="text"]:not(:placeholder-shown),
select.has-value {
  background: var(--accent-soft); border-color: #8b5a1b; color: var(--fg);
  box-shadow: 0 0 5px rgba(180, 100, 20, 0.2);
}

select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: inherit;
  font-size: 0.78rem;
  height: var(--input-h);
  padding: 0 0.5rem;
  /* line-height intentionally omitted — native <select> elements center
     text via the browser's own layout, and forcing line-height equal to
     the box height clips the baseline on Chrome/Edge. */
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
  color-scheme: dark;
}

button {
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  color: #000;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  height: var(--input-h);
  padding: 0 1rem;
  box-sizing: border-box;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

button:hover:not(.nav-tab-top) { background: var(--accent2); }
button:disabled { background: var(--accent-dim); cursor: not-allowed; }

#search-btn { width: 120px; flex-shrink: 0; }

/* Advanced panel — smooth open/close via max-height transition */
#advanced-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  opacity: 0;
}
#advanced-panel[data-open="true"] {
  max-height: 600px;
  opacity: 1;
}

.filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  row-gap: 1.5rem;
}

.filters input[type="text"],
.filters select {
  flex: 1;
  min-width: 120px;
  color-scheme: dark;
}

.filters label {
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  min-width: 100px;
}

/* ── Status / error ── */
#blurb {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 1.25rem;
  display: none;
}

/* ── Video popup ── */
/* ── Persistent mini-player (bottom-docked) ── */
.mini-player {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 300;
  background: #111;
  border-top: 1px solid #2a2a2a;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.6);
  font-family: inherit;
}
.mini-player.open { display: block; }
body.player-open { padding-bottom: 72px; }
body.modal-open  { overflow: hidden; }

.mini-player-bar {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.6rem 0.65rem;
  gap: 0.4rem;
  min-height: 48px;
}
.mini-player-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
}
.mini-player-title {
  font-size: 0.78rem;
  color: #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.mini-player-title .vt-track { font-weight: 600; color: #fff; }
.mini-player-title .vt-sep   { color: #555; margin: 0 0.25em; }

.mini-player-status {
  font-size: 0.68rem;
  margin-left: 0.5em;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  white-space: nowrap;
}
.mini-player-status.status-loading  { color: #b0a060; }
.mini-player-status.status-playing  { color: var(--success); }
.mini-player-status.status-paused   { color: var(--muted); }
.mini-player-status.status-ended    { color: #666; }
.mini-player-status.status-error    { color: #e88; }

@keyframes pulse-status {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.mini-player-status.status-loading,
.mini-player-status.status-error {
  animation: pulse-status 1.5s ease-in-out infinite;
}

.mini-player-controls {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}
.mini-player-controls button {
  background: none;
  border: none;
  color: #aaa;
  font-size: 0.85rem;
  padding: 0.25rem 0.45rem;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
}
.mini-player-controls button:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,0.1); }
.mini-player-controls button:disabled { opacity: 0.3; cursor: default; }
#mini-close { font-size: 1.1rem; }
#mini-expand { transition: transform 0.2s; }
.mini-player.expanded #mini-expand { transform: rotate(180deg); }

.mini-player-expanded {
  display: none;
  padding: 0 0.6rem 0.5rem;
}
.mini-player.expanded .mini-player-expanded { display: block; }

.mini-player #video-box {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: min(56.25%, 360px);
  height: 0;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}
.mini-player #video-box iframe,
.mini-player #video-player {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.mini-player #video-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.4rem;
  gap: 0.5rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.mini-player #video-nav button {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #ccc;
  font-size: 0.85rem;
  padding: 0.25rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
  flex: 1;
  max-width: 140px;
}
.mini-player #video-nav button:hover:not(:disabled) { background: rgba(255,255,255,0.15); color: #fff; }
.mini-player #video-nav button:disabled { opacity: 0.3; cursor: default; }

@media (max-width: 640px) {
  .mini-player #video-box { padding-bottom: 56.25%; }
  .mini-player-expanded { padding: 0 0.4rem 0.4rem; }
}

/* ── Modal ── */
#modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* ── Version overlay (layered over master popup & series browser) ── */
#version-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 220;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
#version-overlay.open { display: flex; }
#version-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 560px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}
/* #modal-close still used by admin.html */
#modal-close {
  position: sticky; top: 0.5rem; float: right;
  margin: 0.5rem 0.6rem 0 0; background: none; border: none;
  color: var(--muted); font-size: 1.5rem; line-height: 1;
  cursor: pointer; padding: 0.1rem 0.4rem; border-radius: 4px; z-index: 1;
}
#modal-close:hover { color: var(--text); background: var(--border); }
#version-info { overflow: hidden; }

/* ── Series browser overlay ───────────────────────────────────────────── */
#series-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 210;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
#series-overlay.open { display: flex; }
#series-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  padding: 1rem;
}
#series-close {
  position: sticky;
  top: 0;
  float: right;
  margin: 0 0 0 0;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  z-index: 1;
}
#series-close:hover { color: var(--text); background: var(--border); }
.sr-grid {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 0.25rem 0.6rem;
  font-size: 0.75rem;
  align-items: center;
}
.sr-grid img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 3px;
}
.sr-grid .sr-title { color: var(--fg); cursor: pointer; text-decoration: none; word-break: break-word; overflow-wrap: break-word; min-width: 0; }
.sr-grid .sr-title:hover { color: var(--accent); text-decoration: dotted underline; }
.sr-pill-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.6rem; }
.sr-pill {
  background: #2a2a2a;
  border: none;
  color: var(--fg);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  cursor: pointer;
  white-space: nowrap;
}
.sr-pill:hover { background: #3a3a3a; }

#modal-overlay.open { display: flex; }

#modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 620px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
}

/* Empty close zone at top of popup — tap to dismiss (especially on mobile) */
.popup-close-zone {
  height: 1.5rem; cursor: pointer;
  position: sticky; top: 0; z-index: 3; background: var(--surface);
}
.popup-close-zone::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 2rem; height: 4px; border-radius: 2px; background: #333;
}
.popup-close-zone:hover::after { background: var(--muted); }
/* Inline share button next to type badge */
.popup-share-inline {
  background: none; border: none; cursor: pointer;
  font-size: 0.72rem; color: var(--muted); padding: 0.15rem 0.4rem;
  border-radius: 4px; letter-spacing: 0.03em;
}
.popup-share-inline:hover { color: var(--accent); background: var(--surface); }

/* Share button inside bio / video popups */
.popup-share {
  background: none; border: none; cursor: pointer;
  font-size: 0.72rem; color: var(--muted); padding: 0.2rem 0.5rem;
  border-radius: 4px; float: right; margin: 0.6rem 0.2rem 0 0;
  letter-spacing: 0.03em;
}
.popup-share:hover { color: var(--accent); background: var(--surface); }

/* ── Wikipedia dropdown (sits next to the eBay logo in modal header) ── */
.wiki-link-wrap {
  position: relative;
  display: inline-block;
  margin-left: 0.35rem;
  vertical-align: baseline;
}
/* The sitewide `button:hover:not(.nav-tab-top)` rule has specificity
   (0,2,1) which beats `.wiki-link-btn:hover` (0,2,0), so the orange
   button background was bleeding through on hover even though we
   wanted just the W glyph to change color. Prefix with `button` to
   match specificity, force background transparent with !important to
   defeat any leftover sitewide overrides, and disable transitions so
   there's no flash mid-animation. */
button.wiki-link-btn,
button.wiki-link-btn:hover,
button.wiki-link-btn:focus,
button.wiki-link-btn:active {
  background: transparent !important;
  border: none;
  border-radius: 0;
  padding: 0;
  height: auto;
  min-height: 0;
  box-shadow: none;
  outline: none;
  transition: none;
}
.wiki-link-btn {
  cursor: pointer;
  font: inherit;
  line-height: 1;
  color: #eaeaea;
  vertical-align: baseline;
}
.wiki-link-btn .wiki-w {
  display: inline-block;
  font-family: "Linux Libertine", "Georgia", "Times New Roman", serif;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1;
  color: #eaeaea;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
  transition: color 0.15s;
}
.wiki-link-btn:hover .wiki-w { color: var(--accent); }
.wiki-link-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 220px;
  max-width: 320px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
  padding: 0.25rem;
  z-index: 260;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.wiki-link-menu[hidden] { display: none; }
.wiki-menu-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem;
  border-radius: 3px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wiki-menu-item:hover { background: var(--bg-elevated); color: var(--accent); }
.wiki-menu-key {
  color: var(--muted);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  min-width: 3rem;
}
.wiki-menu-val {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#modal-loading {
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

#album-info, #version-info { overflow: hidden; clear: both; }

#album-info .album-header, #version-info .album-header {
  display: flex;
  gap: 1rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
}

#album-info .album-cover, #version-info .album-cover {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--surface);
  cursor: pointer;
  transition: opacity 0.15s;
}
#album-info .album-cover:hover, #version-info .album-cover:hover { opacity: 0.8; }

.album-cover-wrap { flex-shrink: 0; }
.album-thumb-strip {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
  max-width: 130px;
}
.album-thumb {
  width: 28px; height: 28px;
  object-fit: cover;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.album-thumb:hover { opacity: 1; }

/* ── Lightbox ─────────────────────────────────────────────────────── */
#lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#lightbox-overlay.open { display: flex; }
#lightbox-img {
  max-width: min(90vw, 700px);
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 4px 40px rgba(0,0,0,0.8);
  display: block;
}
#lightbox-close {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 1.5rem;
  cursor: pointer; line-height: 1;
  padding: 0.3rem 0.55rem;
  border-radius: 50%;
  z-index: 2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
#lightbox-close:hover { background: rgba(0,0,0,0.75); border-color: rgba(255,255,255,0.5); }
#lightbox-prev, #lightbox-next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 2.2rem;
  width: 3.5rem; height: 3.5rem;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  cursor: pointer; border-radius: 50%;
  transition: background 0.15s, border-color 0.15s;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2;
  line-height: 1;
}
#lightbox-prev:hover, #lightbox-next:hover { background: rgba(0,0,0,0.75); border-color: rgba(255,255,255,0.5); }
#lightbox-prev { left: 0.75rem; }
#lightbox-next { right: 0.75rem; }
#lightbox-prev:disabled, #lightbox-next:disabled { opacity: 0.15; cursor: default; }
#lightbox-counter {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
}

#album-info .album-cover-placeholder, #version-info .album-cover-placeholder {
  width: 130px;
  height: 130px;
  background: var(--surface);
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--border);
  font-size: 2rem;
}

#album-info .album-type-badge, #version-info .album-type-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  display: inline-block;
  margin-bottom: 0.1rem;
  position: relative;
  transition: color 0.15s;
}
#album-info .album-type-badge[data-copied="true"],
#version-info .album-type-badge[data-copied="true"] {
  color: var(--accent);
  border-color: var(--accent);
}
#album-info .album-type-badge[data-copied="true"]::after,
#version-info .album-type-badge[data-copied="true"]::after {
  content: " ✓ copied";
  font-size: 0.6rem;
  color: var(--accent);
}

#album-info .album-meta, #version-info .album-meta { min-width: 0; overflow-wrap: break-word; }
#album-info .album-meta h2, #version-info .album-meta h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  line-height: 1.3;
}

.album-title-search {
  color: var(--accent);
  text-decoration: none;
  font-size: 1.1em;
}
.album-title-search:hover,
.modal-internal-link:hover {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--muted);
}
.modal-internal-link {
  text-decoration: none;
  color: var(--fg);
}
.catno-link,
.catno-link:visited {
  color: var(--success) !important;
}
.mv-grid a:hover {
  text-decoration: underline dotted !important;
  text-decoration-color: var(--muted);
  text-underline-offset: 3px;
}
.matrix-runout[data-copied="true"]::after {
  content: " ✓ copied";
  color: var(--muted);
  font-size: 0.7em;
}
.catno-collection-search {
  color: var(--accent);
  text-decoration: none;
  font-size: 1.1em;
}
.catno-collection-search:hover {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--muted);
}
.track-search-icon {
  color: var(--muted);
  text-decoration: none;
  font-size: 1.1em;
}
.track-search-icon:hover {
  color: var(--fg);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--muted);
}

#album-info .album-meta .album-artist, #version-info .album-meta .album-artist {
  color: var(--fg);
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}
.modal-artist-link { color: var(--fg); text-decoration: none; font-size: 0.75rem; }
.modal-artist-link:hover { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--muted); }
.modal-title-link { color: var(--fg); text-decoration: none; }
.modal-title-link:hover { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--muted); }

#album-info .album-detail-grid, #version-info .album-detail-grid {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.15rem 0.5rem;
  font-size: 0.78rem;
  min-width: 0;
}
#album-info .album-detail-grid > span:nth-child(even),
#version-info .album-detail-grid > span:nth-child(even) {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

#album-info .detail-label, #version-info .detail-label {
  color: var(--muted);
}

#album-info .album-tracklist, #version-info .album-tracklist {
  padding: 0.75rem;
}

#album-info .tracklist-heading, #version-info .tracklist-heading {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.tracklist-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tracklist-toggle {
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.tracklist-toggle:hover { color: var(--fg); }
.tracklist-arrow {
  display: inline-block;
  font-size: 0.6rem;
  vertical-align: middle;
  margin-right: 0.15em;
  transition: color 0.15s;
}
/* "(N ▶)" — playable count + start-from-first-track button shown
   inline next to the Tracklist heading text. */
.tracklist-playable {
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 0.25rem;
  font-weight: 400;
}
.tracklist-play-all {
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.7rem;
  margin-left: 0.15rem;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
}
.tracklist-play-all:hover {
  color: var(--accent-hover);
  transform: scale(1.2);
}
.tracklist-filter {
  flex: 1;
  max-width: 160px;
  background: rgba(255,255,255,0.06);
  border: 1px solid #333;
  border-radius: 4px;
  color: var(--fg);
  font-size: 0.68rem;
  padding: 0.15rem 0.4rem;
  outline: none;
  font-family: inherit;
}
.tracklist-filter:focus { border-color: var(--accent); }
.tracklist-filter::placeholder { color: #555; }

.credits-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.credits-body {
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--fg);
}
.album-credits {
  padding: 0.75rem;
}
.credit-sep { color: #444;
}

/* ── Master versions grid ── */
.mv-grid-scroll {
  overflow-x: auto;
  padding-bottom: 0.75rem;
}
.mv-grid {
  overflow: hidden;
}
.mv-grid > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ── Master version filter pills ── */
.mv-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.4rem;
}
.mv-pill {
  cursor: pointer;
  border: none;
  border-radius: 14px;
  padding: 0.1rem 0.45rem;
  font-size: 0.62rem;
  font-weight: 600;
  font-family: inherit;
  transition: background 0.15s;
  background: #2a2a2a;
  color: var(--fg);
}
.mv-pill:hover { background: #3a3a3a; }
.mv-pill[data-filter=""] { background: var(--accent); color: #000; }

#album-info .track, #version-info .track {
  display: flex;
  gap: 0.6rem;
  font-size: 0.82rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
#album-info .track-title a, #version-info .track-title a {
  display: inline;
}

#album-info .track:last-child, #version-info .track:last-child { border-bottom: none; }

#album-info .track-pos, #version-info .track-pos {
  color: var(--muted);
  min-width: 2rem;
  text-align: right;
  flex-shrink: 0;
}

#album-info .track-title, #version-info .track-title { flex: 1; }

.track-credits {
  font-size: 0.78em;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 0.15rem;
}

#album-info .track-dur, #version-info .track-dur {
  color: var(--muted);
  flex-shrink: 0;
}

#album-info .track-link, #version-info .track-link {
  color: inherit;
  text-decoration: none;
}

.track-link.now-playing {
  color: var(--accent) !important;
}
#album-info .track-link:hover, #version-info .track-link:hover {
  color: var(--accent);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--muted);
}

#album-info .yt-search, #version-info .yt-search {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4em;
  flex-shrink: 0;
  filter: grayscale(1) brightness(0.6);
  transition: filter 0.15s;
}
#album-info .yt-search:hover, #version-info .yt-search:hover { filter: none; }

#album-info .album-extra, #version-info .album-extra {
  border-top: 1px solid var(--border);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

#album-info .album-meta-row, #version-info .album-meta-row {
  display: flex;
  gap: 0.75rem;
  font-size: 0.8rem;
}

#album-info .meta-label, #version-info .meta-label {
  color: var(--muted);
  min-width: 5rem;
  flex-shrink: 0;
}

.credit-name { color: #d4815a; }
#album-info .credit-role, #version-info .credit-role {
  color: var(--muted);
}

#album-info .album-notes, #version-info .album-notes {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ── Modal action buttons ── */
.modal-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}
/* Multi-instance panel — shown when user owns multiple copies of a release */
.modal-instances-panel {
  margin-top: 0.55rem;
  padding: 0.5rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.72rem;
  color: var(--muted);
}

/* ── Notes & custom fields editor panel ──────────────────────────────── */
.modal-notes-panel {
  margin-top: 0.45rem;
  padding: 0.5rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.72rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
/* Clickable header above the notes/fields body. Full-width transparent
   button so the whole row is a hit target. Chevron flips based on the
   .is-collapsed state on the parent panel (persisted per user via
   localStorage sd-notes-collapsed). Hover just brightens a subtle
   bottom border — no color shift, no background flash. */
.modal-notes-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.15rem 0 0.3rem;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color 0.15s;
}
.modal-notes-header:hover { border-bottom-color: var(--border-strong); }
.modal-notes-chev {
  color: var(--muted);
  font-size: 0.75rem;
  width: 0.9rem;
  display: inline-flex;
  justify-content: center;
}
.modal-notes-header-label { flex: 1; }
.modal-notes-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.modal-notes-panel.is-collapsed .modal-notes-body { display: none; }
.modal-notes-panel.is-collapsed { gap: 0; padding: 0.35rem 0.7rem; }
.modal-notes-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.modal-notes-block + .modal-notes-block {
  border-top: 1px solid var(--border);
  padding-top: 0.45rem;
}
.modal-notes-title {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.modal-notes-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  font-size: 0.66rem;
}
.modal-notes-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.7rem;
}
.modal-notes-label {
  flex: 0 0 7.5rem;
  max-width: 7.5rem;
  padding-top: 0.28rem;
  color: var(--muted);
  font-size: 0.68rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-notes-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 0.28rem 0.45rem;
  font: inherit;
  font-size: 0.72rem;
  resize: vertical;
}
.modal-notes-input:focus {
  outline: none;
  border-color: var(--inventory-border);
  background: var(--surface-raised);
}
.modal-notes-input:disabled { opacity: 0.5; }
.modal-notes-empty,
.modal-notes-loading {
  font-size: 0.68rem;
  color: var(--muted);
  font-style: italic;
}
@media (max-width: 560px) {
  .modal-notes-row { flex-direction: column; gap: 0.2rem; }
  .modal-notes-label { flex: initial; max-width: none; padding-top: 0; }
}
.modal-instances-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.7rem;
  margin-bottom: 0.35rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.modal-instances-header strong { color: var(--text); }
.modal-instances-title { flex: 1; min-width: 0; }

/* ── Sale listings section inside the instances panel ─────────────── */
.modal-sale-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.7rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  letter-spacing: 0.02em;
}
.modal-sale-header strong { color: var(--inventory); }
.modal-sale-title { flex: 1; min-width: 0; }
.modal-sale-toggle {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.22rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
}
.modal-sale-toggle:hover { background: var(--border); border-color: var(--inventory-border); color: var(--inventory); }
.modal-sale-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  gap: 0.35rem;
}
.modal-sale-list.is-open {
  display: flex;
  margin-top: 0.4rem;
}
.modal-sale-row {
  padding: 0.45rem 0.55rem;
  background: rgba(232, 168, 74, 0.04);
  border: 1px solid rgba(107, 74, 24, 0.5);
  border-radius: 5px;
  font-size: 0.72rem;
  color: var(--muted);
}
.modal-sale-row-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.modal-sale-price {
  font-weight: 700;
  color: var(--inventory);
  font-size: 0.8rem;
}
.modal-sale-status {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}
.modal-sale-status.sale-status-live    { background: var(--success-bg); color: var(--success); }
.modal-sale-status.sale-status-draft   { background: #2a2418; color: #c0a468; }
.modal-sale-status.sale-status-expired { background: #3a1a1a; color: #cf6b6b; }
.modal-sale-status.sale-status-other   { background: #222;    color: #888;    }
.modal-sale-date { color: #7a6d58; font-size: 0.68rem; }
.modal-sale-edit {
  background: var(--inventory-bg);
  border: 1px solid var(--inventory-border);
  color: var(--inventory);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.22rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
}
.modal-sale-edit:hover { background: #4a3612; border-color: #8a5e22; color: #f5c060; }
.modal-sale-row-cond {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
  font-size: 0.7rem;
}
.modal-sale-row-cond strong { color: var(--text); font-weight: 600; }
.modal-sale-row-notes {
  margin-top: 0.3rem;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--muted-dim);
  word-break: break-word;
}
.modal-add-copy-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.28rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.modal-add-copy-btn:hover {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
@media (max-width: 640px) {
  .modal-add-copy-btn { font-size: 0.78rem; padding: 0.38rem 0.7rem; }
}
.modal-instances-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.modal-instance-row {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 0.15rem 0;
  border-top: 1px dashed var(--border);
}
.modal-instance-row:first-child { border-top: none; }
.modal-instance-row { cursor: pointer; transition: background 0.12s; padding: 0.2rem 0.35rem; border-radius: 3px; }
.modal-instance-row:hover { background: rgba(255,255,255,0.04); }
.modal-instance-row.is-active { background: rgba(255,255,255,0.08); box-shadow: inset 3px 0 0 var(--accent); }
.modal-instance-folder { font-weight: 600; color: var(--text); }
.modal-folder-chip {
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: baseline;
}
.modal-folder-chip:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
}
.modal-folder-chip-inline {
  font-size: 0.68rem;
  padding: 0.05rem 0.35rem;
  margin-left: 0.15rem;
}
@media (max-width: 640px) {
  .modal-folder-chip { padding: 0.18rem 0.5rem; }
  .modal-folder-chip-inline { padding: 0.1rem 0.4rem; font-size: 0.75rem; }
}
.modal-instance-rating { color: #f0a830; font-size: 0.68rem; }
.modal-instance-added { color: var(--muted); font-size: 0.66rem; }
.modal-instance-notes { color: var(--muted); font-style: italic; font-size: 0.66rem; }
.modal-instances-hint { color: var(--muted); font-weight: normal; font-size: 0.66rem; margin-left: 0.3rem; }

/* ── (N) multi-copy badge on card thumbnails ── */
.card-instance-badge {
  position: absolute;
  left: 0.35rem;
  bottom: 0.35rem;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  min-width: 1.75rem;
  min-height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  z-index: 3;
  line-height: 1.2;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, transform 0.12s;
}
@media (max-width: 640px) {
  .card-instance-badge {
    font-size: 0.85rem;
    padding: 0.28rem 0.6rem;
    min-width: 2rem;
    min-height: 1.75rem;
    left: 0.3rem;
    bottom: 0.3rem;
  }
}
.card-instance-badge:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.08);
}

/* ── Popover listing each stored instance of a release ── */
.instance-popover {
  position: absolute;
  z-index: 9999;
  min-width: 220px;
  max-width: 320px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  padding: 0.5rem 0.6rem;
  font-size: 0.72rem;
  color: var(--text);
}
.instance-popover-header {
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.instance-popover-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.instance-popover-row {
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
  padding: 0.3rem 0.4rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s;
}
.instance-popover-row:hover { background: rgba(255, 255, 255, 0.07); }
.instance-popover-folder { font-weight: 600; color: var(--text); }
.instance-popover-rating { color: #f0a830; font-size: 0.66rem; }
.instance-popover-added { color: var(--muted); font-size: 0.64rem; margin-left: auto; }
.modal-act-btn {
  font-size: 0.72rem;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.modal-act-btn:hover { border-color: #555; color: var(--text); }
.modal-act-btn.active { border-color: var(--border); background: var(--surface); }
.modal-act-btn.in-collection { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.modal-act-btn.in-collection:hover { background: #1f4a1f; border-color: #3a6a3a; }
/* "Listed for sale" button — amber/gold to distinguish from the green
   "Collected" state, since owning a copy and actively selling one are
   meaningfully different user-actions. */
.modal-act-btn.is-listed { background: var(--inventory-bg); border-color: var(--inventory-border); color: var(--inventory); }
.modal-act-btn.is-listed:hover { background: #4a3612; border-color: #8a5e22; color: #f5c060; }
.modal-act-btn.in-wantlist { background: var(--warning-bg); border-color: var(--warning-border); color: #d4a843; }
.modal-act-btn.in-wantlist:hover { background: #3a3518; border-color: #5a4f2a; }
.want-icon { filter: grayscale(1) opacity(0.5); }
.want-icon.active { filter: none; }
.modal-rating {
  display: inline-flex;
  gap: 0.1rem;
  margin-left: 0.3rem;
}
.modal-star {
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--border);
  transition: color 0.1s;
  user-select: none;
}
.modal-star.active { color: var(--warning); }
.modal-star.preview { color: #c8922a; }
.modal-star:hover { color: var(--warning); }

/* Price sparkline */
.price-sparkline-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
}
.price-sparkline-label {
  font-size: 0.72rem;
  font-weight: 600;
}
.price-sparkline-dates {
  font-size: 0.65rem;
  color: var(--muted);
}
.price-badge {
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 0.1rem;
}
.price-badge .price-change {
  font-weight: 600;
  margin-left: 0.2rem;
}
.price-badge .price-up { color: #4caf50; }
.price-badge .price-down { color: var(--danger); }


#status {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: none;
}

#status.error { color: #e05555; }

/* ── Unified card grid ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

/* ── Recent history strip (front-page Recent cards) ── */
/* Uses the standard .card-grid layout and the full card body, so cards
   look identical to search results. Each card is wrapped in .recent-wrap
   so we can overlay a small X button to drop a single item from history. */
.recent-wrap {
  position: relative;
}
.recent-dismiss {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.6);
  color: #ddd;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  z-index: 3;
}
.recent-wrap:hover .recent-dismiss { opacity: 1; }
.recent-dismiss:hover { background: rgba(160, 30, 30, 0.85); color: #fff; }

/* ── Results grid ── */
#results {
  min-height: 4rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* Currently playing LOC card — animated accent border with a small
   "NOW PLAYING" label pinned to the top-left of the thumb. */
.card.is-playing {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 4px 18px rgba(0, 0, 0, 0.35);
  animation: loc-playing-pulse 2.2s ease-in-out infinite;
}
.card.is-playing .card-thumb-wrap::before {
  content: "▶ NOW PLAYING";
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  padding: 0.18rem 0.45rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--surface-sunken);
  background: var(--accent);
  border-radius: 3px;
  z-index: 4;
  pointer-events: none;
}
@keyframes loc-playing-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 4px 18px rgba(0, 0, 0, 0.35); }
  50%      { box-shadow: 0 0 0 2px var(--accent), 0 0 24px 2px var(--accent); }
}

.card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--surface);
}

.card .thumb-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--surface-raised), var(--bg));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 2.8rem;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  position: relative;
}
.card .thumb-placeholder::after {
  content: "no image";
  position: absolute;
  bottom: 0.4rem;
  right: 0.5rem;
  font-size: 0.55rem;
  color: var(--muted-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: none;
}
/* Keep the LOC-card-type variant consistent even on light themes */
.card-type-loc .thumb-placeholder {
  background: linear-gradient(135deg, var(--bg-elevated), var(--surface-sunken));
}

.card-body {
  position: relative;
  padding: 0.75rem 0.85rem 0.9rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.card-artist {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-title {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-visited { opacity: 0.5; }
.link-visited { opacity: 0.45; }

/* Version-list interactive dots */
.mv-dots { display: inline-flex; gap: 3px; align-items: center; vertical-align: middle; }
.mv-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #2a2a2a; cursor: pointer; opacity: 0.35; transition: opacity 0.15s, background 0.15s;
}
.mv-dot.active { opacity: 1; }
.mv-dot:hover { opacity: 0.85; }

/* Search history dropdown */
.sh-dropdown {
  position: absolute; top: 100%;
  z-index: 120; max-height: 200px; overflow-y: auto;
  background: #1a1a1a; border: 1px solid #333; border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  text-align: left;
}
.sh-row {
  display: flex; align-items: center; padding: 0.35rem 0.6rem;
  cursor: pointer; font-size: 0.8rem; color: var(--fg);
  text-align: left;
}
.sh-row:hover { background: #252525; }
.sh-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.sh-del {
  flex-shrink: 0; color: #555; font-size: 1rem; padding: 0 0.2rem;
  margin-left: 0.4rem; cursor: pointer; line-height: 1;
}
.sh-del:hover { color: #e44; }

.card-sub {
  font-size: 0.75rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-catno-line {
  font-size: 0.68rem;
  color: var(--success);
  margin-top: 0.15rem;
}

/* ── Saved searches ── */
.saved-search-wrap {
  position: relative;
  display: inline-block;
}
.saved-search-toggle {
  background: none;
  border: 1px solid #333;
  border-radius: 4px;
  color: #888;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: color 0.15s, border-color 0.15s;
}
.saved-search-toggle:hover { color: #ccc; border-color: #555; }
.saved-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 120;
  min-width: 200px;
  max-width: 300px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  overflow: hidden;
}
.ss-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid #2a2a2a;
}
.ss-save-btn {
  background: none;
  border: 1px solid #444;
  border-radius: 4px;
  color: var(--success);
  font-size: 0.68rem;
  padding: 0.1rem 0.4rem;
  cursor: pointer;
  font-weight: 600;
}
.ss-save-btn:hover { background: rgba(126,200,126,0.1); border-color: var(--success); }
.ss-list {
  max-height: 240px;
  overflow-y: auto;
}
.ss-section-label {
  padding: 0.35rem 0.5rem 0.15rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: 1px solid #333;
}
.ss-section-label:first-child { border-top: none; }
.ss-empty {
  padding: 0.6rem 0.5rem;
  font-size: 0.72rem;
  color: #555;
  text-align: center;
}
.ss-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #222;
}
.ss-item:last-child { border-bottom: none; }
.ss-item-btn {
  flex: 1;
  background: none;
  border: none;
  color: #ccc;
  font-size: 0.72rem;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: inherit;
}
.ss-item-btn:hover { background: rgba(255,255,255,0.05); color: #fff; }
.ss-item-del {
  background: none;
  border: none;
  color: #555;
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  flex-shrink: 0;
}
.ss-item-del:hover { color: var(--danger); }

.card-format {
  font-size: 0.72rem;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-rating {
  font-size: 0.65rem;
  color: #c8a83e;
  letter-spacing: 0.05em;
  margin-top: 0.15rem;
}
.card-notes-btn {
  position: absolute;
  bottom: 0.4rem;
  right: 0.4rem;
  font-size: 0.7rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.card-notes-btn:hover { opacity: 1; }
.card-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.card-meta {
  padding-top: 0.25rem;
  font-size: 0.7rem;
  color: #7a6d58;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Card type colours ── */
:root {
  --type-master:  #c49a3c;
  --type-release: #a0725a;
  --type-artist:  #5a9a8a;
  --type-label:   #7a9a5a;
}
.card-type-artist  { border-bottom: 3px solid var(--type-artist); }
.card-type-label   { border-bottom: 3px solid var(--type-label); }
.card-type-master  { border-bottom: 3px solid var(--type-master); }
.card-type-release { border-bottom: 3px solid var(--type-release); }
.card-type-artist:hover  { border-color: var(--type-artist); }
.card-type-label:hover   { border-color: var(--type-label); }
.card-type-master:hover  { border-color: var(--type-master); }
.card-type-release:hover { border-color: var(--type-release); }

/* Radio label hover + checked colours per type */
.type-radios label { transition: color 0.15s; cursor: pointer; }
.type-radios label:hover:has(input[value=""])       { color: var(--accent); }
.type-radios label:hover:has(input[value="master"])  { color: var(--type-master); }
.type-radios label:hover:has(input[value="release"]) { color: var(--type-release); }
.type-radios label:hover:has(input[value="artist"])  { color: var(--type-artist); }
.type-radios label:hover:has(input[value="label"])   { color: var(--type-label); }

.type-radios label:has(input[value=""]:checked)       { color: var(--accent); }
.type-radios label:has(input[value="master"]:checked)  { color: var(--type-master); text-shadow: 0 0 6px var(--type-master); }
.type-radios label:has(input[value="release"]:checked) { color: var(--type-release); text-shadow: 0 0 6px var(--type-release); }
.type-radios label:has(input[value="artist"]:checked)  { color: var(--type-artist); text-shadow: 0 0 6px var(--type-artist); }
.type-radios label:has(input[value="label"]:checked)   { color: var(--type-label); text-shadow: 0 0 6px var(--type-label); }
.type-radios label:has(input[value="master+"]:checked) { color: var(--type-master); text-shadow: 0 0 6px var(--type-master); }
.type-radios label:has(input[value="ai"]:checked)      { color: var(--accent); text-shadow: 0 0 6px var(--accent); }

.type-radios input[value=""]       { accent-color: var(--accent); }
.type-radios input[value="master"]  { accent-color: var(--type-master); }
.type-radios input[value="release"] { accent-color: var(--type-release); }
.type-radios input[value="artist"]  { accent-color: var(--type-artist); }
.type-radios input[value="label"]   { accent-color: var(--type-label); }

/* ── Pagination ── */
#pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

#pagination .pag-arrow {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 500;
  padding: 0.45rem 1rem;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.85rem;
}

#pagination .pag-arrow:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

#pagination .pag-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

#pagination .pag-num {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  min-width: 2.2rem;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.85rem;
}

#pagination .pag-num:hover {
  border-color: var(--accent);
  color: var(--accent);
}

#pagination .pag-num.pag-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  cursor: default;
}

#pagination .pag-ellipsis {
  color: var(--muted);
  font-size: 0.85rem;
  padding: 0 0.2rem;
}

/* ── Bio full popup ── */
#bio-full-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 160;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

#bio-full-overlay.open { display: flex; }

#bio-full-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  max-width: 620px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  position: relative;
  padding: 1.25rem 1.4rem 1.4rem;
}

#bio-full-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0.1rem 0.4rem;
  line-height: 1;
  border-radius: 4px;
}

#bio-full-close:hover { color: var(--text); background: var(--border); }

#bio-full-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.75rem;
  padding-right: 2rem;
}

#bio-full-text {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text);
}

.bio-artist-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-dim);
  cursor: pointer;
}

.bio-artist-link:hover {
  color: var(--accent2);
  border-bottom-color: var(--accent2);
}

/* ── Alternatives "more" popup ── */
#alts-popup {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  z-index: 300;
  min-width: 220px;
  max-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
#alts-popup.open { display: block; }
#alts-popup-backdrop {
  display: none;
  position: fixed; inset: 0;
  z-index: 299;
}
#alts-popup-backdrop.open { display: block; }
#alts-popup h4 {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  color: #9a8d78;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#alts-popup a {
  display: block;
  padding: 0.3rem 0;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
}
#alts-popup a:last-child { border-bottom: none; }
#alts-popup a:hover { color: var(--accent2); }

/* ── Collection / Wantlist tabs ── */
.result-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0.75rem 0;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.25rem;
}
.result-tab {
  background: none;
  border: none;
  color: var(--muted);
  padding: 0.45rem 1.4rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  transition: all 0.15s;
  flex: 1;
  text-align: center;
}
.result-tab.active {
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.result-tab:hover:not(.active) {
  color: var(--text);
  background: var(--surface);
}
.card-thumb-wrap {
  position: relative;
}
/* ── Card badge strip (right edge, fixed-position slots) ─────────── */
.card-thumb-badges {
  position: absolute;
  top: 0;
  right: 4px;
  bottom: 0;
  width: 14px;
  z-index: 2;
  pointer-events: none;
}
/* Colored dots instead of letter badges — cleaner at a glance and don't
   compete with text on the card. Each dot sits in a fixed slot on the
   right edge so relative position conveys meaning (top=C, then W, L, I).
   All badges share the same 16px footprint so masters showing a count
   sit perfectly aligned with plain release dots. */
.card-badge {
  position: absolute;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 0;
  overflow: hidden;
  text-indent: -999px;
  border: 1.5px solid;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.45);
  pointer-events: auto;
  box-sizing: border-box;
}
/* Fixed slot positions — 20px stride keeps the 16px dots from kissing. */
.badge-collection { top: 4px;   background: #6ddf70; border-color: #2a4a2b; opacity: 0; transition: opacity 0.15s; cursor: pointer; }
.badge-wantlist   { top: 24px;  background: #f0c95c; border-color: #4a3e1e; opacity: 0; transition: opacity 0.15s; cursor: pointer; }
.badge-list       { top: 44px;  background: #a0ccf0; border-color: #2a3a4a; }
.badge-inventory  { top: 64px;  background: #cda0f5; border-color: #3a2a4a; }
/* Favorite: orange dot — same style as other badge dots */
.badge-favorite {
  top: 84px; cursor: pointer; opacity: 0; transition: opacity 0.15s;
  background: var(--accent); border-color: #4a2a12;
}
.badge-favorite:hover { background: var(--accent2); }
/* Active badges always visible */
.badge-collection.is-active,
.badge-wantlist.is-active,
.badge-favorite.is-favorite { opacity: 1; }
/* Master-card variants showing the count of owned versions inside the
   dot. Same footprint as the base badge — only the text becomes visible. */
.card-badge.has-count {
  font-size: 9px;
  font-weight: 800;
  font-family: system-ui, -apple-system, sans-serif;
  text-indent: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #0a0a0a;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.45);
}
/* Show inactive C/W/F on hover — only on devices that support hover (not touch) */
@media (hover: hover) {
  .card:hover .badge-collection,
  .card:hover .badge-wantlist,
  .card:hover .badge-favorite { opacity: 1; }
  .card:hover .badge-collection:not(.is-active),
  .card:hover .badge-wantlist:not(.is-active) { opacity: 0.55; }
  .card:hover .badge-favorite:not(.is-favorite) { opacity: 0.55; }
}

/* Favorite button in modal */
.modal-act-btn.is-favorite {
  background: #2a1a0e;
  border-color: #5a3a1a;
  color: var(--accent);
}
.modal-act-btn.is-favorite:hover {
  background: #3a2210;
  border-color: #6a4a2a;
}

/* ── Filters grid (main search + collection) ── */
.filters-grid {
  display: grid;
  gap: 0.5rem;
  row-gap: 1rem;
  margin-bottom: 0.5rem;
}
.filters-grid label {
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.filters-grid input[type="text"],
.filters-grid select {
  flex: 1;
  min-width: 0;
  color-scheme: dark;
}

/* Main search: 3 columns desktop */
.main-filters { grid-template-columns: repeat(3, 1fr); }
/* Collection: 3 columns on desktop */
.cw-filters { grid-template-columns: repeat(3, 1fr); }

/* ── Mobile: 2-col grid layouts for filter forms ── */
@media (max-width: 640px) {
  /* Main search: 2 cols — natural flow gives Artist/Release, Label/Format, Year/Country, Genre/Style */
  .main-filters { grid-template-columns: repeat(2, 1fr); }

  /* Collection: 6-col grid for flexible row sizing */
  .cw-filters {
    grid-template-columns: repeat(6, 1fr);
  }
  /* Default: 2 per row (span 3 of 6) */
  .cw-filters label { grid-column: span 3; }
  /* Year/Notes/Rating row: 3 per row (span 2 of 6) */
  .cw-filters .cw-year-field,
  .cw-filters .cw-notes-field,
  .cw-filters .cw-rating-field { grid-column: span 2; }
  /* Reorder for mobile: Artist Release / Label Format / Year Notes Rating / Genre Style */
  .cw-filters label:nth-child(1) { order: 1; } /* Artist */
  .cw-filters label:nth-child(2) { order: 2; } /* Release */
  .cw-filters label:nth-child(3) { order: 3; } /* Label */
  .cw-filters .cw-notes-field    { order: 6; } /* Notes — moved after Year */
  .cw-filters label:nth-child(5) { order: 4; } /* Format */
  .cw-filters .cw-year-field     { order: 5; } /* Year */
  .cw-filters label:nth-child(7) { order: 8; } /* Genre */
  .cw-filters label:nth-child(8) { order: 9; } /* Style */
  .cw-filters .cw-rating-field   { order: 7; } /* Rating — after Notes */
}

@media (max-width: 640px) {
  #info-view   { padding-left: 0.4rem !important; padding-right: 0.4rem !important; }
  footer       { padding-left: 0.4rem; padding-right: 0.4rem; }
}

/* ── Screen-reader-only utility (hidden visually, readable by crawlers/AT) ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Account page ── */
.account-box {
  max-width: 1100px;
  margin: 2rem auto;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 2rem;
}
.account-tab-content h3 {
  font-size: 0.95rem;
  color: var(--text);
  margin: 1.4rem 0 0.5rem;
}
.account-tab-content ul {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.8;
  padding-left: 1.2rem;
}
.account-tab-content li { margin-bottom: 0.3rem; }
.account-box h2 { margin-top: 0; font-size: 1.2rem; color: var(--text); }
.account-box p  { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.account-box a  { color: #aaa; }
.token-form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.2rem; }
.token-form input[type="text"] { font-family: monospace; font-size: 0.85rem; }
.token-status { font-size: 0.82rem; color: var(--muted); margin-top: 0.3rem; }
.token-status.ok { color: var(--success); }
.danger-btn { background: #5a1a1a; border-color: #7a2a2a; color: #e88; }
.danger-btn:hover { background: #7a2a2a; }
#clerk-sign-in { margin-top: 1rem; }
#auth-section { display: none; }
#signed-out-section { display: none; }

/* Hide Clerk's built-in "Have an account? Sign in" footer links inside the
   invite-only splash waitlist widget. Clerk's appearance.elements API only
   sets inline styles that can lose specificity battles with its own CSS —
   a real stylesheet rule with !important is reliable. The splash has its
   own "Already approved? Sign in" link underneath that opens our in-page
   modal via openSignInModal(), so the Clerk footer is redundant and leaks
   users into Clerk's hosted pages. */
#splash-waitlist-mount .cl-footer,
#splash-waitlist-mount .cl-footerAction,
#splash-waitlist-mount .cl-footerActionText,
#splash-waitlist-mount .cl-footerActionLink {
  display: none !important;
}
.user-email { color: #aaa; font-size: 0.85rem; margin-bottom: 1.2rem; }
.section-divider { border: none; border-top: 1px solid #333; margin: 1.5rem 0; }

/* ── Admin tab bar ── */
.admin-tab-bar {
  display: flex; gap: 0; margin: 1rem 0 0; border-bottom: 1px solid var(--border);
}
.admin-tab {
  padding: 0.45rem 1rem; font-size: 0.78rem; font-weight: 600;
  background: none; border: 1px solid transparent; border-bottom: none;
  color: #888; cursor: pointer; border-radius: 6px 6px 0 0;
  transition: color 0.15s, background 0.15s;
}
.admin-tab:hover { color: var(--fg); background: rgba(255,255,255,0.03); }
.admin-tab.active {
  color: var(--accent); background: var(--surface-raised);
  border-color: var(--border); margin-bottom: -1px; padding-bottom: calc(0.45rem + 1px);
}
.admin-tab-panel { padding: 1rem 0; }
.admin-refresh-btn {
  background: none; border: 1px solid #333; border-radius: 4px;
  color: #888; font-size: 1rem; cursor: pointer; padding: 0.1rem 0.4rem;
  line-height: 1; transition: color 0.15s, border-color 0.15s;
}
.admin-refresh-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ── Load More ── */
.load-more-wrap {
  text-align: center;
  padding: 1.2rem 0;
}
.load-more-btn {
  display: inline-block;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent);
  padding: 0.45rem 1.5rem;
  cursor: pointer;
  font-size: 0.82rem;
  text-decoration: none;
  transition: border-color 0.2s, opacity 0.2s;
}
.load-more-btn:hover {
  border-color: var(--accent);
}
.load-more-btn.loading {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Consistent footer ── */
footer {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════
   LOADING SKELETONS
   ══════════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--border) 50%, var(--bg-elevated) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite ease-in-out;
  border-radius: var(--radius);
}
.skeleton-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.skeleton-thumb {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--border) 50%, var(--bg-elevated) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite ease-in-out;
}
.skeleton-line {
  height: 12px;
  margin: 6px 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--border) 50%, var(--bg-elevated) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite ease-in-out;
}
.skeleton-line.short { width: 60%; }
.skeleton-line.shorter { width: 40%; }

/* ══════════════════════════════════════════════
   VIEW TRANSITIONS
   ══════════════════════════════════════════════ */
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.view-enter {
  animation: viewFadeIn 0.2s ease-out both;
}

/* ══════════════════════════════════════════════
   CARD LOAD ANIMATIONS
   ══════════════════════════════════════════════ */
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card-animate {
  animation: cardFadeIn 0.3s ease both;
  animation-delay: calc(var(--i, 0) * 30ms);
}

/* ══════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ══════════════════════════════════════════════ */
#toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 0.65rem 1rem;
  border-radius: 6px;
  font-size: 0.82rem;
  color: #fff;
  max-width: 340px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  animation: toastIn 0.3s ease both;
}
.toast-removing {
  animation: toastOut 0.3s ease both;
}
@keyframes toastIn  { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(40px); } }
.toast-error   { background: #c0392b; }
.toast-warning { background: #e67e22; }
.toast-success { background: #27ae60; }
.toast-info    { background: #2980b9; }
.toast-with-action { display: flex; align-items: center; gap: 0.5rem; }
.toast-action-btn {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.toast-action-btn:hover { background: rgba(255, 255, 255, 0.3); }
@media (max-width: 640px) {
  #toast-container { top: auto; bottom: 1rem; left: 1rem; right: 1rem; align-items: stretch; }
  .toast { max-width: none; font-size: 0.88rem; padding: 0.75rem 1rem; }
  .toast-action-btn { font-size: 0.85rem; padding: 0.4rem 0.8rem; }
}

/* ══════════════════════════════════════════════
   SCROLL TO TOP
   ══════════════════════════════════════════════ */
#scroll-top-btn {
  position: fixed;
  bottom: 5.75rem;
  right: 1.5rem;
  z-index: 500;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
#scroll-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
}
#scroll-top-btn:hover {
  border-color: var(--accent);
}

/* ══════════════════════════════════════════════
   EMPTY STATES
   ══════════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  grid-column: 1 / -1;
}
.empty-state-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  opacity: 0.5;
}
.empty-state-title {
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.empty-state-subtitle {
  font-size: 0.82rem;
  color: var(--muted);
}

/* ══════════════════════════════════════════════
   FOOTER (redesigned)
   ══════════════════════════════════════════════ */
.footer-grid {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 1.5rem;
  text-align: left;
}
.footer-col h4 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.footer-col a {
  display: block;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.78rem;
  padding: 0.15rem 0;
  transition: color 0.15s;
}
.footer-col a:hover {
  color: var(--accent);
}
@media (max-width: 640px) {
  .footer-grid { gap: 1.5rem; flex-wrap: wrap; }
}

/* Search info row — single line on desktop, stacked on mobile */
.search-info-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.4rem;
  min-height: 1em;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 2.2;
}
.search-info-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 0;
}
.search-info-cell:first-child {
  flex-shrink: 0;
}
.search-info-cell:nth-child(2) {
  text-align: center;
}
.search-info-ai {
  font-style: italic;
  text-align: right;
}
@media (max-width: 640px) {
  .search-info-row {
    flex-direction: column;
    gap: 0;
    line-height: 1.8;
  }
  .search-info-cell {
    white-space: normal;
    text-align: left;
  }
}

/* ── Inventory toolbar + per-card edit actions ────────────────────────── */
.inventory-toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0.5rem 0 0.75rem 0;
  flex-wrap: wrap;
}
.inv-new-btn,
.inv-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
}
.inv-new-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.inv-new-btn:hover { filter: brightness(1.1); }
.inv-refresh-btn:hover { background: var(--bg-hover); }

.inv-card-wrap {
  position: relative;
}
.inv-card-actions {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  gap: 4px;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.15s;
}
.inv-card-wrap:hover .inv-card-actions,
.inv-card-wrap:focus-within .inv-card-actions {
  opacity: 1;
}
.inv-card-edit {
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv-card-edit:hover { background: rgba(0, 0, 0, 0.9); }
@media (max-width: 640px) {
  .inv-card-actions { opacity: 0.85; }
}

/* ── Inventory editor modal ───────────────────────────────────────────── */
#inventory-editor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
}
#inventory-editor-panel {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: min(680px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.inv-editor-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
}
.inv-editor-title {
  margin: 0 0 0.75rem 0;
  font-size: 1.2rem;
}
.inv-editor-release {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.85rem;
  font-size: 0.9rem;
}
.inv-editor-release-name { font-weight: 600; }
.inv-editor-release-id { opacity: 0.7; font-size: 0.82rem; margin-top: 2px; }
.inv-release-results {
  margin-top: 0.5rem;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}
.inv-release-loading {
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.inv-release-result {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.4rem 0.55rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.inv-release-result:last-child { border-bottom: none; }
.inv-release-result:hover { background: var(--bg-elevated); }
.inv-release-result img,
.inv-release-thumb-ph {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 4px;
  background: #222;
  flex-shrink: 0;
}
.inv-release-info { flex: 1; min-width: 0; }
.inv-release-title {
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-release-meta {
  font-size: 0.76rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 0.9rem;
}
.inv-editor-label {
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
  opacity: 0.85;
  gap: 4px;
}
.inv-editor-label input[type="text"],
.inv-editor-label input[type="number"],
.inv-editor-label select,
.inv-editor-label textarea {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.4rem 0.55rem;
  font-size: 0.9rem;
  font-family: inherit;
}
/* Force dark styling on the expanded option list. Chrome/Edge honor
   color-scheme on :root, but Firefox still needs explicit option colors. */
.inv-editor-label select option,
.inv-editor-label select optgroup {
  background: var(--surface);
  color: var(--text);
}
.inv-editor-label textarea { resize: vertical; }
.inv-editor-wide { grid-column: 1 / -1; }
.inv-editor-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.inv-price-row {
  display: flex;
  gap: 6px;
}
.inv-price-row input[type="number"] { flex: 1; }
.inv-price-row select { width: 80px; }
.inv-editor-suggest {
  padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 5px;
  cursor: pointer;
}
.inv-editor-link {
  background: transparent;
  border: none;
  color: var(--link);
  cursor: pointer;
  padding: 4px 0 0 0;
  font-size: 0.85rem;
  text-decoration: underline;
}
.inv-price-suggestions {
  margin-top: 0.8rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
}
.inv-ps-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}
.inv-editor-error {
  margin-top: 0.8rem;
  background: rgba(200, 40, 40, 0.15);
  border: 1px solid rgba(200, 40, 40, 0.6);
  color: #ffb3b3;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.88rem;
}
.inv-editor-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  align-items: center;
}
.inv-editor-cancel,
.inv-editor-save,
.inv-editor-delete {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
}
.inv-editor-save {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.inv-editor-save:hover { filter: brightness(1.1); }
.inv-editor-delete {
  background: #8a1f1f;
  border-color: #8a1f1f;
  color: #fff;
}
.inv-editor-delete:hover { background: #a42525; }

@media (max-width: 640px) {
  .inv-editor-grid { grid-template-columns: 1fr; }
  #inventory-editor-panel {
    max-height: 100vh;
    border-radius: 0;
    width: 100%;
  }
  #inventory-editor-overlay { padding: 0; }
}

#inv-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10010;
  padding: 1rem;
}
#inv-confirm-panel {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  width: min(420px, 100%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

/* ── Seller Orders section on Account page ───────────────────────────── */
#orders-section { margin-top: 1rem; }
.ord-pill {
  padding: 0.3rem 0.7rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.8rem;
}
.ord-pill-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.ord-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  margin-bottom: 0.4rem;
  cursor: pointer;
  flex-wrap: wrap;
}
.ord-row:hover { border-color: var(--accent); }
.ord-row-main {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.ord-row-id { font-family: monospace; font-size: 0.85rem; }
.ord-row-buyer { color: var(--muted); font-size: 0.85rem; }
.ord-row-meta {
  display: flex;
  gap: 0.9rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.ord-chip {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.ord-chip-new { background: #2d4a6e; color: #cfe4ff; }
.ord-chip-pending { background: #6e5a2d; color: #ffe7b3; }
.ord-chip-progress { background: #2d6e42; color: #c3ffd8; }
.ord-chip-shipped { background: #2e7d32; color: #fff; }
.ord-chip-cancelled { background: #6e2d2d; color: #ffd0d0; }
.ord-chip-refund { background: #6e4a2d; color: #ffddbb; }
.ord-pager {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin-top: 0.6rem;
  font-size: 0.85rem;
}
.ord-pager button {
  padding: 0.3rem 0.7rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 5px;
  cursor: pointer;
}
.ord-pager button[disabled] { opacity: 0.4; cursor: default; }

/* Order detail modal */
#order-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  padding: 1rem;
}
#order-detail-panel {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: min(720px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  position: relative;
}
.ord-detail-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1.6rem;
  cursor: pointer;
}
.ord-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1rem;
  margin-bottom: 1rem;
}
.ord-detail-wide { grid-column: 1 / -1; }
.ord-detail-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 2px;
}
.ord-detail-section { margin-top: 1rem; }
.ord-detail-section h3 {
  font-size: 0.95rem;
  margin: 0 0 0.5rem 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.25rem;
}
.ord-detail-items {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ord-detail-item {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.4rem;
  background: var(--bg);
  border-radius: 5px;
}
.ord-detail-item img,
.ord-thumb-ph {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  background: #222;
}
.ord-detail-item-body { flex: 1; min-width: 0; }
.ord-msgs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 260px;
  overflow-y: auto;
}
.ord-msg {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.5rem 0.65rem;
}
.ord-msg-head {
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}
.ord-msg-subj { font-weight: 600; font-size: 0.85rem; }
.ord-msg-body { font-size: 0.88rem; white-space: pre-wrap; }
#ord-status-select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.35rem 0.5rem;
}
.ord-btn-primary {
  padding: 0.4rem 0.9rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
}
.ord-btn-primary:hover { filter: brightness(1.1); }

@media (max-width: 640px) {
  .ord-detail-grid { grid-template-columns: 1fr; }
  #order-detail-panel { max-height: 100vh; border-radius: 0; }
  #order-detail-overlay { padding: 0; }
  .ord-row { flex-direction: column; align-items: flex-start; }
}

/* --- Orders: unread indicators + quick reply --- */
.orders-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.ord-row-unread {
  background: rgba(255, 107, 53, 0.06);
  border-left: 3px solid var(--accent);
}
.ord-unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 0.35rem;
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.25);
}
.ord-row-clickarea {
  cursor: pointer;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  min-width: 0;
}
.ord-row-quick {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  margin-left: 0.5rem;
}
.ord-quick-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.ord-quick-toggle:hover { background: #2a2a30; }
.ord-quick-panel {
  width: 260px;
  background: #15151a;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem;
}
.ord-quick-panel textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 0.35rem;
  font-family: inherit;
  font-size: 0.82rem;
  resize: vertical;
  box-sizing: border-box;
}
.ord-quick-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.ord-quick-actions button {
  font-size: 0.78rem;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.ord-quick-actions button.ord-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  font-weight: 600;
}

@media (max-width: 640px) {
  .ord-quick-panel { width: 100%; }
  .ord-row-quick { margin-left: 0; width: 100%; align-items: stretch; }
}

/* --- Profile panel (account page) --- */
.profile-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-top: 1.25rem;
  margin-bottom: 1rem;
}
.profile-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #2a2a30;
  flex-shrink: 0;
}
.profile-avatar-ph {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #2a2a30;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #888;
  flex-shrink: 0;
}
.profile-head-text {
  flex: 1;
  min-width: 0;
}
.profile-name {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.15rem;
}
.profile-sub {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}
.profile-sub strong { color: var(--fg); }
.profile-head-actions {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-end;
  flex-shrink: 0;
}
.profile-refresh {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 1rem;
}
.profile-refresh:hover { background: #2a2a30; }
.profile-refresh:disabled { opacity: 0.5; cursor: default; }
.profile-disconnect {
  background: transparent;
  border: 1px solid #3a3a42;
  color: #9a9aa3;
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  font-size: 0.7rem;
  cursor: pointer;
  white-space: nowrap;
}
.profile-disconnect:hover { border-color: var(--danger); color: var(--danger); }
.profile-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 0.35rem;
  letter-spacing: 0.03em;
}
.profile-badge-oauth { background: var(--success-bg); color: #4caf50; }
.profile-badge-pat   { background: #2a2a1a; color: var(--warning); }
.profile-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.profile-stat {
  background: #15151a;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.4rem;
  text-align: center;
}
.profile-stat-num {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fg);
}
.profile-stat-label {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 0.15rem;
}
.profile-seller {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}
.profile-seller strong { color: var(--fg); }
.profile-stars { color: #f5c518; letter-spacing: 1px; }

@media (max-width: 640px) {
  .profile-stats { grid-template-columns: repeat(3, 1fr); }
  .profile-avatar, .profile-avatar-ph { width: 52px; height: 52px; }
  .profile-name { font-size: 1rem; }
}

/* ── Library of Congress view ─────────────────────────────────────────── */
#loc-view { padding: 1rem 0 4rem; }
.loc-header { margin-bottom: 1rem; }
.loc-title {
  font-size: 1.4rem;
  color: var(--accent);
  margin: 0 0 0.35rem;
  letter-spacing: 0.01em;
}
.loc-sub {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 0.85rem;
  line-height: 1.5;
}
.loc-tabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}
.loc-tab {
  background: none;
  border: 1px solid transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.loc-tab:hover { color: var(--text); }
.loc-tab.active {
  color: var(--accent);
  border-color: var(--border);
  background: var(--surface);
}

.loc-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.9rem;
}
.loc-form-row {
  display: flex;
  gap: 0.5rem;
}
.loc-form-row input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 5px;
  padding: 0.55rem 0.75rem;
  font: inherit;
  font-size: 0.85rem;
}
.loc-form-row input:focus { outline: none; border-color: var(--accent); }
.loc-submit {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--surface-sunken);
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 1.3rem;
  border-radius: 5px;
  cursor: pointer;
}
.loc-submit:hover:not(:disabled) { background: var(--accent2); }
.loc-submit:disabled { opacity: 0.5; cursor: wait; }
.loc-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem 0.7rem;
}
.loc-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  min-width: 0;
}
.loc-form-grid label > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loc-form-grid input,
.loc-form-grid select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 0.4rem 0.55rem;
  font: inherit;
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0;
  /* Override sitewide `select { height: var(--input-h) }` so padding
     controls the box — otherwise the 28px fixed height clips text. */
  height: auto;
  line-height: normal;
}
.loc-form-grid input:focus,
.loc-form-grid select:focus { outline: none; border-color: var(--accent); }
/* Icon-only "Playable only" toggle in the search row. The checkbox
   itself is hidden; the label renders as a small button and changes
   color when :has(input:checked). */
.loc-playable-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.loc-playable-btn input { display: none; }
.loc-playable-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.loc-playable-btn:has(input:checked) {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.loc-playable-icon {
  font-size: 1.1rem;
  line-height: 1;
  pointer-events: none;
}

/* Sort + Per Page combined into one grid cell to save a row on desktop.
   On mobile the 2-col grid still holds because the cell behaves like any
   other — the row flex inside keeps both selects on one line. */
.loc-form-split-row {
  display: flex;
  gap: 0.4rem;
}
.loc-form-split-row select { flex: 1; min-width: 0; }
.loc-form-split-row .loc-perpage-select { flex: 0 0 4rem; }

.loc-status {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
  min-height: 1.1rem;
}

/* LOC cards now reuse the main .card grid layout. These rules only add
   the LOC-specific thumb play overlay and badge colors. */
.loc-results { min-height: 4rem; }

.loc-thumb-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s, background 0.15s;
  cursor: pointer;
  z-index: 3;
  line-height: 1;
  padding-left: 0.15rem;
}
.card:hover .loc-thumb-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.loc-thumb-play:hover { background: var(--accent); color: var(--surface-sunken); }

/* Star badge inside the card-thumb-badges bar (same pattern as C/W/F) */
.loc-save-badge,
.loc-remove-badge {
  cursor: pointer;
  font-size: 0.85rem;
}
.loc-save-badge.is-saved { color: var(--accent-hi); border-color: var(--accent-hi); }
.loc-remove-badge:hover { color: var(--danger-bright); border-color: var(--danger-bright); }

.loc-pagination {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
  padding: 1rem 0 0.3rem;
}
.loc-page-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.42rem 0.95rem;
  border-radius: 5px;
  cursor: pointer;
}
.loc-page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.loc-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.loc-page-info { font-size: 0.78rem; color: var(--muted); }

.loc-skeleton {
  height: 110px;
  background: linear-gradient(90deg, var(--surface) 25%, var(--bg-hover) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius);
}
.loc-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  font-style: italic;
}
.loc-saved-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.55rem;
}
.loc-saved-title {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 600;
}
.loc-saved-count { color: var(--muted); font-weight: 400; }
.loc-refresh-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
}
.loc-refresh-btn:hover { color: var(--accent); border-color: var(--accent); }

.loc-saved-toolbar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.loc-saved-filter-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 5px;
  padding: 0.45rem 0.7rem;
  font: inherit;
  font-size: 0.82rem;
}
.loc-saved-filter-input:focus { outline: none; border-color: var(--accent); }
.loc-saved-sort {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 5px;
  padding: 0.45rem 0.55rem;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  height: auto;
  line-height: normal;
}
.loc-saved-sort:focus { outline: none; border-color: var(--accent); }

/* Trash icon shown in place of the ★ on Saved-tab cards. Uses the same
   base size as .loc-save-btn so the card layout stays identical. */
.loc-remove-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.12s, border-color 0.12s;
}
.loc-remove-btn:hover:not(:disabled) {
  color: var(--danger-bright);
  border-color: var(--danger-bright);
}
.loc-remove-btn:disabled { opacity: 0.35; cursor: wait; }

/* ── LOC audio bar (fixed bottom) ───────────────────────────────────── */
.loc-audio-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: none;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.9rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}
.loc-audio-bar.is-visible { display: flex; }
.loc-audio-bar-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 0 1 260px;
}
.loc-audio-bar-icon {
  color: var(--accent);
  font-size: 1.2rem;
}
.loc-audio-bar-title {
  font-size: 0.82rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.loc-audio {
  flex: 1;
  height: 36px;
  min-width: 0;
}
.loc-audio-bar-close {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}
.loc-audio-bar-close:hover { color: var(--text); border-color: var(--accent); }
.loc-audio-bar-queue-nav,
.loc-audio-bar-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}
.loc-audio-bar-save.is-saved {
  color: var(--favorite);
  border-color: var(--favorite);
}
.loc-audio-bar-nav {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.loc-audio-bar-nav:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.loc-audio-bar-nav:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── LOC info popup overlay ───────────────────────────────────────── */
.loc-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 240;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.loc-info-overlay.open { display: flex; }
.loc-info-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 640px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.75);
  padding: 1.1rem 1.2rem 1.3rem;
}
.loc-info-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  z-index: 2;
}
.loc-info-close:hover { color: var(--text); background: var(--border); }
.loc-info-head {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-right: 2rem;
}
.loc-info-thumb {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--bg);
  flex-shrink: 0;
}
.loc-info-thumb-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--muted);
  background: linear-gradient(135deg, var(--surface-raised), var(--surface-sunken));
}
.loc-info-head-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.loc-info-title {
  font-size: 1.2rem;
  color: var(--fg);
  font-weight: 700;
  line-height: 1.2;
}
.loc-info-artist {
  font-size: 0.92rem;
  color: var(--text);
  opacity: 0.85;
}
.loc-info-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}
.loc-info-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.45rem 0.9rem;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.loc-info-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.loc-info-btn.is-disabled { opacity: 0.4; cursor: not-allowed; }
.loc-info-btn-play {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface-sunken);
  font-weight: 700;
}
.loc-info-btn-play:hover:not(:disabled) { background: var(--accent2); color: var(--surface-sunken); }
.loc-info-btn-save.is-saved {
  color: var(--accent-hi);
  border-color: var(--accent-hi);
}
.loc-info-btn-loc {
  color: var(--muted);
}
.loc-info-summary {
  font-size: 0.85rem;
  color: var(--text);
  font-style: italic;
  line-height: 1.5;
  padding: 0.7rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  margin-bottom: 1rem;
}
.loc-info-section { margin-bottom: 1rem; }
.loc-info-section-title {
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
}
.loc-info-list {
  list-style: disc;
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.5;
}
.loc-info-list li { margin-bottom: 0.15rem; }
.loc-info-list-inline {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
}
.loc-info-list-inline li {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.15rem 0.5rem;
  font-size: 0.76rem;
  color: var(--muted);
  margin-bottom: 0;
}
.loc-info-article {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.55;
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.7rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  white-space: pre-wrap;
}

/* ── LOC tracklist inside info popup ─────────────────────────────── */
.loc-tracklist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 22rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
}
.loc-track-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.82rem;
  color: var(--text);
}
.loc-track-row:last-child { border-bottom: none; }
.loc-track-row:hover { background: var(--bg-elevated); }
.loc-track-play {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 0.8rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
}
.loc-track-play:hover { background: var(--accent); color: var(--surface-sunken); }
.loc-track-num {
  color: var(--muted);
  font-size: 0.72rem;
  min-width: 1.8rem;
  text-align: right;
}
.loc-track-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loc-track-dur {
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

/* Clickable title link in the LOC info popup header. Same visual
   weight as the plain <div> it replaces — just gains hover underline. */
.loc-title-link {
  color: inherit;
  text-decoration: none;
}
.loc-title-link:hover {
  color: var(--accent);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--muted);
}
.loc-info-title {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  flex-wrap: wrap;
}

/* ── Speakers / participants — mirrors .album-credits layout ─────── */
.loc-speaker-credits {
  padding: 0.25rem 0;
  font-size: 0.82rem;
  line-height: 1.7;
}
/* The artist line under the title uses the same credit-name format
   as .loc-speaker-credits so multiple contributors are each clickable. */
.loc-info-artist {
  padding: 0.1rem 0 0.25rem;
  line-height: 1.6;
}
/* Use the same base credit-name color from the main search modal */
.loc-credit-name { font-size: 0.88rem; }
/* Discogs / Collection magnifying-glass icons get theme-adjacent colors
   so you can tell them apart at a glance. Hover lights them up. */
.loc-credit-discogs  { color: var(--accent-hi);  margin-left: 0.15rem; }
.loc-credit-discogs:hover  { color: var(--accent); }
.loc-credit-collection { color: var(--success); margin-left: 0.1rem; }
.loc-credit-collection:hover { color: var(--accent); }

/* LOC reuses the shared .saved-search-wrap / .saved-search-dropdown
   styles from the main search UI — no overrides needed. */
.loc-info-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
}
.loc-info-row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.6rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
}
.loc-info-row:last-child { border-bottom: none; }
.loc-info-key {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-top: 0.1rem;
}
.loc-info-val {
  color: var(--text);
  word-break: break-word;
}
.loc-info-credit {
  margin-top: 1rem;
  padding: 0.6rem 0.85rem;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 5px;
}
.loc-info-credit-label {
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}
.loc-info-credit-text {
  font-size: 0.8rem;
  color: var(--text);
  font-style: italic;
}
.loc-attribution-link {
  color: var(--accent);
  text-decoration: none;
}
.loc-attribution-link:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .loc-form-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .loc-form-grid label { font-size: 0.62rem; }
  .loc-audio-bar { padding: 0.4rem 0.55rem; gap: 0.5rem; }
  .loc-audio-bar-info { flex: 0 0 auto; max-width: 40%; }
  .loc-audio-bar-title { font-size: 0.75rem; }
  .loc-info-box { padding: 0.8rem; }
  .loc-info-head { flex-direction: column; gap: 0.7rem; padding-right: 1.5rem; }
  .loc-info-thumb { width: 100%; max-width: 200px; height: auto; aspect-ratio: 1; }
  .loc-info-title { font-size: 1.05rem; }
  .loc-info-row { grid-template-columns: 1fr; gap: 0.15rem; }
}