:root {
  --bg: #080808;
  --bg-elevated: #000;
  --card: #111111;
  --card-hover: #1a1a1a;
  --border: #222;
  --border-hover: #333;
  --text: #fff;
  --text-sec: #d0d0d0;
  --text-muted: #b0b0b0;
  --gold: #A8B8C8;
  --gold-soft: rgba(168, 184, 200, 0.12);
  --silver: #A8B8C8;
  --silver-soft: rgba(168, 184, 200, 0.12);
  --red: #e05555;
  --red-soft: #ff6b6b;
  --green: #4ade80;
  --hhv: #A8B8C8;
  --deejay: #e0e0e0;
  --phonica: #ff6b6b;
  --hardwax: #e07020;
  --juno: #4dabf7;
  --decks: #a0d911;
  --ttlab: #be4bdb;
  --uvs: #20c997;
  --yoyaku: #ffd43b;
  --gramaphone: #c8102e;
  --further: #d97706;
  --octopus: #3a9bd5;
  --discogs: #A8B8C8;
  --radius: 6px;
  --radius-lg: 10px;
}

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

/* ── Typography overrides: Inter for all body/UI text, Oswald only for display ── */
p, li, span:not(.stat-value):not(.accent), small, label,
.card-title, .card-artist, .card-label, .card-notes, .card-subtitle,
.card-body, .card-desc, .record-title, .record-artist,
.empty-state, .empty-msg, .section-subtitle, .section-desc,
.auth-status, .user-bar-name, .progress-info, .loading-msg,
.mtc-track-label, .mtc-track-artist, .mtc-track-row,
input, textarea, select, button:not([class*="scan-btn"]):not([class*="nav-btn"]):not([class*="goldie"]) {
  font-family: 'Inter', sans-serif;
}

/* Section label / uppercase micro text stays Oswald */
.section-label, .card-store-tag, .tag-badge, .live-badge,
.price, .card-price, .record-price, h1, h2, h3 {
  font-family: 'Oswald', sans-serif;
}

/* Remove font-weight 300 globally — too thin on dark backgrounds */
[style*="font-weight: 300"], [style*="font-weight:300"] { font-weight: 400 !important; }

/* Theme flash overlay — covers the screen during day/night transition */
#themeFlash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */

.header {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 16px 28px 14px;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header h1 {
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--text);
}

.header h1 span {
  color: var(--gold);
  text-shadow: 0 0 20px rgba(168, 184, 200, 0.3);
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red);
  color: #fff;
  padding: 3px 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 2px;
}

/* ── Persistent optimizer cart pill in navbar ─────────────────────────────── */
.nav-cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(168, 184, 200,0.12);
  border: 1px solid rgba(168, 184, 200,0.35);
  color: var(--gold);
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.nav-cart-pill:hover { background: rgba(168, 184, 200,0.2); border-color: var(--gold); }
.nav-cart-icon { font-size: 13px; }
.nav-cart-total { font-weight: 600; }
.nav-cart-cov {
  font-size: 10px;
  opacity: 0.7;
  padding-left: 2px;
}
.light .nav-cart-pill { background: rgba(150, 168, 188,0.08); border-color: rgba(150, 168, 188,0.3); }

.live-dot {
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.stats {
  display: flex;
  gap: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.stats .stat-value {
  font-family: 'Oswald', sans-serif;
  color: var(--silver);
  font-weight: 600;
  margin-right: 4px;
  font-size: 14px;
}

.timestamp {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  max-width: 340px;
  text-align: right;
}

/* USERNAME INPUT */
.scan-section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.username-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  padding: 10px 16px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  width: 260px;
  outline: none;
  letter-spacing: 0;
  transition: all 0.2s;
  border-radius: var(--radius);
}

.username-input::placeholder {
  color: var(--text-muted);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.6;
}

.username-input:focus {
  border-color: var(--gold);
  background: rgba(168, 184, 200, 0.04);
  box-shadow: 0 0 0 3px rgba(168, 184, 200, 0.06);
}

.scan-btn {
  background: var(--gold);
  border: none;
  color: #000;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 28px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: var(--radius);
}

.scan-btn:hover {
  background: #c4d4e4;
  box-shadow: 0 4px 16px rgba(168, 184, 200, 0.3);
  transform: translateY(-1px);
}

.scan-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.rescan-btn {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 10px;
  padding: 10px 20px;
}

.rescan-btn:hover {
  background: var(--gold-soft);
  box-shadow: none;
  transform: none;
}

/* PROGRESS BAR — Claude-style thinking animation */
.progress-section {
  display: none;
  margin-bottom: 10px;
}

.progress-section.active { display: block; }

.progress-bar-track {
  background: var(--border);
  height: 3px;
  width: 100%;
  margin-bottom: 8px;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.progress-bar-fill {
  background: linear-gradient(90deg, var(--silver), #c8d8e8);
  height: 100%;
  width: 0%;
  transition: width 0.3s ease;
  border-radius: 2px;
  position: relative;
}

/* Shimmer sweep across the progress bar */
.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  animation: shimmer 1.8s ease-in-out infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Thinking dots */
.thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.thinking-dots .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  animation: thinking 1.4s ease-in-out infinite;
}

.thinking-dots .dot:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinking {
  0%, 80%, 100% { opacity: 0.15; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.2); }
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.progress-current {
  margin-top: 8px;
  transition: opacity 0.2s ease;
}
.progress-current.msg-fade { opacity: 0.3; }
.progress-current .progress-item-name {
  display: block;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.progress-current .loading-msg {
  display: block;
  color: var(--gold);
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.8px;
  margin-top: 4px;
  opacity: 0.7;
}

/* CONTROLS */
.controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.search-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  padding: 8px 14px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  width: 240px;
  outline: none;
  letter-spacing: 0;
  transition: all 0.2s;
  border-radius: var(--radius);
}

.search-box::placeholder {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 2px;
}

.search-box:focus {
  border-color: var(--gold);
  background: rgba(168, 184, 200, 0.04);
}

.sort-select {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  padding: 8px 12px;
  color: var(--text-sec);
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  outline: none;
  cursor: pointer;
  border-radius: var(--radius);
  transition: border-color 0.2s;
}

.sort-select:hover { border-color: var(--border-hover); }
.sort-select option { background: var(--bg-elevated); color: var(--text); }

.filter-btn {
  background: transparent;
  border: 1px solid var(--border);
  padding: 6px 14px;
  color: var(--text-muted);
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: var(--radius);
}

.filter-btn:hover { border-color: var(--text-sec); color: var(--text-sec); }
.filter-btn.active { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }

.filter-toggle-mobile { display: none; }

/* Genre / Style Tag Filters — horizontal scrollable */
.tag-filter-section {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.tag-filter-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 72px;
}

.tag-filter-tags {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
  flex: 1;
  mask-image: linear-gradient(to right, transparent 0, #000 0%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 0%, #000 92%, transparent 100%);
}

.tag-filter-tags::-webkit-scrollbar { display: none; }

.tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
  /* Availability-based intensity: subtle orange glow scales with --tag-intensity */
  border-color: rgba(168, 184, 200, calc(var(--tag-intensity, 0) * 0.003 + 0.08));
  color: color-mix(in srgb, var(--text-muted) calc(100% - var(--tag-intensity, 0) * 0.4%), var(--gold) calc(var(--tag-intensity, 0) * 0.4%));
}

.tag-badge:hover {
  border-color: var(--text-sec);
  color: var(--text);
}

.tag-badge.active {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-soft);
}

.tag-badge .tag-count {
  opacity: 0.5;
  font-weight: 400;
  font-size: 9px;
}

.tag-badge .tag-stock {
  font-size: 8px;
  font-weight: 400;
  color: var(--gold);
  opacity: 0.6;
}

/* Store logos */
.store-logo {
  width: 14px;
  height: 14px;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: 2px;
  opacity: 0.85;
  filter: grayscale(30%);
}

.store-row:hover .store-logo { opacity: 1; filter: none; }

.store-filter {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

/* ── Results hero ── */
.results-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
  margin: 20px 0 0;
  background: #0d0d0d;
  border: 1px solid #1e1e1e;
  border-radius: 12px;
}
.results-hero-body { display: flex; flex-direction: column; gap: 4px; }
.results-hero-count {
  font-family: 'Oswald', sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  color: var(--silver);
  letter-spacing: -1px;
}
.results-hero-label {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
}
.results-hero-sub {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
.results-hero-cta {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--silver);
  color: #000;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.results-hero-cta:hover { background: #c4d4e4; transform: translateY(-1px); }

/* ── In Stock By Store summary ── */
.wl-store-summary {
  background: #0d0d0d;
  border: 1px solid #1e1e1e;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 16px 0 0;
}
.wl-summary-title {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 14px;
}
.wl-summary-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 32px;
}
.wl-sbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 5px 6px;
  border-radius: 5px;
  transition: background 0.12s;
  min-width: 0;
}
.wl-sbar-row:hover { background: #181818; }
.wl-sbar-label {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 120px;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wl-sbar-label img {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  object-fit: contain;
  flex-shrink: 0;
}
.wl-sbar-track {
  flex: 1;
  height: 4px;
  background: #1e1e1e;
  border-radius: 2px;
  overflow: hidden;
  max-width: 120px;
}
.wl-sbar-fill {
  height: 100%;
  background: var(--silver);
  border-radius: 2px;
  opacity: 0.65;
  transition: width 0.4s ease;
}
.wl-sbar-count {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  width: 22px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Store selector ── */
.wl-stores-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-top: 4px;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text-muted);
  opacity: 0.5;
}

.store-badge .store-name { font-weight: 500; }
.store-badge .count {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--silver);
}
.store-badge { border-color: var(--border); }
.store-badge.active {
  border-color: rgba(168, 184, 200, 0.5);
  background: rgba(168, 184, 200, 0.06);
  color: var(--text);
  opacity: 1;
}

/* DISCOGS STORE ROW */
.store-row.discogs .store-name { color: var(--discogs); }

/* ═══════════════════════════════════════════════════════════════
   CONTAINER & GRID
   ═══════════════════════════════════════════════════════════════ */

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 28px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════════════════ */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  transition: all 0.2s;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

/* Cards with items in stock get a subtle green top border */
.card.has-stock {
  border-top: 2px solid var(--green);
}

.card.no-stock {
  opacity: 0.65;
}

.card.no-stock:hover { opacity: 1; }

.card:hover {
  border-color: var(--border-hover);
  background: var(--card-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

.card.has-stock:hover {
  box-shadow: 0 12px 32px rgba(74,222,128,0.08), 0 4px 12px rgba(0,0,0,0.3);
}

.card-header {
  margin-bottom: 14px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.card-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  flex-shrink: 0;
  background: #222;
  border-radius: 4px;
}

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

.card-artist {
  font-size: 15px; font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 2px;
  line-height: 1.2;
}

.card-title {
  font-size: 13px; font-weight: 400;
  color: var(--text-sec);
  letter-spacing: 0.5px;
}

.card-meta {
  display: flex; gap: 8px; margin-top: 6px;
  font-size: 10px; font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.card-meta span::after { content: '/'; margin-left: 8px; color: #333; }
.card-meta span:last-child::after { content: ''; margin: 0; }

/* STORE RESULTS */
.store-results {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}

/* Stock summary badge at top of store results */
.stock-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.stock-summary .stock-count {
  color: var(--green);
  font-weight: 600;
  font-size: 11px;
}

.stock-summary .stock-label {
  color: var(--text-muted);
  font-weight: 400;
}

.stock-summary .link-count {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 9px;
  opacity: 0.6;
}

.store-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
  border-radius: 4px;
  position: relative;
}

.store-row:hover { background: rgba(255,255,255,0.04); }

/* Verify button on in-stock store rows */
.store-row-wrap {
  display: flex;
  align-items: center;
  gap: 0;
}
.store-row-wrap .store-row { flex: 1; }
.verify-btn {
  font-family: 'Oswald', sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.verify-btn:hover { border-color: var(--gold); color: var(--gold); }
.verify-btn.verifying { opacity: 0.5; cursor: wait; }
.verify-btn.verified-ok { border-color: var(--green); color: var(--green); cursor: default; }
.verify-btn.verified-bad { border-color: var(--red); color: var(--red); cursor: default; }

/* Status indicator dot */
.store-status {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 6px;
}

.store-status.in-stock { background: var(--green); box-shadow: 0 0 6px rgba(74,222,128,0.4); }
.store-status.not-found { background: #444; }
.store-status.link-only-dot { background: transparent; border: 1px solid var(--text-muted); width: 5px; height: 5px; }

.store-row .store-name {
  display: inline-flex;
  align-items: center;
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1.5px;
  min-width: 80px;
}

/* Vendor-branded store names — B&W with brand accent on hover */
.store-row.hhv .store-name { color: var(--text-sec); font-weight: 700; letter-spacing: 3px; font-size: 11px; }
.store-row.hhv:hover .store-name { color: var(--hhv); }
.store-row.deejay .store-name { color: var(--text-sec); font-weight: 400; letter-spacing: 0.5px; font-size: 10px; text-transform: lowercase; font-style: italic; }
.store-row.deejay:hover .store-name { color: var(--deejay); }
.store-row.phonica .store-name { color: var(--text-sec); font-weight: 200; letter-spacing: 3px; font-size: 9px; }
.store-row.phonica:hover .store-name { color: var(--phonica); }
.store-row.hardwax .store-name { color: var(--text-sec); font-weight: 700; letter-spacing: 4px; font-size: 9px; }
.store-row.hardwax:hover .store-name { color: var(--hardwax); }
.store-row.juno .store-name { color: var(--text-sec); font-weight: 400; letter-spacing: 2px; font-size: 10px; }
.store-row.juno:hover .store-name { color: var(--juno); }
.store-row.decks .store-name { color: var(--text-sec); font-weight: 400; letter-spacing: 1px; font-size: 10px; }
.store-row.decks:hover .store-name { color: var(--decks); }
.store-row.ttlab .store-name { color: var(--text-sec); font-weight: 600; letter-spacing: 1px; font-size: 10px; }
.store-row.ttlab:hover .store-name { color: var(--ttlab); }
.store-row.uvs .store-name { color: var(--text-sec); font-weight: 400; letter-spacing: 2px; font-size: 9px; }
.store-row.uvs:hover .store-name { color: var(--uvs); }
.store-row.yoyaku .store-name { color: var(--text-sec); font-weight: 200; letter-spacing: 4px; font-size: 9px; }
.store-row.yoyaku:hover .store-name { color: var(--yoyaku); }
.store-row.gramaphone .store-name { color: var(--text-sec); font-weight: 600; letter-spacing: 2px; font-size: 9px; }
.store-row.gramaphone:hover .store-name { color: var(--gramaphone); }
.store-row.further .store-name { color: var(--text-sec); font-weight: 500; letter-spacing: 1.5px; font-size: 10px; }
.store-row.further:hover .store-name { color: var(--further); }
.store-row.octopus .store-name { color: var(--text-sec); font-weight: 600; letter-spacing: 1px; font-size: 10px; }
.store-row.octopus:hover .store-name { color: var(--octopus); }
.store-row.discogs .store-name { color: var(--text-sec); font-weight: 600; letter-spacing: 1px; font-size: 10px; }
.store-row.discogs:hover .store-name { color: var(--discogs); }

.store-row .match-info {
  font-size: 11px; font-weight: 400;
  color: var(--text-muted); flex: 1;
  margin: 0 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.5px;
}

.store-row .price {
  font-size: 13px; font-weight: 500;
  color: var(--gold);
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.store-row .shipping {
  font-size: 9px; color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: 0.3px;
  margin-left: 6px;
}

.store-row .link-only {
  font-size: 9px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.store-row .link-only::after {
  content: '\2197';
  font-size: 10px;
  opacity: 0.5;
}

.store-row .not-found {
  font-size: 9px; color: #555;
  text-transform: uppercase; letter-spacing: 1px;
}

.store-row.out-of-stock { opacity: 0.3; }
.store-row.out-of-stock:hover { opacity: 0.5; }

/* Link-only stores get a subtle dashed border */
.store-row.link-only-row {
  border: 1px dashed rgba(255,255,255,0.06);
  opacity: 0.6;
}
.store-row.link-only-row:hover { opacity: 0.85; border-color: rgba(255,255,255,0.12); }
body.light .store-row.link-only-row { border-color: rgba(0,0,0,0.08); }
body.light .store-row.link-only-row:hover { border-color: rgba(0,0,0,0.15); }

/* In-stock row gets subtle green left accent */
.store-row.in-stock-row {
  border-left: 2px solid var(--green);
  padding-left: 8px;
}

.arrow {
  color: var(--text-muted);
  font-size: 12px; margin-left: 6px;
  font-weight: 400;
  transition: color 0.15s;
  opacity: 0.5;
}

.store-row:hover .arrow { color: var(--gold); opacity: 1; }

/* BEST PRICE */
.price-compare {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}

.best-price-label {
  font-size: 9px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 2px; font-weight: 400;
}

.best-price-value {
  font-size: 18px; font-weight: 600;
  color: var(--gold); letter-spacing: 1px;
}

.no-results {
  text-align: center; padding: 80px 20px;
  color: var(--text-muted); font-size: 16px;
  font-weight: 400; text-transform: uppercase; letter-spacing: 3px;
}

/* WELCOME */
.welcome {
  text-align: center;
  padding: 80px 20px 60px;
  max-width: 520px;
  margin: 0 auto;
}

.welcome-hero h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 42px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 4px;
  color: var(--text);
  margin-bottom: 10px;
}

.welcome-hero h2 span { color: var(--silver); }

.welcome-sub {
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 400;
  color: var(--text-muted); letter-spacing: 0;
  margin-bottom: 40px;
  line-height: 1.6;
}

.welcome-actions { margin-bottom: 40px; }

.welcome-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  background: var(--gold);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  max-width: 360px;
}

.welcome-cta:hover {
  background: #e05500;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(168, 184, 200,0.3);
}

.welcome-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  margin-top: 10px;
}

.welcome-divider {
  display: flex;
  align-items: center;
  margin: 28px 0 20px;
  gap: 16px;
}

.welcome-divider::before,
.welcome-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.welcome-divider span {
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.welcome-manual {
  display: flex;
  gap: 8px;
  max-width: 360px;
  margin: 0 auto;
}

.welcome-input {
  flex: 1;
  padding: 10px 14px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--text);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
}

.welcome-input:focus { border-color: var(--gold); }

.welcome-go {
  padding: 10px 20px;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text);
  background: transparent;
  border: 1px solid rgba(168, 184, 200,0.4);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
}

.welcome-go:hover { border-color: var(--gold); color: var(--gold); }

.welcome-stores {
  padding-top: 30px;
  border-top: 1px solid var(--border);
}

.welcome-store-label {
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 14px;
}

.welcome-store-logos {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.welcome-store-logos img {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  opacity: 0.5;
  filter: grayscale(50%);
  transition: all 0.2s;
}

.welcome-store-logos img:hover {
  opacity: 1;
  filter: none;
  transform: scale(1.15);
}

.welcome-connected {
  padding: 30px 0;
}
.welcome-connected-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  animation: pop-in 0.3s ease;
}
.welcome-connected h3 {
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 8px;
}
.welcome-connected p {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 1px;
  font-style: italic;
}
@keyframes pop-in {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* Light mode welcome */
body.light .welcome-input { background: rgba(0,0,0,0.03); }
body.light .welcome-go { border-color: rgba(168, 184, 200,0.3); }

/* GEAR / THEME TOGGLE — now in navbar */
.navbar-gear {
  background: transparent;
  border: none;
  color: #666;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s, transform 0.2s ease;
  line-height: 1;
  user-select: none;
}
.navbar-gear:hover { color: var(--silver); transform: scale(1.15); }
/* Hold to reset hint */
.navbar-gear:active { transform: scale(0.95); }

/* THEME TOGGLE (legacy fixed-position, hidden now navbar has gear) */
.theme-toggle {
  display: none; /* replaced by .navbar-gear */
  position: fixed; top: 16px; right: 28px; z-index: 200;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: 'Oswald', sans-serif;
  font-size: 10px; padding: 5px 12px;
  cursor: pointer;
  text-transform: uppercase; letter-spacing: 1.5px;
  transition: all 0.2s;
  border-radius: var(--radius);
}

.theme-toggle:hover { border-color: var(--gold); color: var(--gold); }

/* LIGHT MODE */
body.light {
  --bg: #f4f4f4;
  --bg-elevated: #fff;
  --card: #fff;
  --card-hover: #fafafa;
  --border: #ddd;
  --border-hover: #bbb;
  --text: #000;
  --text-sec: #333;
  --text-muted: #666;
  --gold: var(--silver);
  --gold-soft: rgba(168, 184, 200, 0.06);
  --hhv: #e05500;
  --deejay: #222;
  --phonica: #cc4444;
  --hardwax: #c06020;
  --juno: #3793d6;
  --decks: #7ba800;
  --ttlab: #a030c0;
  --uvs: #18a080;
  --yoyaku: #d4a32a;
  --gramaphone: #a00c24;
  --further: #b85c00;
  --octopus: #2479a8;
}

body.light .header {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
}

body.light .card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
body.light .store-row:hover { background: rgba(0,0,0,0.02); }
body.light .sort-select option { background: #fff; color: #000; }
body.light .tag-badge { background: rgba(0,0,0,0.02); border-color: #ddd; }
body.light .tag-badge:hover { border-color: #999; color: #444; }
body.light .tag-badge.active { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
body.light .tag-filter-label { color: #999; }
body.light .tag-badge .tag-stock { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════
   AUTH SECTION
   ═══════════════════════════════════════════════════════════════ */

.auth-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.user-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.user-bar-name {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-sec);
}
.user-bar-btn {
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  transition: all 0.2s;
}
.user-bar-btn:hover { border-color: var(--red-soft); color: var(--red-soft); }
.user-bar-btn.share-btn:hover { border-color: var(--gold); color: var(--gold); }
.user-bar-sep {
  color: var(--border);
  font-size: 10px;
  font-weight: 200;
}

.auth-btn {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: transparent;
  color: var(--text-sec);
  transition: all 0.2s;
}

.auth-btn:hover { border-color: var(--text-sec); color: var(--text); }

.auth-btn.youtube-auth { border-color: #ff0000; color: #ff0000; }
.auth-btn.youtube-auth:hover { background: #ff0000; color: #fff; }

.auth-btn.playlist-btn { border-color: #ff0000; color: #ff0000; }
.auth-btn.playlist-btn:hover { background: #ff0000; color: #fff; }

.auth-btn .auth-icon { margin-right: 4px; }

.auth-btn.discogs-connect-header {
  border-color: var(--gold);
  color: var(--gold);
  font-size: 10px;
  padding: 5px 12px;
}
.auth-btn.discogs-connect-header:hover {
  background: var(--gold);
  color: #fff;
}

.auth-status {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════════
   RELEASE DETAIL MODAL
   ═══════════════════════════════════════════════════════════════ */

.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.88);
  z-index: 1000;
  overflow-y: auto;
  padding: 40px 20px;
  backdrop-filter: blur(4px);
}

.modal-overlay.active { display: flex; justify-content: center; align-items: flex-start; }

.modal-content {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 900px;
  width: 100%;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.modal-close {
  position: absolute;
  top: 16px; right: 20px;
  background: none; border: none;
  color: var(--text-muted);
  font-size: 28px;
  cursor: pointer;
  z-index: 10;
  font-family: 'Oswald', sans-serif;
  transition: color 0.2s;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}

.modal-close:hover { color: var(--gold); background: rgba(255,255,255,0.05); }

/* Modal position indicator (subtle) */
.modal-nav-indicator {
  text-align: center;
  padding: 10px 0 0;
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  opacity: 0.5;
  user-select: none;
}

/* Swipe slide transitions */
.modal-content {
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.modal-content.slide-out-left {
  transform: translateX(-40px);
  opacity: 0;
}

.modal-content.slide-out-right {
  transform: translateX(40px);
  opacity: 0;
}

.modal-content.slide-in-right {
  animation: slideInRight 0.25s ease;
}

.modal-content.slide-in-left {
  animation: slideInLeft 0.25s ease;
}

@keyframes slideInRight {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
  from { transform: translateX(-40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.modal-hero {
  display: flex;
  gap: 24px;
  padding: 30px 30px 24px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(212,163,42,0.04) 0%, transparent 100%);
}

.modal-art-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 200px;
}

.modal-album-art {
  width: 200px;
  height: 200px;
  object-fit: cover;
  background: #222;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* Price chart below album art */
.price-chart-wrap {
  width: 200px;
  min-height: 20px;
}

.price-stat-mini {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.price-current {
  font-size: 16px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0;
}

.price-label {
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.price-trend {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
}

.price-trend.trend-down { color: var(--green); }
.price-trend.trend-up { color: var(--red-soft); }

.sparkline {
  width: 100%;
  height: 40px;
  margin-top: 4px;
}

.spark-range {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* Stock history grid */
.stock-grid {
  max-width: 100%;
  height: auto;
  margin-top: 8px;
}
.stock-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-sec);
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}

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

.modal-artist {
  font-size: 24px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 4px;
}

.modal-title {
  font-size: 18px; font-weight: 400;
  color: var(--text-sec);
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.modal-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 11px; font-weight: 400;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.modal-meta span { display: inline-flex; gap: 4px; }
.modal-meta .label { color: var(--gold); }

.modal-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-sec);
}

.modal-stars {
  color: var(--gold);
  font-size: 16px;
  letter-spacing: 2px;
}

.modal-rating-count {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400;
}

.modal-section {
  padding: 20px 30px;
  border-bottom: 1px solid var(--border);
}

.modal-section:last-child { border-bottom: none; }

.modal-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 14px;
}

/* Tracklist */
.tracklist { list-style: none; }

.tracklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-sec);
  transition: color 0.15s;
}
body.light .tracklist li { border-bottom-color: rgba(0,0,0,0.08); }

.tracklist li:hover { color: var(--text); }
.tracklist li:last-child { border-bottom: none; }

.track-position {
  color: var(--gold);
  font-weight: 500;
  min-width: 30px;
  font-size: 11px;
  text-transform: uppercase;
  opacity: 0.7;
}

.track-title { flex: 1; }

.track-duration {
  color: var(--text-muted);
  font-size: 11px;
  min-width: 40px;
  text-align: right;
}

.track-play {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  padding: 3px 10px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.2s;
  border-radius: var(--radius);
}

.track-play:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-soft);
}

/* Video embeds */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius);
}

.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

/* Store price comparison in modal */
.modal-stores .store-row {
  padding: 8px 12px;
  border-radius: 4px;
}

/* Credits */
.credits-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.credit-item {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-sec);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.credit-role {
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Discogs link */
.discogs-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--discogs);
  text-decoration: none;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 8px 16px;
  border: 1px solid var(--discogs);
  transition: all 0.2s;
  margin-top: 8px;
  border-radius: var(--radius);
}

.discogs-link:hover {
  background: var(--discogs);
  color: #fff;
}

/* Loading spinner for modal */
.modal-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   CHANGES BANNER (new since last visit)
   ═══════════════════════════════════════════════════════════════ */

/* RESUME BANNER — Welcome Back */
.resume-banner {
  background: linear-gradient(135deg, rgba(168, 184, 200,0.12) 0%, rgba(168, 184, 200,0.04) 100%);
  border: 1px solid rgba(168, 184, 200,0.3);
  border-radius: var(--radius-lg);
  margin: 16px 28px 0;
  padding: 18px 22px;
  animation: slideDown 0.3s ease;
  text-align: center;
}
.resume-title {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}
.resume-progress {
  font-size: 13px;
  color: var(--text-sec);
  margin-bottom: 12px;
}
.resume-progress strong {
  color: var(--gold);
  font-weight: 600;
}
.resume-btn {
  background: var(--gold);
  color: #000;
  border: none;
  border-radius: var(--radius);
  padding: 8px 24px;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: opacity 0.2s;
}
.resume-btn:hover { opacity: 0.85; }
body.light .resume-banner {
  background: linear-gradient(135deg, rgba(168, 184, 200,0.06) 0%, rgba(168, 184, 200,0.02) 100%);
  border-color: rgba(168, 184, 200,0.2);
}

.changes-banner {
  background: linear-gradient(135deg, rgba(168, 184, 200,0.08) 0%, rgba(74,222,128,0.06) 100%);
  border: 1px solid rgba(168, 184, 200,0.25);
  border-radius: var(--radius-lg);
  margin: 16px 28px 0;
  padding: 14px 18px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.changes-banner.changes-hiding {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

/* ── Post-scan first-time toast ── */
.post-scan-toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 480px;
  background: #181818;
  border: 1px solid var(--silver)50;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(168, 184, 200,0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  z-index: 500;
  animation: toastSlideUp 0.3s ease;
}
@keyframes toastSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.pst-icon {
  font-size: 20px;
  color: var(--silver);
  flex-shrink: 0;
}
.pst-body { flex: 1; min-width: 0; }
.pst-title {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #eee;
  margin-bottom: 3px;
}
.pst-sub { font-size: 11px; color: #777; line-height: 1.4; }
.pst-sub strong { color: #aaa; }
.pst-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pst-btn {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 6px 10px;
  white-space: nowrap;
}
.pst-btn-profile { background: var(--silver); color: #000; }
.pst-btn-profile:hover { background: #ddb830; }
.pst-btn-dismiss { background: transparent; color: #555; padding: 6px 4px; }
.pst-btn-dismiss:hover { color: #888; }
body.light .post-scan-toast { background: #fff; border-color: var(--silver)40; }
body.light .pst-title { color: #222; }
body.light .pst-sub { color: #888; }
body.light .pst-sub strong { color: #555; }

.changes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.changes-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--text-sec);
}

.changes-title {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 10px;
  color: var(--gold);
}

.changes-new { color: var(--green); font-weight: 500; }
.changes-drop { color: var(--green); font-weight: 400; }
.changes-out { color: var(--text-muted); font-weight: 400; }
.changes-up { color: var(--red-soft); font-weight: 400; }

.changes-dismiss {
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  transition: all 0.2s;
  white-space: nowrap;
}

.changes-dismiss:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.changes-details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.changes-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-sec);
  letter-spacing: 0.3px;
}

.changes-icon { font-size: 10px; flex-shrink: 0; }

.changes-item-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.changes-item-info {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.changes-more {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.5px;
  padding-top: 4px;
}

/* Light mode changes */
body.light .changes-banner {
  background: linear-gradient(135deg, rgba(168, 184, 200,0.04) 0%, rgba(74,222,128,0.03) 100%);
  border-color: rgba(168, 184, 200,0.2);
}
body.light .changes-details { border-top-color: rgba(0,0,0,0.06); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .header { padding: 10px 16px 8px; position: relative; }
  .header-top { flex-direction: row; align-items: center; gap: 6px; margin-bottom: 6px; }
  .header h1 { font-size: 16px; letter-spacing: 2px; }
  .header h1 span { font-size: 16px; }
  .stats { font-size: 11px; gap: 6px; }
  .stat-value { font-size: 16px; }
  .timestamp { font-size: 9px; margin-bottom: 4px; }
  .controls { flex-direction: column; align-items: stretch; }
  .search-box { width: 100%; font-size: 12px; padding: 8px 12px; }
  .username-input { width: 100%; font-size: 12px; padding: 8px 12px; }
  .scan-btn { padding: 10px; font-size: 12px; }
  .rescan-btn { padding: 8px; font-size: 11px; }
  .scan-section { flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 4px; }
  .sort-select { font-size: 11px; padding: 6px 8px; }
  .grid { grid-template-columns: 1fr; }
  .theme-toggle { top: 10px; right: 16px; font-size: 9px; padding: 3px 8px; }
  .store-filter { flex-wrap: wrap; gap: 4px; }
  .store-badge { font-size: 10px; padding: 4px 8px; gap: 3px; }
  .store-badge .store-logo { width: 12px; height: 12px; }
  .filter-btn { font-size: 10px; padding: 4px 8px; }
  .container { padding: 12px; }
  .changes-banner { margin: 8px 16px 0; padding: 10px 14px; }
  .tag-filter-section { gap: 4px; }
  .tag-filter-label { font-size: 9px; }
  .tag-badge { font-size: 9px; padding: 2px 6px; }
  .tag-count { font-size: 8px; }
  .tag-stock { font-size: 7px; }
  .auth-section { margin-top: 4px; }
  .user-bar-name { font-size: 10px; }
  .user-bar-btn { font-size: 8px; }
  .progress-section { padding: 6px 0; }
  .progress-bar-track { height: 3px; }
  .progress-info { font-size: 10px; }
  .progress-current .progress-item-name { font-size: 13px; }
  .progress-current .loading-msg { font-size: 11px; }
  .live-badge { font-size: 9px; padding: 2px 6px; }

  /* Collapsible filters on mobile */
  .filter-toggle-mobile { display: inline-flex !important; }
  .controls .sort-select,
  .controls .tag-filter-section,
  .controls .store-filter,
  .controls .filter-btn:not(.filter-toggle-mobile) { display: none !important; }
  .controls.filters-open .sort-select { display: block !important; }
  .controls.filters-open .tag-filter-section { display: flex !important; }
  .controls.filters-open .store-filter { display: flex !important; }
  .controls.filters-open .filter-btn:not(.filter-toggle-mobile) { display: flex !important; }

  .modal-overlay { padding: 12px 12px 40px; }
  .modal-hero { flex-direction: column; align-items: center; text-align: center; }
  .modal-art-wrap { width: 150px; }
  .modal-album-art { width: 150px; height: 150px; }
  .price-chart-wrap { width: 150px; }
  .modal-meta { justify-content: center; }

  /* Prevent content from going behind fixed mobile tab bar */
  .header { position: sticky; top: 56px; }
  .welcome { padding-bottom: 80px; }
}

@media (min-width: 1400px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1800px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════
   CART OPTIMIZER
   ═══════════════════════════════════════════════════════════════ */

.optimizer-banner {
  display: flex;
  justify-content: flex-start;
  padding: 10px 24px 12px;
  background: none;
  border-bottom: 1px solid var(--border);
}

.optimize-trigger-btn {
  background: var(--silver);
  color: #1a1a1a;
  border: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  padding: 8px 20px;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(168, 184, 200, 0.35);
  transition: filter 0.15s, box-shadow 0.15s;
  width: auto;
}

.optimize-trigger-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 16px rgba(168, 184, 200, 0.55);
}

.optimizer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  backdrop-filter: blur(6px);
}

.optimizer-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 700px;
  padding: 28px 32px;
  position: relative;
}

.optimizer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.optimizer-header h2 {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.optimizer-header h2 span {
  color: var(--gold);
}

.optimizer-desc {
  color: var(--text-sec);
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 20px;
  line-height: 1.5;
}

.pref-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.pref-row label {
  min-width: 160px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-sec);
}

.pref-row input, .pref-row select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  flex: 1;
  max-width: 240px;
}

.pref-row input:focus, .pref-row select:focus {
  outline: none;
  border-color: var(--gold);
}

.pref-hint {
  font-size: 11px;
  color: var(--gold);
  font-weight: 400;
}

.optimize-btn {
  margin-top: 20px;
  background: linear-gradient(135deg, var(--gold), #e05500);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 12px 28px;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}

.optimize-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.optimize-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Discogs Sync Row ── */
.discogs-sync-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--bg);
}
.discogs-sync-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-sec);
}
.discogs-sync-header span { flex: 1; }
.discogs-sync-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.discogs-sync-btn:hover { border-color: var(--silver); color: var(--silver); }
.discogs-sync-btn:disabled { opacity: 0.4; cursor: default; }
.discogs-sync-progress { margin-top: 8px; }
.discogs-sync-track {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.discogs-sync-fill {
  height: 100%;
  background: var(--silver);
  border-radius: 2px;
  width: 0%;
  transition: width 0.4s ease;
}
.discogs-sync-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  display: block;
}
.discogs-sync-done {
  font-size: 11px;
  color: var(--green);
  margin-top: 6px;
}
.discogs-ext-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;
}
.discogs-ext-hint strong { color: var(--text-sec); }

.opt-rerun-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-sec);
  margin-top: 24px;
}

/* Progress */
.optimizer-progress {
  padding: 12px 0;
}

.opt-progress-bar-track {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
}

.opt-progress-bar-fill {
  height: 100%;
  background: var(--gold);
  width: 0%;
  transition: width 0.3s ease;
}

.opt-progress-flavor {
  font-size: 15px;
  color: var(--text);
  font-weight: 400;
  min-height: 24px;
  margin-bottom: 14px;
  transition: opacity 0.3s ease;
}

.opt-progress-text {
  font-size: 12px;
  color: var(--text-muted, #888);
  font-weight: 400;
  margin-top: 8px;
  min-height: 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}

/* Results */
.opt-summary {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.opt-stat {
  text-align: center;
}

.opt-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--gold);
}

.opt-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Vendor breakdown ─────────────────────────────────── */
.opt-breakdown {
  margin-bottom: 24px;
}

.bk-coverage {
  margin-bottom: 14px;
}

.bk-coverage-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.bk-coverage-track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.bk-coverage-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

/* ── Split cards ─────────────────────────────────────── */
.sc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .sc-split { grid-template-columns: 1fr; }
}

.sc-card {
  border-radius: 12px;
  border: 1px solid;
  overflow: hidden;
}

.sc-card.stores { background: var(--sc-store-bg, rgba(74,222,128,0.07)); border-color: var(--sc-store-border, rgba(74,222,128,0.25)); }
.sc-card.disco  { background: var(--sc-disco-bg, rgba(168, 184, 200,0.07)); border-color: var(--sc-disco-border, rgba(168, 184, 200,0.25)); }

body.light .sc-card.stores { --sc-store-bg: #f0fdf4; --sc-store-border: #bbf7d0; }
body.light .sc-card.disco  { --sc-disco-bg: #fff7f0; --sc-disco-border: #fed7aa; }

.sc-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 20px 14px;
}

.sc-card-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 3px;
}

.sc-card-label.stores { color: #4ade80; }
.sc-card-label.disco  { color: #D4AF37; }

body.light .sc-card-label.stores { color: #16a34a; }
body.light .sc-card-label.disco  { color: #cc4e00; }

.sc-card-desc {
  font-size: 11px;
  color: var(--text-muted);
}

.sc-card-total {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  margin-left: 12px;
}

/* ── Seller rows ─────────────────────────────────────── */
.sc-seller {
  border-top: 1px solid rgba(255,255,255,0.07);
}

body.light .sc-seller { border-top-color: rgba(0,0,0,0.07); }

.sc-seller-header {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  gap: 10px;
  transition: background 0.12s;
}

.sc-seller-header:hover { background: rgba(255,255,255,0.04); }
body.light .sc-seller-header:hover { background: rgba(0,0,0,0.04); }

.sc-seller-left {
  flex: 1;
  min-width: 0;
}

.sc-visit-seller {
  display: inline-block;
  margin-left: 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--silver);
  text-decoration: none;
  padding: 2px 7px;
  border: 1px solid var(--silver);
  border-radius: 4px;
  vertical-align: middle;
  opacity: 0.8;
  transition: opacity 0.15s, background 0.15s;
}
.sc-visit-seller:hover { opacity: 1; background: var(--silver)22; }

.sc-seller-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-seller-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.sc-star { color: #f5a623; }
.sc-rating-count { color: var(--text-muted); font-weight: 400; }
.sc-free { color: var(--green); }

.sc-seller-right {
  text-align: right;
  flex-shrink: 0;
}

.sc-seller-price {
  font-size: 13px;
  font-weight: 700;
}

.sc-seller-rec {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.sc-chevron {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.2s;
  margin-left: 4px;
}

.sc-seller.open .sc-chevron { transform: rotate(180deg); }

/* ── Expanded item list ──────────────────────────────── */
.sc-items {
  display: none;
  padding: 0 20px 12px;
}

.sc-seller.open .sc-items { display: block; }

.sc-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
}

body.light .sc-item { border-top-color: rgba(0,0,0,0.06); }

.sc-item-title {
  flex: 1;
  font-weight: 500;
}

.sc-item-artist {
  color: var(--text-muted);
  font-weight: 400;
}

.sc-item-catno {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.sc-item-cond {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.sc-item-price {
  font-weight: 700;
  flex-shrink: 0;
  color: inherit;
  text-decoration: none;
}

a.sc-item-price:hover { text-decoration: underline; }

.bk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.bk-table thead th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  padding: 0 10px 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.bk-row td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.bk-row:last-child td { border-bottom: none; }

.bk-row:hover td { background: var(--card-hover); }

.bk-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.bk-badge.store { background: rgba(74, 222, 128, 0.15); color: var(--green); }
.bk-badge.discogs { background: rgba(168, 184, 200, 0.15); color: var(--discogs, var(--silver)); }

.bk-name-main {
  font-weight: 600;
  font-size: 13px;
}

.bk-name-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  gap: 6px;
  align-items: center;
}

.bk-country { }
.bk-rating { color: #f5a623; }
.bk-rating-count { color: var(--text-muted); font-weight: 400; }

.bk-records-cell {
  min-width: 140px;
}

.bk-bar-wrap {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 4px;
  overflow: hidden;
}

.bk-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--silver), #D4AF37);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.bk-records-count {
  font-size: 12px;
  color: var(--text-muted);
}

.bk-cost, .bk-ship, .bk-total {
  text-align: right;
  white-space: nowrap;
}

.bk-total {
  font-weight: 700;
  color: var(--gold, #f5a623);
}

.opt-seller {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
}

.opt-seller-header {
  background: var(--bg);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.opt-seller-header:hover { background: var(--card-hover); }

.opt-seller-name {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}

.opt-seller-type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.opt-seller-type.store { background: rgba(74, 222, 128, 0.15); color: var(--green); }
.opt-seller-type.discogs { background: rgba(168, 184, 200, 0.15); color: var(--discogs); }

.opt-seller-country {
  font-size: 12px;
  color: var(--text-muted);
}

.opt-seller-rating {
  font-size: 11px;
  color: var(--text-sec);
}

.opt-seller-total {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.opt-seller-expand {
  font-size: 11px;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.opt-seller.expanded .opt-seller-expand { transform: rotate(180deg); }

.opt-seller-items {
  display: none;
  border-top: 1px solid var(--border);
}

.opt-seller.expanded .opt-seller-items { display: block; }

.opt-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
}

.opt-item-row:last-child { border-bottom: none; }
body.light .opt-item-row { border-bottom-color: rgba(0,0,0,0.08); }

.opt-item-title { flex: 1; }
.opt-item-artist { color: var(--text-sec); font-size: 12px; font-weight: 400; }
.opt-item-catno { color: var(--text-muted); font-size: 11px; letter-spacing: 0.5px; }
.opt-item-condition { font-size: 11px; color: var(--gold); min-width: 36px; }
.opt-item-price { font-weight: 600; white-space: nowrap; color: var(--green); min-width: 54px; text-align: right; }

.opt-shipping-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  background: rgba(255,255,255,0.04);
  font-size: 12px;
  color: var(--text-sec);
}
body.light .opt-shipping-row { background: rgba(0,0,0,0.03); }

.opt-shipping-row .shipping-cost { color: var(--text-muted); }
.opt-shipping-row .order-total { color: var(--text); font-weight: 600; }

.opt-uncovered h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 10px;
  margin-top: 24px;
}

.opt-uncovered-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.opt-uncovered-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 12px;
  background: var(--bg);
  border-radius: var(--radius);
}

.opt-uncovered-item a {
  color: var(--discogs);
  text-decoration: none;
  font-size: 11px;
  margin-left: auto;
  white-space: nowrap;
}

.opt-uncovered-item a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   NEW LAYOUT — app-layout, navbar, card-v2, sidebar optimizer
   ═══════════════════════════════════════════════════════════════ */

/* Layout */
.app-layout {
  display: flex;
  gap: 32px;
  padding: 0 32px 48px;
  max-width: 1400px;
  margin: 0 auto;
}

.app-main { flex: 1; min-width: 0; padding-top: 20px; }

.app-sidebar {
  width: 300px;
  flex-shrink: 0;
  padding-top: 20px;
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 72px - 20px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
  align-self: flex-start;
}

/* Container inside app-main: no extra padding/margin, full width */
.app-main .container { padding: 0; max-width: none; margin: 0; }

/* Navbar */
.navbar {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 56px;
  background: #111;
  border-bottom: 1px solid #2a2a2a;
  position: sticky;
  top: 0;
  z-index: 200;
  gap: 0;
}

.navbar-logo {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--silver);
  margin-right: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.navbar-logo-svg {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--silver);
}

.navbar-logo-img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.navbar-logo span:first-of-type { color: var(--silver); }

.navbar-nav {
  display: flex;
  gap: 24px;
  flex: 1;
}

.navbar-nav a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text-sec);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.navbar-nav a:hover { color: #fff; }
.navbar-nav a.active {
  color: #fff;
  border-bottom: 2px solid var(--silver);
  padding-bottom: 2px;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.navbar-cart {
  background: transparent;
  border: 1px solid var(--silver);
  color: var(--silver);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.5px;
  transition: background 0.15s, color 0.15s;
}

.navbar-cart:hover { background: var(--silver); color: #111; }

/* Header below navbar (scan + controls) */
.header {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  position: sticky;
  top: 56px;
  z-index: 100;
  backdrop-filter: blur(12px);
}

/* New card design — card-v2 */
.grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.card-v2 {
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.card-v2:hover {
  border-color: var(--silver);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}

.card-v2-nostock { opacity: 0.6; }
.card-v2-nostock:hover { opacity: 1; }

.card-art {
  position: relative;
  height: 190px;
  background: #1e1e1e;
  overflow: hidden;
  flex-shrink: 0;
}

/* Album sleeve — left 60% of the card art, full height */
.card-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 60%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  /* 3D sleeve effect — stacked cardboard edges on bottom-right */
  box-shadow:
    2px 0px 0 0 rgba(255,255,255,0.12),
    4px 0px 0 0 rgba(255,255,255,0.07),
    6px 0px 0 0 rgba(255,255,255,0.04),
    /* depth shadow toward the disc */
    10px 0 28px rgba(0,0,0,0.85);
}

/* Vinyl disc — 50% hidden behind sleeve, 50% peeking out right */
.card-vinyl-disc {
  position: absolute;
  /* left: center of disc = right edge of sleeve (60%) → left = 60% - 50% of disc width */
  left: calc(60% - 90px);
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 180px;
  z-index: 1;
  filter: drop-shadow(3px 0 10px rgba(0,0,0,0.7));
}

/* Placeholder sleeve when no album art */
.card-art-placeholder {
  position: absolute;
  left: 0;
  top: 0;
  width: 60%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2a2a;
  z-index: 2;
  box-shadow:
    2px 0px 0 0 rgba(255,255,255,0.12),
    4px 0px 0 0 rgba(255,255,255,0.07),
    6px 0px 0 0 rgba(255,255,255,0.04),
    10px 0 28px rgba(0,0,0,0.85);
}

.card-art-placeholder svg {
  width: 55%;
  height: 55%;
  opacity: 0.2;
}

.card-condition {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-artist {
  color: var(--silver);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-title-v2 {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-meta {
  color: #666;
  font-size: 11px;
  margin-bottom: 12px;
  letter-spacing: 0.3px;
  display: block;
}

.card-price-label {
  color: #555;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.card-price-v2 {
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.card-price-v2.no-price {
  color: #444;
  font-size: 14px;
}

/* ── Card store availability rows ─────────────────────────────── */
.card-store-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  border-top: 1px solid #222;
  padding-top: 10px;
}

.card-store-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.3px;
  transition: background 0.12s;
  background: #1c1c1c;
  border: 1px solid #2a2a2a;
}

.card-store-row:hover { background: #252525; border-color: #3a3a3a; }

.card-store-row.in-stock { border-left: 2px solid #4caf50; }
.card-store-row.link-only { border-left: 2px solid var(--silver); }

.card-store-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
}

.card-store-initials {
  width: 18px;
  height: 18px;
  background: #333;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--silver);
  flex-shrink: 0;
}

.card-store-name {
  flex: 1;
  color: #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-store-cond {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #2a2a2a;
  color: #888;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.card-store-price {
  color: var(--silver);
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  margin-left: auto;
}

.card-store-price.link-only-label {
  color: #888;
  font-size: 10px;
  font-weight: 600;
}

.card-store-meta {
  font-size: 10px;
  color: #666;
  font-weight: 500;
  letter-spacing: 0;
  flex-shrink: 0;
}

/* Inline tag chips on store rows */
.card-store-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.card-store-tag.ship-cost  { background: #1e2a1e; color: #6aaf6a; }
.card-store-tag.us-ship    { background: #1e2233; color: #6a9adf; }
.card-store-tag.no-us      { background: #2a1e1e; color: #885555; }
.card-store-tag.sync-hint  { background: #2a2510; color: var(--silver); opacity: 0.75; }

/* Discogs row gets a subtle Discogs-branded left border */
.card-store-row.discogs-row { border-left: 2px solid #333; }

.card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.btn-add-cart {
  flex: 1;
  background: transparent;
  border: 1px solid var(--silver);
  color: var(--silver);
  border-radius: 6px;
  padding: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
  font-family: 'Oswald', sans-serif;
  transition: background 0.15s, color 0.15s;
}

.btn-add-cart:hover { background: var(--silver); color: #111; }

.btn-wishlist {
  flex: 1;
  background: transparent;
  border: 1px solid #333;
  color: #888;
  border-radius: 6px;
  padding: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  transition: border-color 0.15s, color 0.15s;
}

.btn-wishlist:hover { border-color: #888; color: #fff; }

/* Sidebar optimizer panel */
/* ── Sidebar stat boxes ── */
.sb-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.sb-stat-row {
  display: flex;
  gap: 8px;
}
.sb-stat-box {
  flex: 1;
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sb-stat-num {
  font-family: 'Oswald', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.sb-stat-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Sidebar cheapest finds ── */
.sb-finds {
  background: #0d0d0d;
  border: 1px solid #1e1e1e;
  border-radius: 12px;
  padding: 20px;
  margin-top: 12px;
}
.sb-finds-title {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 14px;
}
.sb-find {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #1e1e1e;
  cursor: pointer;
  transition: background 0.12s;
  border-radius: 4px;
}
.sb-find:last-child { border-bottom: none; }
.sb-find:hover { background: #151515; }
.sb-find-thumb {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: #1a1a1a;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 14px;
}
.sb-find-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sb-find-info { flex: 1; min-width: 0; }
.sb-find-artist {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--silver);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-find-title {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-find-price {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}

.sidebar-optimizer {
  background: #0d0d0d;
  border: 1px solid #1e1e1e;
  border-radius: 12px;
  padding: 24px 20px;
}

.sidebar-opt-title {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--silver);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.sidebar-opt-sub {
  font-size: 11px;
  color: #555;
  margin-bottom: 16px;
}

.sidebar-opt-stats {
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
  padding: 12px 0;
  margin-bottom: 16px;
}

.sidebar-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
}

.sidebar-stat-row:last-child { margin-bottom: 0; }

.sidebar-stat-row.total {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.sidebar-stat-row.total span:last-child { color: var(--silver); }

/* Scrollable seller list — shows ALL sellers, not just 4 */
.sidebar-sellers-scroll {
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}
.sidebar-sellers-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-sellers-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-sellers-scroll::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

.sidebar-sellers { margin-bottom: 16px; }

.sidebar-seller {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #222;
}

.sidebar-seller:last-child { border-bottom: none; }

.sidebar-seller-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--silver);
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-seller-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.sidebar-seller-info { flex: 1; min-width: 0; }

.sidebar-seller-name {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-seller:hover { background: #222; border-radius: 6px; }

.sidebar-seller-source {
  font-size: 9px;
  background: #2a2510;
  color: var(--silver);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
  margin-left: 4px;
  vertical-align: middle;
}

.sidebar-free-ship { color: #4caf50; font-size: 9px; }

.sidebar-seller-items {
  font-size: 10px;
  color: #555;
}

.sidebar-seller-price {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.btn-checkout {
  width: 100%;
  background: var(--silver);
  color: #111;
  border: none;
  border-radius: 8px;
  padding: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 10px;
  font-family: 'Oswald', sans-serif;
  transition: filter 0.15s;
}

.btn-checkout:hover { filter: brightness(1.1); }

.btn-rerun-optimizer {
  width: 100%;
  background: transparent;
  color: var(--text-muted, #888);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  padding: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 4px;
  font-family: 'Oswald', sans-serif;
  transition: color 0.15s, border-color 0.15s;
}
.btn-rerun-optimizer:hover { color: var(--text, #111); border-color: var(--text, #111); }

.sidebar-alt-link {
  display: block;
  text-align: center;
  font-size: 11px;
  color: #555;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Oswald', sans-serif;
  width: 100%;
}

.sidebar-alt-link:hover { color: #888; }

.sidebar-empty {
  padding: 16px 0 0;
}
.sidebar-empty p {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 0;
}

/* Light mode overrides for new elements */
body.light .navbar { background: #f5f5f5; border-bottom-color: #ddd; }
body.light .navbar-logo span:first-of-type { color: var(--silver); }
body.light .navbar-nav a { color: #555; }
body.light .navbar-nav a:hover, body.light .navbar-nav a.active { color: #111; }
body.light .app-sidebar .sidebar-optimizer { background: #f9f9f9; border-color: #e0e0e0; }
body.light .sidebar-opt-sub { color: #888; }
body.light .sidebar-opt-stats { border-color: #e0e0e0; }
body.light .sidebar-seller { border-bottom-color: #eee; }
body.light .sidebar-seller:hover { background: #f0f0f0; }
body.light .sidebar-seller-logo { background: #eee; }
body.light .sidebar-stat-row { color: #666; }
body.light .sidebar-stat-row.total { color: #111; }
body.light .sidebar-seller-name { color: #111; }
body.light .sidebar-seller-price { color: #111; }
body.light .sidebar-seller-items { color: #888; }
body.light .sidebar-empty { color: #aaa; }
body.light .sidebar-alt-link { color: #888; }
/* ── Card v2 ── */
body.light .card-v2 { background: #fff; border-color: #e0e0e0; }
body.light .card-v2:hover { border-color: var(--silver); }
body.light .card-art { background: #f0f0f0; }
body.light .card-art-placeholder { background: #ddd; }
body.light .card-title-v2 { color: #111; }
body.light .card-price-v2 { color: #111; }
body.light .card-meta { color: #888; }
body.light .card-price-label { color: #888; }
body.light .btn-wishlist { border-color: #ccc; color: #888; }
body.light .btn-wishlist:hover { border-color: #888; color: #111; }
body.light .card-price-v2.no-price { color: #bbb; }
body.light .btn-add-cart { border-color: var(--silver); color: var(--silver); }
body.light .btn-add-cart:hover { background: var(--silver); color: #111; }

/* ── Condition badge ── */
body.light .card-condition { background: rgba(0,0,0,0.65); color: #fff; }

/* ── Card store rows ── */
body.light .card-store-rows { border-top-color: #e8e8e8; }
body.light .card-store-row { background: #f5f5f5; border-color: #e0e0e0; }
body.light .card-store-row:hover { background: #eaeaea; border-color: #ccc; }
body.light .card-store-row.in-stock { border-left-color: #4caf50; }
body.light .card-store-row.link-only { border-left-color: var(--silver); }
body.light .card-store-row.discogs-row { border-left-color: #bbb; }
body.light .card-store-name { color: #333; }
body.light .card-store-meta { color: #999; }
body.light .card-store-price { color: var(--silver); }
body.light .card-store-price.link-only-label { color: #aaa; }
body.light .card-store-initials { background: #e8e8e8; color: var(--silver); }
body.light .card-store-cond { background: #e8e8e8; color: #666; }
body.light .card-store-tag.ship-cost { background: #e8f5e9; color: #2e7d32; }
body.light .card-store-tag.us-ship   { background: #e3f0ff; color: #1565c0; }
body.light .card-store-tag.no-us     { background: #fce8e8; color: #b71c1c; }
body.light .card-store-tag.sync-hint { background: rgba(168,184,200,0.08); color: var(--silver); opacity: 1; }

/* ── Dashboard ── */
body.light .dash-find-price { color: #111; }
body.light .dash-find-nothumb { color: #bbb; }
body.light .dash-genre-name { color: #333; }
body.light .dash-genre-count { color: #888; }
body.light .dash-bar-count { color: #888; }
body.light .dash-bar-label { color: #666; }
body.light .dash-bar-fill { background: var(--silver); }
body.light .dash-opt-label { color: #888; }
body.light .dash-opt-stats span { color: var(--silver); }
body.light .dash-section-title { color: var(--silver); }

/* ── Collection coming soon ── */
body.light .collection-coming-soon h2 { color: #111; }
body.light .collection-coming-soon p { color: #666; }
body.light .coming-soon-sub { color: #aaa !important; }

/* Responsive: hide sidebar on small screens */
@media (max-width: 1100px) {
  .app-sidebar { display: none; }
  .app-layout { padding: 0 16px 40px; }
}

@media (max-width: 768px) {
  /* ── Navbar ── */
  .navbar-nav { display: none; }
  .navbar { padding: 0 14px; }
  .navbar-logo { margin-right: 0; flex: 1; font-size: 15px; }
  .navbar-right { gap: 10px; }
  .stats { display: none; }
  .timestamp { display: none; }
  .navbar-cart { display: none; }

  /* Auth section: keep only username + rescan on mobile */
  .user-bar-sep,
  .auth-btn.youtube-auth,
  .auth-btn.playlist-btn,
  .share-btn,
  #disconnectBtn { display: none !important; }
  .user-bar { gap: 8px; }
  .user-bar-name { font-size: 11px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Compact rescan button inside navbar user-bar on mobile */
  #userBarRescan { padding: 6px 12px; font-size: 10px; letter-spacing: 1px; }

  /* ── Wantlist layout ── */
  .app-layout { padding: 0 10px 80px; }
  .grid { grid-template-columns: 1fr; gap: 10px; }

  /* ── Wantlist store row + genre pills on mobile: scrollable single line ── */
  .wl-store-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .wl-store-row::-webkit-scrollbar { display: none; }
  .wl-genre-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .wl-genre-row::-webkit-scrollbar { display: none; }
  .wl-filter-pills { padding: 6px 0 0; }

  /* ── Mobile tab bar + FAB visible ── */
  .mobile-tabs { display: flex; }
  .mobile-goldie-fab { display: flex; }

  /* ── Bottom padding on all views so tab bar doesn't cover content ── */
  .alt-view,
  .dash-wrap,
  .coll-wrap,
  .disc-wrap,
  #profileBody,
  .prof-wrap { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ── Wantlist: 2-column card grid on mobile ── */
  .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
  }
  .app-layout { padding: 0 8px 80px; }

  /* ── Compact card art for 2-col layout ── */
  .card-v2 { border-radius: 8px; }
  .card-art { height: 120px; }
  .card-vinyl-disc {
    width: 120px;
    height: 120px;
    left: calc(60% - 60px);
  }
  .card-body   { padding: 8px 10px 10px; }
  .card-artist { font-size: 10px; margin-bottom: 2px; }
  .card-title-v2 { font-size: 12px; margin-bottom: 2px; }
  .card-meta   { font-size: 9px; margin-bottom: 6px; }
  .card-price-label { font-size: 9px; margin-bottom: 2px; }
  .card-price-v2 { font-size: 16px; margin-bottom: 6px; }
  .card-price-v2.no-price { font-size: 11px; }
  .card-actions { gap: 5px; }
  .btn-add-cart, .btn-wishlist { padding: 6px 4px; font-size: 9px; border-radius: 5px; }
  /* Hide secondary button text on very small screens, keep icon */
  .card-store-rows { margin-bottom: 8px; padding-top: 8px; gap: 3px; }
  .card-store-row  { padding: 3px 6px; font-size: 9px; gap: 5px; }

  /* ── Profile on mobile: single column ── */
  .prof-body { grid-template-columns: 1fr !important; gap: 12px !important; }
  .prof-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
  .prof-ring { width: 80px; height: 80px; min-width: 80px; }
  .prof-ring-svg { width: 80px; height: 80px; }
  .prof-coll-mini-grid { grid-template-columns: 1fr 1fr !important; }
  .prof-diggers-grid { grid-template-columns: 1fr !important; }

  /* ── Taste Intelligence band: 2x2 on mobile ── */
  .ti-band { grid-template-columns: 1fr 1fr; }
  .ti-col { padding: 12px 14px; }
  .ti-bar-wrap { width: 44px; }

  /* ── GOLDIE panel full-screen on mobile ── */
  .goldie-panel {
    width: 100% !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    height: 100dvh !important;
  }

  /* ── Discover on mobile ── */
  .disc-wrap { padding: 16px 14px 100px; }

  /* ── GOLDIE panel full-screen on mobile ── */
  #goldiePanel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 58px !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    z-index: 500 !important;
  }
}

/* ═══════════════════════════════════════════════════════
   DASHBOARD & COLLECTION VIEWS
═══════════════════════════════════════════════════════ */

.alt-view { min-height: 80vh; }

.dash-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

/* Big stat blocks */
.dash-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.dash-stat {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
}

.dash-stat-value {
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}

.dash-stat-label {
  font-size: 11px;
  color: #666;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* Optimizer summary */
.dash-opt-summary {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-left: 3px solid var(--silver);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}

.dash-opt-summary.empty { border-left-color: #333; opacity: 0.7; }

.dash-opt-label {
  font-size: 11px;
  color: #666;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.dash-opt-stats {
  display: flex;
  gap: 20px;
  flex: 1;
}

.dash-opt-stats span {
  font-size: 14px;
  font-weight: 600;
  color: var(--silver);
}

.dash-opt-btn {
  background: transparent;
  border: 1px solid var(--silver);
  color: var(--silver);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Oswald', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.dash-opt-btn:hover { background: var(--silver); color: #111; }

/* Section layout */
.dash-sections {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.dash-section {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 20px;
}

.dash-section-title {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 16px;
}

/* Cheapest finds */
.dash-finds { display: flex; flex-direction: column; gap: 10px; }

.dash-find {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background 0.12s;
}
.dash-find:hover { background: #222; }

.dash-find-thumb {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: #111;
}
.dash-find-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dash-find-nothumb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #444; font-size: 16px; }

.dash-find-info { flex: 1; min-width: 0; }
.dash-find-artist { font-size: 10px; color: var(--silver); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-find-title { font-size: 12px; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-find-price { font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }

/* Store bars */
.dash-store-bars { display: flex; flex-direction: column; gap: 10px; }

.dash-bar-row { display: flex; align-items: center; gap: 10px; }

.dash-bar-label {
  width: 80px;
  font-size: 11px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.dash-bar-label img { width: 14px; height: 14px; object-fit: contain; }

.dash-bar-track { flex: 1; height: 6px; background: #2a2a2a; border-radius: 3px; overflow: hidden; }
.dash-bar-fill { height: 100%; background: var(--silver); border-radius: 3px; transition: width 0.4s; }
.dash-bar-count { font-size: 11px; color: #666; width: 20px; text-align: right; flex-shrink: 0; }

/* Genre chips */
.dash-genre-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.dash-genre-chip {
  background: #222;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.dash-genre-name { font-size: 12px; font-weight: 600; color: #ddd; }
.dash-genre-count { font-size: 10px; color: #666; }

/* Collection coming soon */
.collection-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  gap: 16px;
}
.coming-soon-icon { font-size: 64px; }
.collection-coming-soon h2 { font-size: 32px; font-weight: 800; color: #fff; }
.collection-coming-soon p { font-size: 16px; color: #888; max-width: 460px; line-height: 1.6; }
.coming-soon-sub { font-size: 13px !important; color: #555 !important; }

/* Light mode overrides */
body.light .dash-stat { background: #fff; border-color: #e8e8e8; }
body.light .dash-section { background: #fff; border-color: #e8e8e8; }
body.light .dash-opt-summary { background: #fff; border-color: #e8e8e8; }
body.light .dash-find:hover { background: #f5f5f5; }
body.light .dash-bar-track { background: #eee; }
body.light .dash-genre-chip { background: #f5f5f5; border-color: #e0e0e0; }
body.light .dash-find-title { color: #333; }
body.light .dash-stat-label { color: #999; }

/* ═══════════════════════════════════════════════════════════════
   DISCOVERED FOR YOU — dashboard recommendation rack
   ═══════════════════════════════════════════════════════════════ */

.dash-discover-wrap {
  margin-top: 28px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 22px 20px 20px;
}

/* Header row: title left, stats + refresh right */
.discover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.discover-taste-pill {
  display: inline-block;
  margin-left: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #888;
  background: #252525;
  border: 1px solid #333;
  border-radius: 20px;
  padding: 2px 10px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.discover-status {
  font-size: 10px;
  color: #555;
  letter-spacing: 0.3px;
}
.discover-status.discover-err { color: #ff6b6b; }

.discover-refresh-btn {
  background: transparent;
  border: 1px solid #333;
  border-radius: 6px;
  color: #666;
  font-size: 14px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.discover-refresh-btn:hover { border-color: var(--silver); color: var(--silver); }

/* Filter pills */
.discover-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.discover-filter-pill {
  background: transparent;
  border: 1px solid #333;
  border-radius: 20px;
  color: #666;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.discover-filter-pill:hover { border-color: var(--silver); color: var(--silver); }
.discover-filter-pill.active { border-color: var(--silver); color: #111; background: var(--silver); }

/* Horizontal scroll rack */
.discover-rack {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}
.discover-rack::-webkit-scrollbar { height: 4px; }
.discover-rack::-webkit-scrollbar-track { background: transparent; }
.discover-rack::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

.discover-empty {
  font-size: 12px;
  color: #555;
  padding: 24px 0;
}

/* Individual record card */
.disc-card {
  flex-shrink: 0;
  width: 160px;
  background: #222;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  position: relative;
  display: flex;
  flex-direction: column;
}
.disc-card:hover {
  border-color: var(--silver);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

/* Album art */
.disc-art {
  width: 160px;
  height: 160px;
  background: #111;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
.disc-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.disc-art-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 36px;
}

/* Match % badge — top right corner of art */
.disc-match-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #111;
  padding: 2px 7px;
  border-radius: 10px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  z-index: 2;
}

/* Card body */
.disc-body {
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.disc-artist {
  font-size: 10px;
  font-weight: 700;
  color: var(--silver);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
}

.disc-title {
  font-size: 12px;
  color: #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.disc-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.disc-label {
  font-size: 10px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.disc-year {
  font-size: 10px;
  color: #555;
  flex-shrink: 0;
}

/* Footer: reason pills + price + store badge */
.disc-footer {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.disc-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.disc-reason {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
.disc-reason-artist { background: rgba(168, 184, 200,0.15); color: var(--silver); }
.disc-reason-label  { background: rgba(74,174,222,0.12); color: #4adedc; }
.disc-reason-style  { background: rgba(100,180,100,0.12); color: #7de87d; }
.disc-reason-genre  { background: rgba(160,120,255,0.12); color: #c4a6ff; }

.disc-price-store {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.disc-price {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.disc-store-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  padding: 2px 6px;
  border-radius: 8px;
  text-transform: uppercase;
}

/* Skeleton loading cards */
.discover-rack-skeleton { pointer-events: none; }
.disc-card-skeleton {
  flex-shrink: 0;
  width: 160px;
  background: #1e1e1e;
  border: 1px solid #252525;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.disc-art-skel {
  width: 160px;
  height: 160px;
  background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.disc-info-skel { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.disc-skel-line {
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.disc-skel-line.short { width: 60%; }

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Light mode */
body.light .dash-discover-wrap { background: #fff; border-color: #e8e8e8; }
body.light .disc-card { background: #f8f8f8; border-color: #e8e8e8; }
body.light .disc-card:hover { border-color: var(--silver); }
body.light .disc-title { color: #333; }
body.light .disc-label { color: #999; }
body.light .disc-art { background: #eee; }
body.light .disc-art-placeholder { color: #ccc; }
body.light .discover-filter-pill { border-color: #ddd; color: #999; }
body.light .discover-filter-pill:hover { border-color: var(--silver); color: var(--silver); }
body.light .discover-filter-pill.active { background: var(--silver); color: #111; border-color: var(--silver); }
body.light .discover-taste-pill { background: #f5f5f5; border-color: #ddd; color: #999; }
body.light .discover-status { color: #bbb; }
body.light .discover-refresh-btn { border-color: #ddd; color: #bbb; }
body.light .disc-card-skeleton { background: #f5f5f5; border-color: #eee; }
body.light .disc-art-skel, body.light .disc-skel-line {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
}

/* ═══════════════════════════════════════════════════════════════
   COLLECTION VIEW
   ═══════════════════════════════════════════════════════════════ */

.coll-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 60px;
}

.coll-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.coll-header-left { display: flex; align-items: baseline; gap: 10px; }
.coll-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.coll-title {
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.coll-count {
  font-size: 12px;
  color: #666;
  letter-spacing: 0.3px;
}

.coll-search {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  color: #ddd;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  padding: 7px 12px;
  width: 220px;
  outline: none;
  transition: border-color 0.15s;
}
.coll-search::placeholder { color: #555; }
.coll-search:focus { border-color: var(--silver); }

.coll-sort {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  color: #aaa;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  padding: 7px 10px;
  outline: none;
  cursor: pointer;
}

.coll-refresh-btn {
  background: transparent;
  border: 1px solid #333;
  border-radius: 6px;
  color: #666;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.coll-refresh-btn:hover { border-color: var(--silver); color: var(--silver); }

/* Stats bar */
.coll-stats-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #555;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.coll-stats-sep { color: #333; }

/* ── Collection genre chart card ── */
.coll-genre-chart {
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 14px;
  padding: 24px 24px 20px;
  margin-bottom: 28px;
}
.cgc-title {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 16px;
}
.cgc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cgc-chip {
  background: #1a1a1a;
  border: 1px solid #242424;
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-width: 100px;
}
.cgc-chip:hover { border-color: rgba(168,184,200,0.4); background: #222; }
.cgc-name {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.cgc-meta {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--text-muted);
}

/* Genre filter pills */
.coll-genre-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.coll-genre-pill {
  background: transparent;
  border: 1px solid #2e2e2e;
  border-radius: 20px;
  color: #666;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.coll-genre-pill:hover { border-color: var(--silver); color: var(--silver); }
.coll-genre-pill.active { border-color: var(--silver); background: var(--silver); color: #111; }
.coll-pill-count { opacity: 0.7; font-size: 10px; }

/* Card grid */
.coll-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.coll-card {
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
}
.coll-card:hover {
  border-color: var(--silver);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.coll-art-wrap {
  width: 100%;
  aspect-ratio: 1;
  background: #111;
  overflow: hidden;
  position: relative;
}
.coll-card-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.coll-art-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2a2a2a;
  font-size: 40px;
}

.coll-card-body {
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.coll-card-artist {
  font-size: 10px;
  font-weight: 700;
  color: var(--silver);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
}
.coll-card-title {
  font-size: 12px;
  color: #ddd;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}
.coll-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.coll-label {
  font-size: 10px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.coll-year {
  font-size: 10px;
  color: #555;
  flex-shrink: 0;
}

.coll-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}
.coll-chip {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(168, 184, 200,0.1);
  color: var(--silver);
  letter-spacing: 0.2px;
}
.coll-chip-style {
  background: rgba(100,180,220,0.1);
  color: #6ab4dc;
}

.coll-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
}
.coll-format {
  font-size: 9px;
  color: #555;
  letter-spacing: 0.2px;
}
.coll-rating {
  font-size: 10px;
  color: var(--silver);
  letter-spacing: 1px;
}

.coll-reauth-banner {
  background: #2a1a00;
  border: 1px solid #6b4400;
  color: #f0c060;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 14px;
  line-height: 1.5;
}
body.light .coll-reauth-banner { background: #fff8e8; border-color: #e8c060; color: #7a5500; }

.coll-loading, .coll-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: #555;
  font-size: 14px;
}

/* Light mode */
body.light .coll-title       { color: #111; }
body.light .coll-search      { background: #fff; border-color: #ddd; color: #333; }
body.light .coll-sort        { background: #fff; border-color: #ddd; color: #666; }
body.light .coll-refresh-btn { border-color: #ddd; color: #aaa; }
body.light .coll-genre-pill  { border-color: #e0e0e0; color: #aaa; }
body.light .coll-genre-pill:hover  { border-color: var(--silver); color: var(--silver); }
body.light .coll-genre-pill.active { background: var(--silver); color: #111; }
body.light .coll-card       { background: #fff; border-color: #eee; }
body.light .coll-card:hover { border-color: var(--silver); }
body.light .coll-art-wrap   { background: #f5f5f5; }
body.light .coll-art-placeholder { color: #ddd; }
body.light .coll-card-title { color: #333; }
body.light .coll-label      { color: #999; }
body.light .coll-stats-bar  { color: #bbb; }

/* ═══════════════════════════════════════════════════════════════
   WANTLIST GENRE / STYLE PILL FILTERS
   (same visual language as My Collection genre pills)
   ═══════════════════════════════════════════════════════════════ */

.wl-filter-pills {
  padding: 24px 0 0;
}

/* Store badges row */
.wl-store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #1a1a1a;
}
body.light .wl-store-row { border-bottom-color: #e8e8e8; }

/* Genre row — identical to .coll-genre-row */
.wl-genre-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

/* Style row — same layout, extra bottom margin before the card grid */
.wl-style-row { margin-bottom: 20px; }

/* Pill base — identical to .coll-genre-pill */
.wl-genre-pill {
  background: transparent;
  border: 1px solid #2e2e2e;
  border-radius: 20px;
  color: #666;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}
.wl-genre-pill:hover { border-color: var(--silver); color: var(--silver); }
.wl-genre-pill.active { border-color: var(--silver); background: var(--silver); color: #111; }

/* Style pills: same size as genre pills, subtler active state so genres stay primary */
.wl-style-pill.active { background: rgba(168, 184, 200,0.15); color: var(--silver); border-color: var(--silver); }

.wl-pill-count { opacity: 0.65; font-size: 10px; margin-left: 1px; }
/* In-stock count — green accent */
.wl-pill-avail { font-size: 9px; color: #4ade80; opacity: 0.9; }

/* Active pill: soften counts so gold fill reads cleanly */
.wl-genre-pill.active .wl-pill-count { opacity: 0.7; }
.wl-genre-pill.active .wl-pill-avail { color: rgba(0,0,0,0.6); }

/* Light mode */
body.light .wl-genre-pill { border-color: #e0e0e0; color: #aaa; }
body.light .wl-genre-pill:hover { border-color: var(--silver); color: var(--silver); }
body.light .wl-genre-pill.active { background: var(--silver); color: #111; }
body.light .wl-style-pill.active { background: rgba(168, 184, 200,0.12); color: var(--silver); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM TAB BAR
   ═══════════════════════════════════════════════════════════════ */

.mobile-tabs {
  display: none; /* shown only in mobile @media block */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #0d0d0d;
  border-top: 1px solid #222;
  z-index: 300;
  align-items: stretch;
  /* Safe area for notched phones / iOS Safari home bar */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: none;
  color: #555;
  font-family: 'Oswald', sans-serif;
  cursor: pointer;
  transition: color 0.15s;
  padding: 6px 1px 4px;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
}
.mobile-tab:hover { color: #888; }
.mobile-tab.active { color: var(--silver); }

.mobile-tab-icon {
  font-size: 15px;
  line-height: 1;
}

.mobile-tab-label {
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── GOLDIE floating action button ── */
.mobile-goldie-fab {
  display: none; /* shown only on mobile */
  position: fixed;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--silver);
  border: none;
  cursor: pointer;
  z-index: 400;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(168, 184, 200,0.5);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, box-shadow 0.15s;
}
.mobile-goldie-fab:active { transform: scale(0.92); box-shadow: 0 2px 8px rgba(168, 184, 200,0.4); }
.mobile-goldie-fab.goldie-open {
  background: #111;
  border: 2px solid var(--silver);
  box-shadow: 0 4px 16px rgba(168, 184, 200,0.3);
}
.mobile-goldie-fab-icon {
  font-size: 20px;
  color: #000;
  line-height: 1;
  display: block;
}
.mobile-goldie-fab.goldie-open .mobile-goldie-fab-icon { color: var(--silver); }

/* Light mode */
body.light .mobile-tabs    { background: #f8f8f8; border-top-color: #e0e0e0; }
body.light .mobile-tab     { color: #bbb; }
body.light .mobile-tab.active { color: var(--silver); }
body.light .mobile-goldie-fab { box-shadow: 0 4px 16px rgba(168, 184, 200,0.4); }

/* ── Re-enable mobile tabs AFTER base display:none (cascade fix) ── */
/* The base .mobile-tabs rule above sets display:none for desktop.   */
/* This block MUST come after that rule so mobile gets display:flex. */
@media (max-width: 768px) {
  .mobile-tabs       { display: flex !important; }
  .mobile-goldie-fab { display: flex !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Dashboard & Collection
   (must be after base dashboard/collection CSS to override)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── Dashboard ── */
  .dash-wrap { padding: 16px 12px 80px; }
  .dash-stat-row { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
  .dash-stat { padding: 16px 12px; }
  .dash-stat-value { font-size: 28px; }
  .dash-sections { grid-template-columns: 1fr; gap: 12px; }
  .dash-opt-summary { flex-direction: column; gap: 12px; align-items: flex-start; padding: 16px; }
  .dash-opt-stats { flex-wrap: wrap; gap: 12px; }
  .dash-discover-wrap { margin-top: 16px; padding: 16px 14px 14px; }

  /* ── Collection ── */
  .coll-wrap { padding: 16px 12px 80px; }
  .coll-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .coll-header-right { width: 100%; flex-wrap: wrap; }
  .coll-search { width: 100%; min-width: 0; }
  .coll-sort { flex: 1; min-width: 0; }
  .coll-title { font-size: 18px; }
  .coll-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }

  /* ── Discover ── */
  .disc-wrap { padding: 16px 12px 80px; }
  .disc-header { flex-direction: column; gap: 10px; }
  .disc-store-grid { grid-template-columns: 1fr; }
  .disc-store-card { padding: 14px; }
  .disc-item-row { flex-wrap: wrap; }
  .disc-item-thumb { width: 40px; height: 40px; }
}

/* ═══════════════════════════════════════════════════════════════
   DISCOVER VIEW
   ═══════════════════════════════════════════════════════════════ */

/* Cart badge on Discover nav link */
.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--silver);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  padding: 0 4px;
  margin-left: 5px;
  vertical-align: middle;
  line-height: 1;
}

.disc-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 60px;
}

/* ─── Header ─── */
.disc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.disc-title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.disc-title {
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--silver);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.disc-subtitle {
  font-size: 12px;
  color: #666;
  letter-spacing: 0.5px;
}

.disc-cart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(168, 184, 200,0.08);
  border: 1px solid rgba(168, 184, 200,0.25);
  border-radius: 6px;
  padding: 7px 12px;
}

.disc-cart-count {
  font-size: 12px;
  color: var(--silver);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.disc-clear-btn {
  background: none;
  border: 1px solid #444;
  color: #888;
  font-size: 11px;
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.disc-clear-btn:hover { border-color: #888; color: #ccc; }

/* ─── Controls (sort + genre filter) ─── */
.disc-controls {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.disc-sort-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.disc-sort-label {
  font-size: 11px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-right: 4px;
}

.disc-sort-btn {
  background: none;
  border: 1px solid #2a2a2a;
  color: #888;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.5px;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.disc-sort-btn:hover { border-color: #555; color: #ccc; }
.disc-sort-btn.active { border-color: var(--silver); color: var(--silver); }

.disc-genre-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.disc-genre-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  font-size: 11px;
  color: #888;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  background: none;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.5px;
}
.disc-genre-pill:hover { border-color: #555; color: #ccc; }
.disc-genre-pill.active { border-color: var(--silver); color: var(--silver); background: rgba(168, 184, 200,0.06); }
.disc-genre-pill .pill-count {
  font-size: 10px;
  opacity: 0.7;
}

/* ─── Store grid ─── */
.disc-store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* ─── Store card ─── */
.disc-store-card {
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.disc-store-card:hover { border-color: #333; }
/* Expanded card spans all columns — gives item list full width */
.disc-store-card.expanded {
  grid-column: 1 / -1;
}

.disc-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
  cursor: pointer;
  user-select: none;
}

.disc-card-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
  opacity: 0.85;
}

.disc-card-store-name {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #ddd;
  letter-spacing: 0.5px;
  flex: 1;
}

.disc-card-count {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
}

.disc-card-expand-btn {
  font-size: 12px;
  color: #555;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.disc-store-card.expanded .disc-card-expand-btn { transform: rotate(180deg); }

.disc-card-cost {
  padding: 0 14px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.disc-cost-records {
  font-size: 13px;
  color: #bbb;
}
.disc-cost-ship {
  font-size: 11px;
  color: #666;
}
.disc-cost-total {
  font-size: 14px;
  color: var(--silver);
  font-weight: 600;
  margin-left: auto;
}
.disc-cost-sep { color: #333; font-size: 12px; }

.disc-card-tags {
  padding: 0 14px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.disc-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  background: #1a1a1a;
  color: #666;
  border: 1px solid #242424;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.3px;
}
.disc-tag.genre { color: #888; border-color: #2a2a2a; }

/* ─── Expanded item list ─── */
.disc-item-list {
  display: none;
  border-top: 1px solid #1e1e1e;
}
.disc-store-card.expanded .disc-item-list { display: block; }

.disc-item-list-header {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) 76px 76px 110px;
  gap: 10px;
  padding: 8px 16px;
  background: #0d0d0d;
  font-size: 10px;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid #1a1a1a;
}

.disc-item-row {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) 76px 76px 110px;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #161616;
  transition: background 0.12s;
}
.disc-item-row:last-child { border-bottom: none; }
.disc-item-row:hover { background: #161616; }

.disc-item-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 4px;
  background: #1a1a1a;
  flex-shrink: 0;
}

.disc-item-thumb-placeholder {
  width: 52px;
  height: 52px;
  border-radius: 4px;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 18px;
  flex-shrink: 0;
}

.disc-item-info {
  overflow: hidden;
  min-width: 0;
}
.disc-item-artist {
  font-size: 12px;
  font-weight: 600;
  color: #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.disc-item-title {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  max-width: 100%;
}
.disc-item-meta {
  font-size: 10px;
  color: #444;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.disc-item-price-col { display: flex; align-items: center; justify-content: flex-end; }

.disc-item-price {
  font-size: 13px;
  color: var(--silver);
  font-weight: 600;
  text-align: right;
}
.disc-item-price-na {
  font-size: 11px;
  color: #444;
  text-align: right;
}

.disc-item-discogs {
  text-align: right;
}
.disc-item-discogs-price {
  font-size: 12px;
  color: #888;
}
.disc-item-discogs-forsale {
  font-size: 10px;
  color: #555;
  margin-top: 1px;
}

.disc-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.disc-item-link {
  font-size: 11px;
  color: #555;
  text-decoration: none;
  border: 1px solid #242424;
  border-radius: 3px;
  padding: 3px 7px;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.disc-item-link:hover { color: #aaa; border-color: #555; }

.disc-cart-btn {
  font-size: 11px;
  border: 1px solid #2a2a2a;
  border-radius: 3px;
  padding: 3px 7px;
  cursor: pointer;
  transition: all 0.12s;
  background: none;
  color: #666;
  white-space: nowrap;
  font-family: inherit;
}
.disc-cart-btn:hover { border-color: var(--silver); color: var(--silver); }
.disc-cart-btn.in-cart { border-color: var(--silver); color: var(--silver); background: rgba(168, 184, 200,0.08); }
.disc-cart-btn.in-cart:hover { border-color: #e55; color: #e55; background: rgba(220,50,50,0.06); }

/* ─── Loading / empty states ─── */
.disc-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 40px 0;
  color: #555;
  font-size: 13px;
}

.disc-spinner {
  width: 18px; height: 18px;
  border: 2px solid #2a2a2a;
  border-top-color: var(--silver);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

.disc-empty {
  padding: 80px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.disc-empty-title {
  font-family: 'Oswald', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text);
}
.disc-empty-sub {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 380px;
}

/* ─── Light mode ─── */
body.light .disc-store-card { background: #fff; border-color: #e8e8e8; }
body.light .disc-store-card:hover { border-color: #ccc; }
body.light .disc-card-store-name { color: #222; }
body.light .disc-card-count { color: #999; }
body.light .disc-card-expand-btn { color: #aaa; }
body.light .disc-cost-records { color: #444; }
body.light .disc-cost-ship { color: #999; }
body.light .disc-tag { background: #f0f0f0; color: #888; border-color: #e0e0e0; }
body.light .disc-item-list { border-top-color: #eee; }
body.light .disc-item-list-header { background: #f8f8f8; color: #bbb; border-bottom-color: #eee; }
body.light .disc-item-row { border-bottom-color: #f0f0f0; }
body.light .disc-item-row:hover { background: #f8f8f8; }
body.light .disc-item-thumb-placeholder { background: #f0f0f0; color: #ccc; }
body.light .disc-item-artist { color: #222; }
body.light .disc-item-title { color: #666; }
body.light .disc-item-meta { color: #aaa; }
body.light .disc-item-link { color: #aaa; border-color: #e0e0e0; }
body.light .disc-item-link:hover { color: #444; border-color: #999; }
body.light .disc-cart-btn { color: #bbb; border-color: #e0e0e0; }
body.light .disc-sort-btn { border-color: #e0e0e0; color: #aaa; }
body.light .disc-sort-btn:hover { border-color: #aaa; color: #444; }
body.light .disc-genre-pill { border-color: #e0e0e0; color: #aaa; }
body.light .disc-genre-pill:hover { border-color: #aaa; color: #444; }
body.light .disc-cart-row { background: rgba(168, 184, 200,0.06); border-color: rgba(168, 184, 200,0.2); }
body.light .disc-clear-btn { border-color: #ddd; color: #bbb; }
body.light .disc-clear-btn:hover { border-color: #999; color: #444; }
body.light .disc-subtitle { color: #bbb; }
body.light .disc-sort-label { color: #bbb; }
body.light .disc-spinner { border-color: #eee; border-top-color: var(--silver); }
body.light .disc-empty { color: #bbb; }
body.light .disc-item-discogs-price { color: #666; }
body.light .disc-item-discogs-forsale { color: #aaa; }

/* ═══════════════════════════════════════════════════════════════
   DISCOVER — FOR YOU TAB
   ═══════════════════════════════════════════════════════════════ */

/* ─── Tab bar ─── */
.disc-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid #222;
  padding-bottom: 0;
}

.disc-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #666;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 16px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.disc-tab-btn:hover { color: #bbb; }
.disc-tab-btn.active { color: var(--silver); border-bottom-color: var(--silver); }

/* ─── For You controls (filter buttons + taste tags + genre pills) ─── */
.disc-foryou-controls {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.disc-foryou-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.disc-filter-btn {
  background: none;
  border: 1px solid #333;
  color: #777;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s;
}
.disc-filter-btn:hover { border-color: #666; color: #bbb; }
.disc-filter-btn.active { border-color: var(--silver); color: var(--silver); background: rgba(168, 184, 200,0.06); }

/* ─── Taste tag cloud ─── */
.disc-taste-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-left: 8px;
}

.disc-taste-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(168, 184, 200,0.08);
  color: #888;
  border: 1px solid rgba(168, 184, 200,0.15);
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.3px;
}

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

/* ─── Individual For You card ─── */
.disc-fy-card {
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s;
  display: flex;
  flex-direction: column;
}
.disc-fy-card:hover { border-color: #333; transform: translateY(-2px); }

/* ─── Album art area ─── */
.disc-card-art-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #0d0d0d;
  overflow: hidden;
}

.disc-card-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.disc-card-art-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #2a2a2a;
}

/* ─── Match badge (corner of art) ─── */
/* Override base .disc-match-badge for wantlist/high/mid variants */
.disc-card-art-wrap .disc-match-badge {
  background: #555;
  color: #fff;
}
.disc-card-art-wrap .disc-match-badge.wantlist {
  background: #2d6a4f;
  color: #80ffb8;
}
.disc-card-art-wrap .disc-match-badge.high {
  background: var(--silver);
  color: #000;
}
.disc-card-art-wrap .disc-match-badge.mid {
  background: #444;
  color: #ccc;
}

/* ─── "WANTLIST" corner stamp ─── */
.disc-wantlist-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-family: 'Oswald', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #80ffb8;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(128,255,184,0.3);
  border-radius: 3px;
  padding: 2px 5px;
  text-transform: uppercase;
}

/* ─── Card body (text area) ─── */
.disc-card-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.disc-card-artist {
  font-size: 10px;
  font-weight: 700;
  color: var(--silver);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
}

.disc-card-title {
  font-size: 11px;
  color: #bbb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* ─── Card footer (genre chip + store badge + price + cart btn) ─── */
.disc-card-footer {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.disc-card-genre-chip {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #1a1a1a;
  color: #666;
  border: 1px solid #222;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

/* ─── Store badge on For You cards ─── */
.disc-card-store-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #888;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  padding: 1px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  white-space: nowrap;
}
.disc-card-store-badge.hhv      { color: var(--silver); border-color: rgba(168, 184, 200,0.25); }
.disc-card-store-badge.deejay   { color: #d0d0d0; border-color: rgba(200,200,200,0.2); }
.disc-card-store-badge.hardwax  { color: #e07020; border-color: rgba(224,112,32,0.25); }
.disc-card-store-badge.juno     { color: #4dabf7; border-color: rgba(77,171,247,0.25); }
.disc-card-store-badge.decks    { color: #a0d911; border-color: rgba(160,217,17,0.25); }
.disc-card-store-badge.ttlab    { color: #be4bdb; border-color: rgba(190,75,219,0.25); }
.disc-card-store-badge.uvs      { color: #20c997; border-color: rgba(32,201,151,0.25); }
.disc-card-store-badge.phonica  { color: #ff6b6b; border-color: rgba(255,107,107,0.25); }
.disc-card-store-badge.yoyaku   { color: #ffd43b; border-color: rgba(255,212,59,0.25); }
.disc-card-store-badge.gramaphone { color: #e0303e; border-color: rgba(200,16,46,0.25); }
.disc-card-store-badge.further  { color: #d97706; border-color: rgba(217,119,6,0.25); }
.disc-card-store-badge.octopus  { color: #3a9bd5; border-color: rgba(58,155,213,0.25); }

.disc-card-price {
  font-size: 11px;
  font-weight: 700;
  color: var(--silver);
  margin-left: auto;
  white-space: nowrap;
}

.disc-card-cart-btn {
  background: none;
  border: 1px solid #2a2a2a;
  color: #555;
  font-size: 13px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  flex-shrink: 0;
  font-family: inherit;
}
.disc-card-cart-btn:hover { border-color: var(--silver); color: var(--silver); }
.disc-card-cart-btn.in-cart { border-color: var(--silver); color: var(--silver); background: rgba(168, 184, 200,0.1); }
.disc-card-cart-btn.in-cart:hover { border-color: #e55; color: #e55; background: rgba(220,50,50,0.06); }

/* ─── Light mode overrides for For You ─── */
body.light .disc-tab-btn { color: #bbb; }
body.light .disc-tab-btn:hover { color: #444; }
body.light .disc-tab-btn.active { color: var(--silver); }
body.light .disc-tabs { border-bottom-color: #e0e0e0; }
body.light .disc-filter-btn { border-color: #ddd; color: #aaa; }
body.light .disc-filter-btn:hover { border-color: #aaa; color: #444; }
body.light .disc-filter-btn.active { border-color: var(--silver); color: var(--silver); }
body.light .disc-taste-tag { background: rgba(168, 184, 200,0.06); color: #aaa; border-color: rgba(168, 184, 200,0.2); }
body.light .disc-fy-card { background: #fff; border-color: #e8e8e8; }
body.light .disc-fy-card:hover { border-color: #ccc; }
body.light .disc-card-art-wrap { background: #f5f5f5; }
body.light .disc-card-art-placeholder { color: #d0d0d0; }
body.light .disc-card-artist { color: #b8860b; }
body.light .disc-card-title { color: #333; }
body.light .disc-card-genre-chip { background: #f5f5f5; color: #aaa; border-color: #e8e8e8; }
body.light .disc-card-store-badge { background: #f5f5f5; border-color: #e0e0e0; }
body.light .disc-card-cart-btn { border-color: #e0e0e0; color: #bbb; }
body.light .disc-wantlist-badge { color: #2d6a4f; background: rgba(255,255,255,0.9); border-color: rgba(45,106,79,0.4); }

/* ─── Mobile For You ─── */
@media (max-width: 600px) {
  .disc-card-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
  .disc-fy-card { border-radius: 6px; }
  .disc-card-body { padding: 6px 8px 8px; }
  .disc-foryou-filters { gap: 4px; }
  .disc-filter-btn { padding: 3px 9px; font-size: 10px; }
  .disc-vendor-filter { gap: 5px; }
  .disc-vendor-pill { padding: 4px 10px; }
  .disc-discogs-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   DISCOVER — IN STOCK VENDOR FILTER
   ═══════════════════════════════════════════════════════════════ */

.disc-vendor-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.disc-vendor-pill {
  background: none;
  border: 1px solid #2a2a2a;
  color: #666;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.disc-vendor-pill:hover { border-color: #555; color: #bbb; }
.disc-vendor-pill.active { color: #fff; border-color: currentColor; }

/* Store-coloured active states */
.disc-vendor-pill.hhv.active      { color: var(--silver); border-color: var(--silver); background: rgba(168, 184, 200,0.08); }
.disc-vendor-pill.deejay.active   { color: #d0d0d0; border-color: #aaa; background: rgba(200,200,200,0.06); }
.disc-vendor-pill.hardwax.active  { color: #e07020; border-color: #e07020; background: rgba(224,112,32,0.08); }
.disc-vendor-pill.juno.active     { color: #4dabf7; border-color: #4dabf7; background: rgba(77,171,247,0.08); }
.disc-vendor-pill.decks.active    { color: #a0d911; border-color: #a0d911; background: rgba(160,217,17,0.08); }
.disc-vendor-pill.ttlab.active    { color: #be4bdb; border-color: #be4bdb; background: rgba(190,75,219,0.08); }
.disc-vendor-pill.uvs.active      { color: #20c997; border-color: #20c997; background: rgba(32,201,151,0.08); }
.disc-vendor-pill.phonica.active  { color: #ff6b6b; border-color: #ff6b6b; background: rgba(255,107,107,0.08); }
.disc-vendor-pill.yoyaku.active   { color: #ffd43b; border-color: #ffd43b; background: rgba(255,212,59,0.08); }
.disc-vendor-pill.gramaphone.active { color: #e0303e; border-color: #e0303e; background: rgba(200,16,46,0.08); }
.disc-vendor-pill.further.active  { color: #d97706; border-color: #d97706; background: rgba(217,119,6,0.08); }
.disc-vendor-pill.octopus.active  { color: #3a9bd5; border-color: #3a9bd5; background: rgba(58,155,213,0.08); }
.disc-vendor-pill.discogs.active  { color: var(--silver); border-color: var(--silver); background: rgba(168, 184, 200,0.08); }

.disc-vendor-count {
  font-size: 9px;
  opacity: 0.6;
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════
   DISCOVER — DISCOGS MARKETPLACE SECTION
   ═══════════════════════════════════════════════════════════════ */

/* ─── Empty / extension prompt ─── */
.disc-discogs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  gap: 10px;
}
.disc-discogs-empty-title {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  color: #666;
  letter-spacing: 0.3px;
}
.disc-discogs-empty-hint {
  font-size: 12px;
  color: #444;
  max-width: 340px;
  line-height: 1.6;
}
.disc-discogs-ext-btn {
  margin-top: 8px;
  background: none;
  border: 1px solid var(--silver);
  color: var(--silver);
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 7px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s;
}
.disc-discogs-ext-btn:hover { background: rgba(168, 184, 200,0.08); }

/* ─── Summary bar ─── */
.disc-discogs-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  font-size: 12px;
  color: #666;
  flex-wrap: wrap;
}
.disc-discogs-total {
  color: var(--silver);
  font-weight: 600;
}
.disc-discogs-resync-btn {
  margin-left: auto;
  background: none;
  border: 1px solid #333;
  color: #666;
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.3px;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s;
}
.disc-discogs-resync-btn:hover { border-color: #777; color: #bbb; }

/* ─── Discogs card grid ─── */
.disc-discogs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.disc-dg-card {
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s;
  display: flex;
  gap: 10px;
  padding: 10px;
  align-items: flex-start;
}
.disc-dg-card:hover { border-color: var(--silver); transform: translateY(-1px); }

.disc-dg-art-wrap {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 4px;
  overflow: hidden;
  background: #0d0d0d;
}
.disc-dg-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.disc-dg-art-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2a2a2a;
  font-size: 18px;
}

.disc-dg-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.disc-dg-artist {
  font-size: 10px;
  font-weight: 700;
  color: var(--silver);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}
.disc-dg-title {
  font-size: 11px;
  color: #bbb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.disc-dg-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.disc-dg-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--silver);
}
.disc-dg-price-na {
  font-size: 11px;
  color: #444;
}
.disc-dg-cond {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: #777;
  font-family: 'Oswald', sans-serif;
  white-space: nowrap;
}

.disc-dg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 1px;
}
.disc-dg-seller {
  font-size: 10px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
.disc-dg-rating {
  color: #4ade80;
  font-size: 9px;
}
.disc-dg-ships {
  font-size: 9px;
  color: #555;
}
.disc-dg-count {
  font-size: 9px;
  color: #444;
  margin-left: auto;
  white-space: nowrap;
}

/* ─── Light mode ─── */
body.light .disc-vendor-pill { border-color: #ddd; color: #aaa; }
body.light .disc-vendor-pill:hover { border-color: #aaa; color: #444; }
body.light .disc-dg-card { background: #fff; border-color: #e8e8e8; }
body.light .disc-dg-card:hover { border-color: var(--silver); }
body.light .disc-dg-art-wrap { background: #f5f5f5; }
body.light .disc-dg-art-placeholder { color: #d0d0d0; }
body.light .disc-dg-title { color: #333; }
body.light .disc-dg-seller { color: #888; }
body.light .disc-dg-cond { background: #f5f5f5; border-color: #e0e0e0; color: #999; }
body.light .disc-discogs-empty-title { color: #888; }
body.light .disc-discogs-empty-hint { color: #bbb; }
body.light .disc-discogs-summary { color: #999; }
body.light .disc-discogs-resync-btn { border-color: #ddd; color: #bbb; }
body.light .disc-discogs-resync-btn:hover { border-color: #aaa; color: #444; }

/* ─── Discover: For You stat line ─── */
.disc-fy-statline {
  font-size: 11px;
  color: #555;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 2px 10px;
}

/* ─── Discover: Store filter pills on For You tab ─── */
.disc-store-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.disc-store-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid #2a2a2a;
  background: transparent;
  color: #666;
  font-size: 10px;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.disc-store-filter-pill:hover { border-color: #555; color: #ccc; }
.disc-store-filter-pill.active { border-color: var(--gold); color: var(--gold); background: rgba(168, 184, 200,0.07); }
/* Per-store active colors (reuse storeClass active states) */
.disc-store-filter-pill.store-hhv.active    { border-color: #3b82f6; color: #3b82f6; background: rgba(59,130,246,0.07); }
.disc-store-filter-pill.store-deejay.active { border-color: #f97316; color: #f97316; background: rgba(249,115,22,0.07); }
.disc-store-filter-pill.store-juno.active   { border-color: #a855f7; color: #a855f7; background: rgba(168,85,247,0.07); }
.disc-store-filter-pill.store-hardwax.active { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,0.07); }
.disc-store-filter-pill.store-further.active { border-color: #ec4899; color: #ec4899; background: rgba(236,72,153,0.07); }
.disc-store-filter-pill.store-decks.active  { border-color: #14b8a6; color: #14b8a6; background: rgba(20,184,166,0.07); }
.disc-store-filter-pill.store-yoyaku.active { border-color: #f43f5e; color: #f43f5e; background: rgba(244,63,94,0.07); }
.disc-store-filter-pill.store-ttlab.active  { border-color: #eab308; color: #eab308; background: rgba(234,179,8,0.07); }
.disc-store-filter-pill.store-phonica.active { border-color: #84cc16; color: #84cc16; background: rgba(132,204,22,0.07); }

/* ─── Discover: Discogs price badge on For You cards ─── */
.disc-card-dg-price {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: #888;
  background: #161616;
  border: 1px solid #222;
  border-radius: 4px;
  padding: 1px 5px;
  cursor: help;
  white-space: nowrap;
  flex-shrink: 0;
}
.disc-card-dg-price:hover { border-color: #444; color: #aaa; }

/* ─── Discover: Discogs sync banner ─── */
.dg-sync-banner {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dg-sync-banner.running { background: rgba(168, 184, 200,0.08); color: var(--silver); border: 1px solid rgba(168, 184, 200,0.2); }
.dg-sync-banner.done    { background: rgba(74,222,128,0.07); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
.dg-sync-banner.error   { background: rgba(248,113,113,0.07); color: #f87171; border: 1px solid rgba(248,113,113,0.2); }
.dg-sync-spin { animation: spin 1.2s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Discover: Discogs summary extras ─── */
.disc-discogs-age { font-size: 10px; color: #444; }
.disc-discogs-syncing { font-size: 10px; color: var(--silver); font-style: italic; }
.disc-discogs-ext-hint { font-size: 11px; color: #555; margin-top: 8px; line-height: 1.5; }

/* ─── Light mode additions ─── */
body.light .disc-store-filter-pill { border-color: #ddd; color: #aaa; }
body.light .disc-store-filter-pill:hover { border-color: #aaa; color: #444; }
body.light .disc-card-dg-price { background: #f5f5f5; border-color: #e0e0e0; color: #999; }
body.light .disc-fy-statline { color: #aaa; }

/* ══════════════════════════════════════════════════════════
   PROFILE VIEW
   ══════════════════════════════════════════════════════════ */

.profile-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

/* ── Hero ── */
.prof-hero {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  padding: 28px;
  margin-bottom: 24px;
  position: relative;
}

.prof-ring {
  flex-shrink: 0;
}
.prof-ring-svg {
  width: 120px;
  height: 120px;
}
.prof-ring-bg {
  fill: none;
  stroke: #1e1e1e;
  stroke-width: 8;
}
.prof-ring-fill {
  fill: none;
  stroke: var(--silver);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease;
}
.prof-ring-pct {
  fill: var(--silver);
  font-size: 14px;
  font-weight: 700;
  font-family: 'Oswald', sans-serif;
}
.prof-ring-label {
  fill: #555;
  font-size: 9px;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.prof-hero-info {
  flex: 1;
  min-width: 0;
}

.prof-username-row { margin-bottom: 8px; }
.prof-username {
  font-family: 'Oswald', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #eee;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.prof-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.prof-meta-item {
  font-size: 12px;
  color: #555;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.4px;
}

.prof-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.prof-stat-card {
  background: #161616;
  border: 1px solid #222;
  border-radius: 6px;
  padding: 12px 18px;
  min-width: 90px;
}
.prof-stat-value {
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--silver);
  line-height: 1;
}
.prof-stat-label {
  font-size: 10px;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 4px;
  font-family: 'Oswald', sans-serif;
}
.prof-stat-sub {
  font-size: 10px;
  color: #444;
  margin-top: 3px;
}

.prof-refresh-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: 1px solid #222;
  color: #555;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  transition: color 0.15s, border-color 0.15s;
}
.prof-refresh-btn:hover { color: var(--silver); border-color: var(--silver); }

/* ── Two-column body ── */
.prof-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 760px) { .prof-body { grid-template-columns: 1fr; } }

.prof-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.prof-section {
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 8px;
  padding: 18px 20px;
}
.prof-section-title {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #555;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.prof-section-sub {
  font-size: 10px;
  color: #3a3a3a;
  text-transform: none;
  font-family: inherit;
  letter-spacing: 0;
}

/* ── Taste DNA bars ── */
.prof-dna-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.prof-dna-name {
  font-size: 11px;
  color: #aaa;
  width: 90px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prof-dna-bar-wrap {
  flex: 1;
  height: 4px;
  background: #1e1e1e;
  border-radius: 2px;
  overflow: hidden;
}
.prof-dna-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--silver), #e8c44a);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.prof-dna-count {
  font-size: 10px;
  color: #444;
  width: 24px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Style cloud ── */
.prof-style-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: baseline;
}
.prof-style-pill {
  background: #161616;
  border: 1px solid #242424;
  border-radius: 4px;
  padding: 3px 8px;
  color: #888;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.3px;
  cursor: default;
  transition: border-color 0.15s, color 0.15s;
}
.prof-style-pill:hover { border-color: var(--silver); color: var(--silver); }
.prof-style-count { font-size: 9px; color: #444; }

/* ── Store breakdown ── */
.prof-store-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.prof-store-name {
  font-size: 11px;
  color: #777;
  width: 80px;
  flex-shrink: 0;
  font-family: 'Oswald', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Per-store color on name */
.prof-store-name.store-hhv    { color: #3b82f6; }
.prof-store-name.store-deejay { color: #f97316; }
.prof-store-name.store-juno   { color: #a855f7; }
.prof-store-name.store-hardwax{ color: #22c55e; }
.prof-store-name.store-further{ color: #ec4899; }
.prof-store-name.store-decks  { color: #14b8a6; }
.prof-store-name.store-yoyaku { color: #f43f5e; }
.prof-store-name.store-ttlab  { color: #eab308; }
.prof-store-name.store-phonica{ color: #84cc16; }

.prof-store-bar-wrap {
  flex: 1;
  height: 5px;
  background: #1e1e1e;
  border-radius: 3px;
  overflow: hidden;
}
.prof-store-bar {
  height: 100%;
  background: #333;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.prof-store-bar.store-hhv     { background: #3b82f6; }
.prof-store-bar.store-deejay  { background: #f97316; }
.prof-store-bar.store-juno    { background: #a855f7; }
.prof-store-bar.store-hardwax { background: #22c55e; }
.prof-store-bar.store-further { background: #ec4899; }
.prof-store-bar.store-decks   { background: #14b8a6; }
.prof-store-bar.store-yoyaku  { background: #f43f5e; }
.prof-store-bar.store-ttlab   { background: #eab308; }
.prof-store-bar.store-phonica { background: #84cc16; }

.prof-store-count {
  font-size: 10px;
  color: #444;
  width: 52px;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Scan history ── */
.prof-scan-list { display: flex; flex-direction: column; gap: 2px; }
.prof-scan-row {
  display: grid;
  grid-template-columns: 44px 1fr 80px 68px 44px 48px;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 4px;
  background: #0e0e0e;
  font-size: 10px;
  color: #555;
}
.prof-scan-row.prof-scan-warn { background: rgba(168, 184, 200,0.04); }
.prof-scan-row.prof-scan-err  { background: rgba(248,113,113,0.04); }
.prof-scan-type {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.prof-scan-date  { color: #444; }
.prof-scan-items { color: #666; }
.prof-scan-stock { color: var(--silver); font-weight: 600; }
.prof-scan-dur   { color: #444; text-align: right; }
.prof-scan-errs  { color: #f87171; text-align: right; }

/* ── Recent finds ── */
.prof-finds-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prof-find-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0e0e0e;
  border: 1px solid #1a1a1a;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.prof-find-card:hover { border-color: var(--silver); }
.prof-find-art {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  background: #1a1a1a;
}
.prof-find-art-ph {
  width: 40px;
  height: 40px;
  border-radius: 3px;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 14px;
  flex-shrink: 0;
}
.prof-find-body { flex: 1; min-width: 0; }
.prof-find-artist { font-size: 11px; font-weight: 600; color: #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-find-title  { font-size: 10px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.prof-find-meta   { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.prof-find-store  { font-size: 9px; font-family: 'Oswald', sans-serif; color: #666; text-transform: uppercase; letter-spacing: 0.3px; }
.prof-find-store.store-hhv    { color: #3b82f6; }
.prof-find-store.store-deejay { color: #f97316; }
.prof-find-store.store-juno   { color: #a855f7; }
.prof-find-store.store-hardwax{ color: #22c55e; }
.prof-find-store.store-further{ color: #ec4899; }
.prof-find-price  { font-size: 10px; color: var(--silver); font-weight: 600; }
.prof-find-age    { font-size: 9px; color: #444; margin-left: auto; }

/* ── Empty states ── */
.prof-empty {
  padding: 48px 24px;
  text-align: center;
  color: #444;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.5px;
}
.prof-empty-small { font-size: 11px; color: #444; padding: 8px 0; }

/* ── Light mode ── */
body.light .prof-hero      { background: #fff; border-color: #eee; }
body.light .prof-section   { background: #fff; border-color: #eee; }
body.light .prof-stat-card { background: #f8f8f8; border-color: #eee; }
body.light .prof-scan-row  { background: #f5f5f5; }
body.light .prof-find-card { background: #f8f8f8; border-color: #eee; }
body.light .prof-find-art-ph { background: #eee; }
body.light .prof-username  { color: #111; }
body.light .prof-dna-bar-wrap  { background: #eee; }
body.light .prof-store-bar-wrap { background: #eee; }
body.light .prof-style-pill { background: #f5f5f5; border-color: #e5e5e5; color: #777; }

/* ─── Profile cross-navigation hover states ─── */
.prof-dna-link:hover .prof-dna-bar { background: linear-gradient(90deg, #e8c44a, #fff07a); }
.prof-dna-link:hover .prof-dna-name { color: var(--silver); }
.prof-dna-link:hover .prof-store-bar { filter: brightness(1.3); }
.prof-dna-link:hover .prof-store-name { filter: brightness(1.3); }
.prof-dna-arrow {
  font-size: 10px;
  color: #333;
  margin-left: 4px;
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}
.prof-dna-link:hover .prof-dna-arrow { color: var(--silver); transform: translateX(3px); }
.prof-style-link { cursor: pointer; }
.prof-style-link:hover { border-color: var(--silver) !important; color: var(--silver) !important; }

/* ─── Profile hero buttons ─── */
.prof-hero-btns {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.prof-share-btn {
  background: none;
  border: 1px solid #2a2a2a;
  color: #666;
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 11px;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: color 0.15s, border-color 0.15s;
}
.prof-share-btn:hover { color: var(--silver); border-color: var(--silver); }

/* ─── Profile: Diggers community panel ─── */
.prof-diggers-section {
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 8px;
  padding: 18px 20px;
  margin-top: 20px;
}
.prof-diggers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.prof-digger-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0e0e0e;
  border: 1px solid #1a1a1a;
  border-radius: 7px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.prof-digger-card:hover {
  border-color: var(--silver);
  background: #141414;
}
.prof-digger-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e1e1e, #2a2a2a);
  border: 1px solid #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--silver);
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.prof-digger-card:hover .prof-digger-avatar { border-color: var(--silver); }
.prof-digger-info { flex: 1; min-width: 0; }
.prof-digger-name {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #ccc;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.prof-digger-card:hover .prof-digger-name { color: var(--silver); }
.prof-digger-stats {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}
.prof-digger-stat   { font-size: 10px; color: #555; }
.prof-digger-stat.gold { color: var(--silver); font-weight: 600; }
.prof-digger-stat.dim  { color: #3a3a3a; }
.prof-digger-dot    { font-size: 9px; color: #2a2a2a; }
.prof-digger-genres { display: flex; gap: 4px; flex-wrap: wrap; }
.prof-digger-genre {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 3px;
  background: #1a1a1a;
  border: 1px solid #222;
  color: #555;
  font-family: 'Oswald', sans-serif;
  white-space: nowrap;
}
.prof-digger-pct {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #2a2a2a;
  flex-shrink: 0;
  transition: color 0.15s;
  min-width: 44px;
  text-align: right;
}
.prof-digger-card:hover .prof-digger-pct { color: var(--silver); }

/* Light mode */
body.light .prof-diggers-section { background: #fff; border-color: #eee; }
body.light .prof-digger-card     { background: #f8f8f8; border-color: #eee; }
body.light .prof-digger-card:hover { border-color: var(--silver); background: #fffdf0; }
body.light .prof-digger-avatar   { background: #f0f0f0; border-color: #e0e0e0; }
body.light .prof-digger-name     { color: #333; }
body.light .prof-digger-genre    { background: #f0f0f0; border-color: #e5e5e5; color: #aaa; }

/* ─── Profile: Collection panel ─────────────────────────────────────────── */
.prof-coll-section {
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 8px;
  padding: 18px 20px;
  margin-top: 20px;
}
.prof-coll-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.prof-coll-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #171717;
  border: 1px solid #222;
  border-radius: 6px;
  padding: 8px 10px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.prof-coll-card:hover { border-color: #333; }
.prof-coll-thumb {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.prof-coll-thumb-ph {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #444;
  flex-shrink: 0;
}
.prof-coll-info { overflow: hidden; min-width: 0; }
.prof-coll-artist {
  font-size: 11px;
  font-weight: 600;
  color: var(--silver);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prof-coll-title {
  font-size: 12px;
  color: #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.prof-coll-meta {
  font-size: 10px;
  color: #666;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prof-coll-more {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12px;
  color: #555;
  padding: 8px 0 2px;
}
.prof-section-link {
  color: var(--gold);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  margin-left: 8px;
  text-decoration: none;
  opacity: 0.8;
}
.prof-section-link:hover { opacity: 1; text-decoration: underline; }

/* Light mode */
body.light .prof-coll-section { background: #fff; border-color: #eee; }
body.light .prof-coll-card    { background: #f8f8f8; border-color: #eee; }
body.light .prof-coll-card:hover { border-color: var(--silver); }
body.light .prof-coll-thumb-ph { background: #eee; }
body.light .prof-coll-title   { color: #333; }

/* ── Taste match badges ─────────────────────────────────────────────────── */
.prof-taste-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 4px 8px;
  min-width: 52px;
  flex-shrink: 0;
  font-family: 'Oswald', sans-serif;
  line-height: 1;
  border: 1px solid transparent;
}
.prof-taste-badge .prof-taste-pct-sym { font-size: 11px; margin-left: 1px; }
.prof-taste-badge .prof-taste-label   { font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; opacity: 0.75; }
.prof-taste-badge > :first-child      { font-size: 15px; font-weight: 700; }

.prof-taste-badge.match-high { background: rgba(168, 184, 200,0.15); border-color: rgba(168, 184, 200,0.4); color: var(--silver); }
.prof-taste-badge.match-mid  { background: rgba(72,169,113,0.12); border-color: rgba(72,169,113,0.35); color: #48a971; }
.prof-taste-badge.match-low  { background: rgba(100,100,100,0.12); border-color: rgba(100,100,100,0.25); color: #666; }

/* Badge on public profile hero */
.prof-username-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.prof-hero-match {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  border: 1px solid transparent;
  margin-bottom: 6px;
}
.prof-hero-match .prof-match-num { font-size: 16px; font-weight: 700; margin-right: 2px; }
.prof-hero-match.match-high { background: rgba(168, 184, 200,0.15); border-color: rgba(168, 184, 200,0.4); color: var(--silver); }
.prof-hero-match.match-mid  { background: rgba(72,169,113,0.12); border-color: rgba(72,169,113,0.35); color: #48a971; }
.prof-hero-match.match-low  { background: rgba(100,100,100,0.12); border-color: rgba(100,100,100,0.25); color: #888; }

body.light .prof-hero-match.match-low { color: #666; }

/* ── Personality / archetype tags ──────────────────────────────────────── */
.prof-archetype-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
}
.prof-archetype-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.prof-archetype-icon { font-size: 14px; line-height: 1; }

.prof-archetype-gold   { background: rgba(168, 184, 200,0.18); border-color: rgba(168, 184, 200,0.5); color: var(--silver); }
.prof-archetype-purple { background: rgba(140,90,200,0.18); border-color: rgba(140,90,200,0.5); color: #a060dd; }
.prof-archetype-teal   { background: rgba(40,180,150,0.15); border-color: rgba(40,180,150,0.45); color: #28b496; }
.prof-archetype-blue   { background: rgba(60,130,220,0.15); border-color: rgba(60,130,220,0.45); color: #4882dc; }
.prof-archetype-green  { background: rgba(72,169,113,0.15); border-color: rgba(72,169,113,0.45); color: #48a971; }
.prof-archetype-red    { background: rgba(220,60,60,0.15);  border-color: rgba(220,60,60,0.45);  color: #dc4040; }
.prof-archetype-orange { background: rgba(220,130,40,0.15); border-color: rgba(220,130,40,0.45); color: #dc8228; }
.prof-archetype-pink   { background: rgba(220,80,150,0.15); border-color: rgba(220,80,150,0.45); color: #dc5096; }
.prof-archetype-smoke  { background: rgba(120,120,120,0.15);border-color: rgba(120,120,120,0.35);color: #888; }

body.light .prof-archetype-smoke { background: #f0f0f0; border-color: #ddd; color: #666; }

/* ── Profile metadata badges ── */
.prof-meta-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
}
.prof-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}
.prof-badge-gold  { color: var(--silver); border-color: var(--silver)50; background: var(--silver)10; }
.prof-badge-teal  { color: #4ecdc4; border-color: #4ecdc440; background: #4ecdc410; }
.prof-badge-smoke { color: #999;    border-color: #44444480; background: #33333320; }
.prof-badge-blue  { color: #7eb8f7; border-color: #7eb8f740; background: #7eb8f710; }
.prof-badge-era   { color: #b0b0b0; border-color: #44444480; background: #22222220; }
.prof-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #888;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid #2a2a2a;
  background: #1a1a1a;
  white-space: nowrap;
}
.prof-stat-pill-sub { font-size: 9px; opacity: 0.7; }
body.light .prof-badge-gold  { background: #fffbe8; border-color: var(--silver)60; }
body.light .prof-badge-teal  { background: #e8fffe; border-color: #4ecdc460; }
body.light .prof-badge-smoke { background: #f5f5f5; border-color: #cccccc80; }
body.light .prof-badge-blue  { background: #eaf4ff; border-color: #7eb8f760; }
body.light .prof-badge-era   { background: #f5f5f5; border-color: #cccccc; color: #666; }
body.light .prof-stat-pill   { background: #f8f8f8; border-color: #e0e0e0; color: #666; }

/* ── Discover: Diggers grid ── */
.disc-diggers-wrap {
  padding: 16px 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.disc-digger-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.disc-digger-card:hover { border-color: var(--silver)60; background: #161208; }
.disc-digger-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #1e1e1e;
  border: 1px solid #333;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-size: 18px; font-weight: 700;
  color: var(--silver);
  flex-shrink: 0;
}
.disc-digger-info { flex: 1; min-width: 0; }
.disc-digger-name {
  font-family: 'Oswald', sans-serif;
  font-size: 15px; font-weight: 600;
  color: #eee; text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}
.disc-digger-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.disc-digger-tag {
  font-size: 10px; font-family: 'Oswald', sans-serif;
  padding: 2px 7px; border-radius: 12px;
  background: #1a1a1a; border: 1px solid #333;
  color: var(--silver); letter-spacing: 0.3px;
}
.disc-digger-genres { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.disc-digger-genre {
  font-size: 10px; color: #888;
  padding: 1px 6px; border-radius: 10px;
  background: #1a1a1a; border: 1px solid #2a2a2a;
}
.disc-digger-stats { font-size: 11px; color: #555; display: flex; gap: 10px; }
.disc-digger-match {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-width: 48px; padding: 6px 8px;
  border-radius: 8px; border: 1px solid transparent;
  font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 700;
  line-height: 1; flex-shrink: 0;
}
.disc-digger-match-label { font-size: 8px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; margin-top: 2px; }
.disc-digger-match.match-high { color: #4ecdc4; border-color: #4ecdc440; background: #4ecdc410; }
.disc-digger-match.match-mid  { color: var(--silver); border-color: var(--silver)40; background: var(--silver)10; }
.disc-digger-match.match-low  { color: #666;    border-color: #33333380; background: #1a1a1a; }
body.light .disc-digger-card  { background: #fff; border-color: #eee; }
body.light .disc-digger-card:hover { border-color: var(--silver)80; background: #fffdf5; }
body.light .disc-digger-avatar { background: #f5f5f5; border-color: #ddd; }
body.light .disc-digger-name  { color: #333; }
body.light .disc-digger-tag   { background: #fff8e0; border-color: #e8d890; color: #8a6000; }
body.light .disc-digger-genre { background: #f5f5f5; border-color: #e0e0e0; color: #888; }
body.light .disc-digger-stats { color: #aaa; }

/* ── Taste Intelligence band (Hunting / Keeping / Leaning / Store Match) ── */
.ti-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #1a1a1a;
  border-top: 1px solid #1e1e1e;
  border-bottom: 1px solid #1e1e1e;
  margin: 0 -1px;
}
.ti-col {
  background: #0d0d0d;
  padding: 18px 20px 16px;
}
.ti-col-head {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #eee;
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ti-icon { font-size: 14px; }
.ti-col-sub {
  font-size: 10px;
  font-weight: 400;
  color: #555;
  text-transform: none;
  letter-spacing: 0;
  margin-left: auto;
}
.ti-rows { display: flex; flex-direction: column; gap: 6px; }
.ti-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 6px;
}
.ti-label {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ti-bar-wrap {
  width: 60px;
  height: 3px;
  background: #1e1e1e;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.ti-bar { height: 100%; border-radius: 2px; transition: width 0.3s; }
.ti-bar-hunt     { background: var(--silver); }
.ti-bar-keep     { background: #4ecdc4; }
.ti-bar-lean     { background: #7eb8f7; }
.ti-bar-match-hi  { background: #4ecdc4; }
.ti-bar-match-mid { background: var(--silver); }
.ti-bar-match-lo  { background: #444; }
.ti-pct {
  font-size: 10px;
  color: #555;
  font-family: 'Oswald', sans-serif;
  min-width: 26px;
  text-align: right;
}
.ti-drift-up   { font-size: 10px; color: #4ecdc4; font-weight: 600; min-width: 30px; text-align: right; }
.ti-drift-dn   { font-size: 10px; color: #e05555; font-weight: 600; min-width: 30px; text-align: right; }
.ti-drift-flat { font-size: 10px; color: #444; min-width: 30px; text-align: right; }
.ti-empty { font-size: 11px; color: #444; font-style: italic; padding: 4px 0; }

/* Light mode */
body.light .ti-band       { background: #e8e8e8; border-color: #ddd; }
body.light .ti-col        { background: #fafafa; }
body.light .ti-col-head   { color: #222; }
body.light .ti-col-sub    { color: #aaa; }
body.light .ti-label      { color: #666; }
body.light .ti-bar-wrap   { background: #e8e8e8; }
body.light .ti-pct        { color: #aaa; }
body.light .ti-bar-match-lo { background: #ccc; }
body.light .ti-drift-flat { color: #bbb; }

/* Mobile: stack into 2x2 */
@media (max-width: 700px) {
  .ti-band { grid-template-columns: 1fr 1fr; }
  .ti-col  { padding: 14px 16px; }
  .ti-bar-wrap { width: 40px; }
}
@media (max-width: 440px) {
  .ti-band { grid-template-columns: 1fr; }
}

/* ── Era decade chart ───────────────────────────────────────────────────── */
.prof-decade-section {
  padding: 16px 20px 12px;
  margin-bottom: 0;
  border-bottom: 1px solid #1a1a1a;
}
.prof-decade-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 64px;
  margin-top: 10px;
}
.prof-decade-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.prof-decade-bar {
  width: 100%;
  background: #2a2a2a;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: background 0.2s;
}
.prof-decade-col.top .prof-decade-bar { background: var(--silver); }
.prof-decade-label {
  font-size: 10px;
  color: #555;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.3px;
}
.prof-decade-col.top .prof-decade-label { color: var(--silver); }

body.light .prof-decade-bar { background: #e5e5e5; }
body.light .prof-decade-col.top .prof-decade-bar { background: var(--silver); }
body.light .prof-decade-section { border-color: #eee; }

/* ── Meta-sync progress ─────────────────────────────────────────────────── */
.prof-meta-sync-row {
  margin: 6px 0 10px;
}
.prof-meta-sync-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: #555;
  margin-bottom: 5px;
}
.prof-meta-sync-btn {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid rgba(168, 184, 200,0.4);
  background: rgba(168, 184, 200,0.08);
  color: var(--silver);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.prof-meta-sync-btn:hover { background: rgba(168, 184, 200,0.18); }
.prof-meta-sync-btn:disabled { opacity: 0.5; cursor: default; }
.prof-meta-sync-done { color: #48a971; font-size: 11px; }
.prof-meta-sync-bar-wrap {
  height: 3px;
  background: #1e1e1e;
  border-radius: 2px;
  overflow: hidden;
}
.prof-meta-sync-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--silver), #c8d8e8);
  border-radius: 2px;
  transition: width 0.4s;
}
body.light .prof-meta-sync-label { color: #999; }
body.light .prof-meta-sync-bar-wrap { background: #eee; }

/* ══════════════════════════════════════════════════════════════════════════
   GOLDIE CHAT
   ══════════════════════════════════════════════════════════════════════════ */

/* Nav button */
.goldie-nav-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 20px;
  background: rgba(168, 184, 200,0.12); border: 1px solid rgba(168, 184, 200,0.35);
  color: var(--silver); cursor: pointer; transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.goldie-btn-label {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1;
}
.goldie-btn-ask {
  font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.65;
}
.goldie-btn-name {
  font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
}
.goldie-nav-btn:hover, .goldie-nav-btn.active {
  background: rgba(168, 184, 200,0.22); border-color: rgba(168, 184, 200,0.65);
}
/* Animated AI sparkle icon */
.goldie-ai-icon {
  width: 15px; height: 15px; flex-shrink: 0;
  animation: goldieAiPulse 2.4s ease-in-out infinite;
  transform-origin: center;
}
.goldie-nav-btn.active .goldie-ai-icon {
  animation: goldieAiSpin 4s linear infinite;
}
@keyframes goldieAiPulse {
  0%, 100% { opacity: 1;   transform: scale(1);    filter: drop-shadow(0 0 0px var(--silver)); }
  50%       { opacity: 0.75; transform: scale(1.18); filter: drop-shadow(0 0 4px var(--silver)); }
}
@keyframes goldieAiSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Panel */
.goldie-panel {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 420px; max-width: 100vw;
  background: #0d0d0d; border-left: 1px solid #222;
  display: flex; flex-direction: column; z-index: 9999;
  box-shadow: -8px 0 32px rgba(0,0,0,0.6);
}
body.light .goldie-panel { background: #fff; border-color: #e5e5e5; box-shadow: -8px 0 32px rgba(0,0,0,0.12); }

/* Header */
.goldie-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #1a1a1a;
  background: #0a0a0a; flex-shrink: 0;
}
body.light .goldie-header { background: #f8f8f8; border-color: #eee; }
.goldie-title { display: flex; align-items: center; gap: 8px; }
.goldie-star { color: var(--silver); font-size: 18px; }
.goldie-title > span:nth-child(2) {
  font-family: 'Oswald',sans-serif; font-size: 18px; font-weight: 700;
  color: #eee; letter-spacing: 1px; text-transform: uppercase;
}
body.light .goldie-title > span:nth-child(2) { color: #111; }
.goldie-subtitle { font-family: 'Inter', sans-serif; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
.goldie-header-actions { display: flex; gap: 8px; align-items: center; }
.goldie-new-btn {
  font-size: 11px; padding: 3px 10px; border-radius: 12px;
  border: 1px solid #333; background: transparent; color: #888; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.goldie-new-btn:hover { border-color: var(--silver); color: var(--silver); }
.goldie-close-btn {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: #1a1a1a; color: #666; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.goldie-close-btn:hover { background: #2a2a2a; color: #eee; }
body.light .goldie-close-btn { background: #eee; color: #666; }

/* Messages */
.goldie-messages {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px;
  scroll-behavior: smooth;
}

/* Welcome */
.goldie-welcome { text-align: center; padding: 24px 16px; }
.goldie-welcome-icon { font-size: 36px; color: var(--silver); margin-bottom: 12px; }
.goldie-welcome-text { font-size: 14px; color: #888; line-height: 1.5; margin-bottom: 16px; }
body.light .goldie-welcome-text { color: #666; }
.goldie-starters { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.goldie-starters button {
  font-size: 11px; padding: 5px 12px; border-radius: 16px;
  border: 1px solid #2a2a2a; background: #131313; color: #aaa;
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.goldie-starters button:hover { border-color: var(--silver); color: var(--silver); }
body.light .goldie-starters button { background: #f5f5f5; border-color: #ddd; color: #666; }

/* Message bubbles */
.goldie-msg { max-width: 92%; padding: 10px 13px; border-radius: 12px; font-size: 13px; line-height: 1.55; }
.goldie-msg-user {
  align-self: flex-end; background: rgba(168, 184, 200,0.15); border: 1px solid rgba(168, 184, 200,0.3);
  color: #e8c547; border-radius: 12px 12px 2px 12px;
}
.goldie-msg-asst {
  align-self: flex-start; background: #161616; border: 1px solid #222; color: #ccc;
  border-radius: 2px 12px 12px 12px; max-width: 100%;
}
body.light .goldie-msg-asst { background: #f5f5f5; border-color: #e5e5e5; color: #333; }
.goldie-msg-asst ul, .goldie-msg-asst ol { margin: 4px 0 4px 18px; padding: 0; }
.goldie-msg-asst li { margin: 3px 0; }
.goldie-msg-asst strong { color: #eee; }
body.light .goldie-msg-asst strong { color: #111; }

/* Markdown rendered inside GOLDIE messages */
.goldie-p { margin: 0 0 4px 0; }
.goldie-spacer { height: 6px; }
.goldie-hr { border: none; border-top: 1px solid #2a2a2a; margin: 8px 0; }
body.light .goldie-hr { border-color: #ddd; }

.goldie-h1, .goldie-h2, .goldie-h3 {
  font-family: 'Oswald', sans-serif; letter-spacing: 0.5px;
  color: #eee; margin: 10px 0 4px 0; line-height: 1.2;
}
.goldie-h1 { font-size: 16px; color: var(--silver); border-bottom: 1px solid #2a2a2a; padding-bottom: 4px; }
.goldie-h2 { font-size: 14px; color: #ddd; }
.goldie-h3 { font-size: 13px; color: #bbb; text-transform: uppercase; letter-spacing: 1px; }
body.light .goldie-h1 { color: #7a5e00; border-color: #eee; }
body.light .goldie-h2 { color: #333; }
body.light .goldie-h3 { color: #555; }

.goldie-code {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 11.5px; padding: 1px 5px; border-radius: 4px;
  background: rgba(168, 184, 200,0.12); color: var(--silver);
  border: 1px solid rgba(168, 184, 200,0.2);
}
body.light .goldie-code { background: #fef9e7; color: #7a5e00; border-color: #f0d080; }

/* Tables */
.goldie-table-wrap { overflow-x: auto; margin: 6px 0; border-radius: 6px; }
.goldie-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  border: 1px solid #2a2a2a; border-radius: 6px; overflow: hidden;
}
.goldie-table th {
  background: #1a1a1a; color: var(--silver); font-family: 'Oswald', sans-serif;
  font-size: 11px; letter-spacing: 0.5px; text-align: left;
  padding: 6px 10px; border-bottom: 1px solid #2a2a2a; white-space: nowrap;
}
.goldie-table td {
  padding: 5px 10px; border-bottom: 1px solid #1e1e1e; color: #ccc;
  vertical-align: middle;
}
.goldie-table tr:last-child td { border-bottom: none; }
.goldie-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.goldie-table tr:hover td { background: rgba(168, 184, 200,0.05); }
body.light .goldie-table { border-color: #e5e5e5; }
body.light .goldie-table th { background: #f5f5f5; color: #7a5e00; border-color: #e5e5e5; }
body.light .goldie-table td { color: #333; border-color: #eee; }

.goldie-thinking { color: #555; font-style: italic; animation: goldieThink 1.2s infinite; }
@keyframes goldieThink { 0%,100%{opacity:.4} 50%{opacity:1} }

.goldie-tool-call {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: #555; padding: 2px 0; margin: 2px 0;
  transition: color 0.3s;
}
.goldie-tool-call.done { color: #48a971; }
.goldie-tool-icon { font-size: 12px; }
.goldie-error { color: #dc4040; font-size: 12px; }

/* Input */
.goldie-input-row {
  display: flex; gap: 8px; padding: 12px 14px;
  border-top: 1px solid #1a1a1a; background: #0a0a0a; flex-shrink: 0;
  align-items: flex-end;
}
body.light .goldie-input-row { background: #f8f8f8; border-color: #eee; }
.goldie-input {
  flex: 1; background: #161616; border: 1px solid #2a2a2a; border-radius: 10px;
  color: #ccc; font-size: 13px; padding: 9px 12px; resize: none;
  font-family: inherit; line-height: 1.4; min-height: 38px; max-height: 120px;
  transition: border-color 0.15s;
}
.goldie-input:focus { outline: none; border-color: rgba(168, 184, 200,0.5); }
.goldie-input::placeholder { color: #444; }
body.light .goldie-input { background: #fff; border-color: #ddd; color: #333; }
.goldie-send-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--silver); border: none; color: #000; font-size: 17px;
  cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s; font-weight: 700;
}
.goldie-send-btn:hover:not(:disabled) { background: #e8c547; }
.goldie-send-btn:disabled { background: #2a2a2a; color: #555; cursor: default; }

/* Mobile */
@media (max-width: 600px) {
  .goldie-panel { width: 100vw; }
}

/* ═══════════════════════════════════════════════════════════════
   CARD GEM STRIP  (per-release YouTube + taste signals on cards)
   ═══════════════════════════════════════════════════════════════ */

.card-gem-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0 8px;
  min-height: 22px;
}

/* Tier badge */
.cgem-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.cgem-gem   { background: rgba(168, 184, 200,0.15); color: var(--gold);   border-color: rgba(168, 184, 200,0.3); }
.cgem-club  { background: rgba(255,107,107,0.15); color: #ff6b6b;       border-color: rgba(255,107,107,0.3); }
.cgem-deep  { background: rgba(77,171,247,0.12);  color: #4dabf7;       border-color: rgba(77,171,247,0.25); }
.cgem-known { background: rgba(32,201,151,0.12);  color: #20c997;       border-color: rgba(32,201,151,0.25); }

/* View count */
.cgem-views {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}
.cgem-views-underground {
  color: #4ade80;
  font-weight: 500;
}

/* Genre tags from YouTube comment NLP */
.cgem-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 10px;
  background: rgba(255,255,255,0.05);
  color: #888;
  border: 1px solid #333;
  white-space: nowrap;
}

/* YouTube play link */
.cgem-yt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,0,0,0.15);
  color: #ff4444;
  font-size: 8px;
  text-decoration: none;
  border: 1px solid rgba(255,0,0,0.2);
  transition: background 0.15s;
  margin-left: auto; /* push to right */
}
.cgem-yt:hover { background: rgba(255,0,0,0.3); }

/* Light theme */
body.light .cgem-gem   { background: rgba(168, 184, 200,0.1);  border-color: rgba(168, 184, 200,0.25); }
body.light .cgem-club  { background: rgba(255,107,107,0.1); border-color: rgba(255,107,107,0.2); }
body.light .cgem-deep  { background: rgba(77,171,247,0.1);  border-color: rgba(77,171,247,0.2);  }
body.light .cgem-known { background: rgba(32,201,151,0.1);  border-color: rgba(32,201,151,0.2);  }
body.light .cgem-tag   { background: rgba(0,0,0,0.04); border-color: #ddd; color: #777; }
body.light .cgem-views { color: #999; }
body.light .cgem-views-underground { color: #22a06b; }

/* Comment count on card strip */
.cgem-comments {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* DJ mention on card strip */
.cgem-dj {
  font-size: 10px;
  color: #a78bfa;
  white-space: nowrap;
  font-weight: 500;
}
body.light .cgem-dj { color: #7c3aed; }

/* ═══════════════════════════════════════════════════════════════
   MODAL GEM INTELLIGENCE SECTION
   ═══════════════════════════════════════════════════════════════ */

.modal-gem-section {
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
}
body.light .modal-gem-section {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.06);
}

.mgem-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.mgem-score {
  font-size: 12px;
  color: var(--text-muted);
}
.mgem-score strong { color: var(--text-primary); }

/* Signal bars */
.mgem-signals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.mgem-signal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: help;
}
.mgem-signal-label {
  font-size: 10px;
  color: var(--text-muted);
  width: 72px;
  flex-shrink: 0;
  text-align: right;
}
.mgem-bar-wrap {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
body.light .mgem-bar-wrap { background: rgba(0,0,0,0.08); }
.mgem-bar {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.mgem-signal-val {
  font-size: 10px;
  color: var(--text-muted);
  width: 24px;
  text-align: right;
  flex-shrink: 0;
}

/* Stats row: views · likes · comments */
.mgem-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Tag rows: DJs, genres, era, sounds like */
.mgem-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.mgem-row-label {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  padding-top: 2px;
  min-width: 72px;
  text-align: right;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   GEM INTELLIGENCE BAND
   ═══════════════════════════════════════════════════════════════ */

.gi-band {
  background: linear-gradient(180deg, #111 0%, #1a1a1a 100%);
  border: 1px solid #333;
  border-radius: var(--radius-lg);
  margin: 0 0 24px;
  overflow: hidden;
}

.gi-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 20px 10px;
  border-bottom: 1px solid #2a2a2a;
  background: rgba(168, 184, 200,0.04);
}
.gi-header-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--gold);
}
.gi-header-sub {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

/* Archetype section */
.gi-section-arch { padding: 14px 20px 0; }
.gi-archetypes { display: flex; flex-wrap: wrap; gap: 10px; }

.gi-archetype {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 40px;
  border: 1px solid var(--arch-color, var(--gold));
  background: color-mix(in srgb, var(--arch-color, var(--gold)) 8%, transparent);
  font-size: 12px;
  font-weight: 500;
  color: var(--arch-color, var(--gold));
  letter-spacing: 0.5px;
  transition: background 0.2s;
}
.gi-archetype-primary {
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  background: color-mix(in srgb, var(--arch-color, var(--gold)) 15%, transparent);
}
.gi-arch-icon { font-size: 16px; }

/* Hero gem archetype pills */
.gi-hero-archetype {
  border: 1px solid var(--gold);
  border-radius: 40px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.gi-hero-archetype-primary {
  font-size: 12px;
  font-weight: 600;
}

/* Main grid */
.gi-main-grid {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #222;
  flex-wrap: wrap;
  gap: 16px;
}

/* Gauge */
.gi-gauge-block { text-align: center; min-width: 120px; }
.gi-gauge-wrap { width: 120px; margin: 0 auto; }
.gi-gauge-svg { width: 100%; }
.gi-gauge-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}
.gi-gauge-sub {
  font-size: 10px;
  color: var(--text-sec);
  letter-spacing: 1px;
  margin-top: 2px;
  font-weight: 600;
}

/* Gem Score ring */
.gi-ring-block { text-align: center; min-width: 90px; }
.gi-ring-wrap { width: 70px; margin: 0 auto; }
.gi-ring-svg { width: 100%; }
.gi-ring-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
}

/* KPI pills */
.gi-kpis {
  display: flex;
  gap: 12px;
  flex: 1;
  flex-wrap: wrap;
  min-width: 240px;
}
.gi-kpi {
  flex: 1;
  min-width: 80px;
  padding: 10px 14px;
  background: #222;
  border-radius: var(--radius);
  border: 1px solid #2f2f2f;
}
.gi-kpi-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.gi-kpi-val.gi-kpi-hi { color: var(--gold); }
.gi-kpi-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
}
.gi-kpi-sub {
  font-size: 10px;
  color: #555;
  margin-top: 2px;
}

/* Sections */
.gi-section {
  padding: 16px 20px;
  border-bottom: 1px solid #1f1f1f;
}
.gi-section:last-child { border-bottom: none; }
.gi-section-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
}

/* Tier bars */
.gi-tier-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.gi-tier-icon { font-size: 13px; width: 18px; }
.gi-tier-label { font-size: 11px; color: var(--text-sec); width: 110px; flex-shrink: 0; }
.gi-tier-bar-wrap { flex: 1; background: #2a2a2a; border-radius: 3px; height: 6px; }
.gi-tier-bar { height: 100%; border-radius: 3px; min-width: 2px; transition: width 0.6s ease; }
.gi-tier-gem    { background: var(--gold); }
.gi-tier-club   { background: #ff6b6b; }
.gi-tier-deep   { background: #4dabf7; }
.gi-tier-known  { background: #20c997; }
.gi-tier-unscore { background: #444; }
.gi-tier-count { font-size: 11px; color: var(--text-sec); width: 28px; text-align: right; }
.gi-tier-pct { font-size: 10px; color: var(--text-muted); width: 38px; text-align: right; }

/* Top gems row */
.gi-gems-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.gi-gem-card {
  flex-shrink: 0;
  width: 110px;
  background: #222;
  border: 1px solid #2f2f2f;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}
.gi-gem-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.gi-gem-art {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.gi-gem-art-ph {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2a2a;
  color: #444;
  font-size: 24px;
}
.gi-gem-score {
  padding: 5px 7px 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}
.gi-gem-artist {
  padding: 0 7px;
  font-size: 10px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gi-gem-title {
  padding: 1px 7px;
  font-size: 9px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gi-gem-views {
  padding: 2px 7px 7px;
  font-size: 9px;
  color: #555;
}

/* Tags */
.gi-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gi-tag {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid #333;
}
.gi-tag-genre { background: rgba(168, 184, 200,0.08); color: var(--gold); border-color: rgba(168, 184, 200,0.2); }
.gi-tag-dj    { background: rgba(77,171,247,0.08); color: #4dabf7; border-color: rgba(77,171,247,0.2); }
.gi-empty-sm { font-size: 11px; color: var(--text-muted); padding: 4px 0; }

/* Two-col */
.gi-two-col { display: grid; grid-template-columns: 1fr 1fr; padding: 16px 20px; gap: 24px; border-top: 1px solid #1f1f1f; }
.gi-col { }

/* ─── Label & Artist DNA ─── */
.gi-section-dna { border-top: 1px solid #1f1f1f; }
.gi-dna-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.gi-dna-tag {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px; cursor: default;
}
.gi-dna-tag-label  { background: rgba(168, 184, 200,0.15); border: 1px solid rgba(168, 184, 200,0.35); color: var(--silver); }
.gi-dna-tag-artist { background: rgba(77,171,247,0.12);  border: 1px solid rgba(77,171,247,0.3);  color: #4dabf7; }
.gi-dna-icon { font-size: 13px; }
.gi-dna-gem { margin-left: 4px; padding: 1px 5px; background: rgba(255,255,255,0.1); border-radius: 8px; font-size: 10px; font-weight: 700; opacity: 0.8; }
.gi-dna-table { margin-bottom: 14px; }
.gi-dna-table-title { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: #666; text-transform: uppercase; margin-bottom: 8px; }
.gi-dna-row {
  display: grid; grid-template-columns: 1fr 70px 60px 28px;
  align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid #1a1a1a; font-size: 11px;
}
.gi-dna-row:last-child { border-bottom: none; }
.gi-dna-row-legend { background: rgba(168, 184, 200,0.04); border-radius: 4px; padding: 5px 6px; }
.gi-dna-name { color: #ddd; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi-dna-row-legend .gi-dna-name { color: var(--silver); }
.gi-dna-count { color: #555; font-size: 10px; text-align: right; }
.gi-dna-bar-wrap { height: 4px; background: #1f1f1f; border-radius: 2px; overflow: hidden; }
.gi-dna-bar { height: 4px; border-radius: 2px; transition: width 0.6s ease; }
.gi-dna-score { color: #888; font-size: 10px; text-align: right; font-weight: 600; }
.gi-dna-table-artist { margin-top: 12px; }
body.light .gi-section-dna { border-color: #eee; }
body.light .gi-dna-tag-label  { background: rgba(168, 184, 200,0.08); }
body.light .gi-dna-tag-artist { background: rgba(77,171,247,0.06); }
body.light .gi-dna-row { border-color: #f0f0f0; }
body.light .gi-dna-name { color: #333; }
body.light .gi-dna-bar-wrap { background: #e5e5e5; }
body.light .gi-dna-table-title { color: #999; }

/* Light theme */
body.light .gi-band { background: linear-gradient(180deg, #f5f5f5 0%, #fff 100%); border-color: #ddd; }
body.light .gi-header { border-color: #eee; background: rgba(168, 184, 200,0.04); }
body.light .gi-kpi { background: #f5f5f5; border-color: #e5e5e5; }
body.light .gi-kpi-val { color: #111; }
body.light .gi-section { border-color: #eee; }
body.light .gi-tier-bar-wrap { background: #eee; }
body.light .gi-gem-card { background: #f5f5f5; border-color: #ddd; }
body.light .gi-gem-art-ph { background: #eee; color: #ccc; }
body.light .gi-two-col { border-color: #eee; }
body.light .gi-tier-unscore { background: #ccc; }
body.light .gi-archetype { border-color: var(--arch-color, var(--gold)); }

@media (max-width: 600px) {
  .gi-main-grid { padding: 14px; gap: 12px; }
  .gi-gauge-wrap { width: 90px; }
  .gi-kpis { gap: 8px; }
  .gi-kpi { min-width: 60px; padding: 8px 10px; }
  .gi-kpi-val { font-size: 18px; }
  .gi-two-col { grid-template-columns: 1fr; gap: 16px; }
  .gi-section { padding: 12px 14px; }
  .gi-header { padding: 12px 14px; }
  .gi-section-arch { padding: 12px 14px 0; }
}

/* ═══════════════════════════════════════════════════════════
   MIX ▷ CART VIEW
═══════════════════════════════════════════════════════════ */

.mix-wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

.mix-header {
  margin-bottom: 28px;
}
.mix-title {
  font-family: 'Oswald', sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
  text-transform: uppercase;
}
.mix-title span { color: var(--gold); }
.mix-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* URL input */
.mix-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.mix-url-input {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 14px;
  font-size: 14px;
  border-radius: 4px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}
.mix-url-input:focus { border-color: var(--gold); }
.mix-url-input::placeholder { color: var(--text-muted); }

.mix-dig-btn {
  background: var(--gold);
  color: #000;
  border: none;
  padding: 12px 20px;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.mix-dig-btn:hover   { opacity: 0.85; }
.mix-dig-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mix-dig-btn-sm { padding: 10px 16px; font-size: 13px; }

.mix-url-hints {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.mix-hint-pill {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px 9px;
}

.mix-divider {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.05em;
  margin: 24px 0 16px;
  position: relative;
}
.mix-divider::before, .mix-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: var(--border);
}
.mix-divider::before { left: 0; }
.mix-divider::after  { right: 0; }

/* Manual text */
.mix-text-section {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.mix-text-input {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  font-size: 13px;
  font-family: 'Courier New', monospace;
  border-radius: 4px;
  resize: vertical;
  min-height: 90px;
  outline: none;
  line-height: 1.5;
}
.mix-text-input:focus { border-color: var(--gold); }
.mix-text-input::placeholder { color: var(--text-muted); }

/* Status / waterfall */
.mix-status {
  margin-top: 24px;
}
.mix-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px;
  color: var(--text-muted);
  font-size: 14px;
}
.mix-loading-hint {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.6;
}
.mix-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.mix-error {
  padding: 14px 16px;
  background: rgba(255,80,80,0.08);
  border: 1px solid rgba(255,80,80,0.25);
  border-radius: 4px;
  color: #ff8080;
  font-size: 13px;
}

/* Result meta */
.mix-result-meta {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.mix-meta-row {
  display: flex;
  gap: 14px;
  padding: 14px;
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
}
.mix-artwork {
  width: 64px; height: 64px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.mix-meta-info { flex: 1; min-width: 0; }
.mix-meta-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mix-meta-artist {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
}
.mix-meta-tag {
  font-size: 11px;
  color: var(--gold);
  margin-top: 6px;
  opacity: 0.8;
}

/* Waterfall steps */
.mix-steps {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid var(--border);
}
.mix-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.mix-step-icon {
  width: 16px;
  text-align: center;
  font-size: 11px;
  flex-shrink: 0;
}
.mix-step-name   { color: var(--text-muted); min-width: 160px; }
.mix-step-detail { color: var(--text-muted); opacity: 0.6; font-size: 11px; }

.mix-step-ok   .mix-step-icon { color: #6bcb77; }
.mix-step-ok   .mix-step-name { color: var(--text); }
.mix-step-fail .mix-step-icon { color: #ff8080; }
.mix-step-none .mix-step-icon { color: var(--text-muted); }
.mix-step-skip               { opacity: 0.35; }

/* Artist pills */
.mix-artists-found {
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.mix-artists-label {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-right: 4px;
  flex-shrink: 0;
}
.mix-artist-pill {
  font-size: 12px;
  background: rgba(168, 184, 200,0.1);
  border: 1px solid rgba(168, 184, 200,0.25);
  color: var(--gold);
  border-radius: 12px;
  padding: 3px 10px;
}
.mix-no-artists {
  padding: 14px;
  color: var(--text-muted);
  font-size: 13px;
}

/* Inventory results */
.mix-results { margin-top: 20px; }
.mix-searching, .mix-no-stock {
  padding: 20px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}
.mix-inv-header {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.mix-inv-header strong { color: var(--text); }

.mix-inv-artist {
  margin-bottom: 20px;
}
.mix-inv-artist-name {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.mix-inv-record {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.mix-inv-record:hover { border-color: var(--gold); background: var(--card-hover); }

.mix-rec-img {
  width: 40px; height: 40px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}
.mix-rec-img-empty {
  background: var(--bg);
  border: 1px solid var(--border);
}
.mix-rec-info { flex: 1; min-width: 0; }
.mix-rec-title {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mix-rec-meta {
  display: flex;
  gap: 8px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.mix-rec-store {
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
}
.mix-rec-label {
  font-size: 11px;
  color: var(--text-muted);
}
.mix-rec-price {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

/* Light theme overrides */
.light .mix-url-input,
.light .mix-text-input { background: #f5f5f5; color: #111; border-color: #ddd; }
.light .mix-url-input:focus,
.light .mix-text-input:focus { border-color: var(--gold); }
.light .mix-result-meta { background: #fff; border-color: #e0e0e0; }
.light .mix-inv-record  { background: #fff; border-color: #e0e0e0; }
.light .mix-inv-record:hover { border-color: var(--gold); background: #fafafa; }
.light .mix-hint-pill { background: rgba(0,0,0,0.04); border-color: #ddd; }
.light .mix-artist-pill { background: rgba(150, 168, 188,0.08); border-color: rgba(150, 168, 188,0.2); }
.light .mix-rec-img-empty { background: #eee; }