/* =========================================================
   FolioStory — Design System
   Style: Clean, minimal, modern SaaS. Lots of whitespace.
   Signature: a colored "spine" on each book card that mirrors
   the way a status ribbon peeks out from a shelved book.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500..700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Neutrals */
  --paper: #F0F1F3;
  --surface: #FCFCFD;
  --ink: #14171A;
  --ink-soft: #5B6167;
  --ink-faint: #8A9097;
  --border: #DEE1E5;
  --border-strong: #CACDD2;

  /* Accent — forest green, reads as a bookmark ribbon / shelf spine */
  --accent: #2F6F4E;
  --accent-hover: #275D41;
  --accent-soft: #E7F1EC;

  /* Status colors (also used as spine colors) */
  --status-want: #C88A3B;
  --status-want-soft: #FBF0DF;
  --status-reading: #3B6EA5;
  --status-reading-soft: #E7EFF7;
  --status-finished: #2F6F4E;
  --status-finished-soft: #E7F1EC;

  --danger: #C4453A;
  --danger-soft: #FBEAE8;
  --danger-hover: #A83A31;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(20, 23, 26, 0.06);
  --shadow-md: 0 6px 20px rgba(20, 23, 26, 0.08);

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
}

/* Dark mode palette */
html.dark-mode {
  --paper: #121417;
  --surface: #1B1E22;
  --ink: #EEF0F2;
  --ink-soft: #A7ADB4;
  --ink-faint: #767C83;
  --border: #2A2E33;
  --border-strong: #383D43;

  --accent: #4FA37B;
  --accent-hover: #5CB489;
  --accent-soft: #1B2A22;

  --status-want: #D9A15C;
  --status-want-soft: #2A2317;
  --status-reading: #6FA0D6;
  --status-reading-soft: #18232F;
  --status-finished: #4FA37B;
  --status-finished-soft: #1B2A22;

  --danger: #E06B60;
  --danger-soft: #2C1B19;
  --danger-hover: #E88880;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 15px;
  transition: background-color 0.25s ease, color 0.25s ease;
  /* If any element anywhere on the page (a chart, a wide table, anything)
     ends up wider than the viewport, mobile browsers commonly respond by
     zooming the *entire page* out to fit it — making everything on the
     page look small, not just the one wide element. This stops that
     whole-page shrink from happening regardless of what the actual
     overflowing culprit turns out to be; the specific element just clips
     or scrolls on its own instead. */
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

h2 { font-size: 1.6rem; margin-bottom: 1.25rem; }
h2 i { margin-right: 8px; font-size: 0.85em; color: var(--accent); }
h3 { font-size: 1.05rem; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============ Layout shell ============ */
main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 96px 32px 64px;
}

/* When a <header> precedes <main> (dashboard only), the header itself
   already clears the fixed nav — main doesn't need to add that same
   clearance again, or the gap between them looks oversized. */
header + main {
  padding-top: 24px;
}

main h2 { padding-top: 0; margin-top: 0; }

.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}

header {
  padding: 7rem 2rem 1rem;
  text-align: center;
}

header h1 { font-size: 2rem; margin-bottom: 0.4rem; }
header p { color: var(--ink-soft); }

/* ============ Nav ============ */
#nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  background: rgba(240, 241, 243, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

html.dark-mode #nav-menu {
  background: rgba(18, 20, 23, 0.85);
}

#nav-menu .logo {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-badge {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-badge svg {
  width: 16px;
  height: 16px;
}

.logo-word { line-height: 1; }
.logo-word-folio { color: var(--ink); }
.logo-word-accent { color: var(--accent); }

#nav-menu .menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

#nav-menu .menu a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}

#nav-menu .menu a:hover { background: var(--accent-soft); color: var(--accent); }
#nav-menu .menu a.active { color: var(--accent); background: var(--accent-soft); }

/* A .btn-primary link inside the nav (e.g. index.html's "Log In / Sign Up")
   needs to beat the generic nav-link color rule above, which otherwise wins
   on specificity and paints the text dark grey — nearly invisible against
   the solid green button background until hover coincidentally improved
   the contrast enough to read. */
#nav-menu .menu a.btn-primary,
#nav-menu .menu a.btn-primary:hover {
  color: #fff;
}

#nav-menu .menu button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

#nav-menu .menu button:hover { background: var(--border); color: var(--ink); }

/* ============ Buttons ============ */
.btn-primary, .btn-secondary, .btn-danger,
form#bookForm button, form#friendForm button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.btn-primary, form#bookForm button, form#friendForm button {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover, form#bookForm button:hover, form#friendForm button:hover {
  background: var(--accent-hover);
}

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--paper); border-color: var(--ink-faint); }

.btn-danger {
  background: var(--danger-soft);
  color: var(--danger);
}
.btn-danger:hover { background: var(--danger); color: #fff; }

.btn-primary:active, .btn-secondary:active, .btn-danger:active,
form#bookForm button:active { transform: scale(0.97); }

/* ============ Forms ============ */
form {
  max-width: 640px;
  margin: 0 auto;
}

form label {
  display: block;
  margin: 16px 0 6px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

form label:first-of-type { margin-top: 0; }

#bookForm input, #bookForm select, #bookForm textarea,
#friendForm input, #loginForm input, #resetPasswordForm input,
#contactForm input, #contactForm textarea,
#feedbackForm input, #feedbackForm textarea,
#progress-section input, #progress-section select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.95rem;
  font-family: var(--font-body);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#bookForm input:focus, #bookForm select:focus, #bookForm textarea:focus,
#friendForm input:focus, #loginForm input:focus, #resetPasswordForm input:focus,
#contactForm input:focus, #contactForm textarea:focus,
#feedbackForm input:focus, #feedbackForm textarea:focus,
#progress-section input:focus, #progress-section select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

#bookForm textarea { min-height: 90px; resize: vertical; }

.search-results-list {
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  max-height: 320px;
  overflow-y: auto;
}
.search-result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: var(--font-body);
  transition: background 0.15s ease;
}
.search-result-row:hover { background: var(--accent-soft); }
.search-result-row img {
  width: 36px;
  height: 54px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--surface);
}
.search-result-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-result-info strong { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.search-result-info span { font-size: 0.8rem; font-weight: 600; color: var(--ink); }

.beta-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #B8860B;
  background: rgba(184, 134, 11, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
}

.field-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.isbn-status.loading { color: var(--status-reading); }
.isbn-status.success { color: var(--accent); font-weight: 600; }
.isbn-status.error { color: var(--danger); }

/* ISBN action row: Look Up + Scan Barcode, side by side. Overrides the
   generic #bookForm button width/margin rule further down this file, which
   is meant for the main submit button only. */
.isbn-button-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
#bookForm .isbn-button-row button {
  flex: 1;
  width: auto;
  margin-top: 0;
  padding: 10px 14px;
}
#bookForm .isbn-button-row button:disabled { opacity: 0.6; cursor: wait; }

/* Barcode scanner overlay */
.scanner-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 14, 0.85);
  z-index: 4000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.scanner-modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

.scanner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.scanner-header h3 { font-size: 1.05rem; margin: 0; }

.scanner-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--paper);
  color: var(--ink-soft);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.scanner-close:hover { background: var(--border); color: var(--ink); }

#scannerReader {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  min-height: 220px;
  position: relative;
}

/* Quagga2 injects its own <video> and a debug overlay <canvas> into this
   container. The video needs to fill the container properly; the debug
   canvas (which draws its internal scan-locator boxes) is genuinely useful
   during development but looks like visual noise for a normal user, so
   it's hidden here — a pattern taken directly from Quagga2's own community
   examples. */
#scannerReader video {
  width: 100% !important;
  height: auto !important;
  display: block;
  position: relative;
  z-index: 1;
}
#scannerReader canvas.drawingBuffer {
  display: none;
}

.scan-confirm-book {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  background: var(--paper);
  border-radius: var(--radius-md);
}
.scan-confirm-cover {
  width: 56px;
  height: 84px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(20,23,26,0.2);
  flex-shrink: 0;
  background: var(--surface);
}
.scan-confirm-text { flex: 1; min-width: 0; }
.scan-confirm-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.scan-confirm-author { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 4px; }
.scan-confirm-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.scan-confirm-actions button { flex: 1; margin-top: 0; }

#bookForm button, #friendForm button { width: 100%; margin-top: 24px; padding: 12px; }

.form-section-heading {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 1rem;
}

.field-row {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}
.field-row > div { flex: 1; min-width: 0; }
.field-row label { margin-top: 0 !important; }

.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
}
/* #bookForm input {...} above applies width:100% to every input in the
   form, including this checkbox — the plain class-based override just
   below doesn't have enough specificity to beat that ID-based rule, so it
   was silently losing, leaving a full-width checkbox that shoved the
   "This was a gift" text far to the right of it. Matching the ID prefix
   here fixes the specificity properly rather than reaching for !important. */
#bookForm .checkbox-label input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ============ Library controls ============ */
.library-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.library-controls label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.sort-select, #searchBooks {
  padding: 9px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
}

.sort-select { appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%235B6167' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.sort-select option { color: var(--ink); background: var(--surface); }

#searchBooks { flex: 1; min-width: 180px; }

/* ============ Book library grid ============ */
#bookList { margin-top: 8px; }

.shelf-row { margin-bottom: 32px; }

.shelf-row h3 {
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-body);
  font-weight: 700;
}

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

.shelf li { list-style: none; }

.book-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 18px 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Signature element: shelf "spine" strip colored by reading status */
.book-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--status-color, var(--ink-faint));
}

.book-card.status-want { --status-color: var(--status-want); }
.book-card.status-reading { --status-color: var(--status-reading); }
.book-card.status-finished { --status-color: var(--status-finished); }

.book-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.book-cover-wrapper { display: flex; justify-content: center; width: 100%; margin-bottom: 14px; }

.book-cover {
  display: block;
  width: 110px;
  height: 164px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(20,23,26,0.18);
  cursor: zoom-in;
  background: var(--paper);
}

.book-header {
  width: 100%;
  min-height: 4.4em;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.book-header strong {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35em;
}

.book-title-link {
  cursor: pointer;
  transition: color 0.15s ease;
}

.book-title-link:hover { color: var(--accent); }

.book-title-icon {
  font-size: 0.7rem;
  color: var(--ink-faint);
  margin-left: 2px;
  vertical-align: super;
  transition: color 0.15s ease;
}

.book-title-link:hover .book-title-icon { color: var(--accent); }

.book-header em {
  font-style: normal;
  color: var(--ink-soft);
  font-size: 0.85rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-meta {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.book-meta i { color: var(--ink-faint); font-size: 0.85rem; width: 14px; text-align: center; }

.book-meta.status-want { color: var(--status-want); }
.book-meta.status-reading { color: var(--status-reading); }
.book-meta.status-finished { color: var(--status-finished); }
.book-meta.status-want i,
.book-meta.status-reading i,
.book-meta.status-finished i { color: currentColor; }

.book-card .notes {
  width: 100%;
  font-size: 0.82rem;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
  max-height: 1.6em;
  opacity: 0.9;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}

.book-card .notes.expanded {
  -webkit-line-clamp: unset;
  overflow-y: auto;
  white-space: normal;
  max-height: 200px;
  opacity: 1;
}

/* Book actions */
.book-actions {
  margin-top: auto;
  padding-top: 14px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.book-actions .action-row { display: flex; gap: 8px; width: 100%; }

.book-actions button {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-actions .edit-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.book-actions .delete-btn:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }

.recommend-checkbox { display: none; }

.recommend-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.recommend-label::after { content: "Recommend"; }
.recommend-checkbox:checked + .recommend-label::after { content: "Recommended"; }
.recommend-checkbox:checked + .recommend-label {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.recommend-label:hover { border-color: var(--accent); color: var(--accent); }

/* Book progress mini bar on card */
.book-progress { width: 100%; margin: 10px 0 4px; }
.book-progress p { font-size: 0.75rem; color: var(--ink-faint); margin-top: 4px; }

/* ============ Cover overlay/zoom ============ */
.cover-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 12, 14, 0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
  cursor: zoom-out;
}

.cover-expanded {
  width: min(460px, 80vw);
  height: auto;
  max-height: 85vh;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

/* ============ Dashboard stat cards ============ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }

.stat-card i { color: var(--accent); font-size: 1.1rem; margin-bottom: 10px; display: block; }
.stat-card h3 { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 6px; }
.stat-card .accent { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; color: var(--ink); }

.stat-card.blue i { color: var(--status-reading); }
.stat-card.green i { color: var(--status-finished); }
.stat-card.purple i { color: #7C5CBF; }
.stat-card.orange i { color: var(--status-want); }
.stat-card.red i { color: var(--danger); }
.stat-card.teal i { color: #2A9D8F; }
.stat-card.pink i { color: #C2477B; }

/* Value stat cards are informational only — no page to click through to,
   so they shouldn't look interactive the way the others do. */
.stat-card-static { cursor: default; }
.stat-card-static:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); }

.stat-trend {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 4px;
}
.stat-trend .trend-up { color: var(--accent); }
.stat-trend .trend-down { color: var(--danger); }
.stat-trend .trend-flat { color: var(--ink-faint); }

/* Timeframe toggle (Dashboard) */
.timeframe-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}

.timeframe-btn {
  padding: 7px 16px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.timeframe-btn:hover { color: var(--ink); }
.timeframe-btn.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }

/* ============ Progress bars ============ */
.progress-container {
  width: 100%;
  background: var(--border);
  border-radius: 8px;
  margin: 15px 0;
  height: 20px;
  overflow: hidden;
}

.progress-bar { height: 100%; width: 0%; background: var(--accent); transition: width 0.4s ease; }
.progress-bar.progress-grey { background: var(--ink-faint); }
.progress-blue { background: var(--status-reading); }
.progress-green { background: var(--status-finished); }
.progress-red { background: var(--danger); }
.progress-grey { background: var(--ink-faint); }

.progress-summary-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin: 6px 0; width: 100%; }

.dashboard-progress-row {
  cursor: pointer;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: background 0.15s ease, border-color 0.15s ease;
  margin-bottom: 10px;
}
.dashboard-progress-row:hover { background: var(--accent-soft); border-color: var(--accent); }
.progress-summary-fill { height: 100%; width: 0%; transition: width 0.3s ease; }
.progress-summary-blue { background: var(--status-reading) !important; }
.progress-summary-green { background: var(--status-finished) !important; }
.progress-summary-red { background: var(--danger) !important; }
.progress-summary-grey { background: var(--ink-faint) !important; }

#progressText, #goalSummary, #activeReadsCounter { color: var(--ink-soft); font-size: 0.9rem; margin: 8px 0; }

/* ============ Friends ============ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: 6px; }
.card p { color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 14px; }
.card .card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.card .card-actions button { flex: 1; min-width: 100px; }

.shared-books { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

.shared-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.shared-panel-header .shared-group-heading {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.shared-panel-header .clear-panel-btn {
  flex-shrink: 0;
  font-size: 0.76rem;
  padding: 6px 10px;
}

.shared-group-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin: 14px 0 8px;
}
.shared-group-heading:first-child { margin-top: 0; }
.shared-group-heading i { font-size: 0.8rem; }

.shared-books ul, #inboxRecommendationsList ul, #inboxWishlistList ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.shared-books li, #inboxRecommendationsList li, #inboxWishlistList li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  padding: 8px 10px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
  position: relative;
}
.shared-books li:hover, #inboxRecommendationsList li:hover, #inboxWishlistList li:hover { background: var(--accent-soft); }

.shared-book-cover {
  width: 34px;
  height: 50px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(20,23,26,0.2);
  flex-shrink: 0;
  background: var(--surface);
  cursor: pointer;
}

.shared-book-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; cursor: pointer; }
.shared-book-info strong {
  color: var(--ink);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shared-book-info span { font-size: 0.76rem; color: var(--ink-faint); }
.shared-book-info .shared-book-status { color: var(--accent); font-weight: 600; }

/* --- Shared Library / Book Discussions --- */
.shared-library-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.shared-library-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.shared-library-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  padding: 8px 10px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
  cursor: pointer;
  position: relative;
}
.shared-library-row:hover { background: var(--accent-soft); }

.unread-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.book-thread {
  margin-top: 14px;
  padding: 14px;
  background: var(--paper);
  border-radius: var(--radius-md);
}
.book-thread-comments { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.book-comment {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}
.book-comment-header { margin-bottom: 4px; font-size: 0.8rem; }
.book-comment-text { color: var(--ink); line-height: 1.4; white-space: pre-wrap; }
.book-comment-edit-btn {
  margin-top: 6px;
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
}
.book-comment-edit-btn:hover { color: var(--accent); }
.book-comment-edit-textarea {
  width: 100%;
  min-height: 70px;
  margin: 6px 0;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.85rem;
  resize: vertical;
}

.book-comment-spoiler { border-color: var(--accent); }
.spoiler-mine-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 999px;
}
.spoiler-cover { margin-top: 2px; }
.spoiler-reveal-btn {
  width: 100%;
  padding: 8px;
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.spoiler-text { margin-top: 8px; color: var(--ink); line-height: 1.4; white-space: pre-wrap; }

.book-comment-form { display: flex; flex-direction: column; gap: 8px; }
.book-comment-input {
  width: 100%;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.85rem;
  resize: vertical;
}
.book-comment-form .checkbox-label { font-size: 0.8rem; }

.shared-book-remove {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease;
}
.shared-book-remove:hover { background: var(--danger-soft); color: var(--danger); }

.inbox-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.inbox-add-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.inbox-add-btn:hover { background: var(--accent); color: #fff; }

/* Friend account-link badge */
.friend-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  margin: 6px 0 10px;
}
.friend-badge-linked {
  background: var(--accent-soft);
  color: var(--accent);
}
.friend-badge-unlinked {
  background: var(--border);
  color: var(--ink-faint);
}

/* "Already purchased" signal — shared across the wishlist owner and everyone
   else who received the same item, without naming who bought it. */
.purchased-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 20px;
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.purchased-badge-inline {
  position: static;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.inbox-purchased-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.inbox-purchased-btn:hover { background: var(--accent); color: #fff; }

.inbox-actions .buy-menu { margin-top: 0; }
.inbox-actions .buy-menu summary { padding: 8px 10px; }

.detail-card {
  position: relative;
  display: flex;
  gap: 24px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 480px;
  width: 90vw;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  cursor: default;
}

.detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: none;
  background: var(--paper);
  color: var(--ink-soft);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.detail-close:hover { background: var(--border); color: var(--ink); }

.detail-cover {
  width: 120px;
  height: 178px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(20,23,26,0.25);
  flex-shrink: 0;
  background: var(--paper);
}

.detail-body { min-width: 0; }
.detail-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  font-weight: 600;
  margin-bottom: 6px;
}
.detail-body h3 { font-size: 1.2rem; margin-bottom: 2px; }
.detail-author { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 10px; }
.detail-body .book-meta { margin: 5px 0; }
.detail-body .fa-star { color: #E0A93E; margin-right: 2px; }
.detail-notes {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
}

@media (max-width: 520px) {
  .detail-card { flex-direction: column; align-items: center; text-align: center; }
}

#friendForm { display: flex; gap: 10px; max-width: 480px; align-items: flex-start; }
#friendForm input { flex: 1; }
#friendForm button { width: auto; margin-top: 0; padding: 11px 20px; }

/* ============ Login ============ */
.login-section { max-width: 420px; margin: 40px auto; text-align: center; }
.login-section h2 { text-align: center; }
#loginForm, #resetPasswordForm { display: flex; flex-direction: column; }
#loginForm button, #loginForm .btn-secondary, #resetPasswordForm button { margin-top: 10px; }
#loginForm label, #resetPasswordForm label { text-align: left; }

#forgotPasswordLink { text-align: center; font-size: 0.85rem; margin-bottom: 8px; }
#forgotPasswordLink a { color: var(--ink-soft); }
#forgotPasswordLink a:hover { color: var(--accent); }

.auth-mode-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}

.auth-mode-btn {
  padding: 8px 20px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.auth-mode-btn:hover { color: var(--ink); }
.auth-mode-btn.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }

.tile.logout-tile {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-top: 20px;
  text-align: left;
}
.tile.logout-tile h3 { color: var(--accent); margin-bottom: 4px; font-size: 1rem; }
.tile.logout-tile p { color: var(--ink-soft); font-size: 0.85rem; }

#loginMessage { margin-top: 14px; font-size: 0.9rem; font-weight: 600; }

/* ============ Intro / index ============ */
.intro { padding: 3rem 1rem 1rem; text-align: center; }
.intro h2 { font-size: 2.4rem; margin-bottom: 12px; }
.intro p { color: var(--ink-soft); max-width: 480px; margin: 0 auto 24px; }

/* ============ Footer ============ */
footer {
  text-align: center;
  padding: 24px;
  color: var(--ink-faint);
  font-size: 0.8rem;
}
footer a { color: var(--ink-faint); text-decoration: underline; }
footer a:hover { color: var(--accent); }

/* ============ Empty states ============ */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--ink-faint);
}
.empty-state i { font-size: 1.8rem; margin-bottom: 10px; display: block; color: var(--border-strong); }

/* ============ Discover ============ */
.discover-hero {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.discover-hero-cover {
  width: 150px;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(20,23,26,0.2);
  flex-shrink: 0;
  background: var(--paper);
}

.discover-hero-body { min-width: 0; }
.discover-hero-body h3 { font-size: 1.4rem; margin-bottom: 2px; }

.discover-reason {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.discover-reason i { margin-right: 5px; }

.discover-author { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 12px; }

.discover-meta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.discover-tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--ink-soft);
}

.discover-description {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 18px;
  max-width: 60ch;
}

.discover-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.discover-actions .buy-menu { margin-top: 0; }

@media (max-width: 640px) {
  .discover-hero { flex-direction: column; align-items: center; text-align: center; }
  .discover-meta-row, .discover-actions { justify-content: center; }
}

/* Dashboard "Book of the Day" teaser strip */
.discover-teaser {
  display: flex;
  align-items: center;
  gap: 16px;
}
.discover-teaser-cover {
  width: 52px;
  height: 78px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(20,23,26,0.2);
  flex-shrink: 0;
  background: var(--paper);
}
.discover-teaser-body { flex: 1; min-width: 0; }
.discover-teaser-body h3 { font-size: 1.05rem; }
.discover-teaser .discover-reason { margin-bottom: 4px; }
.discover-teaser .discover-author { margin-bottom: 0; font-size: 0.85rem; }

@media (max-width: 640px) {
  .discover-teaser { flex-wrap: wrap; }
}

/* Dashboard "Recommender Level" gamification bar */
.recommender-level {
  display: flex;
  align-items: center;
  gap: 18px;
}

.recommender-badge {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), #E0A93E);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.recommender-badge i { color: #fff; font-size: 1.3rem; }

.recommender-body { flex: 1; min-width: 0; }

.recommender-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.recommender-header-row h3 { font-size: 1.1rem; margin: 0; }

.recommender-bar-track {
  width: 100%;
  height: 12px;
  background: var(--border);
  border-radius: 20px;
  overflow: hidden;
}
.recommender-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #E0A93E);
  border-radius: 20px;
  transition: width 0.5s ease;
}

@media (max-width: 640px) {
  .recommender-level { flex-wrap: wrap; }
}

/* Reading Challenges (Progress page) */
.challenges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.challenge-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
}

/* Reaching 100% gets a visibly different treatment from "still in
   progress" — a subtle gold-tinted background and border, rather than
   looking identical to every other card except for a longer bar. */
.challenge-card-complete {
  background: linear-gradient(135deg, var(--accent-soft), var(--paper));
  border-color: var(--accent);
}
.challenge-complete-badge {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.challenge-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.challenge-card-header i { color: var(--accent); font-size: 1rem; }
.challenge-card-header h3 { font-size: 0.95rem; margin: 0; }

.challenge-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
.challenge-card-footer .trend-up { color: var(--accent); font-weight: 600; }
.challenge-card-footer .trend-down { color: var(--danger); font-weight: 600; }
.challenge-card-footer .trend-flat { color: var(--ink-faint); font-weight: 600; }

.challenge-settings {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.challenge-settings summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.challenge-settings summary:hover { color: var(--accent); }
.challenge-settings-form {
  max-width: 420px;
  margin-top: 16px;
}
.challenge-settings-form input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  margin-bottom: 12px;
}

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

.achievement-badge {
  text-align: center;
  padding: 20px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  transition: transform 0.15s ease;
}

.achievement-badge.unlocked {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.achievement-badge.unlocked:hover { transform: translateY(-2px); }

.achievement-badge.locked {
  background: var(--paper);
  opacity: 0.55;
}

.achievement-badge-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.achievement-badge.unlocked .achievement-badge-icon {
  background: linear-gradient(135deg, var(--accent), #E0A93E);
  color: #fff;
}
.achievement-badge.locked .achievement-badge-icon {
  background: var(--border);
  color: var(--ink-faint);
}

.achievement-badge h4 {
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--ink);
}
.achievement-badge.locked h4 { color: var(--ink-faint); }

.achievement-badge p {
  font-size: 0.72rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* Achievement unlock toast */
.achievement-toast {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  max-width: 320px;
}
.achievement-toast.show { transform: translateX(0); opacity: 1; }

.achievement-toast-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #E0A93E);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.achievement-toast-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 2px;
}
.achievement-toast-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

@media (max-width: 640px) {
  .achievement-toast { left: 16px; right: 16px; max-width: none; }
}

/* ============ Wishlist ============ */
.wishlist-bulk-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.wishlist-bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.wishlist-bulk-actions .sort-select { min-width: 160px; }

.wishlist-select-wrap {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
}

.wishlist-select {
  position: absolute;
  opacity: 0;
  width: 26px;
  height: 26px;
  margin: 0;
  cursor: pointer;
}

.wishlist-select-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--surface);
  border: 2px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  color: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wishlist-select-label i { font-size: 0.7rem; }

.wishlist-select:checked + .wishlist-select-label {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.wishlist-select:focus-visible + .wishlist-select-label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* "Buy" dropdown — native <details>/<summary>, no extra JS needed */
.buy-menu {
  position: relative;
  margin-top: 8px;
}

/* When a Buy dropdown is open, elevate its whole card above sibling cards —
   without this, a card from the next row in the grid (which comes later in
   the document and paints on top by default) can cover the open dropdown
   even though it's no longer being clipped. Also covers list-style rows
   (Friends inbox) for the same reason — any later sibling can paint over
   an earlier one's open dropdown regardless of grid vs. list layout. */
.book-card:has(.buy-menu[open]),
li:has(.buy-menu[open]) {
  z-index: 30;
}

.buy-menu summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.buy-menu summary::-webkit-details-marker { display: none; }
.buy-menu summary:hover { border-color: var(--accent); color: var(--accent); }
.buy-menu[open] summary { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.buy-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 20;
  overflow: hidden;
}

.buy-menu-list a {
  display: block;
  padding: 10px 12px;
  font-size: 0.78rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.buy-menu-list a:last-child { border-bottom: none; }
.buy-menu-list a:hover { background: var(--accent-soft); color: var(--accent); }

@media (max-width: 720px) {
  .wishlist-bulk-actions { margin-left: 0; width: 100%; }
  .wishlist-bulk-actions .sort-select { flex: 1; }
}

/* ============ Responsive ============ */

/* Hamburger toggle + backdrop: hidden on desktop, shown only on mobile */
.mobile-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: 1.25rem;
  cursor: pointer;
  flex-shrink: 0;
}
.mobile-nav-backdrop {
  display: none;
}

@media (max-width: 720px) {
  main { padding: 88px 16px 48px; }
  #nav-menu { padding: 12px 16px; }

  .mobile-nav-toggle { display: flex; }

  /* The menu becomes an off-canvas sidebar rather than wrapping onto
     several rows across the top of a small screen — the wrapped-row
     version was eating a large chunk of vertical space before any actual
     page content was visible at all. */
  #nav-menu .menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    max-width: 78vw;
    margin: 0;
    background: var(--surface);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 84px 14px 24px;
    box-shadow: -10px 0 28px rgba(0,0,0,0.25);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 150;
    overflow-y: auto;
  }
  #nav-menu .menu.mobile-open {
    transform: translateX(0);
  }
  #nav-menu .menu a, #nav-menu .menu button {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 14px;
    font-size: 0.92rem;
  }

  .mobile-nav-backdrop.show {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 14, 0.45);
    z-index: 140;
  }

  .section { padding: 20px; }
  .shelf { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

  /* Dashboard stat cards and Progress page challenge/achievement cards were
     auto-fitting 2 narrow columns on a phone-width screen instead of
     stacking — every card, chart, and number ended up cramped and small.
     Forcing a single column here lets each one use the full screen width. */
  .stats-grid,
  .challenges-grid,
  .achievements-grid {
    grid-template-columns: 1fr;
  }

  /* Stat cards are left-aligned by design for the desktop multi-column
     grid, but once forced to a single full-width column above, that same
     left-alignment leaves the icon/number/label stranded on the left with
     a large empty gap on the right — centering the content specifically
     on mobile fixes that without touching how it looks on desktop. */
  .stat-card {
    text-align: center;
  }
  .stat-card i {
    margin-left: auto;
    margin-right: auto;
  }

  /* Two-field rows (Date Purchased + Purchased From, Price + Currency,
     etc.) sit side-by-side on desktop where there's room, but on a narrow
     phone that leaves each field too cramped — particularly date inputs,
     which have a minimum usable width for their native picker widget that
     doesn't shrink — causing the two fields to visually collide. Stacking
     them fixes it. */
  .field-row {
    flex-direction: column;
    gap: 0;
  }

  /* The three Dashboard charts had a hardcoded 300px minimum width each,
     wider than a phone's actual usable content width — forcing them to
     either overflow horizontally or render at a squeezed, illegible size.
     Stacking them at full width fixes both. */
  .charts {
    flex-direction: column;
  }
  .charts > div {
    min-width: 0 !important;
    width: 100%;
  }

  /* Several canvases also have a "height" HTML attribute set directly
     (which fixes their actual pixel dimensions, not just their CSS display
     size) — forcing every canvas to a percentage-based max-width here,
     with !important to beat that attribute, stops any of them from being
     the thing that's forcing the page wider than the screen. Deliberately
     NOT forcing height here too — Chart.js manages each chart's actual
     height itself via its own responsive resize logic, and fighting that
     from outside risks collapsing a chart's height instead of just fixing
     its width. */
  canvas {
    max-width: 100% !important;
  }

  /* Edit + Delete were still occasionally squeezed tight enough on an
     iPhone-width screen to clip the Delete button, even with the earlier
     min-width fix. Stacking them full-width, one above the other, removes
     the squeeze entirely rather than continuing to fine-tune how much
     each one is allowed to shrink. */
  .book-actions .action-row {
    flex-direction: column;
  }
  .book-actions .action-row button {
    width: 100%;
  }

  /* The invite-link row (a readonly URL input plus Copy/WhatsApp/Email
     buttons) was fighting for space in one shared row on a narrow phone
     screen — the input's min-width:0 let it shrink small enough to avoid
     overflowing outright, but that meant the visible URL text and the
     buttons ended up cramped together rather than each getting proper
     room. Stacking the whole row gives the input its own full-width line
     to actually show the link on. */
  .library-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .library-controls input,
  .library-controls select,
  .library-controls button {
    width: 100%;
  }
}

/* ============ Blog ============ */
.blog-header {
  max-width: 720px;
  margin: 0 auto;
  padding: 100px 24px 20px;
}
.blog-back-link { font-size: 0.85rem; color: var(--ink-soft); text-decoration: none; }
.blog-back-link:hover { color: var(--accent); }

.blog-listing {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 24px 80px;
}
.blog-listing h1 { margin-bottom: 8px; }
.blog-listing > p { color: var(--ink-soft); margin-bottom: 40px; }
.blog-post-card {
  display: block;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.blog-post-card:first-of-type { border-top: none; }
.blog-post-card h2 { font-size: 1.4rem; margin-bottom: 8px; transition: color 0.15s ease; }
.blog-post-card:hover h2 { color: var(--accent); }
.blog-post-card p { color: var(--ink-soft); line-height: 1.6; }
.blog-post-date { font-size: 0.78rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; display: block; }

.blog-article {
  max-width: 680px;
  margin: 0 auto;
  padding: 20px 24px 80px;
}
.blog-article .blog-post-date { margin-bottom: 14px; }
.blog-article h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.2; margin-bottom: 24px; }
.blog-article h2 { font-family: var(--font-display); font-size: 1.4rem; margin: 36px 0 14px; }
.blog-article p { font-size: 1.05rem; line-height: 1.75; color: var(--ink); margin-bottom: 20px; }
.blog-article ul, .blog-article ol { margin: 0 0 20px 22px; line-height: 1.75; font-size: 1.05rem; }
.blog-article li { margin-bottom: 8px; }
.blog-article strong { color: var(--ink); }
.blog-article a { color: var(--accent); }
/* The rule above is meant for ordinary links inside the article's prose,
   but a CTA button is also just an <a> tag, and this class is more
   specific than .btn-primary's own color rule — so it was silently
   winning and turning the button's intended white text back to green,
   on a green background. Same underlying pattern as the invisible
   "Log In" button bug from earlier in this project. */
.blog-article a.btn-primary { color: #fff; }

.blog-cta {
  margin-top: 48px;
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.blog-cta h3 { margin-bottom: 8px; }
.blog-cta p { color: var(--ink-soft); margin-bottom: 20px; }

@media (max-width: 600px) {
  .blog-header, .blog-listing, .blog-article { padding-left: 20px; padding-right: 20px; }
}