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

/* Light mode (default) */
:root {
  --bg: #FAF6F0;
  --surface: #FFFFFF;
  --surface2: #F3ECE0;
  --border: #E2D5C3;
  --text: #1C0F0A;
  --text-muted: #7A5C48;
  --accent: #8B2032;
  --accent-hover: #A3263C;
  --accent-tint: #F9ECEE;
  --danger: #B91C1C;
  --btn-text: #FFFFFF;
  --flash-success-bg: #F0FAF0;
  --flash-success-border: #86EFAC;
  --flash-success-text: #166534;
  --flash-error-bg: #FEF2F2;
  --flash-error-border: #FCA5A5;
  --flash-error-text: #B91C1C;
  --radius: 8px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Dark mode */
[data-theme="dark"] {
  --bg: #110D0B;
  --surface: #1C1512;
  --surface2: #261E1A;
  --border: #3A2E28;
  --text: #EDE0D0;
  --text-muted: #9A8070;
  --accent: #C44255;
  --accent-hover: #D65568;
  --accent-tint: #2A1620;
  --danger: #F87171;
  --btn-text: #FFFFFF;
  --flash-success-bg: #1a2e1a;
  --flash-success-border: #2d5a2d;
  --flash-success-text: #86efac;
  --flash-error-bg: #2e1a1a;
  --flash-error-border: #5a2d2d;
  --flash-error-text: #F87171;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

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

/* App shell */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 200px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1.5rem 0.75rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sidebar-brand {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--accent);
  text-decoration: none;
  display: block;
  padding: 0.25rem 0.75rem;
  margin-bottom: 1.75rem;
}
.sidebar-brand:hover { text-decoration: none; color: var(--accent-hover); }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
}

.sidebar-link {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  text-decoration: none;
  display: block;
}
.sidebar-link:hover { color: var(--text); background: var(--surface2); text-decoration: none; }
.sidebar-link--active { color: var(--text); background: var(--surface2); }

.sidebar-footer {
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 1rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font);
  width: 2.2rem;
  text-align: center;
  line-height: 1;
}
.theme-toggle:hover { border-color: var(--text-muted); background: var(--surface2); }

/* Unauthenticated top nav */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.nav-brand {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--accent);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.nav-links a { color: var(--text-muted); font-size: 0.9rem; }
.nav-links a:hover { color: var(--text); text-decoration: none; }

/* Main content area */
.app-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}

main {
  padding: 2rem 1.5rem;
  max-width: 1200px;
}

/* Home screen grid */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.home-section {
  margin-bottom: 2.5rem;
}

.home-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.home-section-header h2 {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0;
}

.home-section-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 1.5rem 0;
}

.inbox-card-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Flash */
.flash {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}
.flash-notice { background: var(--flash-success-bg); border: 1px solid var(--flash-success-border); color: var(--flash-success-text); }
.flash-alert  { background: var(--flash-error-bg);   border: 1px solid var(--flash-error-border);   color: var(--flash-error-text); }

/* Forms */
.field { margin-bottom: 1rem; }
.field label { display: block; margin-bottom: 0.35rem; font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], textarea, select {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9rem;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
}

input[type="submit"], button, .btn-primary {
  background: var(--accent);
  color: var(--btn-text);
  border: none;
  border-radius: var(--radius);
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: var(--font);
}
input[type="submit"]:hover, button:hover { background: var(--accent-hover); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-weight: 400;
}
.btn-ghost:hover { color: var(--text); border-color: var(--text-muted); background: transparent; }
.btn-small { padding: 0.3rem 0.75rem; font-size: 0.8rem; }

.form-errors { background: #2e1a1a; border: 1px solid #5a2d2d; border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1rem; }
.form-errors p { color: var(--danger); font-size: 0.85rem; }

/* Page header */
.page-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.page-header h1 { font-size: 1.5rem; font-weight: 700; }

.search-row { display: flex; gap: 0.5rem; align-items: center; }
.search-row .search-input { width: 280px; }
.search-input { max-width: 320px; }

/* Feed layout */
.feed-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 2rem;
  align-items: start;
}

.share-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  position: sticky;
  top: 80px;
}
.share-panel h2 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }

/* Rec cards */
.rec-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}
.rec-header { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.5rem; }
.rec-username { font-weight: 600; color: var(--text); }
.rec-meta { font-size: 0.8rem; color: var(--text-muted); }
.rec-album { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.rec-album a { color: var(--text); text-decoration: none; display: flex; align-items: baseline; gap: 0.5rem; }
.rec-album a:hover strong { color: var(--accent); }
.rec-artist { color: var(--text-muted); font-size: 0.9rem; }
.rec-year { color: var(--text-muted); font-size: 0.8rem; }
.rec-note { font-size: 0.9rem; color: var(--text-muted); margin-top: 0.4rem; }

/* Artists */
.artist-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem; }
.artist-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: background 0.12s;
}
.artist-row:hover { background: var(--surface2); text-decoration: none; }
.artist-name { font-size: 0.95rem; flex: 1; }
.artist-years { color: var(--text-muted); font-size: 0.8rem; margin-left: auto; }

/* Albums */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}
.album-card {
  display: flex;
  justify-content: space-between;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s;
}
.album-card:hover { border-color: var(--accent); text-decoration: none; }
.album-info { display: flex; flex-direction: column; gap: 0.2rem; }
.album-info strong { font-size: 0.95rem; }
.album-artist { color: var(--text-muted); font-size: 0.85rem; }
.album-year { color: var(--text-muted); font-size: 0.8rem; }
.album-genres { color: var(--text-muted); font-size: 0.78rem; }
.album-rec-count { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; margin-left: 0.75rem; }

/* Album show */
.album-show {}
.album-hero {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
  align-items: start;
}
.album-details {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.album-text { flex: 1; min-width: 0; }
.album-hero h1 { font-size: 2rem; margin-bottom: 0.4rem; line-height: 1.2; }
.album-hero .album-artist { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 0.25rem; }
.album-hero .album-year { color: var(--text-muted); margin-bottom: 0.75rem; }
.album-genres { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.album-show-art {
  width: 400px;
  height: 400px;
  object-fit: cover;
  border-radius: var(--radius);
  flex-shrink: 0;
}
.genre-tag {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.album-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.album-type-badge {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.album-plays { font-size: 0.82rem; color: var(--text-muted); }

.album-actions {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.already-recommended { color: var(--accent); margin-bottom: 0.75rem; font-size: 0.9rem; }

/* Track listing */
.album-tracks { margin-bottom: 2.5rem; }
.album-tracks h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
.tracks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.track-row { border-bottom: 1px solid var(--border); }
.track-row:last-child { border-bottom: none; }
.track-row td { padding: 0.55rem 0.5rem; vertical-align: middle; }
.track-num { color: var(--text-muted); width: 2.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.track-title { font-weight: 500; }
.track-duration { color: var(--text-muted); white-space: nowrap; width: 4rem; font-variant-numeric: tabular-nums; }
.track-plays { color: var(--text-muted); font-size: 0.8rem; width: 5rem; }
.track-plays-count::after { content: " plays"; font-size: 0.75rem; }
.track-links { width: 9rem; text-align: right; }
.btn-yt {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  font-size: 0.78rem;
  border-radius: 4px;
  background: #ff0000;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.btn-yt:hover { background: #cc0000; color: #fff; text-decoration: none; }

.album-recs h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }

/* User profile */
.profile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}
.profile-header-main { display: flex; flex-direction: column; gap: 0.5rem; }
.profile-username { font-size: 2rem; font-weight: 700; letter-spacing: -0.5px; }
.profile-stats { display: flex; gap: 1.5rem; font-size: 0.9rem; color: var(--text-muted); }
.profile-stats strong { color: var(--text); }
.profile-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; padding-top: 0.25rem; }

.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  gap: 3rem;
  align-items: start;
}

.profile-section { margin-bottom: 2.5rem; }
.profile-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.profile-section-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0;
}
.profile-section-link { font-size: 0.8rem; color: var(--text-muted); }
.profile-section-link:hover { color: var(--accent); text-decoration: none; }

/* Top albums list */
.profile-top-albums { display: flex; flex-direction: column; gap: 0.25rem; }
.profile-top-album {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius);
  transition: background 0.12s;
}
.profile-top-album:hover { background: var(--surface2); }
.profile-top-album-info { flex: 1; min-width: 0; }
.profile-top-album-info a {
  color: var(--text);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.profile-top-album-info a:hover strong { color: var(--accent); }

/* Intro shelf */
.intro-shelf {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.35rem;
}
.intro-shelf-cover {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  display: block;
  background: var(--surface2);
}
.intro-shelf-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s;
}
.intro-shelf-cover:hover img { opacity: 0.8; }
.intro-shelf-placeholder { width: 100%; height: 100%; background: var(--surface2); border: 1px solid var(--border); }

/* Profile filter tabs */
.profile-filter-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.75rem; }
.filter-tab {
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  transition: color 0.12s;
}
.filter-tab:hover { color: var(--text); }
.filter-tab--active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Settings page */
.settings-section { margin-bottom: 2rem; max-width: 520px; }
.settings-section-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; }
.settings-hint { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.settings-label { font-size: 0.85rem; color: var(--text-muted); margin: 0.75rem 0 0.4rem; }

/* Projects */
.project-section { margin-bottom: 2.5rem; }
.project-section h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
.project-list { display: flex; flex-direction: column; gap: 0.5rem; }
.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  transition: border-color 0.15s;
}
.project-card:hover { border-color: var(--accent); }
.project-card-link { color: var(--text); text-decoration: none; display: block; }
.project-card-header { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.25rem; }
.project-name { font-size: 1rem; }
.project-meta { font-size: 0.8rem; color: var(--text-muted); }
.project-desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.project-creator { font-size: 0.8rem; color: var(--text-muted); }
.project-creator-line { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.4rem; }
.project-description { color: var(--text-muted); margin-bottom: 1rem; }
.project-completed-badge {
  background: var(--accent);
  color: var(--btn-text);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
}
.project-completed-badge--large { font-size: 0.9rem; padding: 0.3rem 0.75rem; }
.project-in-progress { font-size: 0.75rem; color: var(--text-muted); }
.project-header-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.project-layout { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; align-items: start; }
.project-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.project-section-header h2 { margin-bottom: 0; }
.project-album-list { display: flex; flex-direction: column; gap: 0.5rem; }
.project-album-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.project-album-row:last-child { border-bottom: none; }
.project-album-info { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.project-album-title { color: var(--text); font-weight: 500; text-decoration: none; font-size: 0.9rem; }
.project-album-title:hover { color: var(--accent); }
.project-album-actions { display: flex; gap: 0.4rem; align-items: center; }
.project-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.project-members-section h2,
.project-send-section h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; }
.project-member-row { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.project-member-row:last-child { border-bottom: none; }
.project-member-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

/* Generic listening-progress bar (members list + project cards) */
.progress { display: flex; align-items: center; gap: 0.5rem; }
.progress-bar { flex: 1; height: 6px; background: var(--surface2); border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width 0.3s; }
.progress-fill--complete { background: #4ade80; }
.progress-label { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.project-invite-card { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 0.5rem; }
.project-invite-actions { display: flex; gap: 0.5rem; }
.project-search-box { margin-bottom: 0.5rem; }
.project-search-box input { width: 100%; max-width: 400px; }
.add-album-details summary { list-style: none; }
.add-album-form { margin-top: 0.75rem; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.form-card { max-width: 520px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.profile-projects { margin-bottom: 2rem; }
.profile-projects h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
.completed-project-list { display: flex; flex-direction: column; gap: 0.4rem; }
.completed-project-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.9rem; padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.completed-project-row:last-child { border-bottom: none; }
.btn-icon { padding: 0.15rem 0.5rem; font-size: 0.75rem; }

/* Icon action buttons */
.btn-icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.btn-icon-action:hover { border-color: var(--accent); }
.btn-icon-action--add { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn-icon-action--add:hover { opacity: 0.85; }
.btn-icon-action--listen { border-color: var(--accent); color: var(--accent); }
.album-actions-group { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }

/* Misc */
.empty-state { color: var(--text-muted); padding: 2rem 0; }

/* Nav badge */
.nav-badge {
  background: var(--accent);
  color: var(--btn-text);
  border-radius: 20px;
  padding: 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
}

/* Badge */
.badge {
  background: var(--accent);
  color: var(--btn-text);
  border-radius: 20px;
  padding: 0.15rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
}

/* Album art */
.album-art {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.album-art-small {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.album-art-placeholder {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* Inbox */
.inbox-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 2rem;
  align-items: start;
}
.inbox-panel {
  position: sticky;
  top: 80px;
}
.send-form-wrapper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.send-form-wrapper h2 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
.sent-list h3 { font-size: 0.9rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.75rem; }

/* Recommendations page sections */
.rec-section { margin-bottom: 2rem; }
.rec-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.rec-section-header h2 { font-size: 1.05rem; font-weight: 600; }
.expandable-hidden { display: none; }
.btn-show-all { display: block; margin: 0.75rem auto 0; }
.sent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.inbox-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}
.inbox-card--unread {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.inbox-card-header { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.inbox-album { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.75rem; }
.in-queue-label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.4rem; }
.inbox-project-card { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.inbox-project-card:last-child { border-bottom: none; }
.inbox-project-header { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.5rem; }
.inbox-project-name { font-weight: 600; font-size: 0.95rem; }
.inbox-project-shelf { display: flex; gap: 0.4rem; margin-bottom: 0.4rem; }
.inbox-project-cover img, .inbox-project-placeholder { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.inbox-project-placeholder { background: var(--surface-2, var(--surface)); }
.inbox-project-link { font-size: 0.8rem; color: var(--text-muted); }
.inbox-project-link:hover { color: var(--accent); text-decoration: none; }
.queue-full-label { font-size: 0.78rem; color: var(--text-muted); }

/* Queue */
.queue-layout { display: flex; flex-direction: column; gap: 2rem; }
.queue-section h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
.queue-count { font-size: 0.85rem; color: var(--text-muted); }
.queue-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  cursor: grab;
}
.queue-card:active { cursor: grabbing; }
.queue-card.is-dragging { opacity: 0.4; border-style: dashed; }
.drag-handle {
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.1rem 0.2rem;
  cursor: grab;
  flex-shrink: 0;
  align-self: center;
  user-select: none;
}
.queue-card-main { display: flex; gap: 0.75rem; align-items: flex-start; flex: 1; }
.queue-card-info { display: flex; flex-direction: column; gap: 0.2rem; }
.queue-album-link { color: var(--text); text-decoration: none; }
.queue-album-link:hover strong { color: var(--accent); }
.queue-source { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }
.queue-card-actions { display: flex; flex-direction: row; gap: 0.4rem; align-items: center; }

.play-details summary { list-style: none; }
.play-details summary::-webkit-details-marker { display: none; }
.play-form {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  margin-top: 0.5rem;
  width: 220px;
}
.play-form .field { margin-bottom: 0.6rem; }

.played-section { border-top: 1px solid var(--border); padding-top: 1.5rem; }
.played-list { display: flex; flex-direction: column; gap: 0.5rem; }
.played-card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}
.played-info { display: flex; flex-direction: column; gap: 0.2rem; }
.played-meta { display: flex; gap: 0.75rem; font-size: 0.8rem; color: var(--text-muted); }
.played-score {
  font-weight: 700;
  color: hsl(350deg var(--score-sat, 65%) 35%);
}
[data-theme="dark"] .played-score {
  color: hsl(350deg var(--score-sat, 52%) 62%);
}
.played-score.played-score--rainbow {
  background: linear-gradient(90deg, #f87171, #fb923c, #facc15, #4ade80, #60a5fa, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Invite link */
.invite-section { margin-top: 1rem; }
.invite-label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.4rem; }
.invite-row { display: flex; gap: 0.5rem; align-items: center; }
.invite-input { flex: 1; font-size: 0.8rem; color: var(--text-muted); cursor: text; }
.settings-section { margin-top: 1.5rem; }
.platform-toggles { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.4rem; }
.platform-toggle { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--text); cursor: pointer; }
.platform-toggle input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

/* Friendship */
.friendship-status { font-size: 0.85rem; color: var(--text-muted); }
.friend-requests { margin-bottom: 2rem; }
.friends-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.friend-item { font-size: 0.9rem; color: var(--accent); padding: 0.25rem 0.6rem; background: var(--surface); border-radius: 999px; }
.friend-item:hover { color: var(--text); text-decoration: none; }
.friend-requests h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }

/* Pagination */
nav.pagy { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 1.5rem; }
nav.pagy a, nav.pagy span {
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
}
nav.pagy a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
nav.pagy span[aria-current] { border-color: var(--accent); color: var(--accent); }

/* Devise forms */
.devise-form { max-width: 400px; margin: 2rem auto; }
.devise-form h2 { font-size: 1.4rem; margin-bottom: 1.5rem; }
.devise-form .field { margin-bottom: 1rem; }
.devise-form input[type="submit"] { width: 100%; margin-top: 0.5rem; }

/* Bulk Import */
.bulk-import-panel { padding: 0.75rem 0; }
.bulk-import-heading { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.bulk-import-textarea { font-family: var(--font); font-size: 0.85rem; resize: vertical; }
.bulk-import-line { border-top: 1px solid var(--border); padding: 0.75rem 0; }
.bulk-import-line:first-child { border-top: none; }
.bulk-import-query { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.bulk-import-query-label { font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 0.35rem; }
.bulk-import-options { display: flex; flex-direction: column; gap: 0.3rem; }
.bulk-import-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; border-radius: var(--radius); cursor: pointer; border: 1px solid transparent; transition: background 0.12s; }
.bulk-import-option:hover { background: var(--surface2); }
.bulk-import-radio { flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.bulk-import-album-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.bulk-import-album-title { font-size: 0.88rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulk-import-skip-label { font-size: 0.85rem; color: var(--text-muted); font-style: italic; }
.bulk-import-no-results { font-size: 0.85rem; color: var(--text-muted); padding: 0.25rem 0.5rem; }
.bulk-import-actions { display: flex; gap: 0.5rem; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--border); margin-top: 0.25rem; }

/* Admin: Import Status */
.admin-breadcrumb { font-size: 0.85rem; margin-bottom: 0.4rem; }

.admin-import-list { display: flex; flex-direction: column; gap: 0.5rem; }
.admin-import-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1.25rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s;
}
.admin-import-row:hover { border-color: var(--accent); text-decoration: none; }
.admin-import-info { display: flex; flex-direction: column; gap: 0.15rem; }
.admin-import-name { font-weight: 600; }
.admin-import-meta { font-size: 0.8rem; color: var(--text-muted); }

.admin-import-progress-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; min-width: 200px; }
.admin-progress-bar { width: 100%; height: 6px; background: var(--surface2); border-radius: 99px; overflow: hidden; }
.admin-progress-bar--wide { width: 260px; height: 8px; background: var(--surface2); border-radius: 99px; overflow: hidden; }
.admin-progress-fill { height: 100%; background: #f97316; border-radius: 99px; transition: width 0.3s; }
.admin-progress-fill--complete { background: #4ade80; }
.admin-import-count { font-size: 0.8rem; color: var(--text-muted); }
.admin-import-count--ok { color: #4ade80; }
.admin-import-count--warn { color: #f97316; }

.admin-summary { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }
.admin-summary-label { font-size: 0.9rem; color: var(--text-muted); }
.admin-warn { color: #f97316; }

.admin-section { margin-bottom: 2rem; }
.admin-section-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.35rem; }
.admin-section-title--warn { color: #f97316; }
.admin-section-title--ok { color: #4ade80; }
.admin-section-hint { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem; }

.admin-album-list { display: flex; flex-direction: column; gap: 0.5rem; }
.admin-album-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}
.admin-album-row--stub { border-color: #3a2a1a; background: #1e1610; }
.admin-album-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.admin-album-status-dot--ok   { background: #4ade80; }
.admin-album-status-dot--stub { background: #f97316; }
.admin-album-info { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.admin-album-title { font-size: 0.9rem; font-weight: 500; }
.admin-album-artist { font-size: 0.82rem; color: var(--text-muted); }
.admin-album-year { font-size: 0.78rem; color: var(--text-muted); }
.admin-album-fix { flex-shrink: 0; min-width: 360px; }

.admin-search-form { display: flex; gap: 0.5rem; align-items: center; }
.admin-search-input { flex: 1; font-size: 0.85rem; padding: 0.4rem 0.7rem; }
.admin-search-empty { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.5rem; padding-left: 0.25rem; }
.admin-search-results { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.6rem; }
.admin-search-result {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface2);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
}
.admin-search-result-info { display: flex; flex-direction: column; gap: 0.05rem; flex: 1; min-width: 0; }
.album-art-tiny { width: 32px; height: 32px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }

/* Artist pages */
.artist-show { max-width: 900px; }
.artist-header { margin-bottom: 2rem; }
.artist-header h1 { margin-bottom: 0.5rem; }
.artist-meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.artist-years { color: var(--text-muted); font-size: 0.9rem; }
.artist-section { margin-bottom: 2.5rem; }
.artist-section h2 { margin-bottom: 1rem; font-size: 1.1rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

.mobile-header { display: none; }
.sidebar-backdrop { display: none; }

.mobile-menu-btn {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--text);
  padding: 0.25rem;
  line-height: 1;
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .mobile-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .app-shell { flex-direction: column; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
  }

  body.sidebar-open .sidebar { transform: translateX(0); }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
  }
  body.sidebar-open .sidebar-backdrop { display: block; }
}

@media (max-width: 1000px) {
  .intro-shelf { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  main { padding: 1rem; }

  .home-grid,
  .feed-layout,
  .profile-layout,
  .inbox-layout,
  .project-layout { grid-template-columns: 1fr; }

  .album-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

  .artist-list { grid-template-columns: 1fr; }

  .intro-shelf { grid-template-columns: repeat(2, 1fr); }

  .search-input,
  .search-row .search-input { width: 100%; max-width: 100%; }
  .search-row { flex-wrap: wrap; }

  .play-form { width: 100%; }
}