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

/* ─────────────────────────────────────────────────────────────
   DESIGN TOKENS
   --fbc-* tokens are scoped to the Shelved design.
   Legacy --bg/--surface/--ink tokens are kept for login page.
───────────────────────────────────────────────────────────── */
:root {
  /* Legacy — login page only */
  --bg:         #f5f2ed;
  --surface:    #ffffff;
  --ink:        #1a1714;
  --ink-muted:  #7a756e;
  --ink-faint:  #c4bfb7;
  --border:     rgba(26,23,20,0.10);
  --border-mid: rgba(26,23,20,0.18);

  /* Shelved */
  --fbc-page-bg:    #1a1510;
  --fbc-surface:    #221d17;
  --fbc-ink:        #f0ece4;
  --fbc-ink-muted:  rgba(240,236,228,0.55);
  --fbc-ink-faint:  rgba(240,236,228,0.25);
  --fbc-border:     rgba(240,236,228,0.06);
  --fbc-border-mid: rgba(240,236,228,0.12);

  --font-display: 'Fraunces', serif;
  --font-body:    'Geist', sans-serif;
  --font-mono:    'Geist Mono', monospace;
}

/* ── Base ── */
body { font-family: var(--font-body); background: var(--fbc-page-bg); color: var(--fbc-ink); min-height: 100vh; padding-bottom: 4rem; }

/* ─────────────────────────────────────────────────────────────
   SITE HEADER
   JS references: .fab-icon-pencil, .fab-icon-x,
   .header-pencil-icon, .header-x-icon, .signed-in-name,
   .edit-fab, .edit-fab-active  — all class names kept exactly
───────────────────────────────────────────────────────────── */
.site-header { background: var(--fbc-page-bg); border-bottom: 1px solid var(--fbc-border); padding: 0 2.5rem; height: 60px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; gap: 1rem; }
.site-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; color: var(--fbc-ink); letter-spacing: 0.02em; cursor: pointer; flex: 1; }
.header-right { display: flex; align-items: center; gap: 10px; }

.save-status { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 20px; display: none; min-width: auto; }
.save-status.saving { display: block; color: rgba(240,236,228,0.45); }
.save-status.saved  { display: block; background: rgba(111,207,151,0.12); color: #6fcf97; border: 1px solid rgba(111,207,151,0.25); }
.save-status.error  { display: block; color: #eb5757; }

.header-btn { font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(240,236,228,0.2); background: transparent; color: var(--fbc-ink-muted); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.header-btn:hover { background: rgba(240,236,228,0.08); color: var(--fbc-ink); border-color: rgba(240,236,228,0.35); }
.icon-btn { width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; }

.signed-in-as { display: flex; align-items: center; gap: 7px; background: transparent; border: 1px solid rgba(240,236,228,0.2); border-radius: 8px; padding: 0 12px 0 10px; height: 36px; white-space: nowrap; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.signed-in-as:hover { background: rgba(240,236,228,0.08); border-color: rgba(240,236,228,0.35); }
.signed-in-name { font-size: 12px; font-weight: 500; color: var(--fbc-ink); font-family: var(--font-body); letter-spacing: 0.02em; }
@media (max-width: 600px) {
  .signed-in-as { padding: 0; width: 36px; justify-content: center; }
  .signed-in-name { display: none; }
}

.hamburger-btn { background: rgba(240,236,228,0.06); border: 1px solid rgba(240,236,228,0.1); color: rgba(240,236,228,0.5); cursor: pointer; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; flex-shrink: 0; }
.hamburger-btn:hover { background: rgba(240,236,228,0.12); color: var(--fbc-ink); }

.header-pencil-btn { background: none; border: none; color: rgba(240,236,228,0.45); cursor: pointer; width: 32px; height: 32px; display: none; align-items: center; justify-content: center; border-radius: 8px; transition: color 0.15s, background 0.15s; }
.header-pencil-btn:hover { color: var(--fbc-ink); background: rgba(240,236,228,0.08); }
.header-pencil-btn.active { color: #c0392b; }
@media (min-width: 601px) { .header-pencil-btn { display: flex; } }

.signed-in-as .role-badge { font-size: 10px; padding: 1px 6px; border-radius: 10px; font-weight: 500; }
.role-badge.admin  { background: rgba(111,207,151,0.15); color: #6fcf97; }
.role-badge.reader { background: rgba(240,236,228,0.08); color: rgba(240,236,228,0.4); }

.readers-btn { background: transparent; border: 1px solid rgba(240,236,228,0.2); color: rgba(240,236,228,0.7); cursor: pointer; display: none; width: 34px; height: 34px; border-radius: 20px; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.readers-btn:hover { background: rgba(240,236,228,0.08); border-color: rgba(240,236,228,0.35); color: var(--fbc-ink); }
.exit-btn { background: none; border: none; color: rgba(240,236,228,0.5); cursor: pointer; display: flex; height: 34px; align-items: center; justify-content: center; padding: 0 4px; font-family: var(--font-body); font-size: 12px; font-weight: 400; letter-spacing: 0.02em; transition: color 0.15s; white-space: nowrap; }
.exit-btn:hover { color: var(--fbc-ink); }

/* ── FAB — JS references #edit-fab, .edit-fab, .edit-fab-active, .fab-icon-pencil, .fab-icon-x ── */
.edit-fab { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 12px; background: #221d17; color: rgba(240,236,228,0.6); border: 1px solid rgba(240,236,228,0.15); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.4); z-index: 500; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s; }
.edit-fab:hover { background: #2a2318; border-color: rgba(240,236,228,0.3); color: var(--fbc-ink); transform: scale(1.06); }
.edit-fab.edit-fab-active { background: rgba(192,57,43,0.15); border-color: rgba(192,57,43,0.45); color: #eb7060; box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
.edit-fab.edit-fab-active:hover { background: rgba(192,57,43,0.25); border-color: rgba(192,57,43,0.65); }
@media (max-width: 600px) { .edit-fab { bottom: 20px; right: 16px; } }

/* ─────────────────────────────────────────────────────────────
   NAV DRAWER — nav.js references #nav-drawer, .nav-item,
   .nav-admin-only, #nav-overlay by ID/class; kept exactly
───────────────────────────────────────────────────────────── */
.nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 300; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.nav-overlay.open { opacity: 1; pointer-events: all; }
.nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 280px; background: var(--fbc-page-bg); border-left: 1px solid var(--fbc-border); z-index: 301; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; }
.nav-drawer.open { transform: translateX(0); }
.nav-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--fbc-border); }
.nav-title { font-family: var(--font-display); font-size: 1rem; font-weight: 400; color: var(--fbc-ink); letter-spacing: 0.02em; }
.nav-close { background: none; border: none; color: var(--fbc-ink-muted); cursor: pointer; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
.nav-close:hover { background: rgba(240,236,228,0.08); color: var(--fbc-ink); }
.nav-items { flex: 1; padding: 1rem 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 1.5rem; color: var(--fbc-ink-muted); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; text-decoration: none; border: none; background: none; width: 100%; text-align: left; font-family: var(--font-body); }
.nav-item:hover { background: rgba(240,236,228,0.05); color: var(--fbc-ink); }
.nav-item.active { color: var(--fbc-ink); background: rgba(240,236,228,0.08); }
.nav-item.active .nav-item-icon { opacity: 1; }
.nav-item-icon { width: 34px; height: 34px; border-radius: 8px; background: rgba(240,236,228,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.6; transition: opacity 0.15s; }
.nav-item:hover .nav-item-icon { opacity: 1; }
.nav-item-label { flex: 1; }
.nav-item-badge { font-size: 10px; font-weight: 500; background: rgba(240,236,228,0.1); color: var(--fbc-ink-muted); border-radius: 20px; padding: 2px 8px; margin-left: auto; }
.nav-section { padding: 6px 1.5rem 4px; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(240,236,228,0.25); margin-top: 8px; }
.nav-section-edit { margin-top: 8px; }
.nav-pencil-item.active-edit { color: #c0392b; }

/* ─────────────────────────────────────────────────────────────
   LAYOUT
───────────────────────────────────────────────────────────── */
.content { max-width: 900px; margin: 0 auto; padding: 1.5rem 2.5rem 0; position: relative; }
body.bk-detail-open .content { max-width: 1100px; }
.loading-msg { text-align: center; color: var(--fbc-ink-muted); font-size: 14px; padding: 4rem 0; }

/* ─────────────────────────────────────────────────────────────
   CONTROLS BAR
   auth.js references .filter-btn and #sort-btn for the
   disabled-in-edit treatment when admin enters edit mode.
───────────────────────────────────────────────────────────── */
.controls-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; }
.controls-bar .filter-btn { flex-shrink: 0; }
.controls-bar .sort-dropdown { margin-left: auto; }


.filter-btn { font-family: var(--font-mono); font-size: 11px; padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(240,236,228,0.15); background: transparent; color: rgba(240,236,228,0.4); cursor: pointer; transition: all 0.15s; letter-spacing: 0.02em; }
.filter-btn:hover { background: rgba(240,236,228,0.06); color: rgba(240,236,228,0.7); }
.filter-btn.active { background: rgba(240,236,228,0.1); border-color: rgba(240,236,228,0.3); color: var(--fbc-ink); }
.filter-btn.disabled-in-edit { opacity: 0.3; pointer-events: none; }

/* Sort dropdown — icon button trigger + custom panel matching the emoji
   picker design language (used for reading badges inside book cards). */
.sort-dropdown { position: relative; flex-shrink: 0; }
.sort-btn { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--fbc-border-mid); background: transparent; color: var(--fbc-ink-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; flex-shrink: 0; padding: 0; }
.sort-btn:hover { background: rgba(240,236,228,0.08); color: var(--fbc-ink); }
.sort-btn.disabled-in-edit { opacity: 0.3; pointer-events: none; }
.sort-list { position: fixed; background: #2a2318; border: 1px solid var(--fbc-border-mid); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); z-index: 600; display: none; min-width: 180px; overflow: hidden; padding: 4px 0; }
.sort-list.open { display: block; }
.sort-opt { display: flex; align-items: center; gap: 12px; padding: 9px 14px; cursor: pointer; transition: background 0.1s; }
.sort-opt:hover { background: rgba(240,236,228,0.06); }
.sort-opt-icon { width: 18px; flex-shrink: 0; color: rgba(240,236,228,0.55); display: flex; align-items: center; justify-content: center; }
.sort-opt-label { flex: 1; font-family: var(--font-body); font-size: 14px; color: rgba(240,236,228,0.7); }
.sort-opt.selected .sort-opt-icon { color: var(--fbc-ink); }
.sort-opt.selected .sort-opt-label { color: var(--fbc-ink); }
.sort-opt-check { color: rgba(240,236,228,0.85); display: flex; align-items: center; flex-shrink: 0; visibility: hidden; }
.sort-opt.selected .sort-opt-check { visibility: visible; }

.view-toggle { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--fbc-border-mid); background: transparent; color: var(--fbc-ink-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; flex-shrink: 0; }
.view-toggle:hover { background: rgba(240,236,228,0.08); color: var(--fbc-ink); }



.add-book-btn { font-family: var(--font-mono); font-size: 11px; padding: 6px 14px; border-radius: 20px; border: 1px dashed rgba(240,236,228,0.25); background: transparent; color: rgba(240,236,228,0.4); cursor: pointer; display: none; letter-spacing: 0.02em; transition: border-color 0.15s, color 0.15s; }
.add-book-btn:hover { border-color: rgba(240,236,228,0.5); color: var(--fbc-ink); }
body.role-admin.edit-mode .add-book-btn { display: inline-flex; align-items: center; gap: 6px; }

/* ─────────────────────────────────────────────────────────────
   CARD OUTER WRAP
   JS references: .card-outer-wrap (drag events on books.js
   lines 726-730), .book-card (collapsed logic app.js 178),
   .dragging, .drag-over — all kept exactly
───────────────────────────────────────────────────────────── */
.card-outer-wrap { position: relative; margin-bottom: 24px; display: flex; align-items: stretch; gap: 0; }
.card-outer-wrap .book-card { flex: 1; min-width: 0; margin-bottom: 0; }
.card-outer-wrap.dragging { opacity: 0.4; }
.card-outer-wrap.drag-over .book-card { outline: 2px dashed rgba(240,236,228,0.2); outline-offset: 3px; }

.card-edit-left { display: none; position: absolute; left: -28px; top: 0; height: 100%; align-items: flex-start; justify-content: flex-start; flex-shrink: 0; pointer-events: none; z-index: 2; }
.card-edit-right { display: none; flex-direction: column; align-items: center; flex-shrink: 0; }
body.role-admin.edit-mode .card-edit-left { display: flex; }
body.role-admin.edit-mode .card-edit-right { display: flex; }

.card-pencil-btn { pointer-events: all; background: rgba(0,0,0,0.35); border: none; color: rgba(255,255,255,0.75); cursor: pointer; width: 28px; height: 28px; border-radius: 6px 0 0 6px; display: flex; align-items: center; justify-content: center; transition: background 0.15s; margin-top: 20px; }
.card-pencil-btn:hover { background: rgba(0,0,0,0.6); color: #fff; }
.card-pencil-btn svg { width: 13px; height: 13px; }

.drag-handle { display: none; align-items: center; justify-content: center; width: 22px; height: 100%; cursor: grab; color: rgba(240,236,228,0.2); flex-shrink: 0; border-radius: 0 8px 8px 0; background: rgba(240,236,228,0.05); transition: color 0.15s, background 0.15s; user-select: none; }
.drag-handle:hover { color: rgba(240,236,228,0.55); background: rgba(240,236,228,0.1); }
.drag-handle:active { cursor: grabbing; }
body.role-admin.edit-mode .drag-handle { display: flex; }
body.role-admin.edit-mode.sorted .drag-handle { display: none; }

/* ── Book card — .book-card kept, JS uses it for collapsed logic ── */
.book-card { border-radius: 12px; overflow: hidden; }
body.role-admin.edit-mode .book-card { border-radius: 12px 0 0 12px; }

/* ─────────────────────────────────────────────────────────────
   BOOK HEADER (COLOR BAND)
   .book-header kept — JS sets .style.background,
   app.js toggles collapsed on click
───────────────────────────────────────────────────────────── */
.book-header { padding: 20px 22px 20px 20px; display: flex; align-items: center; gap: 16px; position: relative; overflow: hidden; min-height: 96px; }
.book-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 55%); pointer-events: none; }
.book-header::after  { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,0.18)); pointer-events: none; }

/* Pattern overlay on the colored book band. Position + left→right fade
   mask are shared; the actual background-image is set inline per book by
   js/books.js, looking up the book's pattern_id in window.HERO_PATTERNS
   (lib/hero-patterns.compiled.js). Server assigns pattern_id from the
   full Hero Patterns library — see api/patterns.php for the picker. */
.band-texture {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 15%, rgba(0,0,0,0.6) 100%);
  mask-image: linear-gradient(to right, transparent 15%, rgba(0,0,0,0.6) 100%);
}
/* Diagonal hatching — fades in left→right via a mask */
.book-header-hatch {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.07) 0px,
    rgba(255,255,255,0.07) 1px,
    transparent 1px,
    transparent 7px
  );
  -webkit-mask-image: linear-gradient(to right, transparent 30%, rgba(0,0,0,0.55) 100%);
  mask-image: linear-gradient(to right, transparent 30%, rgba(0,0,0,0.55) 100%);
}

/* Cover — inside the band now */
.cover-wrap { position: relative; flex-shrink: 0; z-index: 1; }
.cover-img { width: 52px; height: 76px; object-fit: cover; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.45); display: block; }
.cover-placeholder { width: 52px; height: 76px; border-radius: 4px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.cover-overlay { position: absolute; inset: 0; border-radius: 4px; background: rgba(0,0,0,0.55); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; }
.cover-overlay span { font-size: 9px; font-weight: 500; color: #fff; font-family: var(--font-body); letter-spacing: 0.04em; }
body.role-admin.edit-mode .cover-wrap:hover .cover-overlay { display: flex; }

/* Book header text */
.book-header-left { flex: 1; min-width: 0; position: relative; z-index: 1; overflow: hidden; }
.book-card.collapsed .book-header-left { flex: 1; min-width: 0; }
.book-title-wrap { display: flex; align-items: center; gap: 8px; }
.book-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 300; color: #fff; line-height: 1.15; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-author { font-family: var(--font-display); font-size: 12px; font-style: italic; font-weight: 300; color: rgba(255,255,255,0.6); }
.book-selected-by { display: block; font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; border-radius: 3px; margin-top: 9px; background: rgba(0,0,0,0.1); color: rgba(255,255,255,0.4) !important; letter-spacing: 0.03em; width: fit-content; }

/* "Currently reading" pennant — vertical swallowtail flag overlaying the
   pinned book's colored band, with a triangular cast-shadow to its upper-
   left so the flag reads as hovering above the card. Both elements are
   siblings of .book-card inside .card-outer-wrap (the card's overflow:
   hidden would clip them otherwise). DOM order — shadow then pennant —
   handles the stacking; no explicit z-index needed. */
.currently-reading-pennant {
  position: absolute;
  top: -8px;
  right: 13px;
  width: 60px;
  height: 30px;
  /* Same darker-book-color formula as .book-card-footer + the shadow */
  background: color-mix(in srgb, var(--book-color) 20%, #0d0b08);
  /* Swallowtail tail: V-notch cut into the bottom edge */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 78%, 0% 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.currently-reading-shadow {
  position: absolute;
  top: -8px;
  right: 73px;        /* sits flush against the pennant's left edge */
  width: 14px;
  height: 8px;
  /* Same darker-book-color formula as .book-card-footer (see books.js) */
  background: color-mix(in srgb, var(--book-color) 20%, #0d0b08);
  /* Right triangle: apex top-right (touching the pennant's top-left
     corner), flat bottom, vertical right edge, hypotenuse running from
     top-right down to bottom-left. */
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}

/* Section divider in the books list (e.g. "Upcoming" between dated and TBA).
   Typography-only — no rules, no chrome — letting whitespace and the all-caps
   mono treatment carry the section break. */
.books-section-divider { font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.16em; color: var(--fbc-ink-muted); text-transform: uppercase; margin: 56px 4px 14px; padding-left: 4px; }

/* Tournament placeholder page — "Coming soon" header pill + centered teaser */
.page-soon-badge { font-family: var(--font-mono); font-size: 11px; padding: 4px 10px; border-radius: 999px; background: rgba(240,236,228,0.06); color: var(--fbc-ink-muted); border: 1px solid rgba(240,236,228,0.12); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.tournament-placeholder { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 5rem 1.5rem 2rem; gap: 1.5rem; }
.tournament-placeholder-icon { color: rgba(240,236,228,0.35); display: flex; }
.tournament-placeholder-body { font-family: var(--font-display); font-size: 17px; line-height: 1.55; color: var(--fbc-ink-muted); max-width: 30em; margin: 0; font-weight: 300; font-style: italic; }

.book-date-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; position: relative; z-index: 1; margin-left: 0; }
.book-time { font-family: var(--font-mono); font-size: 9px; font-weight: 400; color: rgba(255,255,255,0.45); letter-spacing: 0.04em; white-space: nowrap; line-height: 1; text-align: center; }

/* ─────────────────────────────────────────────────────────────
   CALENDAR TILE
   .cal-btn, .cal-tile, .cal-tile-month, .cal-tile-day,
   .cal-tile-tba, .cal-dropdown etc. — all kept, JS builds these
───────────────────────────────────────────────────────────── */
.cal-btn { background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; }
.cal-btn.no-date { cursor: default; }
.cal-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; min-height: 40px; border-radius: 7px; padding: 4px 5px; transition: background 0.15s; }
.cal-btn.no-date .cal-tile { opacity: 0.3; }
.cal-tile-month { font-family: var(--font-mono); font-size: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); line-height: 1; }
.cal-tile-day { font-family: var(--font-body); font-size: 18px; font-weight: 400; color: rgba(255,255,255,0.75); line-height: 1.1; letter-spacing: -0.02em; }
.cal-tile-tba { font-family: var(--font-mono); font-size: 9px; font-weight: 500; color: rgba(255,255,255,0.4); letter-spacing: 0.05em; }
.cal-dropdown { position: absolute; background: #2a2318; border-radius: 10px; border: 1px solid var(--fbc-border-mid); box-shadow: 0 8px 32px rgba(0,0,0,0.5); min-width: 190px; z-index: 100; overflow: hidden; display: none; }
.cal-dropdown.open { display: block; }
.cal-dropdown-title { font-family: var(--font-mono); font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fbc-ink-muted); padding: 10px 14px 6px; }
.cal-option { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 13px; color: var(--fbc-ink); cursor: pointer; text-decoration: none; transition: background 0.1s; font-family: var(--font-body); }
.cal-option:hover { background: rgba(240,236,228,0.06); }
.cal-option:last-child { margin-bottom: 4px; }
.cal-option-icon { width: 20px; height: 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; }

/* ── Collapsed card — .book-card.collapsed kept (app.js) ── */
.book-card.collapsed .book-body { display: none; }
.book-card.collapsed { cursor: pointer; }



/* ── Book body — JS appends readers-list here ── */
.book-body { background: var(--fbc-surface); }



/* ─────────────────────────────────────────────────────────────
   READER LIST + ROWS
───────────────────────────────────────────────────────────── */
.readers-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; padding-top: 0; border: 1px solid var(--fbc-border); border-top: none; border-bottom: none; }
.reader-row { display: flex; align-items: center; gap: 11px; padding: 9px 18px 9px 16px; border-bottom: 1px solid var(--fbc-border); transition: background 0.12s; background: var(--fbc-surface); }
.reader-row:last-child { border-bottom: none; }
.reader-row:hover { background: rgba(240,236,228,0.03); }
.reader-row-dragging  { opacity: 0.4; }
.reader-row-drag-over { outline: 2px dashed rgba(240,236,228,0.2); outline-offset: 2px; border-radius: 4px; }

/* ── Avatar — .avatar-wrap, .avatar-circle kept ── */
.avatar-wrap { position: relative; flex-shrink: 0; width: 28px; height: 28px; }
.avatar-circle { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; overflow: hidden; flex-shrink: 0; }
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }


/* ── Reader row view mode ── */
.reader-name { font-size: 12px; font-weight: 400; color: rgba(240,236,228,0.7); min-width: 68px; flex-shrink: 0; }
.reader-emoji { font-size: 14px; line-height: 1; flex-shrink: 0; width: 20px; text-align: center; }
.reader-rating-circle { flex-shrink: 0; display: flex; align-items: center; gap: 3px; overflow: visible; }
.reader-review { font-family: var(--font-display); font-size: 12px; font-style: normal; font-weight: 300; color: rgba(240,236,228,0.38); line-height: 1.5; flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; padding-left: 0; border-left: none; }
.reader-review.expanded { display: block; overflow: visible; white-space: normal; -webkit-line-clamp: unset; }

/* ── Edit row inputs ── */
.ei { background: rgba(240,236,228,0.05); border: 1px solid var(--fbc-border-mid); border-radius: 5px; padding: 3px 7px; font-size: 12px; font-family: var(--font-body); color: var(--fbc-ink); transition: border-color 0.15s; }
.ei:focus { outline: none; border-color: rgba(240,236,228,0.3); }
.ei-name-label { font-size: 12px; font-weight: 400; color: rgba(240,236,228,0.7); min-width: 68px; flex-shrink: 0; }
.ei-name-swap { cursor: pointer; border-bottom: 1px dashed rgba(240,236,228,0.2); transition: color 0.15s, border-color 0.15s; }
.ei-name-swap:hover { color: var(--fbc-ink); border-bottom-color: rgba(240,236,228,0.5); }

.ei-review { width: 100%; margin-top: 4px; resize: none; overflow-y: auto; min-height: 44px; font-family: var(--font-display); font-size: 12px; font-style: italic; font-weight: 300; color: rgba(240,236,228,0.75); line-height: 1.4; background: rgba(240,236,228,0.05); border: 1px solid var(--fbc-border-mid); border-radius: 6px; padding: 5px 8px; outline: none; }
.ei-review::placeholder { color: rgba(240,236,228,0.25); font-style: italic; }
.ei-review:focus { border-color: rgba(240,236,228,0.3); }
.del-btn { background: none; border: none; cursor: pointer; color: rgba(240,236,228,0.25); font-size: 13px; line-height: 1; padding: 4px; display: none; transition: color 0.15s; flex-shrink: 0; align-self: flex-start; order: -1; }
.del-btn:hover { color: #e05555; }
body.role-admin.edit-mode .del-btn { display: block; }

/* ── Emoji picker — .emoji-dropdown, .emoji-btn, .emoji-list,
   .emoji-opt etc. kept; app.js closes .emoji-list.open ── */
.emoji-dropdown { position: relative; flex-shrink: 0; }
.emoji-btn { width: 30px; height: 30px; border-radius: 7px; background: rgba(240,236,228,0.06); border: 1px solid var(--fbc-border-mid); display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; cursor: pointer; flex-shrink: 0; padding: 0; margin: 0; color: var(--fbc-ink-faint); appearance: none; transition: color 0.15s, background 0.15s; }
.emoji-btn.has-value { color: var(--fbc-ink); background: rgba(240,236,228,0.08); border-color: rgba(240,236,228,0.25); }
.emoji-btn:hover { color: var(--fbc-ink-muted); background: rgba(240,236,228,0.1); }
.emoji-btn:focus { outline: none; }
.emoji-btn-value { font-size: 15px; line-height: 1; }
.emoji-list { position: fixed; background: #2a2318; border: 1px solid var(--fbc-border-mid); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); z-index: 600; display: none; min-width: 200px; overflow: hidden; }
.emoji-list.open { display: block; }
.emoji-opt { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; transition: background 0.1s; }
.emoji-opt:hover { background: rgba(240,236,228,0.06); }
.emoji-opt.selected { background: rgba(240,236,228,0.08); }
.emoji-opt-icon { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; }
.emoji-opt-clear { font-size: 12px; color: var(--fbc-ink-faint); }
.emoji-opt-label { font-size: 13px; font-family: var(--font-body); color: rgba(240,236,228,0.65); }

/* ── Rating — .rating-dropdown, .rating-btn, .rating-btn.has-value,
   .rating-btn.unset, .rating-list, .rating-opt kept;
   app.js closes .rating-list.open ── */
.rating-dropdown { position: relative; flex-shrink: 0; }
.rating-btn { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid; background: transparent; font-family: var(--font-mono); font-size: 11px; font-weight: 400; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background 0.15s; color: var(--fbc-ink); overflow: hidden; }
.rating-btn:hover { background: rgba(255,255,255,0.08); }
.rating-btn.unset { color: rgba(240,236,228,0.3); border-color: rgba(240,236,228,0.15); }
.rating-btn.has-value { border-style: solid; }
body.edit-mode .rating-btn.has-value { border-style: dashed; }
.rating-list { position: fixed; background: #2a2318; border: 1px solid var(--fbc-border-mid); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); z-index: 600; display: none; max-height: 220px; overflow-y: auto; min-width: 70px; }
.rating-list.open { display: block; }
.rating-opt { padding: 6px 14px; font-size: 12px; font-family: var(--font-mono); color: rgba(240,236,228,0.65); cursor: pointer; transition: background 0.1s; }
.rating-opt:hover { background: rgba(240,236,228,0.06); }
.rating-opt.selected { color: var(--fbc-ink); font-weight: 500; background: rgba(240,236,228,0.05); }
.rating-opt.placeholder { color: rgba(240,236,228,0.25); }

/* ── Reader drag handle — .reader-drag-handle kept ── */
.reader-drag-handle { display: none; align-items: center; justify-content: center; width: 18px; height: 18px; cursor: grab; color: rgba(240,236,228,0.2); flex-shrink: 0; border-radius: 4px; transition: color 0.15s; user-select: none; }
.reader-drag-handle:hover { color: rgba(240,236,228,0.5); }
.reader-drag-handle:active { cursor: grabbing; }
body.role-admin.edit-mode .reader-drag-handle { display: flex; }

/* ── Add reader — .add-reader-wrap, .add-reader-btn kept ── */
.add-reader-wrap { position: relative; display: flex; padding: 8px 16px 10px; background: var(--fbc-surface); }
.add-reader-btn { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; padding: 5px 12px; border-radius: 20px; border: 1px dashed rgba(240,236,228,0.2); background: transparent; color: rgba(240,236,228,0.35); cursor: pointer; display: none; transition: border-color 0.15s, color 0.15s; }
.add-reader-btn:hover { border-color: rgba(240,236,228,0.45); color: rgba(240,236,228,0.7); }
body.role-admin .add-reader-btn { display: inline-block; }
.add-reader-btn.reader-only { display: none; }
body.role-reader .reader-only { display: inline-block !important; }

/* ── Reader dropdown — .reader-dropdown, .reader-dropdown-item, .rd-avatar kept ── */
.reader-dropdown { position: fixed; background: #2a2318; border-radius: 10px; border: 1px solid var(--fbc-border-mid); box-shadow: 0 8px 32px rgba(0,0,0,0.5); min-width: 160px; z-index: 500; overflow: hidden; display: none; }
.reader-dropdown.open { display: block; }
.reader-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; color: var(--fbc-ink); cursor: pointer; transition: background 0.1s; font-family: var(--font-body); }
.reader-dropdown-item:hover { background: rgba(240,236,228,0.06); }
.reader-dropdown-item .rd-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 500; flex-shrink: 0; overflow: hidden; }
.reader-dropdown-item .rd-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ─────────────────────────────────────────────────────────────
   CARD FOOTER — new classes, ready for Phase 4 JS wiring
───────────────────────────────────────────────────────────── */
.book-card-footer { padding: 9px 18px 9px 16px; display: flex; align-items: center; border: 1px solid var(--fbc-border); border-top: none; border-radius: 0 0 12px 12px; }
body.role-admin.edit-mode .book-card-footer { border-radius: 0 0 0 12px; }
.book-card-footer-upcoming { padding: 9px 18px 9px 16px; border: 1px solid var(--fbc-border); border-top: none; border-radius: 0 0 12px 12px; font-family: var(--font-mono); font-size: 10px; color: rgba(240,236,228,0.25); letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; }
body.role-admin.edit-mode .book-card-footer-upcoming { border-radius: 0 0 0 12px; }
.footer-left  { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.footer-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: 14px; }
.footer-avg   { display: flex; align-items: baseline; gap: 4px; flex-shrink: 0; }
.footer-avg-num { font-family: var(--font-mono); font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.8); letter-spacing: -0.02em; line-height: 1; }
.footer-avg-label { font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.08em; }
.footer-div   { width: 1px; height: 12px; background: rgba(255,255,255,0.1); flex-shrink: 0; }
.footer-tally { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.3); white-space: nowrap; flex-shrink: 0; }
.footer-tally strong { color: rgba(255,255,255,0.5); font-weight: 400; }
.footer-flag  { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.3); white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────
   EDIT MODE VISIBILITY
───────────────────────────────────────────────────────────── */
body.edit-mode .save-status     { display: block; }
body.edit-mode #login-btn       { display: none; }
body.role-admin .admin-only     { display: flex !important; }
body.role-admin #manage-readers-btn { display: flex; }
body.role-admin.edit-mode .filter-btn.disabled-in-edit { opacity: 0.3; pointer-events: none; }
body.role-admin.edit-mode .sort-btn.disabled-in-edit { opacity: 0.3; pointer-events: none; }
body.role-admin.edit-mode .rp-add-btn { display: block; }

/* ─────────────────────────────────────────────────────────────
   SHARED MODALS
───────────────────────────────────────────────────────────── */
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 200; align-items: center; justify-content: center; }
.modal-backdrop.open { display: flex; }
.modal-box { background: #2a2318; border-radius: 14px; padding: 1.75rem; width: 300px; border: 1px solid var(--fbc-border-mid); box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
.modal-box h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 300; margin-bottom: 1.25rem; color: var(--fbc-ink); letter-spacing: -0.01em; }
.modal-box label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fbc-ink-muted); display: block; margin-bottom: 5px; }
.modal-box input { width: 100%; padding: 8px 12px; border: 1px solid var(--fbc-border-mid); border-radius: 7px; font-size: 13px; font-family: var(--font-body); color: var(--fbc-ink); background: rgba(240,236,228,0.05); margin-bottom: 10px; }
.modal-box input:focus { outline: none; border-color: rgba(240,236,228,0.3); }
.modal-err { font-size: 11px; color: #eb5757; margin-bottom: 10px; display: none; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.modal-actions-right { display: flex; gap: 8px; }
.btn-cancel { padding: 7px 16px; border-radius: 7px; border: 1px solid var(--fbc-border-mid); background: transparent; font-size: 12px; font-family: var(--font-body); cursor: pointer; color: rgba(240,236,228,0.5); transition: all 0.15s; }
.btn-cancel:hover { border-color: rgba(240,236,228,0.3); color: var(--fbc-ink); }
.btn-primary { padding: 7px 20px; border-radius: 7px; border: none; background: var(--fbc-ink); color: #1a1510; font-size: 12px; font-weight: 500; font-family: var(--font-body); cursor: pointer; transition: background 0.15s; }
.btn-primary:hover { background: #fff; }
.btn-delete { padding: 7px 14px; border-radius: 7px; border: 1px solid rgba(192,57,43,0.35); background: transparent; font-size: 12px; font-family: var(--font-body); cursor: pointer; color: rgba(192,57,43,0.7); transition: all 0.15s; }
.btn-delete:hover { background: rgba(192,57,43,0.12); border-color: rgba(192,57,43,0.6); color: #eb7060; }
.btn-delete-confirming { background: rgba(192,57,43,0.15) !important; border-color: rgba(192,57,43,0.6) !important; color: #eb7060 !important; }

/* ── Book meta modal — all IDs kept; JS references by ID ── */
.prompt-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 300; align-items: center; justify-content: center; overflow-y: auto; padding: 1rem; }
.prompt-modal.open { display: flex; }
.prompt-box { background: #221d17; border-radius: 16px; padding: 1.75rem; width: 360px; border: 1px solid var(--fbc-border-mid); box-shadow: 0 16px 64px rgba(0,0,0,0.6); }
.prompt-box h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 300; color: var(--fbc-ink); letter-spacing: -0.01em; margin-bottom: 1.25rem; }
.prompt-field { margin-bottom: 12px; }
.prompt-field label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fbc-ink-muted); display: block; margin-bottom: 5px; }
.prompt-field input { width: 100%; padding: 8px 12px; border: 1px solid var(--fbc-border-mid); border-radius: 8px; font-size: 13px; font-family: var(--font-body); color: var(--fbc-ink); background: rgba(240,236,228,0.05); }
.prompt-field input:focus { outline: none; border-color: rgba(240,236,228,0.3); }
.meta-cover-preview-wrap { position: relative; width: 100%; height: 140px; border-radius: 10px; overflow: hidden; background: rgba(240,236,228,0.04); border: 1px solid var(--fbc-border-mid); cursor: pointer; margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: center; }
.meta-cover-preview { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.meta-cover-preview img { width: 100%; height: 100%; object-fit: contain; }
.meta-cover-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.meta-cover-overlay span { font-size: 11px; font-weight: 500; color: #fff; font-family: var(--font-body); }
.meta-cover-preview-wrap:hover .meta-cover-overlay { opacity: 1; }
.color-row { display: flex; align-items: center; gap: 8px; }
.color-row input[type="text"] { flex: 1; font-family: var(--font-mono); }
.color-swatch-btn { width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--fbc-border-mid); cursor: pointer; flex-shrink: 0; transition: border-color 0.15s; }
.color-swatch-btn:hover { border-color: rgba(240,236,228,0.3); }
.wheel-popup { display: none; margin-top: 10px; background: #2a2318; border: 1px solid var(--fbc-border-mid); border-radius: 10px; padding: 12px; gap: 10px; flex-direction: column; align-items: center; }
.wheel-popup.open { display: flex; }
#wheel-canvas { border-radius: 50%; cursor: crosshair; display: block; }
.brightness-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.brightness-row label { font-size: 11px; color: var(--fbc-ink-muted); white-space: nowrap; }
#brightness-slider { flex: 1; height: 10px; border-radius: 5px; cursor: pointer; appearance: none; border: none; outline: none; }
#brightness-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid rgba(0,0,0,0.35); cursor: pointer; }
#brightness-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid rgba(0,0,0,0.35); cursor: pointer; }

/* ── Temp password modal ── */
.temp-pw-display { background: rgba(240,236,228,0.05); border: 1px solid var(--fbc-border-mid); border-radius: 6px; padding: 10px 14px; font-family: var(--font-mono); font-size: 18px; font-weight: 400; letter-spacing: 0.1em; text-align: center; color: var(--fbc-ink); margin: 8px 0 14px; }

/* ── Profile modal ── */
.profile-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 500; align-items: flex-start; justify-content: flex-end; padding-top: 70px; padding-right: 1.5rem; }
.profile-modal.open { display: flex; }
.profile-box { background: #221d17; border-radius: 14px; padding: 1.5rem; width: 320px; border: 1px solid var(--fbc-border-mid); box-shadow: 0 8px 40px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 1.25rem; }
.profile-avatar-row { display: flex; align-items: center; gap: 14px; }
.profile-avatar-wrap { position: relative; width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; cursor: pointer; }
.profile-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; }
.profile-avatar-overlay { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; opacity: 0; transition: opacity 0.15s; }
.profile-avatar-overlay span { font-size: 9px; font-weight: 500; color: #fff; font-family: var(--font-body); letter-spacing: 0.02em; }
.profile-avatar-wrap:hover .profile-avatar-overlay { opacity: 1; }
.profile-identity { flex: 1; min-width: 0; }
.profile-display-name { font-size: 15px; font-weight: 500; color: var(--fbc-ink); margin-bottom: 2px; font-family: var(--font-body); }
.profile-username { font-size: 12px; color: var(--fbc-ink-muted); font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.01em; }
.profile-field label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fbc-ink-muted); display: block; margin-bottom: 4px; }
.profile-field input { width: 100%; padding: 7px 10px; border: 1px solid var(--fbc-border-mid); border-radius: 6px; font-size: 13px; font-family: var(--font-body); color: var(--fbc-ink); background: rgba(240,236,228,0.05); }
.profile-field input:focus { outline: none; border-color: rgba(240,236,228,0.3); }
.profile-divider { height: 1px; background: var(--fbc-border); margin: 0 -1.5rem; }
.profile-books-section h3 { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fbc-ink-muted); margin-bottom: 10px; }
.profile-logout-btn { align-self: flex-start; padding: 6px 12px; background: none; border: 1px solid transparent; border-radius: 8px; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: #c0392b; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.profile-logout-btn:hover { background: rgba(192,57,43,0.08); border-color: rgba(192,57,43,0.35); color: #a93226; }
.profile-book-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.profile-book-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.profile-book-title { font-size: 12px; color: var(--fbc-ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-book-rating { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--fbc-ink-muted); flex-shrink: 0; }
.profile-no-books { font-size: 12px; color: rgba(240,236,228,0.25); font-style: italic; }

/* ─────────────────────────────────────────────────────────────
   LOGIN PAGE — legacy light theme, untouched
───────────────────────────────────────────────────────────── */
body.login-page { background: #1a1510; display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 2rem 1.25rem; font-family: 'Geist', sans-serif; }
.login-wrap { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.login-logo { width: 52px; height: 52px; border-radius: 14px; }
.login-title { font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 300; color: #f0ece4; letter-spacing: -0.01em; margin: 0; }
.login-subtitle { font-size: 13px; color: rgba(240,236,228,0.4); font-weight: 300; line-height: 1.5; margin: 0; }
.login-card { width: 100%; background: #221d17; border: 1px solid rgba(240,236,228,0.08); border-radius: 16px; padding: 1.75rem; }
.login-card-title { font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 300; color: #f0ece4; margin: 0 0 1.25rem; letter-spacing: -0.01em; }
.login-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 1rem; }
.login-field label { font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(240,236,228,0.4); }
.login-field input { padding: 10px 12px; border: 1px solid rgba(240,236,228,0.12); border-radius: 8px; font-size: 14px; font-family: 'Geist', sans-serif; color: #f0ece4; background: rgba(240,236,228,0.04); outline: none; transition: border-color 0.15s; -webkit-appearance: none; }
.login-field input:focus { border-color: rgba(240,236,228,0.3); }
.login-field input::placeholder { color: rgba(240,236,228,0.2); }
.login-err { font-size: 12px; color: #eb5757; min-height: 16px; margin: 0 0 10px; }
.login-btn { width: 100%; padding: 12px; background: rgba(240,236,228,0.9); color: #1a1510; border: none; border-radius: 10px; font-size: 14px; font-weight: 500; font-family: 'Geist', sans-serif; cursor: pointer; transition: background 0.15s; margin-top: 4px; letter-spacing: 0.01em; }
.login-btn:hover { background: #fff; }
.login-btn:disabled { opacity: 0.5; cursor: default; }
.login-footer { font-size: 12px; color: rgba(240,236,228,0.25); text-align: center; }
.login-footer a { color: rgba(240,236,228,0.4); text-decoration: none; transition: color 0.15s; }
.login-footer a:hover { color: rgba(240,236,228,0.7); }
@media (max-width: 480px) {
  body.login-page { align-items: center; justify-content: center; padding: 2rem 1.25rem; padding-bottom: 20vh; }
  .login-wrap { gap: 1.5rem; }
  .login-brand { gap: 8px; }
  .login-logo { width: 44px; height: 44px; border-radius: 12px; }
  .login-title { font-size: 1.2rem; }
  .login-card { padding: 1.5rem; }
}

/* ─────────────────────────────────────────────────────────────
   READERS PAGE
───────────────────────────────────────────────────────────── */
.rp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; }
.rp-title { font-family: 'Nunito', sans-serif; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--fbc-ink); }
.rp-add-btn { font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: 20px; border: 1px dashed rgba(240,236,228,0.2); background: transparent; color: var(--fbc-ink-muted); cursor: pointer; display: none; transition: border-color 0.15s, color 0.15s; }
.rp-add-btn:hover { border-color: rgba(240,236,228,0.4); color: var(--fbc-ink); }
.rp-card { background: #221d17; border-radius: 14px; border: 1px solid var(--fbc-border); box-shadow: 0 4px 24px rgba(0,0,0,0.3); margin-bottom: 1rem; overflow: hidden; }
.rp-card-header { display: flex; align-items: center; gap: 14px; padding: 1rem 1.25rem; }
.rp-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; overflow: hidden; }
.rp-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.rp-identity { flex: 1; min-width: 0; }
.rp-name { font-size: 15px; font-weight: 500; color: var(--fbc-ink); letter-spacing: -0.01em; font-family: var(--font-body); }
.rp-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fbc-ink-muted); margin-top: 2px; display: flex; align-items: center; gap: 8px; }
.rp-role-badge { font-size: 10px; font-weight: 500; padding: 1px 7px; border-radius: 10px; }
.rp-role-badge.superadmin { background: rgba(111,207,151,0.15); color: #2a8a5a; }
.rp-role-badge.admin  { background: rgba(100,130,220,0.15); color: #3a5aaa; }
.rp-role-badge.reader { background: rgba(240,236,228,0.07); color: var(--fbc-ink-muted); }
.rp-actions { display: flex; gap: 6px; flex-shrink: 0; }
.rp-action-btn { background: none; border: 1px solid var(--fbc-border-mid); border-radius: 7px; cursor: pointer; color: var(--fbc-ink-muted); font-size: 11px; font-family: var(--font-body); padding: 4px 10px; transition: background 0.15s, color 0.15s; display: none; }
.rp-action-btn:hover { background: rgba(240,236,228,0.05); color: var(--fbc-ink); }
body.role-admin.edit-mode .rp-action-btn { display: inline-flex; align-items: center; gap: 5px; }
.rp-action-btn.danger:hover { background: rgba(235,87,87,0.1); color: #eb5757; border-color: rgba(235,87,87,0.3); }
.vp-ballot-actions .rp-action-btn { border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.85); }
.vp-ballot-actions .rp-action-btn:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.6); }
.vp-ballot-actions .rp-action-btn.danger:hover { background: rgba(255,80,80,0.2); color: #ffaaaa; border-color: rgba(255,80,80,0.4); }
.rp-books { border-top: 1px solid var(--fbc-border); padding: 1rem 1.25rem 1.25rem; }
.rp-books-title { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fbc-ink-muted); margin-bottom: 12px; }
.rp-empty { font-size: 12px; color: rgba(240,236,228,0.25); font-style: italic; }

/* Stats strip — 4 metric tiles between identity header and reading history */
.rp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 1.25rem 1rem; }
.rp-stat { background: rgba(0,0,0,0.22); border: 1px solid rgba(240,236,228,0.06); border-radius: 8px; padding: 14px 10px; text-align: center; }
.rp-stat-num { font-family: var(--font-display); font-size: 24px; font-weight: 400; color: var(--fbc-ink); line-height: 1; letter-spacing: -0.01em; }
.rp-stat-sub { font-family: var(--font-mono); font-size: 12px; color: var(--fbc-ink-faint); margin-left: 1px; font-weight: 400; }
.rp-stat-lbl { font-family: var(--font-mono); font-size: 9px; color: var(--fbc-ink-muted); margin-top: 6px; letter-spacing: 0.1em; text-transform: uppercase; }

/* Cover gallery */
.rp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.rp-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rp-cover { position: relative; aspect-ratio: 2/3; border-radius: 5px; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 6px; }
.rp-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-cover-text { position: relative; font-family: var(--font-display); font-size: 11px; color: #fff; text-align: center; line-height: 1.15; font-weight: 400; }
.rp-rating-chip { position: absolute; bottom: 5px; right: 5px; background: rgba(0,0,0,0.72); padding: 2px 7px; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; color: #fff; line-height: 1.3; min-width: 18px; text-align: center; }
.rp-cover-badge { position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; border-radius: 50%; background: rgba(212,150,40,0.95); display: flex; align-items: center; justify-content: center; }
.rp-cover-badge svg { display: block; }
.rp-cell-title { font-family: var(--font-body); font-size: 12px; color: var(--fbc-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }

@media (max-width: 700px) {
  .rp-stats { grid-template-columns: repeat(2, 1fr); }
  .rp-gallery { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; }
}
.rp-edit-row { display: flex; align-items: center; gap: 8px; padding: 0.75rem 1.25rem; border-top: 1px solid var(--fbc-border); background: rgba(240,236,228,0.02); }
.rp-inp { padding: 5px 9px; border: 1px solid var(--fbc-border-mid); border-radius: 6px; font-size: 13px; font-family: var(--font-body); color: var(--fbc-ink); background: rgba(240,236,228,0.05); flex: 1; min-width: 0; }
.rp-inp:focus { outline: none; border-color: rgba(240,236,228,0.3); }
.rp-inp-sm { width: 80px; flex: none; }
.rp-cand-row { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; }
.rp-cand-section { border-top: 1px solid var(--fbc-border); padding: 0.75rem 1.25rem 1rem; background: rgba(240,236,228,0.02); }
.rp-cand-section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rp-cand-section-title { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fbc-ink-muted); }
.rp-cand-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.rp-cand-row .rp-inp { flex: 1; min-width: 100px; }
/* Candidates editor — flat list of inline rows. Each row is one
   horizontal flex line: title, author, recommended-by, ✕. No card
   chrome around individual rows. */
.vp-cand-section { padding: 1rem 1.25rem; border-bottom: 1px solid var(--fbc-border); }
.vp-cand-section-hdr { margin-bottom: 10px; }
.vp-cand-section-title { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fbc-ink-muted); }
.vp-cand-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.vp-cand-row  { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.vp-cand-row .rp-inp { flex: 1 1 0; min-width: 0; }
.vp-rec-select { appearance: none; cursor: pointer; }
.vp-rec-select option { background: #221d17; color: var(--fbc-ink); }
.vp-cand-row > .btn-cancel { flex: 0 0 auto; padding: 5px 10px !important; line-height: 1; }
.vp-add-book-btn { display: block; width: 100%; text-align: center; margin-top: 4px; }

/* ─────────────────────────────────────────────────────────────
   VOTE PAGE
───────────────────────────────────────────────────────────── */
.vp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; }
.vp-ballot-card { background: #221d17; border-radius: 0; border: 1px solid var(--fbc-border); box-shadow: 0 4px 24px rgba(0,0,0,0.3); margin-bottom: 1.5rem; overflow: hidden; }
.vp-ballot-hdr { display: flex; align-items: center; gap: 12px; padding: 1.1rem 1.25rem; flex-wrap: wrap; background: #1a6a5a; border-bottom: 1px solid rgba(26,106,90,0.2); }
/* Pride-edition header: white → diagonal rainbow band → white. The
   rainbow occupies positions 15–40% along the gradient axis, with each of
   the six classic flag colors taking an equal slice (~4.17%). Triggered
   by a .pride class added in vote.js when the ballot title matches
   /pride/i. Hard color stops keep the stripes crisp instead of blending. */
.vp-ballot-hdr.pride {
  background: linear-gradient(
    135deg,
    #ffffff 0,       #ffffff 15%,
    #e40303 15%,     #e40303 19.17%,
    #ff8c00 19.17%,  #ff8c00 23.33%,
    #ffed00 23.33%,  #ffed00 27.5%,
    #008026 27.5%,   #008026 31.67%,
    #004dff 31.67%,  #004dff 35.83%,
    #750787 35.83%,  #750787 40%,
    #ffffff 40%,     #ffffff 100%
  );
  /* The white-on-dark transition between header and card body already
     reads as a hard edge — any tinted bottom border on top of that
     produces a thin artifact line. Drop it on pride headers. */
  border-bottom: none;
}
/* The header is mostly white now, so flip the text to dark. A soft white
   halo via text-shadow keeps anything that overlaps the rainbow band
   legible without forcing a full overlay. */
.vp-ballot-hdr.pride .vp-ballot-title,
.vp-ballot-hdr.pride .vp-ballot-title-inp {
  color: #1a1a1a;
  text-shadow: 0 0 6px rgba(255,255,255,0.85), 0 0 2px rgba(255,255,255,0.85);
}
.vp-ballot-hdr.pride .vp-ballot-title-inp { border-bottom-color: rgba(0,0,0,0.35); }
.vp-ballot-hdr.pride .vp-ballot-meta {
  color: rgba(0,0,0,0.65);
  text-shadow: 0 0 6px rgba(255,255,255,0.85);
}
/* OPEN/closed pills were tuned for the dark green header — re-tune for
   the lighter pride background so the badge still reads at a glance. */
.vp-ballot-hdr.pride .vp-status-badge.open   { background: rgba(0,128,38,0.18);  color: #006b1f; }
.vp-ballot-hdr.pride .vp-status-badge.closed { background: rgba(0,0,0,0.10);     color: rgba(0,0,0,0.55); }
.vp-ballot-title-wrap { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.vp-ballot-title { font-family: 'Nunito', sans-serif; font-size: 1.1rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.vp-status-badge { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; }
.vp-status-badge.open { background: rgba(111,207,151,0.25); color: #9effc8; }
.vp-status-badge.closed { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.55); }
.vp-ballot-meta { font-size: 12px; color: rgba(255,255,255,0.55); font-family: var(--font-mono); flex-shrink: 0; }
.vp-ballot-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.vp-ballot-title-inp { font-family: 'Nunito', sans-serif; font-size: 1.1rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; border: none; border-bottom: 1.5px dashed rgba(255,255,255,0.35); background: transparent; padding: 2px 4px; width: auto; min-width: 200px; outline: none; transition: border-color 0.15s; }
.vp-ballot-title-inp:focus { border-bottom-color: rgba(255,255,255,0.8); }
.vp-vote-section { padding: 1rem 1.25rem; border-bottom: 1px solid var(--fbc-border); }
.vp-instructions { font-size: 13px; color: var(--fbc-ink-muted); margin-bottom: 1rem; }
.vp-locked-msg { font-size: 13px; color: var(--fbc-ink-muted); margin-bottom: 10px; }
.vp-rank-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1rem; touch-action: none; user-select: none; }
.vp-rank-item { display: flex; align-items: center; gap: 12px; background: rgba(240,236,228,0.04); border: 1px solid var(--fbc-border-mid); border-radius: 10px; padding: 10px 14px; cursor: grab; user-select: none; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.vp-rank-item:hover { border-color: rgba(26,106,90,0.4); }
.vp-rank-item:active { cursor: grabbing; }
.vp-rank-ghost { opacity: 0; }
.vp-rank-chosen { cursor: grabbing; }
.vp-rank-dragging { opacity: 0.95; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.vp-rank-num { width: 28px; height: 28px; border-radius: 50%; background: rgba(26,106,90,0.15); color: #1a9d8a; font-size: 12px; font-weight: 900; font-family: 'Nunito', sans-serif; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vp-rank-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.vp-rank-cover-wrap { width: 32px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.vp-rank-cover { width: 32px; height: 46px; object-fit: cover; border-radius: 4px; flex-shrink: 0; display: block; }
.vp-cover-fetch-btn { width: 32px; height: 46px; border-radius: 4px; border: 1px dashed var(--fbc-border-mid); background: transparent; color: rgba(240,236,228,0.3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s; }
.vp-cover-fetch-btn:hover { border-color: rgba(26,180,155,0.5); color: #1a9d8a; }
.vp-rank-text { flex: 1; min-width: 0; }
.vp-rank-title { display: block; font-size: 13px; font-weight: 500; color: var(--fbc-ink); }
.vp-rank-author { display: block; font-size: 11px; color: var(--fbc-ink-muted); font-style: italic; }
.vp-drag-icon { color: rgba(240,236,228,0.2); flex-shrink: 0; display: flex; align-items: center; }
.vp-submit-btn { width: 100%; padding: 13px; background: #0d9488; color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 900; font-family: 'Nunito', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, transform 0.1s; }
.vp-submit-btn:hover { background: #0a7a70; }
.vp-submit-btn:active { transform: scale(0.99); }
.vp-results-section { padding: 1rem 1.25rem; }
.vp-results-title { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fbc-ink-muted); margin-bottom: 12px; margin-top: 4px; }
.vp-voter-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(240,236,228,0.06); border: 1px solid var(--fbc-border); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--fbc-ink-muted); overflow: hidden; flex-shrink: 0; }
.vp-voter-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.vp-voter-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--fbc-border); }
.vp-voter-row:last-child { border-bottom: none; }
.vp-voter-info { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 52px; flex-shrink: 0; padding-top: 2px; }
.vp-voter-name { font-size: 10px; color: var(--fbc-ink-muted); text-align: center; line-height: 1.2; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-voter-tiles { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.vp-vote-actions { display: flex; gap: 5px; flex-shrink: 0; align-self: center; }
.vp-voter-tile { display: flex; align-items: stretch; border-radius: 8px; overflow: hidden; border: 1px solid var(--fbc-border); width: calc(25% - 5px); min-width: 0; flex-grow: 0; flex-shrink: 0; }
.vp-tile-rank { width: 14px; flex-shrink: 0; background: rgba(26,106,90,0.12); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900; color: #1a9d8a; font-family: 'Nunito', sans-serif; }
.vp-tile-body { display: flex; flex-direction: column; gap: 1px; background: rgba(240,236,228,0.04); padding: 5px 7px; flex: 1; min-width: 0; }
.vp-tile-title { font-size: 11px; font-weight: 500; color: var(--fbc-ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vp-tile-author { font-size: 10px; color: var(--fbc-ink-muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-empty { font-size: 12px; color: rgba(240,236,228,0.25); font-style: italic; }
.vp-irv-wrap { margin-top: 4px; }
.vp-winner-banner { background: rgba(26,106,90,0.12); border: 1px solid rgba(26,106,90,0.3); border-radius: 10px; padding: 14px 18px; margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 3px; }
.vp-winner-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: #1a9d8a; opacity: 0.8; }
.vp-winner-title { font-family: 'Nunito', sans-serif; font-size: 1.1rem; font-weight: 800; color: #1a9d8a; }
.vp-winner-author { font-size: 12px; color: rgba(26,180,155,0.6); font-style: italic; }
.vp-irv-round { margin-bottom: 1rem; }
.vp-irv-round-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(240,236,228,0.25); margin-bottom: 6px; }
.vp-irv-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.vp-irv-row.eliminated .vp-irv-title { text-decoration: line-through; color: rgba(240,236,228,0.25); }
.vp-irv-row.winner .vp-irv-title { font-weight: 600; color: #1a9d8a; }
.vp-irv-title { font-size: 12px; color: var(--fbc-ink); min-width: 120px; flex-shrink: 0; }
.vp-irv-bar-wrap { flex: 1; height: 6px; background: rgba(240,236,228,0.06); border-radius: 3px; overflow: hidden; }
.vp-irv-bar-fill { height: 100%; background: #1a9d8a; border-radius: 3px; opacity: 0.5; transition: width 0.3s; }
.vp-irv-row.winner .vp-irv-bar-fill { opacity: 1; }
.vp-irv-row.eliminated .vp-irv-bar-fill { background: rgba(240,236,228,0.2); }
.vp-irv-pct { font-family: var(--font-mono); font-size: 11px; color: var(--fbc-ink-muted); flex-shrink: 0; min-width: 70px; text-align: right; }
/* Voter status strip */
.vp-voter-strip { display: flex; align-items: flex-start; gap: 12px; padding: 0.9rem 1.25rem; border-top: 1px solid var(--fbc-border); background: rgba(240,236,228,0.015); }
.vp-voter-strip-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fbc-ink-muted); padding-top: 6px; flex-shrink: 0; }
.vp-voter-strip-chips { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.vp-voter-chip { display: flex; flex-direction: column; align-items: center; gap: 5px; }
/* Normal view states */
.vp-voter-chip.pending { opacity: 0.35; }
/* Edit mode picker states */
.vp-voter-strip-edit .vp-voter-chip { cursor: pointer; transition: opacity 0.12s; }
.vp-voter-strip-edit .vp-voter-chip:hover { opacity: 1 !important; }
.vp-voter-chip.unselected { opacity: 0.3; }
.vp-voter-chip.selected { opacity: 1; }
.vp-voter-chip.selected .vp-voter-avatar { box-shadow: 0 0 0 2px #1a9d8a; border-radius: 50%; }
/* Avatar wrap and badges */
.vp-voter-chip-av-wrap { position: relative; display: inline-flex; }
.vp-voter-chip-av-wrap .vp-voter-avatar { width: 36px; height: 36px; }
.vp-voter-chip-check { position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; border-radius: 50%; background: #1a9d8a; border: 2px solid #221d17; display: flex; align-items: center; justify-content: center; }
.vp-voter-chip-sel-badge { position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; border-radius: 50%; background: #1a9d8a; border: 2px solid #221d17; display: flex; align-items: center; justify-content: center; }
.vp-voter-chip-name { font-size: 10px; color: var(--fbc-ink-muted); text-align: center; line-height: 1.2; max-width: 42px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────
   MOBILE
───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .content { padding: 1.25rem 1rem 0; }
  .site-header { padding: 0 1rem; }
  body.role-admin.edit-mode .card-outer-wrap { margin-left: 24px; }
  .reader-drag-handle { display: none !important; }
  .drag-handle        { display: none !important; }

  /* Band — tighter padding, smaller text */
  .book-header { padding: 12px 14px 12px 12px; gap: 12px; min-height: 80px; }
  .book-title  { font-size: 1.05rem; }
  .book-author { font-size: 11px; }
  .book-selected-by { font-size: 9px; padding: 2px 7px; margin-top: 6px; }
  .book-time   { font-size: 8px; }

  /* Cal tile — slightly smaller */
  .cal-tile { width: 34px; min-height: 34px; }
  .cal-tile-day { font-size: 15px; }
  .cal-tile-month { font-size: 7px; }

  /* Cover — slightly smaller */
  .cover-img, .cover-placeholder { width: 44px; height: 64px; }

  /* Footer text */
  .footer-avg-num { font-size: 12px; }
  .footer-tally   { font-size: 9px; }

  /* Hide the collapsed-avg circle — footer always shows the score */
  .collapsed-avg { display: none !important; }

  /* Reader rows */
  .reader-row { gap: 8px; padding: 8px 12px; }
  .ei { font-size: 12px; padding: 3px 6px; }
  .ei-review { min-height: 44px; font-size: 12px; }
  .rating-btn { width: 28px; height: 28px; font-size: 10px; }
  .emoji-btn  { width: 28px; height: 28px; }
  .avatar-circle { width: 26px !important; height: 26px !important; font-size: 9px !important; }
  .avatar-wrap   { width: 26px !important; height: 26px !important; }
  body.role-admin.edit-mode .cover-wrap { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   TOURNAMENT PAGE
   ───────────────────────────────────────────────────────────── */

/* Empty state — no active tournament */
.tour-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4rem 1.5rem 2.5rem; gap: 1rem; }
.tour-empty-msg  { font-family: var(--font-display); font-size: 18px; color: var(--fbc-ink); font-style: italic; margin: 0; font-weight: 300; }
.tour-empty-hint { font-family: var(--font-body); font-size: 14px; color: var(--fbc-ink-muted); max-width: 32em; margin: 0; line-height: 1.55; }
.tour-start-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--fbc-ink); background: transparent; border: 1px dashed rgba(240,236,228,0.35); border-radius: 999px; padding: 12px 22px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.tour-start-btn:hover { border-color: rgba(240,236,228,0.6); background: rgba(240,236,228,0.04); }
.tour-start-plus { font-size: 18px; line-height: 1; opacity: 0.7; }

/* Section heading reused across phases */
.tour-section-heading { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; color: var(--fbc-ink-muted); text-transform: uppercase; margin: 3rem 4px 1rem; }

/* Past tournaments archive */
.tour-past-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.tour-past-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(240,236,228,0.1); border-radius: 12px; background: rgba(240,236,228,0.02); }
.tour-past-trophy { width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tour-past-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tour-past-title { font-family: var(--font-display); font-size: 15px; color: var(--fbc-ink); font-weight: 400; }
.tour-past-winner { font-family: var(--font-body); font-size: 12px; color: var(--fbc-ink-muted); }
.tour-past-reopen { font-family: var(--font-body); font-size: 11px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(240,236,228,0.15); background: transparent; color: var(--fbc-ink-muted); cursor: pointer; flex-shrink: 0; transition: color 0.15s, border-color 0.15s; }
.tour-past-reopen:hover { color: var(--fbc-ink); border-color: rgba(240,236,228,0.4); }

/* Past cards are clickable — open a read-only view of the historical bracket */
.tour-past-card { cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.tour-past-card:hover { background: rgba(240,236,228,0.05); border-color: rgba(240,236,228,0.18); }

/* ─────────────────────────────────────────────────────────────
   CHAMPION CELEBRATION CARD — shown in complete state + past view
   ───────────────────────────────────────────────────────────── */
.tour-champion { display: flex; align-items: center; gap: 28px; padding: 28px 32px; margin-bottom: 1.5rem; border-radius: 14px; background: linear-gradient(180deg, rgba(212,150,40,0.08), rgba(212,150,40,0.02)); border: 1px solid rgba(212,150,40,0.25); }
.tour-champion-empty { background: rgba(240,236,228,0.04); border-color: rgba(240,236,228,0.1); }
.tour-champion-avatar { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tour-champion-circle { width: 64px; height: 64px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 28px; font-weight: 400; box-shadow: 0 4px 18px rgba(0,0,0,0.3); }
.tour-champion-laurel-l, .tour-champion-laurel-r { color: rgba(212,150,40,0.85); flex-shrink: 0; }
.tour-champion-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.tour-champion-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; color: rgba(212,150,40,0.9); text-transform: uppercase; }
.tour-champion-name { font-family: var(--font-display); font-size: 28px; font-weight: 300; color: var(--fbc-ink); letter-spacing: -0.01em; line-height: 1.1; }
.tour-champion-book { font-family: var(--font-display); font-size: 14px; color: var(--fbc-ink-muted); margin-top: 2px; }
.tour-champion-book em { font-style: italic; color: var(--fbc-ink); }
.tour-champion-desc { font-family: var(--font-body); font-size: 13px; color: var(--fbc-ink-muted); line-height: 1.5; margin-top: 6px; max-width: 60ch; }

@media (max-width: 700px) {
  .tour-champion { flex-direction: column; text-align: center; padding: 24px 18px; gap: 16px; }
  .tour-champion-name { font-size: 22px; }
  .tour-champion-laurel-l, .tour-champion-laurel-r { width: 22px; height: 36px; }
  .tour-champion-circle { width: 56px; height: 56px; font-size: 24px; }
}

/* ─────────────────────────────────────────────────────────────
   CHAMPION LAUREL — on the books page, next to the title of any book
   whose character has won a tournament
   ───────────────────────────────────────────────────────────── */
.book-champion-laurel { display: inline-flex; align-items: center; gap: 2px; color: rgba(212,150,40,0.95); flex-shrink: 0; line-height: 1; }
.book-champion-laurel svg { display: block; }
.book-champion-count { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: rgba(212,150,40,0.95); letter-spacing: 0.04em; }

/* Phase header strip — title + status pill + admin actions */
.tour-phase-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 1.75rem; flex-wrap: wrap; }
.tour-phase-meta   { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.tour-phase-title  { font-family: 'Nunito', sans-serif; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--fbc-ink); margin: 0; }
.tour-phase-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tour-phase-pill   { font-family: var(--font-mono); font-size: 10px; font-weight: 500; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.1em; text-transform: uppercase; }
.tour-phase-pill-submission { background: rgba(83,74,183,0.18); color: #c1bcf2; }
.tour-phase-pill-curation   { background: rgba(212,134,10,0.18); color: #f4d39a; }
.tour-phase-pill-voting     { background: rgba(15,110,86,0.22); color: #9ee0c4; }
.tour-phase-pill-complete   { background: rgba(240,236,228,0.1); color: var(--fbc-ink); }
.tour-phase-count    { font-family: var(--font-mono); font-size: 11px; color: var(--fbc-ink-muted); }
.tour-phase-deadline { font-family: var(--font-mono); font-size: 11px; color: var(--fbc-ink-muted); }

.tour-phase-actions { display: flex; gap: 8px; flex-shrink: 0; }
.tour-btn-primary   { font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 7px 14px; border-radius: 20px; border: 1px solid rgba(240,236,228,0.3); background: rgba(240,236,228,0.06); color: var(--fbc-ink); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.tour-btn-primary:hover   { background: rgba(240,236,228,0.12); border-color: rgba(240,236,228,0.5); }
.tour-btn-secondary { font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 7px 14px; border-radius: 20px; border: 1px solid rgba(240,236,228,0.15); background: transparent; color: var(--fbc-ink-muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.tour-btn-secondary:hover { color: var(--fbc-ink); border-color: rgba(240,236,228,0.3); }

/* Per-book submission cards grid */
.tour-books-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tour-book-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; background: rgba(240,236,228,0.025); border: 1px solid rgba(240,236,228,0.08); border-top: 3px solid var(--book-color); }
.tour-book-header { display: flex; flex-direction: column; gap: 2px; }
.tour-book-title  { font-family: var(--font-display); font-size: 16px; font-weight: 400; color: var(--fbc-ink); line-height: 1.2; }
.tour-book-author { font-family: var(--font-display); font-size: 12px; font-style: italic; color: var(--fbc-ink-muted); }

/* Submitted character chips */
.tour-char-list { display: flex; flex-direction: column; gap: 6px; min-height: 24px; }
.tour-char-empty { font-family: var(--font-body); font-size: 12px; color: var(--fbc-ink-faint); font-style: italic; padding: 6px 4px; }
.tour-char-chip { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(240,236,228,0.04); border: 1px solid rgba(240,236,228,0.06); }
.tour-char-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--book-color); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 13px; font-weight: 400; flex-shrink: 0; }
.tour-char-body { flex: 1; min-width: 0; }
.tour-char-name { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--fbc-ink); }
.tour-char-desc { font-family: var(--font-body); font-size: 12px; color: var(--fbc-ink-muted); margin-top: 2px; line-height: 1.4; }
.tour-char-meta { font-family: var(--font-mono); font-size: 9px; color: var(--fbc-ink-faint); margin-top: 4px; letter-spacing: 0.04em; }
.tour-char-del  { background: none; border: none; color: var(--fbc-ink-faint); cursor: pointer; padding: 4px; border-radius: 4px; flex-shrink: 0; transition: color 0.15s, background 0.15s; }
.tour-char-del:hover { color: #e05555; background: rgba(224,85,85,0.1); }

/* Inline submit-character form */
.tour-submit-form { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px dashed rgba(240,236,228,0.08); }
.tour-submit-form input { font-family: var(--font-body); font-size: 13px; padding: 7px 10px; border-radius: 6px; border: 1px solid rgba(240,236,228,0.12); background: rgba(0,0,0,0.18); color: var(--fbc-ink); }
.tour-submit-form input::placeholder { color: var(--fbc-ink-faint); }
.tour-submit-form input:focus { outline: none; border-color: rgba(240,236,228,0.3); }
.tour-submit-btn { align-self: flex-end; font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: 6px; border: 1px solid rgba(240,236,228,0.2); background: transparent; color: var(--fbc-ink); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.tour-submit-btn:hover { background: rgba(240,236,228,0.06); border-color: rgba(240,236,228,0.4); }

/* Wave 2/3/4 placeholders */
.tour-stub { padding: 3rem 1.5rem; text-align: center; color: var(--fbc-ink-muted); font-family: var(--font-body); font-size: 14px; line-height: 1.6; }
.tour-stub-hint { font-size: 12px; color: var(--fbc-ink-faint); margin-top: 0.5rem; }

/* Create-tournament modal: book checkbox list */
.tour-create-box { width: 92vw; max-width: 480px; }
.tour-create-box select { width: 100%; padding: 8px 12px; border: 1px solid var(--fbc-border-mid); border-radius: 7px; font-size: 13px; font-family: var(--font-body); color: var(--fbc-ink); background: rgba(240,236,228,0.05); margin-bottom: 10px; }
.tour-create-box select:focus { outline: none; border-color: rgba(240,236,228,0.3); }
.tour-create-books { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; padding: 8px; border: 1px solid rgba(240,236,228,0.1); border-radius: 8px; background: rgba(0,0,0,0.15); }
.tour-book-check { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; transition: background 0.1s; }
.tour-book-check:hover { background: rgba(240,236,228,0.04); }
.tour-book-check input { margin: 0; flex-shrink: 0; }
.tour-book-check-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.tour-book-check-text { font-family: var(--font-body); font-size: 13px; color: var(--fbc-ink); }

/* Curation phase — quota header + per-book lists + seed-order list */
.tour-quota-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 10px; background: rgba(212,134,10,0.08); border: 1px solid rgba(212,134,10,0.2); margin-bottom: 1.25rem; }
.tour-quota-text { font-family: var(--font-body); font-size: 13px; color: var(--fbc-ink); line-height: 1.4; }
.tour-quota-counter { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--fbc-ink-muted); padding: 4px 12px; border-radius: 999px; background: rgba(240,236,228,0.06); white-space: nowrap; }
.tour-quota-counter.is-full { color: #9ee0c4; background: rgba(15,110,86,0.2); }
.tour-quota-counter.is-over { color: #f4a8a8; background: rgba(224,85,85,0.18); }
.tour-quota-hint { font-family: var(--font-body); font-size: 13px; color: var(--fbc-ink-muted); text-align: center; padding: 1.25rem 0 0; font-style: italic; }
.tour-quota-warn { font-family: var(--font-body); font-size: 13px; color: #f4a8a8; text-align: center; padding: 1.25rem 0 0; }

.tour-curate-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.tour-curate-book { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 12px; background: rgba(240,236,228,0.025); border: 1px solid rgba(240,236,228,0.08); border-top: 3px solid var(--book-color); }
.tour-curate-book-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tour-curate-book-count { font-family: var(--font-mono); font-size: 10px; color: var(--fbc-ink-muted); padding: 2px 8px; border-radius: 999px; background: rgba(240,236,228,0.06); white-space: nowrap; flex-shrink: 0; }
.tour-curate-list { display: flex; flex-direction: column; gap: 4px; }

.tour-curate-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; background: transparent; border: 1px solid transparent; cursor: pointer; transition: background 0.12s, border-color 0.12s, opacity 0.12s; opacity: 0.6; }
.tour-curate-row:hover { background: rgba(240,236,228,0.03); }
.tour-curate-row.is-on { background: rgba(240,236,228,0.05); border-color: rgba(240,236,228,0.12); opacity: 1; }
.tour-curate-row input { margin: 4px 0 0; flex-shrink: 0; cursor: pointer; }

/* Seed-order list (drag to reorder) */
.tour-seed-help { font-family: var(--font-body); font-size: 13px; color: var(--fbc-ink-muted); line-height: 1.5; max-width: 56em; margin: 0 0 1rem; }
.tour-seed-controls { display: flex; gap: 10px; margin-bottom: 1rem; }
.tour-seed-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: seed; }
.tour-seed-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; background: rgba(240,236,228,0.04); border: 1px solid rgba(240,236,228,0.08); }
.tour-seed-row:hover { background: rgba(240,236,228,0.07); }
.tour-seed-row.sortable-ghost { opacity: 0.4; }
.tour-seed-row.sortable-chosen { background: rgba(240,236,228,0.1); }
.tour-seed-handle { font-family: var(--font-mono); font-size: 12px; color: var(--fbc-ink-faint); cursor: grab; user-select: none; padding: 0 4px; flex-shrink: 0; letter-spacing: -2px; }
.tour-seed-handle:active { cursor: grabbing; }
.tour-seed-num { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--fbc-ink); min-width: 24px; text-align: right; flex-shrink: 0; }
.tour-seed-swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tour-seed-name { font-family: var(--font-body); font-size: 14px; color: var(--fbc-ink); flex: 1; min-width: 0; }
.tour-seed-book { font-family: var(--font-display); font-style: italic; font-size: 12px; color: var(--fbc-ink-muted); flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────
   VOTING PHASE — bracket tree (desktop) + current-round list (mobile)
   ───────────────────────────────────────────────────────────── */

/* Round-switcher pills — mobile only */
.tour-round-pills { display: none; gap: 6px; padding: 4px; margin-bottom: 1rem; overflow-x: auto; }
.tour-round-pill { font-family: var(--font-mono); font-size: 11px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(240,236,228,0.15); background: transparent; color: var(--fbc-ink-muted); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.tour-round-pill:hover { color: var(--fbc-ink); border-color: rgba(240,236,228,0.3); }
.tour-round-pill.is-current { color: var(--fbc-ink); background: rgba(240,236,228,0.08); border-color: rgba(240,236,228,0.3); }

/* Desktop bracket — column per round, matchups flex-distributed for alignment */
.tour-bracket { display: flex; gap: 18px; min-height: 580px; overflow-x: auto; padding: 4px 4px 1rem; }
.tour-bracket-round { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 200px; gap: 8px; }
.tour-round-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; color: var(--fbc-ink-muted); text-transform: uppercase; text-align: center; padding-bottom: 6px; }
.tour-bracket-matchup { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* Matchup card — same in desktop bracket and mobile list */
.tour-matchup-card { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; border: 1px solid rgba(240,236,228,0.1); background: rgba(240,236,228,0.025); }
.tour-bracket-matchup.is-resolved .tour-matchup-card { border-color: rgba(240,236,228,0.18); }
.tour-bracket-matchup.is-tied .tour-matchup-card { border-color: rgba(244,168,168,0.4); }

.tour-matchup-side { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(240,236,228,0.06); position: relative; cursor: default; transition: background 0.12s; }
.tour-matchup-side:last-of-type { border-bottom: none; }
.tour-bracket-matchup.is-open .tour-matchup-side { cursor: pointer; }
.tour-bracket-matchup.is-open .tour-matchup-side:hover { background: rgba(240,236,228,0.06); }

.tour-matchup-side.is-winner { background: rgba(15,110,86,0.18); }
.tour-matchup-side.is-loser  { opacity: 0.45; }
.tour-matchup-side.is-my-vote { background: rgba(83,74,183,0.18); }
.tour-bracket-matchup.is-open .tour-matchup-side.is-my-vote:hover { background: rgba(83,74,183,0.28); }
.tour-matchup-side.is-pending { justify-content: center; padding: 18px 12px; opacity: 0.5; }

.tour-side-seed { font-family: var(--font-mono); font-size: 9px; color: var(--fbc-ink-faint); min-width: 16px; text-align: right; flex-shrink: 0; }
.tour-matchup-avatar { width: 24px; height: 24px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 11px; font-weight: 400; flex-shrink: 0; }
.tour-matchup-info { flex: 1; min-width: 0; }
.tour-matchup-name { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--fbc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-matchup-book { font-family: var(--font-display); font-size: 11px; font-style: italic; color: var(--fbc-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-matchup-tally { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--fbc-ink); flex-shrink: 0; min-width: 18px; text-align: right; }
.tour-matchup-side.is-winner .tour-matchup-tally { color: #9ee0c4; }
.tour-vote-marker { font-family: var(--font-mono); font-size: 11px; color: #c1bcf2; min-width: 14px; flex-shrink: 0; }

.tour-pending-label { font-family: var(--font-display); font-size: 11px; font-style: italic; color: var(--fbc-ink-faint); }

.tour-matchup-footer { padding: 6px 12px; font-family: var(--font-mono); font-size: 10px; color: var(--fbc-ink-muted); background: rgba(0,0,0,0.18); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tour-matchup-footer.is-tied { color: #f4a8a8; background: rgba(224,85,85,0.08); }
.tour-tie-label { font-family: var(--font-mono); font-size: 10px; }
.tour-tie-pick { font-family: var(--font-body); font-size: 11px; padding: 3px 10px; border-radius: 4px; border: 1px solid rgba(240,236,228,0.2); background: rgba(240,236,228,0.04); color: var(--fbc-ink); cursor: pointer; transition: background 0.12s; }
.tour-tie-pick:hover { background: rgba(240,236,228,0.12); }

/* Mobile current-round list — hidden on desktop */
.tour-bracket-mobile { display: none; flex-direction: column; gap: 12px; }
.tour-bracket-mobile .tour-bracket-matchup { flex: 0 0 auto; }

/* Mobile tweaks */
@media (max-width: 700px) {
  .tour-phase-header { flex-direction: column; align-items: stretch; }
  .tour-phase-actions { justify-content: flex-end; }
  .tour-books-grid,
  .tour-curate-books { grid-template-columns: 1fr; }
  .tour-quota-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .tour-seed-book { display: none; }

  /* Bracket goes mobile: hide the tree, show round pills + current-round list */
  .tour-bracket { display: none; }
  .tour-bracket-mobile { display: flex; }
  .tour-round-pills { display: flex; }
}

@media (max-width: 460px) {
  .vp-voter-tile { width: calc(50% - 3px); }
  .vp-tile-rank { width: 18px; font-size: 9px; }
  .vp-tile-body { padding: 4px 5px; }
  .vp-tile-title { font-size: 10px; }
  .vp-tile-author { font-size: 9px; }
}
/* ─────────────────────────────────────────────────────────────
   RECS PAGE — personalized book suggestions (Open Library)
───────────────────────────────────────────────────────────── */
.recs-subtitle { font-family: var(--font-display); font-size: 14px; font-style: italic; font-weight: 300; color: var(--fbc-ink-muted); margin: -0.75rem 0 1.75rem; }

.recs-dismissed-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(240,236,228,0.2); background: transparent; color: var(--fbc-ink-muted); cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.recs-dismissed-btn:hover { border-color: rgba(240,236,228,0.4); color: var(--fbc-ink); }

/* Grid of suggestion cards */
.recs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.5rem 1.25rem; }

.recs-card { display: flex; flex-direction: column; min-width: 0; }

.recs-cover { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; background: var(--fbc-surface); border: 1px solid var(--fbc-border); box-shadow: 0 4px 18px rgba(0,0,0,0.35); transition: transform 0.18s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s; }
.recs-card:hover .recs-cover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,0.5); }
.recs-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.recs-cover-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2.4rem; font-weight: 400; color: var(--fbc-ink-faint); background: linear-gradient(135deg, #2a2318, #221d17); }

/* Dismiss (×) — hidden until hover/focus */
.recs-dismiss-btn { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(20,16,12,0.78); color: #f0ece4; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: scale(0.85); transition: opacity 0.15s, transform 0.15s, background 0.15s; padding: 0; }
.recs-card:hover .recs-dismiss-btn, .recs-dismiss-btn:focus-visible { opacity: 1; transform: scale(1); }
.recs-dismiss-btn:hover { background: #e05555; }

.recs-card-body { padding: 10px 2px 0; }
.recs-card-title { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--fbc-ink); line-height: 1.3; text-decoration: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.recs-card-title:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.recs-card-author { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--fbc-ink-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recs-card-why { font-family: var(--font-mono); font-size: 10px; line-height: 1.4; letter-spacing: 0.01em; color: var(--fbc-ink-faint); margin-top: 7px; text-transform: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Empty state */
.recs-empty { text-align: center; padding: 4rem 1rem; color: var(--fbc-ink-muted); }
.recs-empty-icon { color: var(--fbc-ink-faint); margin-bottom: 1rem; display: flex; justify-content: center; }
.recs-empty p { font-family: var(--font-display); font-size: 16px; font-style: italic; font-weight: 300; max-width: 26em; margin: 0 auto; line-height: 1.55; }

/* Loading skeleton */
.recs-skeleton { pointer-events: none; }
.recs-skeleton .recs-cover { box-shadow: none; }
.recs-skeleton-line { height: 11px; border-radius: 4px; margin-top: 8px; }
.recs-shimmer { position: relative; overflow: hidden; background: rgba(240,236,228,0.05); }
.recs-shimmer::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(240,236,228,0.08), transparent); animation: recs-shimmer 1.3s infinite; }
@keyframes recs-shimmer { 100% { transform: translateX(100%); } }

/* "Not interested" slide-out panel */
.recs-dismissed-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 300; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }
.recs-dismissed-overlay.open { opacity: 1; visibility: visible; }
.recs-dismissed-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 88vw; background: var(--fbc-page-bg); border-left: 1px solid var(--fbc-border); z-index: 301; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; }
.recs-dismissed-panel.open { transform: translateX(0); }
.recs-dismissed-head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem 0.75rem; }
.recs-dismissed-title { font-family: 'Nunito', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--fbc-ink); }
.recs-dismissed-close { background: none; border: none; color: var(--fbc-ink-muted); cursor: pointer; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
.recs-dismissed-close:hover { background: rgba(240,236,228,0.08); color: var(--fbc-ink); }
.recs-dismissed-hint { font-family: var(--font-body); font-size: 12px; color: var(--fbc-ink-muted); padding: 0 1.5rem 1rem; line-height: 1.5; }
#recs-dismissed-list { overflow-y: auto; padding: 0 1.5rem 1.5rem; }
.recs-dismissed-empty { font-family: var(--font-body); font-size: 13px; color: var(--fbc-ink-faint); padding: 1rem 0; }

.recs-dismissed-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--fbc-border); }
.recs-dismissed-thumb { width: 36px; height: 52px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: #2a2318; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); color: var(--fbc-ink-faint); font-size: 16px; }
.recs-dismissed-thumb img { width: 100%; height: 100%; object-fit: cover; }
.recs-dismissed-meta { flex: 1; min-width: 0; }
.recs-dismissed-row-title { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--fbc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recs-dismissed-row-author { font-family: var(--font-body); font-size: 12px; color: var(--fbc-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recs-restore-btn { flex-shrink: 0; font-family: var(--font-body); font-size: 11px; font-weight: 500; padding: 5px 11px; border-radius: 16px; border: 1px solid rgba(240,236,228,0.2); background: transparent; color: var(--fbc-ink-muted); cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.recs-restore-btn:hover { border-color: rgba(240,236,228,0.45); color: var(--fbc-ink); }

@media (max-width: 600px) {
  .recs-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.25rem 0.9rem; }
}

/* ── Lists page ──────────────────────────────────────────────────────────── */
.ls-add-section { padding: 0 0 1.25rem; }
.ls-search-wrap { display: flex; gap: 8px; }
.ls-search-inp { flex: 1; background: var(--fbc-surface); border: 1px solid var(--fbc-border); border-radius: 8px; color: var(--fbc-ink); font-family: var(--font-body); font-size: 14px; padding: 8px 12px; outline: none; }
.ls-search-inp:focus { border-color: var(--fbc-teal); }
.ls-search-btn { flex-shrink: 0; }
.ls-search-results { background: var(--fbc-surface); border: 1px solid var(--fbc-border); border-radius: 10px; margin-top: 6px; overflow: hidden; }
.ls-search-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--fbc-border); }
.ls-search-row:last-child { border-bottom: none; }
.ls-cover { width: 44px; height: 64px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: #2a2318; display: flex; align-items: center; justify-content: center; }
.ls-cover img { width: 100%; height: 100%; object-fit: cover; }
.ls-cover-text { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: rgba(255,255,255,0.8); text-align: center; line-height: 1.1; }
.ls-cover-sm { width: 36px; height: 52px; }
.ls-info { flex: 1; min-width: 0; }
.ls-title { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--fbc-ink); line-height: 1.3; }
.ls-author { font-family: var(--font-body); font-size: 12px; color: var(--fbc-ink-muted); margin-top: 2px; }
.ls-add-btn { padding: 5px 12px; font-size: 12px; flex-shrink: 0; }

/* Grid of book cards */
.ls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1.5rem 1.25rem; }

.ls-card { display: flex; flex-direction: column; gap: 8px; }

/* Cover — fills a 2:3 aspect ratio */
.ls-card-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: #2a2318;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.18s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s;
}
.ls-card:hover .ls-card-cover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.55); }
.ls-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Nomination status dot — top-right corner, always visible */
.ls-nom-dot { position: absolute; top: 7px; right: 7px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--fbc-page-bg); }
.ls-nom-dot-pending  { background: var(--fbc-teal); }
.ls-nom-dot-approved { background: #4caf7d; }
.ls-nom-dot-rejected { background: #e05555; }

/* Overlay — visible on hover (or always in edit mode) */
.ls-card-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.72);
  border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 10px;
  opacity: 0; transition: opacity 0.18s;
}
.ls-card-cover:hover .ls-card-overlay { opacity: 1; }

/* In edit mode, always show overlay */
body.edit-mode .ls-card-overlay { opacity: 1; }

.ls-overlay-nom-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--fbc-ink-muted); text-align: center; line-height: 1.3; }
.ls-overlay-select { width: 100%; font-family: var(--font-body); font-size: 11px; padding: 4px 6px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; color: var(--fbc-ink); appearance: none; cursor: pointer; }
.ls-overlay-select option { background: #2a2318; }
.ls-overlay-btn { width: 100%; font-family: var(--font-body); font-size: 12px; font-weight: 600; padding: 5px 8px; border-radius: 6px; border: none; cursor: pointer; transition: background 0.15s; }
.ls-overlay-btn.primary { background: var(--fbc-teal); color: #fff; }
.ls-overlay-btn.primary:hover { background: #15866f; }
.ls-overlay-btn:not(.primary) { background: rgba(255,255,255,0.12); color: var(--fbc-ink); }
.ls-overlay-btn:not(.primary):hover { background: rgba(255,255,255,0.2); }

/* Delete — bottom-right corner, shown only in edit mode */
.ls-overlay-del {
  position: absolute; bottom: 7px; right: 7px;
  width: 28px; height: 28px;
  border-radius: 6px; border: none;
  background: rgba(224,85,85,0.85); color: #fff;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s;
}
.ls-overlay-del:hover { background: #e05555; }
body.edit-mode .ls-overlay-del { display: flex; }

/* Card label below cover */
.ls-card-info { padding: 0 2px; }
.ls-card-title { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--fbc-ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-card-author { font-family: var(--font-body); font-size: 11px; color: var(--fbc-ink-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 600px) {
  .ls-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 1.25rem 0.9rem; }
}

/* ── Nominations section on ballot cards ─────────────────────────────────── */
.vp-nominations-section { padding: 12px 20px 4px; border-top: 1px solid var(--fbc-border); }
.vp-nom-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--fbc-border); }
.vp-nom-row:last-child { border-bottom: none; }
.vp-nom-cover { width: 36px; height: 52px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: #2a2318; }
.vp-nom-cover img { width: 100%; height: 100%; object-fit: cover; }
.vp-nom-info { flex: 1; min-width: 0; }
.vp-nom-title { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--fbc-ink); }
.vp-nom-meta { font-family: var(--font-body); font-size: 12px; color: var(--fbc-ink-muted); margin-top: 2px; }
.vp-nom-status { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.vp-nom-badge { font-family: var(--font-body); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.vp-nom-badge.approved { background: rgba(26,157,138,0.2); color: var(--fbc-teal); }
.vp-nom-badge.rejected { background: rgba(224,85,85,0.12); color: #e05555; }

/* ── OL Search Modal ─────────────────────────────────────────────────────────── */
.ol-result-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--fbc-border); cursor: pointer; transition: background 0.12s; border-radius: 6px; margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
.ol-result-row:last-child { border-bottom: none; }
.ol-result-row:hover { background: rgba(240,236,228,0.05); }
.ol-result-cover { width: 40px; height: 58px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: #2a2318; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.6); }
.ol-result-cover img { width: 100%; height: 100%; object-fit: cover; }
.ol-result-info { flex: 1; min-width: 0; }
.ol-result-title { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--fbc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-result-meta  { font-family: var(--font-body); font-size: 12px; color: var(--fbc-ink-muted); margin-top: 2px; }

/* ── Meta modal reader picker ─────────────────────────────────────────── */
.meta-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  background: rgba(240,236,228,0.05);
  border: 1px solid var(--fbc-border);
  border-radius: 8px;
  color: var(--fbc-ink);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  margin-top: 4px;
  text-align: left;
  transition: border-color 0.15s;
}
.meta-picker-trigger:hover { border-color: rgba(240,236,228,0.3); }

/* Fixed overlay dropdown */
.meta-picker-drop {
  background: #2a2318;
  border: 1px solid var(--fbc-border-mid);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.meta-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.1s;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fbc-ink);
}
.meta-picker-item:hover { background: rgba(240,236,228,0.06); }
.meta-picker-item.selected { background: rgba(240,236,228,0.08); }
.meta-picker-check { margin-left: auto; color: var(--fbc-teal); display: none; flex-shrink: 0; }
.meta-picker-item.selected .meta-picker-check { display: block; }

/* Legacy chips (kept for fallback) */
.meta-picker-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* meta description textarea */
#meta-description { background: var(--fbc-surface); border: 1px solid var(--fbc-border); border-radius: 8px; color: var(--fbc-ink); font-family: var(--font-body); font-size: 13px; padding: 8px 10px; outline: none; }
#meta-description:focus { border-color: var(--fbc-teal); }

/* ── Grid view ───────────────────────────────────────────────────────────── */
#books-container.grid-view {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.book-grid-card {
  background: var(--fbc-surface);
  border: 1px solid var(--fbc-border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
}
.book-grid-card:hover { border-color: rgba(240,236,228,0.2); transform: translateY(-2px); }
.book-grid-card.is-current { border-color: var(--book-color, #534AB7); }
.grid-card-accent { height: 3px; flex-shrink: 0; }
.grid-card-cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: rgba(240,236,228,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grid-card-cover .cover-placeholder { width: 100%; height: 100%; }
.grid-card-footer {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 36px;
}
.grid-card-avg {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
}
.grid-card-no-rating {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fbc-ink-faint);
}
@media (max-width: 600px) {
  #books-container.grid-view { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  #books-container.grid-view { grid-template-columns: 1fr; }
}

/* ── Book chip (collapsed card) ──────────────────────────────────────────── */
.book-chip {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  background: var(--fbc-surface);
  border-radius: 10px;
  border: 1px solid var(--fbc-border);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
  min-height: 72px;
}
.book-chip:hover { background: rgba(240,236,228,0.04); border-color: rgba(240,236,228,0.12); }
body.role-admin.edit-mode .book-chip { border-radius: 10px 0 0 10px; cursor: default; }
body.role-admin.edit-mode .book-chip:hover { background: var(--fbc-surface); border-color: var(--fbc-border); }

/* Left color accent stripe */
.chip-accent {
  width: 4px;
  align-self: stretch;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Cover thumbnail */
.chip-cover {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 62px;
  margin: 5px 0 5px 10px;
  border-radius: 3px;
  overflow: hidden;
}
.chip-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 3px;
}
.chip-cover .cover-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 3px;
}
.chip-cover-overlay {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
body.role-admin.edit-mode .chip-cover:hover .chip-cover-overlay { display: flex; }

/* Info */
.chip-info {
  flex: 1;
  min-width: 0;
  padding: 10px 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.chip-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 300;
  color: var(--fbc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
.chip-author {
  font-family: var(--font-display);
  font-size: 11px;
  font-style: italic;
  font-weight: 300;
  color: var(--fbc-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-picked-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
}
.chip-picked-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(240,236,228,0.3);
  letter-spacing: 0.04em;
}
.chip-picked-text {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(240,236,228,0.3);
  letter-spacing: 0.04em;
  margin-top: 3px;
}

/* Stats (right column) */
.chip-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 10px 14px 10px 8px;
  min-width: 60px;
}
.chip-date {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  color: rgba(240,236,228,0.4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chip-avg {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--book-color, rgba(240,236,228,0.8));
  line-height: 1;
}
.chip-tally {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(240,236,228,0.25);
  letter-spacing: 0.03em;
}
.chip-tba {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(240,236,228,0.2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* CURRENT PICK badge on chip */
.chip-current-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--book-color, #534AB7);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 0 10px 0 6px;
  pointer-events: none;
}

/* Drag-over outline on chip */
.card-outer-wrap.drag-over .book-chip { outline: 2px dashed rgba(240,236,228,0.2); outline-offset: 2px; border-radius: 10px; }

/* ── Full-page book detail ───────────────────────────────────────────────── */
#bk-detail-page {
  display: none;
}

.bk-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px 5rem;
}

/* Back nav */
.bk-page-nav {
  padding: 16px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bk-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  color: var(--fbc-ink-muted);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}
.bk-back-btn:hover { color: var(--fbc-ink); }

/* Members strip */
.bk-members-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}
.bk-members-avs {
  display: flex;
  align-items: center;
}
.bk-members-avs .avatar-wrap { margin-left: -6px; }
.bk-members-avs .avatar-wrap:first-child { margin-left: 0; }
.bk-members-count {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--fbc-ink);
}
.bk-members-chev { color: var(--fbc-ink-muted); display: flex; align-items: center; }

/* Main column — no card styling, just flow */
.bk-page-main { min-width: 0; }

/* Outer card — wraps entire two-column layout */
.bk-page-outer-card {
  background: var(--fbc-surface);
  border: 1px solid var(--fbc-border);
  border-radius: 16px;
  padding: 28px;
  overflow: hidden;
}

/* Two-column grid */
.bk-page-layout {
  display: grid;
  grid-template-columns: 1fr 296px;
  gap: 28px;
  align-items: start;
}

/* ── Hero ── */
.bk-hero {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  align-items: flex-start;
}
.bk-hero-cover {
  position: relative;
  flex-shrink: 0;
  width: 140px;
  height: 210px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
}
.bk-hero-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bk-hero-cover .cover-placeholder { width: 100%; height: 100%; }
.bk-hero-cover-cam {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  border-radius: 7px;
}
.bk-hero-cover:hover .bk-hero-cover-cam { opacity: 1; }

.bk-hero-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}
.bk-hero-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fbc-ink);
  background: rgba(240,236,228,0.1);
  border: 1px solid rgba(240,236,228,0.18);
  padding: 3px 9px;
  border-radius: 10px;
  width: fit-content;
}
.bk-hero-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--fbc-ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
.bk-hero-author {
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  font-weight: 300;
}
.bk-hero-desc {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.65;
  color: rgba(240,236,228,0.6);
  margin: 4px 0 0;
  max-width: 60ch;
}
.bk-read-more-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  color: var(--book-color, #534AB7);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s;
  vertical-align: baseline;
}
.bk-read-more-btn:hover { opacity: 1; }

/* Description modal */
.bk-desc-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 900;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.bk-desc-modal-box {
  background: var(--fbc-surface);
  border: 1px solid var(--fbc-border-mid);
  border-radius: 14px;
  padding: 28px;
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.bk-desc-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(240,236,228,0.08);
  color: var(--fbc-ink-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.bk-desc-modal-close:hover { background: rgba(240,236,228,0.14); color: var(--fbc-ink); }
.bk-desc-modal-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-right: 24px;
}
.bk-desc-modal-cover {
  width: 64px;
  height: 96px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(240,236,228,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.bk-desc-modal-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-desc-modal-meta { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.bk-desc-modal-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--fbc-ink);
  line-height: 1.3;
}
.bk-desc-modal-author {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 300;
  font-style: italic;
  color: rgba(240,236,228,0.55);
}
.bk-desc-modal-text {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.75;
  color: rgba(240,236,228,0.65);
  margin: 0;
}
.bk-hero-picked {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
}
.bk-hero-picked-avs { display: flex; gap: 4px; }
.bk-hero-picked-text {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--fbc-ink-muted);
}
.bk-hero-picked-text strong { color: var(--fbc-ink); font-weight: 500; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.bk-tabs {
  display: flex;
  border-bottom: 1px solid var(--fbc-border);
  background: transparent;
  flex-shrink: 0;
  gap: 0;
  margin-bottom: 2px;
}
.bk-tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--fbc-ink-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  letter-spacing: 0.02em;
  margin-bottom: -1px;
  white-space: nowrap;
}
.bk-tab-btn:hover { color: var(--fbc-ink); }
.bk-tab-btn.active {
  color: var(--fbc-ink);
  border-bottom-color: var(--book-color, #534AB7);
}

/* ── Panels ──────────────────────────────────────────────────────────────── */
.bk-panels { position: relative; }
.bk-panel { display: none; padding: 20px 0; }
.bk-panel.active { display: block; }
.bk-panel-empty {
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  font-weight: 300;
  color: var(--fbc-ink-muted);
  padding: 28px 4px;
}

/* Discussion panel */
.bk-readers-list { border: none; }
.bk-panel-discussion .reader-row { background: transparent; padding: 12px 4px; align-items: flex-start; }
.bk-add-entry-btn { display: none; margin-top: 16px; }
body.role-admin .bk-add-entry-btn,
body.role-reader .bk-add-entry-btn.reader-only { display: inline-block; }

/* Reader row new layout */
.bk-reader-content { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 4px; }
.bk-reader-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bk-reader-review { display: block; overflow: visible; white-space: normal; -webkit-line-clamp: unset; }

/* About panel */
.bk-description {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.7;
  color: rgba(240,236,228,0.75);
  margin-bottom: 22px;
  max-width: 72ch;
}
.bk-about-meta { display: flex; flex-direction: column; gap: 10px; }
.bk-about-row { display: flex; gap: 16px; align-items: baseline; }
.bk-about-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fbc-ink-muted);
  flex-shrink: 0;
  min-width: 80px;
}
.bk-about-value {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fbc-ink);
}

/* Activity timeline */
.bk-activity-timeline { display: flex; flex-direction: column; }
.bk-activity-entry { display: flex; gap: 14px; }
.bk-activity-left { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 20px; }
.bk-activity-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }
.bk-activity-line { width: 1px; flex: 1; background: var(--fbc-border); margin: 4px 0; min-height: 12px; }
.bk-activity-right { flex: 1; min-width: 0; padding-bottom: 20px; }
.bk-activity-top { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.bk-activity-name { font-size: 13px; font-weight: 500; color: var(--fbc-ink); }
.bk-activity-rating { font-family: var(--font-mono); font-size: 11px; font-weight: 400; margin-left: auto; flex-shrink: 0; }
.bk-activity-date { font-family: var(--font-mono); font-size: 10px; color: var(--fbc-ink-muted); letter-spacing: 0.02em; }
.bk-activity-review {
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  font-weight: 300;
  color: rgba(240,236,228,0.55);
  margin-top: 5px;
  line-height: 1.55;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.bk-page-sidebar {
  position: sticky;
  top: 20px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bk-card {
  background: var(--fbc-surface);
  border: 1px solid var(--fbc-border);
  border-radius: 12px;
  padding: 18px;
}
.bk-card-title {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fbc-ink-muted);
  margin-bottom: 12px;
}
.bk-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Meeting card */
.bk-meeting-date {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--fbc-ink);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}
.bk-meeting-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fbc-ink-muted);
  margin-bottom: 10px;
}
.bk-meeting-countdown {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--fbc-ink-muted);
  margin-bottom: 14px;
}
.bk-cal-btn {
  display: block;
  width: 100%;
  padding: 9px 14px;
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  text-align: center;
  transition: filter 0.15s;
}
.bk-cal-btn:hover { filter: brightness(1.12); }

/* At a Glance card — centered */
.bk-card:has(.bk-glance-avg-big),
.bk-card:has(.bk-glance-no-rating) { text-align: center; }
.bk-card:has(.bk-glance-avg-big) .bk-circle-wrap { justify-content: center; }
.bk-card:has(.bk-glance-avg-big) .reader-rating-circle { margin: 0 auto; }

.bk-glance-avg-big {
  font-family: var(--font-mono);
  font-size: 3rem;
  font-weight: 400;
  color: var(--fbc-ink);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 2px;
}
.bk-glance-avg-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fbc-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.bk-glance-no-rating {
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  font-weight: 300;
  color: var(--fbc-ink-muted);
  margin-bottom: 12px;
}
.bk-circle-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.bk-circle-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fbc-ink-muted);
  letter-spacing: 0.04em;
}

/* Rating breakdown card */
.bk-breakdown-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.bk-breakdown-row:last-child { margin-bottom: 0; }
.bk-breakdown-star {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fbc-ink-muted);
  flex-shrink: 0;
  width: 22px;
}
.bk-breakdown-bar-wrap {
  flex: 1;
  height: 5px;
  background: rgba(240,236,228,0.07);
  border-radius: 3px;
  overflow: hidden;
}
.bk-breakdown-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
  min-width: 0;
}
.bk-breakdown-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fbc-ink-muted);
  flex-shrink: 0;
  width: 14px;
  text-align: right;
}

/* ── Mobile — single column ──────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .bk-page-layout {
    grid-template-columns: 1fr;
  }
  .bk-page-sidebar {
    position: static;
  }
  .card-outer-wrap { margin-bottom: 10px; }
}
@media (max-width: 560px) {
  .bk-page { padding: 0 14px 4rem; }
  .bk-hero { flex-direction: column; gap: 16px; }
  .bk-hero-cover { width: 100px; height: 150px; }
  .bk-hero-title { font-size: 1.5rem; }
}

/* Controls bar — tighten on mobile */
@media (max-width: 480px) {
  .chip-title { font-size: 13px; }
  .chip-author { font-size: 10px; }
}

/* ── Book page transitions ────────────────────────────────────────────────── */
@keyframes bkExitLeft  { from { opacity:1; transform:translateX(0);     } to { opacity:0; transform:translateX(-28px); } }
@keyframes bkEnterRight{ from { opacity:0; transform:translateX(28px);  } to { opacity:1; transform:translateX(0);     } }
@keyframes bkExitRight { from { opacity:1; transform:translateX(0);     } to { opacity:0; transform:translateX(28px);  } }
@keyframes bkEnterLeft { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:translateX(0);     } }