/* ======================================================
   sound+vision — design system stylesheet
   ====================================================== */

/* ── Typography — system font stack (Inter where installed, fallback chain) ── */

/* ── Design tokens ─────────────────────────────────────── */
:root {
  --radius-sm : 6px;
  --radius-md : 10px;
  --radius-lg : 16px;
  --t         : .15s ease;
  --sidebar-w : 216px;
  --topbar-h  : 52px;
}

/* ── Themes ────────────────────────────────────────────── */
[data-theme="ziggy"] {
  --bg            : #0e0a1a;
  --surface       : #19122d;
  --border        : #2d2050;
  --text          : #f0ecff;
  --muted         : #7b6fab;
  --accent        : #c8860a;
  --accent-faint  : rgba(200,134,10,.12);
  --accent-faint2 : rgba(200,134,10,.25);
  --sidebar       : #130e23;
  --sidebar-text  : #e8e2ff;
  --sidebar-muted : #6b5f9b;
}
[data-theme="aladdin"] {
  --bg            : #06060a;
  --surface       : #0e0e18;
  --border        : #1e2244;
  --text          : #ffffff;
  --muted         : #6677bb;
  --accent        : #e01818;
  --accent-faint  : rgba(224,24,24,.12);
  --accent-faint2 : rgba(224,24,24,.25);
  --sidebar       : #05050e;
  --sidebar-text  : #ffffff;
  --sidebar-muted : #4455aa;
}
[data-theme="diamond"] {
  --bg            : #100804;
  --surface       : #1c1008;
  --border        : #362015;
  --text          : #fef4e8;
  --muted         : #8a7055;
  --accent        : #c07030;
  --accent-faint  : rgba(192,112,48,.12);
  --accent-faint2 : rgba(192,112,48,.25);
  --sidebar       : #130a04;
  --sidebar-text  : #faecd8;
  --sidebar-muted : #7a6040;
}
[data-theme="station"] {
  --bg            : #080d16;
  --surface       : #101828;
  --border        : #1e3050;
  --text          : #e8f0ff;
  --muted         : #607090;
  --accent        : #4a8fd4;
  --accent-faint  : rgba(74,143,212,.12);
  --accent-faint2 : rgba(74,143,212,.25);
  --sidebar       : #090e18;
  --sidebar-text  : #dce8ff;
  --sidebar-muted : #507090;
}
[data-theme="heroes"] {
  --bg            : #0a0f14;
  --surface       : #141c24;
  --border        : #243040;
  --text          : #e4ecf4;
  --muted         : #607480;
  --accent        : #5a9ab0;
  --accent-faint  : rgba(90,154,176,.12);
  --accent-faint2 : rgba(90,154,176,.25);
  --sidebar       : #0a1018;
  --sidebar-text  : #d8e8f0;
  --sidebar-muted : #507080;
}
[data-theme="letsdance"] {
  --bg            : #0c0c1a;
  --surface       : #181028;
  --border        : #2a1844;
  --text          : #ecdeff;
  --muted         : #8060a0;
  --accent        : #d03060;
  --accent-faint  : rgba(208,48,96,.12);
  --accent-faint2 : rgba(208,48,96,.25);
  --sidebar       : #0e0a1c;
  --sidebar-text  : #ead4ff;
  --sidebar-muted : #7050a0;
}
[data-theme="blackstar"] {
  --bg            : #08080e;
  --surface       : #111118;
  --border        : #222236;
  --text          : #f2f0ff;
  --muted         : #6660a0;
  --accent        : #d4a820;
  --accent-faint  : rgba(212,168,32,.12);
  --accent-faint2 : rgba(212,168,32,.25);
  --sidebar       : #0a0a12;
  --sidebar-text  : #eeecff;
  --sidebar-muted : #5a5090;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html, body { height: 100%; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.5; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased }
a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }
button { font-family: inherit; cursor: pointer }
img { max-width: 100%; display: block }

/* ── App shell ─────────────────────────────────────────── */
#app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ───────────────────────────────────────────── */
#sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 200;
}
.sidebar-brand {
  padding: 20px 18px 16px;
  font-size: 18px;
  font-weight: 900;
  color: var(--sidebar-text);
  letter-spacing: -.03em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block }
.sidebar-section { padding: 6px 10px 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--sidebar-muted); margin-top: 8px }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  margin: 1px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sidebar-muted);
  cursor: pointer;
  transition: background var(--t), color var(--t);
  text-decoration: none;
  position: relative;
}
.nav-item:hover { background: rgba(255,255,255,.05); color: var(--sidebar-text) }
.nav-item.active { background: rgba(255,255,255,.08); color: var(--accent) }
.nav-item-icon { width: 18px; text-align: center; font-size: 15px; flex-shrink: 0 }
.nav-badge { margin-left: auto; background: var(--accent); color: #000; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center }
.sidebar-footer { margin-top: auto; border-top: 1px solid var(--border); padding: 12px }

/* ── Main area ─────────────────────────────────────────── */
#main-area { display: flex; flex-direction: column; overflow: hidden }
#topbar {
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 14px;
  z-index: 100;
}
.topbar-title { font-size: 15px; font-weight: 800; color: var(--text); margin-right: auto }
#main-content { flex: 1; overflow-y: auto; padding: 20px 24px }
/* Pages with their own full-bleed layouts override the default padding */
#main-content:has(.gaps-layout),
#main-content:has(.msg-shell),
#main-content:has(.disco-layout),
#main-content:has(.admin-layout) { padding: 0 }

/* ── Cards ─────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--t), transform var(--t); cursor: pointer }
.card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.35); transform: translateY(-2px) }
.card-thumb { aspect-ratio: 1; background: var(--bg); overflow: hidden }
.card-thumb img { width: 100%; height: 100%; object-fit: cover }
.card-body { padding: 12px }
.card-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.card-meta { font-size: 11px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
.type-badge { display: inline-block; padding: 2px 7px; border-radius: 20px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--accent-faint); color: var(--accent) }

/* ── Grid ──────────────────────────────────────────────── */
.grid-container { padding: 20px; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px }
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center }
.filter-chip { padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border); background: transparent; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; transition: all var(--t) }
.filter-chip:hover, .filter-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-faint) }

/* ── Buttons ───────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; border: none; cursor: pointer; transition: filter var(--t), opacity var(--t) }
.btn:hover { filter: brightness(1.1) }
.btn:disabled { opacity: .5; cursor: default }
.btn-primary { background: var(--accent); color: #000 }
.btn-secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text) }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: var(--radius-sm) }
.btn-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--text); cursor: pointer; font-size: 15px; transition: background var(--t) }
.btn-icon:hover { background: var(--border) }

/* ── Slide-in detail panel ─────────────────────────────── */
#detail-panel {
  position: fixed;
  top: 0; right: -460px;
  width: 460px; height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--border);
  z-index: 500;
  display: flex; flex-direction: column;
  transition: right .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 32px rgba(0,0,0,.4);
}
#detail-panel.open { right: 0 }
.detail-header { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px }
.detail-close { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; padding: 4px }
.detail-close:hover { color: var(--text) }
.detail-body { flex: 1; overflow-y: auto; padding: 16px }
.detail-image { width: 100%; max-height: 260px; object-fit: contain; border-radius: var(--radius-md); background: var(--surface); margin-bottom: 16px }
.detail-field { margin-bottom: 12px }
.detail-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 2px }
.detail-value { font-size: 14px; color: var(--text) }
.detail-footer { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px }

/* ── Modals ────────────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 800; display: flex; align-items: center; justify-content: center; padding: 20px }
.modal { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); width: min(540px, 100%); max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.5) }
.modal-header { padding: 20px 24px 0; display: flex; align-items: center; gap: 12px }
.modal-title { font-size: 16px; font-weight: 800; color: var(--text); flex: 1 }
.modal-close { background: none; border: none; color: var(--muted); font-size: 22px; cursor: pointer }
.modal-body { padding: 16px 24px 24px }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end }

/* ── Forms ─────────────────────────────────────────────── */
.form-group { margin-bottom: 16px }
.form-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px }
.form-control {
  width: 100%;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color var(--t);
}
.form-control:focus { border-color: var(--accent) }
.form-hint { font-size: 11px; color: var(--muted); margin-top: 4px }

/* ── Notification tray ─────────────────────────────────── */
#notif-tray {
  position: fixed;
  top: var(--topbar-h); right: -320px;
  width: 320px;
  max-height: calc(100vh - var(--topbar-h));
  background: var(--bg);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow-y: auto;
  z-index: 400;
  transition: right .25s ease;
  border-bottom-left-radius: var(--radius-md);
}
#notif-tray.open { right: 0 }
.notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); transition: background var(--t) }
.notif-item:hover { background: var(--surface) }
.notif-item.unread { border-left: 3px solid var(--accent) }
.notif-time { font-size: 11px; color: var(--muted); margin-top: 2px }

/* ── Quick-add button ──────────────────────────────────── */
#quick-add-btn {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: #000;
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  cursor: pointer;
  z-index: 300;
  transition: transform var(--t), filter var(--t);
}
#quick-add-btn:hover { transform: scale(1.08); filter: brightness(1.1) }

/* ── Batch action bar ──────────────────────────────────── */
#batch-bar {
  position: fixed;
  bottom: 0; left: var(--sidebar-w); right: 0;
  background: var(--accent);
  padding: 10px 20px;
  display: none;
  align-items: center;
  gap: 12px;
  z-index: 300;
}
#batch-bar.visible { display: flex }
.batch-count { font-size: 13px; font-weight: 700; color: #000; flex: 1 }

/* ── Timeline view ─────────────────────────────────────── */
.timeline-era { margin-bottom: 32px }
.era-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--border) }
.era-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0 }
.era-name { font-size: 16px; font-weight: 900; color: var(--text) }
.era-year { font-size: 12px; color: var(--muted) }
.era-count { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 600 }
.timeline-ghost { text-align: center; padding: 20px; color: var(--muted); font-size: 13px; border: 2px dashed var(--border); border-radius: var(--radius-md) }

/* ── Drop zone ─────────────────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--accent); background: var(--accent-faint) }
.drop-zone-icon { font-size: 36px; margin-bottom: 10px; opacity: .5 }
.drop-zone-text { font-size: 14px; font-weight: 600; color: var(--muted) }

/* ── Condition badge ───────────────────────────────────── */
.cond-badge { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .04em }
.cond-M, .cond-NM { background: #1b5e20; color: #81c784 }
.cond-VGp, .cond-VG { background: #1a237e; color: #7986cb }
.cond-Gp, .cond-G { background: #4a148c; color: #ce93d8 }
.cond-F  { background: #e65100; color: #ffcc80 }
.cond-P  { background: #b71c1c; color: #ef9a9a }

/* ── Auth pages ────────────────────────────────────────── */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--bg) }
.auth-box { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 32px; box-shadow: 0 20px 60px rgba(0,0,0,.4) }
.auth-brand { text-align: center; font-size: 24px; font-weight: 900; color: var(--text); margin-bottom: 28px; letter-spacing: -.04em }
.auth-brand span { color: var(--accent) }
.auth-footer { text-align: center; font-size: 13px; color: var(--muted); margin-top: 20px }

/* ── Utility ───────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--border); margin: 16px 0 }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted) }
.empty-state-icon { font-size: 48px; margin-bottom: 12px; opacity: .4 }
.empty-state-text { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--text) }
.empty-state-sub { font-size: 13px; line-height: 1.5 }
.spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.alert { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 16px }
.alert-error { background: rgba(220,50,50,.1); border: 1px solid rgba(220,50,50,.3); color: #c62828 }
.alert-success { background: rgba(46,125,50,.1); border: 1px solid rgba(46,125,50,.3); color: #2e7d32 }
.alert-info { background: var(--accent-faint); border: 1px solid var(--accent-faint2); color: var(--accent) }
.text-muted { color: var(--muted) }
.text-accent { color: var(--accent) }
.font-bold { font-weight: 700 }
.flex { display: flex }
.items-center { align-items: center }
.gap-8 { gap: 8px }
.gap-12 { gap: 12px }
.mt-auto { margin-top: auto }
.ml-auto { margin-left: auto }

/* ── Pagination ────────────────────────────────────────── */
.pagination { display: flex; gap: 4px; justify-content: center; padding: 20px }
.page-btn { padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 13px; cursor: pointer }
.page-btn:hover, .page-btn.active { background: var(--accent); border-color: var(--accent); color: #000 }

/* ── Discography checklist ─────────────────────────────── */
.discog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px }
.discog-item { border-radius: var(--radius-md); overflow: hidden; cursor: pointer; position: relative; background: var(--surface) }
.discog-cover { aspect-ratio: 1; background: var(--bg); overflow: hidden; position: relative }
.discog-cover img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s, filter .3s }
.discog-item[data-status="none"]    .discog-cover img { opacity: .25; filter: grayscale(.8) }
.discog-item[data-status="want"]    .discog-cover img { opacity: .6; filter: sepia(.4) hue-rotate(20deg) }
.discog-item[data-status="have"]    .discog-cover img { opacity: 1; filter: none }
.discog-status-badge { position: absolute; bottom: 6px; right: 6px; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase }
.discog-info { padding: 8px 10px }
.discog-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.discog-year { font-size: 11px; color: var(--muted) }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
  #app-shell { grid-template-columns: 1fr }
  #sidebar { display: none }
  #main-area { height: 100vh }
  #mobile-tabbar { display: flex }
  #batch-bar { left: 0 }
  .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px }
  #detail-panel { width: 100%; right: -100% }
}
#mobile-tabbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--sidebar);
  border-top: 1px solid var(--border);
  z-index: 250;
}
.mobile-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px 10px; gap: 3px; font-size: 10px; font-weight: 600; color: var(--sidebar-muted); text-decoration: none }
.mobile-tab.active { color: var(--accent) }
.mobile-tab-icon { font-size: 20px }

/* ── Inline editing ────────────────────────────────────── */
[contenteditable="true"] { outline: none; border-bottom: 1px dashed var(--accent); padding-bottom: 1px }
.edit-overlay { display: none }
tr.editable:hover .edit-overlay { display: inline }

/* ══════════════════════════════════════════════════════════
   OVERRIDES — fix stale rules from earlier CSS version
   ══════════════════════════════════════════════════════════ */

/* Title no longer uses margin-right:auto — flex spacer handles alignment */
.topbar-title { margin-right: 0 }

/* ══════════════════════════════════════════════════════════
   SIDEBAR — updated class names
   ══════════════════════════════════════════════════════════ */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  box-sizing: border-box;
}
.sidebar-logo {
  font-size: 17px;
  font-weight: 900;
  color: var(--sidebar-text);
  letter-spacing: -.04em;
  text-decoration: none;
}
.sidebar-logo .plus { color: var(--accent) }
.sidebar-toggle {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  color: var(--sidebar-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--t), color var(--t);
  flex-shrink: 0;
}
.sidebar-toggle svg { width: 16px; height: 16px }
.sidebar-toggle:hover { background: rgba(255,255,255,.06); color: var(--sidebar-text) }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0 }
.nav-section-label {
  padding: 10px 16px 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--sidebar-muted);
}
.nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.nav-label { flex: 1; font-size: 13px }

/* Processing queue indicator */
.sidebar-queue {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin: 0 8px 4px;
  border-radius: var(--radius-sm);
  background: var(--accent-faint);
  border: 1px solid var(--accent-faint2);
}
.queue-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
.queue-text { font-size: 11px; font-weight: 600; color: var(--accent) }

/* Upgrade prompt */
.sidebar-upgrade {
  margin: 4px 8px 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-faint);
  border: 1px solid var(--accent-faint2);
}
.upgrade-text { font-size: 11px; color: var(--muted); margin-bottom: 7px; line-height: 1.4 }
.upgrade-btn {
  display: block;
  text-align: center;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  transition: filter var(--t);
}
.upgrade-btn:hover { filter: brightness(1.12); text-decoration: none }

/* Sidebar footer */
.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.footer-avatar { display: flex; align-items: center; flex-shrink: 0; text-decoration: none }
.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent-faint2);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--accent-faint2);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50% }
.footer-info { flex: 1; min-width: 0 }
.footer-name { font-size: 12px; font-weight: 700; color: var(--sidebar-text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.footer-sub { font-size: 10px; color: var(--sidebar-muted) }
.sub-badge { color: var(--accent); font-weight: 700 }
.footer-signout {
  color: var(--sidebar-muted);
  display: flex; align-items: center;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: color var(--t), background var(--t);
  flex-shrink: 0;
}
.footer-signout:hover { color: var(--sidebar-text); background: rgba(255,255,255,.05); text-decoration: none }

/* Mobile tab bar — class version */
.mobile-tabbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--sidebar);
  border-top: 1px solid var(--border);
  z-index: 250;
}
@media (max-width: 768px) {
  .mobile-tabbar { display: flex }
  #sidebar { display: none }
}
.mobile-tabbar .nav-item {
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px 10px;
  gap: 3px;
  margin: 0;
  border-radius: 0;
  font-size: 10px;
}
.mobile-tabbar .nav-icon { font-size: 20px; width: auto }

/* ══════════════════════════════════════════════════════════
   TOPBAR — search, theme swatches, icons
   ══════════════════════════════════════════════════════════ */
.topbar-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0 }
.topbar-spacer { flex: 1 }
.search-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  transition: border-color var(--t);
}
.search-wrap:focus-within { border-color: var(--accent) }
.search-wrap svg { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0 }
.search-input {
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
  width: 180px;
}
.search-input::placeholder { color: var(--muted) }

.theme-row { display: flex; gap: 5px; align-items: center }
.theme-swatch {
  width: 18px; height: 18px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--t), border-color var(--t);
  flex-shrink: 0;
}
.theme-swatch:hover { transform: scale(1.2) }
.theme-swatch.active { border-color: var(--text); transform: scale(1.15) }

.icon-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  transition: color var(--t), background var(--t);
  flex-shrink: 0;
}
.icon-btn svg { width: 18px; height: 18px }
.icon-btn:hover { color: var(--text); background: var(--surface) }
.badge {
  position: absolute;
  top: 2px; right: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  font-size: 9px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}

.view-toggle {
  display: flex;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.view-toggle button {
  padding: 4px 10px;
  border-radius: 4px;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.view-toggle button.active { background: var(--accent); color: #000 }

/* ══════════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════════ */
.view-body { padding: 0 }

.dash-welcome {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.dash-welcome h1 {
  font-size: 26px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -.03em;
  line-height: 1.1;
}
.dash-welcome h1 span { color: var(--accent) }
.dash-welcome-sub { font-size: 13px; color: var(--muted) }
.btn-ghost {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-faint) }

/* Widget grid */
.widget-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.widget.span-2 { grid-column: span 2 }
.widget.span-3 { grid-column: span 3 }
.widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.widget-title { font-size: 12px; font-weight: 800; color: var(--text); letter-spacing: -.01em; flex: 1 }
.widget-action {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.widget-action:hover { text-decoration: underline }
.widget-body { padding: 14px; flex: 1 }

/* Stats */
.stat-row {
  display: flex;
  padding: 12px 14px;
}
.stat-cell { flex: 1 }
.stat-n { font-size: 28px; font-weight: 900; color: var(--text); letter-spacing: -.04em; line-height: 1 }
.stat-l { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-top: 3px }

/* Featured item */
.featured-item { display: flex; gap: 14px; align-items: flex-start }
.featured-thumb {
  width: 88px; height: 88px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.featured-body { flex: 1; min-width: 0 }
.spotlight-pill {
  display: inline-block;
  font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent);
  background: var(--accent-faint);
  padding: 2px 7px;
  border-radius: 10px;
  margin-bottom: 7px;
}
.featured-title { font-size: 16px; font-weight: 900; color: var(--text); margin-bottom: 4px; line-height: 1.2 }
.featured-meta { font-size: 12px; color: var(--muted); margin-bottom: 10px }

/* Featured collector */
.feat-collector { text-align: center; padding: 8px 0 }
.avatar-lg {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent-faint2);
  color: var(--accent);
  font-size: 18px;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
  border: 2px solid var(--accent-faint2);
}
.feat-name { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 3px }
.feat-handle { font-size: 12px; color: var(--muted); margin-bottom: 12px }

/* Discography progress */
.disco-progress { display: flex; flex-direction: column; gap: 10px }
.disco-era-row {}
.disco-era-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px }
.disco-era-name { font-size: 12px; font-weight: 700; color: var(--text) }
.disco-era-count { font-size: 11px; color: var(--muted) }
.progress-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden }
.progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .4s ease }

/* Events list */
.event-list { display: flex; flex-direction: column; gap: 0 }
.event-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.event-item:last-child { border-bottom: none }
.event-date {
  width: 36px;
  text-align: center;
  flex-shrink: 0;
  background: var(--accent-faint);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.event-date-d { font-size: 17px; font-weight: 900; color: var(--accent); line-height: 1 }
.event-date-m { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent) }
.event-info { flex: 1; min-width: 0 }
.event-name { font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.event-loc { font-size: 11px; color: var(--muted) }
.event-type-pill {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 10px;
  flex-shrink: 0;
}
.pill-auction  { background: rgba(212,168,32,.15); color: #d4a820 }
.pill-exhibition { background: rgba(74,143,212,.15); color: #4a8fd4 }
.pill-fair     { background: rgba(90,154,176,.15); color: #5a9ab0 }
.pill-other    { background: var(--accent-faint); color: var(--accent) }

/* Needs Input */
.needs-input-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px }
.need-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t);
}
.need-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,.3) }
.need-thumb-placeholder { height: 60px }
.need-body { padding: 10px }
.need-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 4px }
.need-q { font-size: 11px; color: var(--muted); line-height: 1.4; margin-bottom: 8px }
.need-action {
  font-size: 11px; font-weight: 700;
  color: var(--accent);
  background: none; border: none; cursor: pointer; padding: 0;
}

/* Auction gated */
.auction-gated { text-align: center; padding: 8px 0 }
.lock-icon { font-size: 28px; margin-bottom: 8px; opacity: .6 }
.auction-gated p { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 12px }

/* Want matches */
.want-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.want-mini {
  width: 120px;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--t);
}
.want-mini:hover { border-color: var(--accent) }
.want-mini-body { padding: 8px }
.want-mini-title { font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.want-mini-owner { font-size: 10px; color: var(--muted) }

/* Following feed */
.feed-list { display: flex; flex-direction: column }
.feed-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t);
}
.feed-item:last-child { border-bottom: none }
.feed-item:hover { background: var(--accent-faint) }
.feed-info { flex: 1; min-width: 0 }
.feed-text { font-size: 13px; color: var(--text); line-height: 1.4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.feed-time { font-size: 11px; color: var(--muted); margin-top: 1px }
.feed-type-pill {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 10px;
  background: var(--accent-faint); color: var(--accent);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   WIDGET DRAWER
   ══════════════════════════════════════════════════════════ */
#widget-drawer {
  position: fixed;
  top: 0; right: -320px;
  width: 320px; height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--border);
  z-index: 600;
  display: flex; flex-direction: column;
  transition: right .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 32px rgba(0,0,0,.4);
}
#widget-drawer.open { right: 0 }
.drawer-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.drawer-title { font-size: 14px; font-weight: 800; color: var(--text); flex: 1 }
.drawer-close {
  background: none; border: none;
  color: var(--muted); font-size: 22px;
  cursor: pointer; padding: 4px; line-height: 1;
}
.drawer-close:hover { color: var(--text) }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px }
.drawer-hint { font-size: 12px; color: var(--muted); margin-bottom: 16px }
.widget-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.widget-toggle-row:last-child { border-bottom: none }
.drag-handle { color: var(--muted); font-size: 14px; cursor: grab; padding: 0 2px; flex-shrink: 0 }
.widget-toggle-icon { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0 }
.widget-toggle-label { font-size: 13px; font-weight: 700; color: var(--text) }
.widget-toggle-sub { font-size: 11px; color: var(--muted) }
.toggle {
  width: 36px; height: 20px;
  border-radius: 10px;
  background: var(--border);
  cursor: pointer;
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
  transition: background var(--t);
}
.toggle::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform var(--t), background var(--t);
}
.toggle.on { background: var(--accent-faint2) }
.toggle.on::after { background: var(--accent); transform: translateX(16px) }

/* Overlay */
#overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 490;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
#overlay.open { opacity: 1; pointer-events: all }

/* ══════════════════════════════════════════════════════════
   QUICK-ADD FAB
   ══════════════════════════════════════════════════════════ */
#quick-add {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: #000;
  font-size: 26px;
  font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  cursor: pointer;
  z-index: 300;
  transition: transform var(--t), filter var(--t);
}
#quick-add:hover { transform: scale(1.08); filter: brightness(1.1) }
.processing-ring {
  display: none;
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
#quick-add.processing .processing-ring { display: block }

/* ══════════════════════════════════════════════════════════
   BATCH BAR
   ══════════════════════════════════════════════════════════ */
.batch-btn {
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0,0,0,.2);
  background: rgba(0,0,0,.15);
  color: #000;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: background var(--t);
}
.batch-btn:hover { background: rgba(0,0,0,.25) }
.batch-btn.danger { background: rgba(180,0,0,.25); border-color: rgba(180,0,0,.4); color: #400 }
.batch-sep { width: 1px; height: 20px; background: rgba(0,0,0,.2) }
.batch-close {
  background: none; border: none;
  color: #000; font-size: 20px;
  cursor: pointer; padding: 0 4px; line-height: 1; opacity: .6;
}
.batch-close:hover { opacity: 1 }

/* ══════════════════════════════════════════════════════════
   DETAIL PANEL additions
   ══════════════════════════════════════════════════════════ */
.detail-title { font-size: 14px; font-weight: 800; color: var(--text); flex: 1 }

/* ══════════════════════════════════════════════════════════
   GAPS VIEW
   ══════════════════════════════════════════════════════════ */
.gaps-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  height: 100%;
  overflow: hidden;
}
.gaps-sidebar {
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  overflow-y: auto;
  background: var(--bg);
}
.gaps-main {
  overflow-y: auto;
  padding: 24px;
}
.gaps-filter-section { margin-bottom: 4px }
.gaps-filter-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  padding: 0 6px;
  margin-bottom: 6px;
}
.gaps-filter-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: background var(--t), color var(--t);
  margin-bottom: 1px;
}
.gaps-filter-chip:hover { background: rgba(255,255,255,.05); color: var(--sidebar-text); text-decoration: none }
.gaps-filter-chip.active { background: var(--accent-faint); color: var(--accent) }
.gaps-chip-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 8px;
  flex-shrink: 0;
}
.gaps-filter-chip.active .gaps-chip-count { background: var(--accent-faint2); color: var(--accent) }

/* Publication group */
.gaps-pub-group { margin-bottom: 36px }
.gaps-pub-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.gaps-pub-name { font-size: 15px; font-weight: 900; color: var(--text); letter-spacing: -.02em }
.gaps-pub-type {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted);
  background: var(--surface);
  padding: 2px 7px; border-radius: 10px;
  flex-shrink: 0;
}
.gaps-pub-bar {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.gaps-pub-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .4s }
.gaps-pub-stat { font-size: 11px; color: var(--muted); font-weight: 600; flex-shrink: 0 }

/* Item grid */
.gaps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}
.gaps-item {
  cursor: pointer;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform var(--t), opacity var(--t);
}
.gaps-item:hover { transform: translateY(-2px) }
.gaps-item.gap { opacity: .28; filter: grayscale(.6) }
.gaps-item.gap:hover { opacity: .55; filter: grayscale(.3) }

.gaps-cover {
  position: relative;
  aspect-ratio: 1;
  background: var(--surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}
.gaps-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.gaps-cover-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--surface), var(--border));
  color: var(--muted);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.04em;
}
.gaps-owned-badge {
  position: absolute;
  bottom: 5px; right: 5px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  font-size: 11px;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.gaps-want-btn {
  position: absolute;
  bottom: 5px; right: 5px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--t);
}
.gaps-item:hover .gaps-want-btn { opacity: 1 }
.gaps-owner-count {
  position: absolute;
  top: 5px; left: 5px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
}
.gaps-item-info { padding: 6px 2px 0 }
.gaps-item-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.gaps-item-label { font-size: 10px; color: var(--muted) }
.gaps-amazon-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  font-size: 10px;
  color: var(--accent);
  text-decoration: none;
  opacity: 0;
  transition: opacity .2s;
}
.gaps-item.gap:hover .gaps-amazon-link { opacity: 1 }
.gaps-amazon-link:hover { text-decoration: underline }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — dashboard widget grid
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .widget-grid { grid-template-columns: repeat(2, 1fr) }
  .widget.span-3 { grid-column: span 2 }
}
@media (max-width: 680px) {
  .widget-grid { grid-template-columns: 1fr }
  .widget.span-2,
  .widget.span-3 { grid-column: span 1 }
  #main-content { padding: 14px 16px }
  .dash-welcome h1 { font-size: 20px }
}