/* === Reset + base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0a0a0a;
  color: #e0e0e0;
  line-height: 1.5;
  min-height: 100vh;
}

a { color: #d4a017; text-decoration: none; }
a:hover { text-decoration: underline; }

button { cursor: pointer; font-family: inherit; font-size: 14px; }
input, select, textarea { font-family: inherit; font-size: 14px; }

/* === CSS variables === */
:root {
  --bottom-nav-h: 56px;
  --mini-player-h: 48px;
  --content-bottom-pad: calc(var(--bottom-nav-h) + var(--mini-player-h));
  --accent: #d4a017;
  --bg: #0a0a0a;
  --surface: #141414;
  --surface-2: #1a1a1a;
  --border: #2a2a2a;
  --text: #e0e0e0;
  --muted: #888;
  --dim: #555;
}

/* === Environment banner === */
body[data-env="dev"]::before,
body[data-env="staging"]::before,
body[data-env="ui_testing"]::before {
  content: attr(data-env-label);
  position: fixed; top: 0; left: 0; right: 0;
  text-align: center; font-weight: bold; font-size: 12px;
  z-index: 9999; padding: 2px 0;
}
body[data-env="dev"]::before { background: #ff6600; color: #fff; }
body[data-env="staging"]::before { background: #ffcc00; color: #000; }

/* === Bottom nav === */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottom-nav-h);
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  z-index: 200;
  padding: 0;
}
.bnav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  min-width: 0;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.bnav-tab:hover { color: var(--text); background: rgba(255,255,255,0.05); text-decoration: none; }
.bnav-tab.active { color: var(--accent); }
.bnav-icon { font-size: 22px; line-height: 1; }
.bnav-label { font-size: 10px; font-weight: 500; letter-spacing: 0.03em; }
.bnav-offline-wrap {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.offline-badge {
  background: #4a1a1a; color: #f87171; font-size: 11px;
  padding: 2px 6px; border-radius: 4px; font-weight: bold;
}

/* === Account menu popup === */
.account-menu {
  position: fixed;
  bottom: calc(var(--bottom-nav-h) + 8px);
  right: 8px;
  width: 240px;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.6);
  z-index: 300;
  overflow: hidden;
  display: none;
  flex-direction: column;
}
.account-menu.open { display: flex; }
.account-menu-info {
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.account-menu-name {
  font-size: 14px;
  font-weight: 600;
  color: #e0e0e0;
}
.account-menu-email {
  font-size: 12px;
  color: #888;
}
.account-menu-role {
  font-size: 11px;
  color: #d4a843;
  font-weight: 500;
  margin-top: 2px;
}
.account-menu-divider {
  height: 1px;
  background: #3a3a3a;
  margin: 0;
}
.account-menu-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: #e0e0e0;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.account-menu-btn:hover { background: rgba(255,255,255,0.07); }
.account-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 299;
}
.account-menu-backdrop.open { display: block; }

/* === Tap to continue banner (mobile autoplay recovery) === */
.tap-to-continue {
  position: fixed;
  bottom: calc(var(--bottom-nav-h) + var(--mini-player-h) + 8px);
  left: 16px; right: 16px;
  padding: 14px 20px;
  background: var(--accent);
  color: #fff;
  font-size: 16px; font-weight: 600;
  text-align: center;
  border-radius: 12px;
  z-index: 300;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  animation: tap-pulse 2s ease-in-out infinite;
}
@keyframes tap-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* === Mini-player === */
#mini-player {
  position: fixed;
  bottom: var(--bottom-nav-h);
  left: 0; right: 0;
  height: var(--mini-player-h);
  z-index: 200;
  display: none;
  flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
#mini-player.visible { display: flex; }

/* 2px progress bar at very top */
.mp-progress-bar {
  height: 2px;
  background: var(--border);
  flex-shrink: 0;
  width: 100%;
}
.mp-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
}

/* Main row: cover + text + play button */
.mp-body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  flex: 1;
  min-width: 0;
}

/* Cover art thumbnail */
.mp-cover {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2);
}

/* Title + chapter name */
.mp-text {
  flex: 1;
  min-width: 0;
}
.mp-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-chapter {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Play/pause button (44px tap target) */
.mp-play-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 20px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mp-play-btn:hover { color: var(--text); }

/* === Install nudge toast === */
.install-toast {
  position: fixed;
  bottom: calc(var(--bottom-nav-h) + var(--mini-player-h) + 8px);
  left: 12px; right: 12px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 14px 16px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
.install-toast-enter {
  animation: install-toast-slide-up 300ms ease-out both;
}
.install-toast-exit {
  animation: install-toast-slide-down 300ms ease-in both;
}
@keyframes install-toast-slide-up {
  from { transform: translateY(calc(100% + 12px)); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes install-toast-slide-down {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(calc(100% + 12px)); opacity: 0; }
}
.install-toast-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.install-toast-text strong {
  font-size: 14px;
  font-weight: 600;
  color: #e0e0e0;
}
.install-toast-body {
  font-size: 13px;
  color: #aaa;
}
.install-toast-actions {
  display: flex;
  gap: 8px;
}
.install-toast-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.install-toast-btn-primary {
  background: var(--accent);
  color: #0a0a0a;
}
.install-toast-btn-primary:hover { background: #e8b520; }
.install-toast-btn-secondary {
  background: #2a2a2a;
  color: #aaa;
}
.install-toast-btn-secondary:hover { background: #333; }

/* === Post-install confirmation toast === */
.install-confirm-toast {
  position: fixed;
  bottom: calc(var(--bottom-nav-h) + var(--mini-player-h) + 8px);
  left: 12px; right: 12px;
  background: #1a2a1a;
  border: 1px solid #2a442a;
  border-radius: 12px;
  padding: 14px 16px;
  z-index: 400;
  font-size: 14px;
  color: #a0e0a0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
  animation: install-toast-slide-up 300ms ease-out both;
}
.install-confirm-exit {
  animation: install-toast-slide-down 300ms ease-in both;
}

/* === Full-screen player === */

/* Slide-up sheet: always rendered, hidden below viewport via translateY(100%). */
.fs-player {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 500;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
.fs-player.open {
  transform: translateY(0);
}
/* Accessibility: block interaction when hidden. */
[aria-hidden="true"].fs-player {
  pointer-events: none;
}

/* Top bar: minimize chevron (left) + mode toggle (right) */
.fsp-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 8px;
  flex-shrink: 0;
}
.fsp-minimize-btn {
  background: none; border: none;
  font-size: 28px; color: var(--muted);
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: flex-start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fsp-mode-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: 12px; color: var(--muted);
  padding: 6px 14px;
  min-height: 32px;
  cursor: pointer;
}

/* Content area: CoverArt or ReadToMe (switched by mode toggle) */
.fsp-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* CoverArt mode */
.fsp-coverart-mode {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  gap: 16px;
}
.fsp-cover-wrap {
  /* Size to fit available vertical space between top-bar and controls.
     Use max-height so the cover never pushes controls off-screen.
     Let the image's natural aspect ratio determine the width. */
  max-height: min(calc(100vh - 320px), 400px);
  max-width: 80vw;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.fsp-cover { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.fsp-book-title { font-size: 18px; font-weight: 700; text-align: center; }
.fsp-chapter-title { font-size: 14px; color: var(--muted); text-align: center; }

/* ReadToMe mode (C.9) */
.fsp-readalong-mode {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 20px;
}
.fsp-chapter-heading {
  font-size: 13px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  margin-bottom: 12px; flex-shrink: 0;
}
.fsp-readalong-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
  font-size: 16px;
  line-height: 1.7;
}
.fsp-ra-line.active {
  background: rgba(212, 160, 23, 0.15);
  border-radius: 4px;
  outline: 1px solid rgba(212, 160, 23, 0.3);
  padding: 4px 6px;
  margin: -4px -6px;
}
.fsp-ra-line.past { color: #555; }
.fsp-ra-character {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent);
}
.fsp-ra-badge {
  font-size: 12px; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 4px 10px;
  margin-bottom: 8px; flex-shrink: 0;
  text-align: center;
}
.fsp-resume-autoscroll {
  position: sticky; bottom: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--accent); font-size: 13px;
  padding: 8px 16px; border-radius: 20px;
  min-height: 36px; cursor: pointer;
  margin: 8px auto 0; display: block;
  -webkit-tap-highlight-color: transparent;
}

/* Controls area — thumb-zone friendly: bottom 40% of screen */
.fsp-controls-area {
  flex-shrink: 0;
  padding: 0 20px 24px;
}

/*
 * Scrubber: 4px visual height, 24px touch zone via ::before pseudo-element.
 *
 * WHY ::before not padding: global box-sizing:border-box makes padding:10px 0
 * on a 4px-height element nonsensical (padding crammed into the 4px box, content=0).
 * The pseudo-element extends ±10px above/below without fighting box-sizing.
 *
 * Touch geometry: 10px above + 4px bar + 10px below = 24px total tap target.
 */
.fsp-scrubber-row { padding: 16px 0 4px; }
.fsp-scrubber {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}
.fsp-scrubber::before {
  content: '';
  position: absolute;
  top: -10px; bottom: -10px; left: 0; right: 0;
}
.fsp-scrubber-fill {
  position: absolute; top: 0; left: 0;
  height: 4px; background: var(--accent);
  border-radius: 2px;
  pointer-events: none;
}
.fsp-scrubber-thumb {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  display: none;
}
.fsp-scrubber:active .fsp-scrubber-thumb { display: block; }
.fsp-time-row {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--muted);
  margin-bottom: 20px;
}

/* Transport: 7 buttons (prev, back30, back10, play/pause, fwd10, fwd30, next) */
.fsp-transport {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.fsp-btn {
  background: none; border: none;
  color: var(--text); cursor: pointer;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.fsp-btn-sm {
  min-width: 48px; min-height: 36px;
  font-size: 13px; font-weight: 500;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px 10px;
}
.fsp-btn-xs {
  min-width: 44px; min-height: 36px;
  font-size: 13px; font-weight: 500;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px 8px;
}
.fsp-btn-lg {
  min-width: 60px; min-height: 60px;
  font-size: 28px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 50%;
}
.fsp-btn-lg:active { background: var(--border); }

/* Speed pills */
.fsp-speed-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 20px;
}
.fsp-speed-pill {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 9px;
  border-radius: 16px;
  font-size: 12px;
  min-height: 36px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fsp-speed-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  font-weight: 600;
}

/* Bottom row: chapters + sleep timer */
.fsp-volume-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.fsp-volume-icon { font-size: 18px; flex-shrink: 0; }
.fsp-volume-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  outline: none;
  cursor: pointer;
}
.fsp-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent, #6c8aff);
  cursor: pointer;
}
.fsp-volume-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent, #6c8aff);
  border: none;
  cursor: pointer;
}
.fsp-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fsp-chapters-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  min-height: 44px;
  cursor: pointer;
}
.fsp-sleep-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
  min-width: 80px; min-height: 44px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
}
.fsp-sleep-btn.active {
  color: var(--accent);
  border-color: var(--accent);
}

/* Lift chapter drawer above full-screen player when it is open (§7.6) */
body.fs-player-open .chapter-drawer { z-index: 600; }
body.fs-player-open .chapter-drawer-backdrop { z-index: 599; }

/* === Search modal === */
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-100%);
  transition: transform 200ms ease-out;
}
.search-modal[aria-hidden="true"] {
  pointer-events: none;
}
.search-modal.open {
  transform: translateY(0);
}

/* Search modal header */
.search-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--surface);
  min-height: 48px;
  flex-shrink: 0;
}
.search-cancel-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 15px;
  padding: 8px 0;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.search-modal-title {
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  flex: 1;
  text-align: center;
  margin-right: 60px; /* balance cancel button */
}

/* Search input */
.search-input-wrap {
  padding: 12px 16px;
  flex-shrink: 0;
}
.search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: none;
  border-radius: 10px;
  color: var(--text);
  font-size: 16px;
  padding: 10px 14px;
  outline: none;
}
.search-input::placeholder {
  color: var(--muted);
}

/* Results container */
.search-results {
  flex: 1;
  padding: 0 0 var(--bottom-nav-h);
}
.search-section-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 16px 4px;
}

/* Recent search history */
.search-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-history-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--surface);
}
.search-history-term {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font-size: 15px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
}
.search-history-remove {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 20px;
  padding: 14px 16px;
  cursor: pointer;
  line-height: 1;
}

/* Search result list (72px height items) */
.search-result-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  min-height: 72px;
  border-bottom: 1px solid var(--surface);
  cursor: pointer;
}
.search-result-item:active {
  background: var(--surface);
}
.search-result-cover {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--surface);
  flex-shrink: 0;
}
.search-result-info {
  flex: 1;
  min-width: 0;
}
.search-result-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Search status messages */
.search-loading,
.search-empty,
.search-error {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 40px 16px;
}

/* === Page transitions === */
#app.page-enter {
  animation: page-fade-in 180ms ease-out;
}
#app.page-back {
  animation: page-slide-back 180ms ease-out;
}
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes page-slide-back {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* === Main content === */
#app {
  max-width: 1200px; margin: 0 auto; padding: 24px 16px;
  min-height: calc(100vh - var(--bottom-nav-h));
  padding-bottom: var(--bottom-nav-h);
}
body.player-active #app {
  padding-bottom: var(--content-bottom-pad);
}

/* === Toast === */
#toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: #333; color: #fff; padding: 8px 16px; border-radius: 8px;
  font-size: 14px; opacity: 0; transition: opacity 0.3s; pointer-events: none;
  z-index: 2000; max-width: 400px; text-align: center;
}
#toast.show { opacity: 1; }
#toast.error { background: #c0392b; }

/* === Page header === */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; gap: 12px;
}
.page-header h1 { font-size: 24px; font-weight: bold; }

/* === Loading / empty / error states === */
.loading { color: #666; padding: 24px 0; text-align: center; }
.empty-state { color: #666; padding: 24px 0; text-align: center; }
.error-state { color: #f87171; padding: 16px; background: #1a0a0a; border-radius: 6px; }
.offline-notice { color: #fbbf24; padding: 16px; background: #1a1200; border-radius: 6px; }
.page-placeholder { padding: 48px; text-align: center; color: #666; }

.library-search-input {
  width: 100%; padding: 10px 14px; margin-top: 8px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 15px;
  outline: none;
}
.library-search-input:focus { border-color: var(--accent); }
.library-search-input::placeholder { color: var(--text-dim); }
.page-header:has(.library-search-input) { flex-wrap: wrap; }

/* === Library page (v2 redesign) === */
.library-filter-bar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  flex-wrap: nowrap;
}
.library-filter-pills {
  display: flex; gap: 8px; overflow-x: auto; flex-shrink: 1;
  scrollbar-width: none; -ms-overflow-style: none; flex-wrap: nowrap;
}
.library-filter-pills::-webkit-scrollbar { display: none; }
.filter-pill {
  flex-shrink: 0; padding: 6px 14px; border-radius: 20px;
  background: #1e1e1e; border: 1px solid #333; color: #aaa;
  font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.filter-pill:hover { background: #272727; border-color: #555; color: #ddd; }
.filter-pill.active {
  background: #d4a017; border-color: #d4a017; color: #0a0a0a; font-weight: 600;
}
.library-sort-select {
  flex-shrink: 0; background: #1e1e1e; border: 1px solid #333; color: #aaa;
  font-size: 13px; padding: 6px 10px; border-radius: 6px; cursor: pointer;
  margin-left: auto;
}
.library-list { display: flex; flex-direction: column; gap: 0; }

/* === book-card-library: 80px list-item row === */
.book-card-library {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid #1e1e1e; cursor: pointer;
  transition: background 0.1s;
}
.book-card-library:hover { background: #111; }
.bcl-cover-wrap {
  position: relative; flex-shrink: 0;
  width: 60px; height: 90px; border-radius: 4px; overflow: hidden;
  background: #1a1a1a;
}
.bcl-cover { width: 100%; height: 100%; object-fit: contain; display: block; }
.bcl-rating-badge {
  position: absolute; bottom: 3px; left: 3px;
  font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 3px;
  background: rgba(0,0,0,0.7); color: #ddd; letter-spacing: 0.03em;
}
.bcl-offline-dot {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%; background: #4ade80;
}
.bcl-info {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
}
.bcl-title {
  font-size: 15px; font-weight: 600; color: #e0e0e0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bcl-byline {
  font-size: 12px; color: #888;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bcl-progress-row {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
}
.bcl-progress-bar {
  flex: 1; height: 3px; background: #2a2a2a; border-radius: 2px;
  overflow: hidden;
}
.bcl-progress-fill { height: 100%; background: #d4a017; border-radius: 2px; }
.bcl-progress-pct { font-size: 11px; color: #888; white-space: nowrap; }
.bcl-favorite-btn {
  flex-shrink: 0; width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  font-size: 20px; color: #555; display: flex; align-items: center;
  justify-content: center; border-radius: 22px;
  transition: color 0.15s, background 0.15s;
}
.bcl-favorite-btn:hover { color: #e07010; background: rgba(212,160,23,0.1); }
.bcl-favorite-btn.is-favorite { color: #e07010; }

/* === Book card === */
.book-card {
  background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px;
  padding: 16px; cursor: pointer; transition: border-color 0.2s;
}
.book-card:hover { border-color: #444; }
.book-card-header {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px;
}
.book-card-title {
  flex: 1; font-size: 15px; font-weight: 600;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.book-card-prompt {
  color: #888; font-size: 12px; margin-bottom: 8px; margin-top: 2px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.4;
}
/* Metadata row: wrapping flex of small pills/labels */
.book-card-meta-row {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  flex-wrap: wrap;
}
/* Small pill badges for length and format */
.card-meta-pill {
  font-size: 10px; padding: 1px 5px; border-radius: 3px;
  background: #252525; border: 1px solid #383838; color: #aaa;
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
/* Model name — monospace, subtle */
.card-meta-model {
  font-size: 11px; color: #666; font-family: monospace; white-space: nowrap;
}
/* Scene / character counts */
.card-meta-counts {
  font-size: 11px; color: #666; white-space: nowrap;
}
/* Duration */
.card-duration {
  font-size: 11px; color: #888; white-space: nowrap;
}
/* Relative date */
.card-date {
  font-size: 11px; color: #555; white-space: nowrap;
}
/* Grade inline */
.card-meta-grade {
  font-size: 11px; color: #d4a017; white-space: nowrap;
}
.book-card-fail-info {
  margin-top: 8px; padding: 6px 8px;
  background: #200a0a; border: 1px solid #5a1a1a; border-radius: 4px;
  display: flex; flex-direction: column; gap: 3px;
}
.card-fail-stage {
  font-size: 11px; font-weight: 600; color: #f87171; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.card-fail-error {
  font-size: 11px; color: #cc6060;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.offline-downloaded-badge {
  font-size: 11px; color: #4ade80; margin-top: 4px; display: block;
}

/* === Status badges === */
.status-badge {
  font-size: 11px; padding: 2px 6px; border-radius: 4px;
  font-weight: bold; text-transform: uppercase; flex-shrink: 0; white-space: nowrap;
}
.status-ready { background: #1a4d2e; color: #4ade80; }
.status-writing { background: #1a3a5c; color: #60a5fa; }
.status-queued { background: #4a3a1a; color: #fbbf24; }
.status-failed { background: #4a1a1a; color: #f87171; }
.status-processing { background: #2a1a4a; color: #c084fc; }
.status-unknown { background: #2a2a2a; color: #888; }

/* === Grade badge === */
.grade-badge {
  font-size: 11px; padding: 2px 6px; border-radius: 4px;
  background: #2a2a1a; color: #d4a017;
}

/* === Filter bar === */
.filter-bar-container { margin-bottom: 16px; }
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-search {
  background: #1a1a1a; border: 1px solid #333; color: #e0e0e0;
  padding: 6px 10px; border-radius: 6px; font-size: 14px;
  min-width: 180px; flex: 1;
}
.filter-search:focus { outline: none; border-color: #555; }
.filter-select {
  background: #1a1a1a; border: 1px solid #333; color: #e0e0e0;
  padding: 6px 10px; border-radius: 6px; font-size: 13px;
  cursor: pointer;
}
.filter-select:focus { outline: none; border-color: #555; }

/* === Load more === */
.load-more-btn {
  display: block; margin: 24px auto 0; min-width: 120px;
}

/* === Book page === */
.back-link {
  display: inline-block;
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 3;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  background: rgba(0,0,0,0.35);
  padding: 4px 10px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.back-link:hover { color: #fff; }

.book-cover-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  max-height: 55vh;
  overflow: hidden;
  background: #111;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}
.book-cover-hero-gradient {
  display: none;
}
.book-header {
  position: relative;
  padding: 12px 16px 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), var(--bg, #0a0e1a));
  margin-bottom: 0;
}
.book-header-row {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px;
}
.book-title { font-size: 22px; font-weight: bold; flex: 1; line-height: 1.25; }
.book-meta { color: #888; font-size: 14px; margin-top: 2px; }

/* === Book blurb (back-cover copy, below header, above tabs) === */
.book-blurb {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted, #888);
  padding: 0 16px 16px;
}
.book-blurb p { margin: 0 0 12px; }
.book-blurb p:last-child { margin-bottom: 0; }
.blurb-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 20px;
  cursor: pointer;
  margin-bottom: 14px;
  -webkit-tap-highlight-color: transparent;
}
.blurb-play-btn:active { opacity: 0.7; }

/* === Progress panel (in-progress generation) === */
.progress-panel {
  background: #0a1a0a; border: 1px solid #1a3a1a; border-radius: 10px;
  padding: 20px; margin-bottom: 24px;
}
.progress-activity {
  font-size: 16px; color: #4ade80; font-weight: 500; margin-bottom: 16px;
  line-height: 1.4;
}
.progress-phase-list {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px;
}
.progress-phase-row {
  display: flex; align-items: center; gap: 10px; padding: 4px 0;
  font-size: 13px; color: #555; transition: color 0.2s;
}
.progress-phase-row.phase-done { color: #4ade80; }
.progress-phase-row.phase-done .progress-phase-dot { color: #4ade80; }
.progress-phase-row.phase-active { color: #e0e0e0; font-weight: 600; }
.progress-phase-row.phase-active .progress-phase-dot { color: #fbbf24; animation: pulse 1.5s infinite; }
.progress-phase-row.phase-pending { color: #444; }
.progress-phase-row.phase-pending .progress-phase-dot { color: #333; }
.progress-phase-dot { font-size: 10px; width: 14px; text-align: center; flex-shrink: 0; }
.progress-phase-label { font-weight: 600; min-width: 60px; }
.progress-phase-desc { flex: 1; font-weight: 400; }
.progress-phase-counter { color: #4ade80; font-size: 12px; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.progress-elapsed { font-size: 13px; color: #888; margin-bottom: 8px; }
.progress-prompt { font-size: 13px; color: #555; font-style: italic; line-height: 1.4; }
.progress-errors { margin-top: 12px; }
.progress-error-line {
  font-size: 13px; color: #f87171; padding: 4px 8px;
  background: #1a0a0a; border-radius: 4px; margin-bottom: 4px;
}

/* === Feedback form === */
.feedback-form { max-width: 720px; }
.feedback-label { font-size: 15px; color: #ccc; margin-bottom: 8px; font-weight: 500; }
.feedback-textarea {
  width: 100%; min-height: 150px; padding: 14px 16px;
  background: #1a1a1a; border: 1px solid #333; border-radius: 8px;
  color: #e0e0e0; font-size: 15px; line-height: 1.6; resize: vertical;
  transition: border-color 0.15s;
}
.feedback-textarea:focus { border-color: #4f46e5; outline: none; }
.feedback-textarea::placeholder { color: #555; }
.fb-chapter-note { min-height: 80px; }
.feedback-chapter-details { border: 1px solid #2a2a2a; border-radius: 8px; padding: 0; margin-bottom: 8px; }
.feedback-chapter-details summary { padding: 10px 14px; cursor: pointer; color: #aaa; }
.feedback-chapter-details[open] summary { border-bottom: 1px solid #2a2a2a; }
.feedback-chapter-details .feedback-textarea { border-radius: 0 0 8px 8px; border: none; border-top: none; }
.feedback-history-panel { margin-top: 16px; }
.feedback-history-entry { padding: 10px 0; border-bottom: 1px solid #1e1e1e; }
.feedback-history-header { font-size: 13px; color: #666; margin-bottom: 4px; }
.feedback-history-date { color: #555; }
.feedback-history-overall { color: #aaa; font-size: 14px; }
.feedback-history-note { color: #888; font-size: 13px; margin-top: 2px; }

/* === Book error banner === */
.book-error-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #1a0a0a; border: 1px solid #5a1a1a; border-radius: 8px;
  padding: 12px 16px; margin-bottom: 16px; color: #f87171;
}
.book-error-icon { font-size: 18px; flex-shrink: 0; }
.book-error-message { flex: 1; font-size: 14px; line-height: 1.4; }
.book-error-retry {
  flex-shrink: 0; font-size: 13px; padding: 6px 16px; border-radius: 6px;
}

/* === Book admin actions === */
.book-admin-actions {
  display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
}
.book-action-btn {
  font-size: 13px; padding: 6px 14px;
}
.book-action-retry-book {
  background: #7a4a00; border-color: #a86000; color: #fbbf24;
}
.book-action-retry-book:hover { background: #8c5500; }
.book-action-retry-audio {
  background: #2a2a2a; border-color: #444; color: #e0e0e0;
}
.book-action-retry-audio:hover { background: #3a3a3a; }

/* === Book tabs === */
.book-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid #2a2a2a;
  margin-bottom: 16px; overflow-x: auto; scrollbar-width: none;
  padding-right: 8px;
}
.book-tabs::-webkit-scrollbar { display: none; }
.book-tab {
  padding: 8px 16px; cursor: pointer; border-bottom: 2px solid transparent;
  color: #888; font-size: 14px; white-space: nowrap; transition: color 0.15s;
  user-select: none;
}
.book-tab:hover { color: #e0e0e0; }
.book-tab.active { color: #e0e0e0; border-bottom-color: #d4a017; }
.book-tab.disabled { color: #444; cursor: not-allowed; }
.book-tab-content { min-height: 200px; }

/* === Chapter rows === */
.chapter-row {
  display: flex; align-items: center; padding: 10px 0;
  border-bottom: 1px solid #1e1e1e; gap: 8px;
}
.chapter-row:hover { background: #141414; }
.chapter-row.playing { background: #0d1f0d; }
.chapter-num { color: #666; font-size: 12px; min-width: 28px; text-align: right; }
.chapter-title { flex: 1; font-size: 14px; }
.chapter-duration { color: #666; font-size: 13px; min-width: 48px; text-align: right; margin-right: 12px; }
.chapter-play-btn {
  background: none; border: none; color: #d4a017;
  font-size: 16px; cursor: pointer; padding: 2px 6px; flex-shrink: 0;
}
.chapter-play-btn:hover { color: #f0b82a; }
.chapter-rerender-btn {
  background: none; border: none; color: #555;
  font-size: 14px; cursor: pointer; padding: 2px 4px; flex-shrink: 0;
  opacity: 0; transition: opacity 0.15s;
}
.chapter-row:hover .chapter-rerender-btn { opacity: 1; }
.chapter-rerender-btn:hover { color: #d4a017; }

/* === Screenplay === */
.screenplay-scene { margin-bottom: 24px; }
.screenplay-heading {
  font-weight: bold; text-transform: uppercase; color: #888;
  font-size: 12px; letter-spacing: 0.1em; margin-bottom: 12px;
  border-bottom: 1px solid #2a2a2a; padding-bottom: 4px;
}
.screenplay-action { color: #ccc; font-size: 14px; margin-bottom: 12px; }
.screenplay-dialogue { margin-bottom: 12px; margin-left: 24px; }
.screenplay-character {
  font-weight: bold; text-transform: uppercase; font-size: 12px;
  color: #d4a017; margin-bottom: 2px; letter-spacing: 0.05em;
}
.screenplay-speech { color: #e0e0e0; font-size: 14px; }

/* === Read tab (script format) === */
.read-tab-scroll {
  max-height: calc(100vh - 220px); overflow-y: auto;
  padding-right: 8px; line-height: 1.65;
}
.read-scene-heading {
  font-weight: bold; font-size: 13px; color: #e0e0e0;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 14px; margin-top: 8px;
  border-bottom: 1px solid #2a2a2a; padding-bottom: 4px;
}
.read-dialogue-line {
  margin-bottom: 10px; font-size: 14px; color: #e0e0e0;
  padding-left: 8px;
}
.read-character {
  font-weight: bold; color: #d4a017; text-transform: uppercase;
  font-size: 12px; letter-spacing: 0.05em;
}
.read-narrator-line {
  margin-bottom: 10px; font-size: 14px; font-style: italic;
  color: #aaa; padding: 4px 12px;
  border-left: 2px solid #333;
}
.read-parenthetical {
  color: #888; font-style: italic; font-size: 13px;
}

/* === Read-along === */
.readalong-header {
  display: flex; align-items: center; justify-content: flex-end;
  margin-bottom: 16px; gap: 8px;
}
.auto-scroll-label {
  display: flex; align-items: center; gap: 6px; color: #888;
  font-size: 13px; cursor: pointer;
}
.readalong-line { cursor: pointer; border-radius: 4px; transition: background 0.15s; }
.readalong-line:hover { background: #1a1a1a; }
.readalong-active { background: #1a2a0d !important; outline: 1px solid #4ade80; }
.readalong-content { max-height: calc(100vh - 200px); overflow-y: auto; padding-right: 8px; }

/* === Cast table === */
.cast-table { width: 100%; border-collapse: collapse; }
.cast-table th, .cast-table td {
  padding: 8px 12px; text-align: left; border-bottom: 1px solid #2a2a2a;
}
.cast-table th { color: #888; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }

/* === Grades === */
.grades-list { display: flex; flex-direction: column; gap: 8px; }
.grade-row {
  display: flex; justify-content: space-between; padding: 8px 0;
  border-bottom: 1px solid #1e1e1e;
}
.grade-label { color: #888; }
.grade-value { font-weight: 600; color: #d4a017; }

/* === Chapter drawer === */
.chapter-drawer {
  position: fixed; bottom: 0; left: 0; right: 0; max-height: 60vh;
  background: #141414; border-top: 1px solid #333;
  transform: translateY(100%); transition: transform 0.3s ease;
  z-index: 1100; display: flex; flex-direction: column;
}
.chapter-drawer.open { transform: translateY(0); }
.chapter-drawer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid #2a2a2a;
  font-weight: 600; font-size: 14px;
}
.chapter-drawer-close {
  background: none; border: none; color: #888; font-size: 16px; cursor: pointer;
}
.chapter-drawer-list { overflow-y: auto; padding: 8px 0; }
.chapter-drawer-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  cursor: pointer; border-bottom: 1px solid #1a1a1a;
}
.chapter-drawer-row:hover { background: #1a1a1a; }
.chapter-drawer-row.playing { background: #0d1f0d; }
.chapter-drawer-num { color: #666; font-size: 12px; min-width: 24px; }
.chapter-drawer-title { flex: 1; font-size: 14px; }
.chapter-drawer-dur { color: #666; font-size: 12px; }
.chapter-drawer-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1099;
}
.chapter-drawer-backdrop.open { display: block; }

/* === Browse page === */

/* Filter bar: stacks search + filter row vertically */
.browse-filter-bar-container { margin-bottom: 12px; }
.browse-filter-bar {
  display: flex; flex-direction: column; gap: 8px;
}
.browse-search-input {
  width: 100%;
  background: #1a1a1a; border: 1px solid #333; color: #e0e0e0;
  padding: 10px 14px; border-radius: 8px; font-size: 15px;
  min-height: 44px; /* touch-friendly */
  transition: border-color 0.15s;
}
.browse-search-input:focus { outline: none; border-color: #555; }
.browse-search-input::placeholder { color: #555; }

/* Filter row: wraps on mobile */
.browse-filter-row {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; padding-bottom: 2px;
}
.browse-filter-row .filter-select {
  min-height: 36px; /* touch-friendly */
}

/* Result count */
.browse-result-info-container { min-height: 20px; margin-bottom: 8px; }
.browse-result-info {
  font-size: 12px; color: #555; text-align: right;
}

/* Book grid: 3-4 columns on desktop, single on mobile */
.browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Load more */
.browse-load-more { min-height: 44px; min-width: 140px; margin-top: 24px; }

/* Empty state with icon */
.browse-empty-state {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  padding: 48px 24px; text-align: center; gap: 8px;
}
.browse-empty-icon { font-size: 40px; margin-bottom: 4px; }
.browse-empty-title { font-size: 18px; color: #ccc; }
.browse-empty-sub { font-size: 14px; color: #666; margin-bottom: 12px; }

/* === New story form === */
.new-story-form { max-width: 720px; }
.prompt-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.prompt-chip {
  background: #1a1a1a; border: 1px solid #333; color: #888;
  padding: 4px 10px; border-radius: 12px; font-size: 12px; cursor: pointer;
  white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.prompt-chip:hover { background: #252525; color: #e0e0e0; }
.prompt-input {
  width: 100%; background: #141414; border: 1px solid #333; color: #e0e0e0;
  padding: 10px 12px; border-radius: 6px; font-size: 15px;
  resize: vertical; margin-bottom: 8px;
  height: 38vh; min-height: 100px; max-height: 320px;
}
.prompt-input:focus { outline: none; border-color: #555; }

/* Wave 2 minimalist form */
.ns2-form { display: flex; flex-direction: column; gap: 0; }

/* Family-friendly toggle */
.ns2-family-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; padding: 2px 0;
}
.ns2-family-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: #d4a017; cursor: pointer; }
.ns2-family-label { font-size: 12px; color: #666; cursor: pointer; user-select: none; }
.ns2-family-label:hover { color: #999; }

/* Duration slider */
.ns2-slider-section { margin-bottom: 12px; }
.ns2-slider-label {
  font-size: 15px; font-weight: 600; color: #d4a017;
  text-align: center; margin-bottom: 8px; letter-spacing: 0.01em;
}
.ns2-slider {
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px; outline: none; cursor: pointer;
  background: linear-gradient(to right, #d4a017 0%, #d4a017 var(--pct, 43%), #333 var(--pct, 43%), #333 100%);
}
.ns2-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #d4a017; cursor: pointer; border: 2px solid #0a0a0a;
  box-shadow: 0 0 0 2px #d4a01744;
}
.ns2-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #d4a017; cursor: pointer; border: 2px solid #0a0a0a;
}
.ns2-slider-ticks {
  display: flex; justify-content: space-between;
  font-size: 10px; color: #555; margin-top: 4px; padding: 0 2px;
  user-select: none;
}

/* Style pills */
.ns2-style-pills {
  display: flex; gap: 8px; margin-bottom: 8px;
}
.ns2-style-pill {
  flex: 1; padding: 8px 0; border: 1px solid #333; border-radius: 8px;
  background: #141414; color: #888; font-size: 14px; cursor: pointer;
  transition: all 0.15s; user-select: none; text-align: center;
}
.ns2-style-pill:hover { border-color: #555; color: #e0e0e0; }
.ns2-style-pill.active {
  border-color: #d4a017; color: #d4a017; background: #1a1500;
}

/* Generate button */
.ns2-generate-btn {
  width: 100%; padding: 14px 0; font-size: 17px; font-weight: 600;
  margin-top: 8px; border-radius: 10px; letter-spacing: 0.02em;
  position: sticky; bottom: 8px;
}

.form-section { margin-bottom: 16px; }
.form-section-details { margin-bottom: 16px; }
.form-section-details > summary {
  cursor: pointer; color: #888; padding: 8px 0; list-style: none; user-select: none;
}
.form-section-details > summary::-webkit-details-marker { display: none; }
.form-section-details > summary:hover { color: #e0e0e0; }
.form-label { font-size: 13px; color: #888; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.form-row { margin-bottom: 12px; }
.form-select {
  background: #1a1a1a; border: 1px solid #333; color: #e0e0e0;
  padding: 6px 10px; border-radius: 6px; font-size: 14px; min-width: 200px;
}
.form-select:focus { outline: none; border-color: #555; }
.radio-group { display: flex; gap: 6px; flex-wrap: wrap; }
.radio-group input[type="radio"] { display: none; }
.radio-card {
  padding: 6px 14px; border: 1px solid #333; border-radius: 6px;
  cursor: pointer; font-size: 13px; color: #888; transition: all 0.15s;
  user-select: none;
}
.radio-card:hover { border-color: #555; color: #e0e0e0; }
.radio-group input[type="radio"]:checked + .radio-card {
  border-color: #d4a017; color: #d4a017; background: #1a1500;
}
.btn-icon {
  background: none; border: none; color: #888; font-size: 18px; cursor: pointer; padding: 0 4px;
}
.btn-icon:hover { color: #e0e0e0; }
.generate-btn { margin-top: 16px; min-width: 160px; font-size: 16px; padding: 12px 24px; }
.estimate-display { font-size: 12px; color: #666; margin-top: 6px; }
.auth-required { padding: 48px 0; text-align: center; color: #888; }
.auth-required p { margin-bottom: 16px; }

/* === Queue page === */
.queue-admin-btns { display: flex; gap: 8px; }
.queue-stats { color: #888; font-size: 13px; margin-bottom: 16px; }
.queue-paused-banner {
  background: #3a2a00; border: 1px solid #6a4a00; border-radius: 6px;
  padding: 8px 16px; color: #fbbf24; font-weight: 600; margin-bottom: 16px;
}
.backends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.backend-card {
  background: #141414; border: 1px solid #2a2a2a; border-radius: 8px; padding: 12px;
}
.backend-card-header {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.backend-health-dot { font-size: 10px; }
.backend-health-dot.healthy { color: #4ade80; }
.backend-health-dot.unhealthy { color: #f87171; }
.backend-name { font-weight: 600; font-size: 13px; }
.backend-model { font-size: 12px; color: #888; }
.queue-section-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
  color: #666; margin: 20px 0 8px; padding: 6px 0; border-bottom: 1px solid #2a2a2a;
}
.queue-section-title.active-section { color: #4ade80; border-color: #1a3a1a; }
.queue-section-title.urgent-section { color: #f87171; border-color: #3a1a1a; }

/* Queue items — card-style layout */
.queue-item {
  display: flex; flex-direction: column; gap: 4px; padding: 12px;
  margin-bottom: 8px; background: #141414; border: 1px solid #2a2a2a;
  border-radius: 8px;
}
.queue-item.active { border-color: #1a3a1a; background: #0a1a0a; }
.queue-item.pending.priority-urgent { border-color: #3a1a1a; }

.queue-item-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.queue-item-spinner { font-size: 16px; color: #4ade80; }
.queue-item-title {
  font-size: 15px; font-weight: 600; color: #e0e0e0; text-decoration: none;
}
.queue-item-title:hover { color: #fff; text-decoration: underline; }
.queue-item-id {
  font-size: 11px; font-family: monospace; color: #666; text-decoration: none;
}
.queue-item-id:hover { color: #888; }
.queue-item-status {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 6px; border-radius: 3px; background: #2a2a2a;
}
.queue-item-status.status-writing { color: #60a5fa; background: #1a2a3a; }
.queue-item-status.status-editing { color: #a78bfa; background: #2a1a3a; }
.queue-item-status.status-rendering { color: #34d399; background: #0a2a1a; }
.queue-item-status.status-casting { color: #fbbf24; background: #2a2a0a; }
.queue-item-status.status-grading { color: #f472b6; background: #2a1a2a; }
.queue-item-status.status-mixing { color: #22d3ee; background: #0a2a2a; }
.queue-item-status.status-queued { color: #888; background: #1a1a1a; }
.queue-item-status.status-worldbuilding { color: #c084fc; background: #2a1a3a; }

.queue-item-activity {
  font-size: 14px; color: #4ade80; font-style: italic; padding: 2px 0;
}
.queue-item-details {
  font-size: 12px; color: #888; line-height: 1.4;
  word-break: break-word;
}
.queue-loading {
  color: #666; padding: 32px 0; text-align: center; font-size: 14px;
}
.queue-item-prompt {
  font-size: 12px; color: #555; font-style: italic; line-height: 1.3;
  margin-top: 2px;
}
.queue-item-actions {
  display: flex; gap: 6px; margin-top: 4px;
}

.book-link { color: #d4a017; font-family: monospace; font-size: 12px; }
.btn-sm {
  background: #2a2a2a; border: 1px solid #444; color: #e0e0e0;
  padding: 3px 8px; border-radius: 4px; font-size: 11px; cursor: pointer;
}
.btn-sm:hover { background: #3a3a3a; }
.btn-sm.primary { background: #d4a017; border-color: #d4a017; color: #000; }
.btn-sm.primary:hover { background: #e5b020; }
.btn-sm.danger { border-color: #5a1a1a; color: #f87171; }
.btn-sm.danger:hover { background: #2a0a0a; }
.queue-empty-state {
  display: flex; flex-direction: column; align-items: center;
  padding: 48px 0; text-align: center;
}
.queue-empty-title { font-size: 18px; color: #ccc; margin-bottom: 8px; }
.queue-empty-sub { font-size: 14px; color: #666; margin-bottom: 24px; }
.queue-empty-btn { display: inline-block; text-decoration: none; }

/* Rig pipeline viewer embedded in active queue items */
.rig-viewer-container {
  margin-top: 10px;
}
.rig-viewer-iframe {
  display: block; width: 100%; height: 65vh;
  border: 1px solid #1e3a1e; border-radius: 6px; background: #060606;
}
.rig-viewer-ready {
  padding: 10px 14px; background: #0a2a0a; border: 1px solid #1a4a1a;
  border-radius: 6px; font-size: 14px; color: #4ade80;
}
.rig-viewer-ready-link {
  color: #86efac; font-weight: 600; text-decoration: none;
}
.rig-viewer-ready-link:hover { text-decoration: underline; }

/* === Welcome overlay === */
.welcome-overlay {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: #1a1a1a; border: 1px solid #333; border-radius: 12px;
  padding: 32px; max-width: 480px; width: 90vw; z-index: 3000;
}
.welcome-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 2999;
}
.welcome-card h2 { font-size: 22px; margin-bottom: 12px; }
.welcome-card > p { color: #aaa; font-size: 14px; margin-bottom: 20px; line-height: 1.6; }
.welcome-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.welcome-step { display: flex; align-items: center; gap: 12px; }
.welcome-step-icon { font-size: 22px; }

/* === Buttons === */
.btn {
  background: #2a2a2a; border: 1px solid #444; color: #e0e0e0;
  padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer;
}
.btn:hover { background: #3a3a3a; }
.btn.primary { background: #d4a017; border-color: #d4a017; color: #000; }
.btn.primary:hover { background: #e5b020; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* === Server-down banner === */
.server-down-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #c0392b;
  color: #fff;
  padding: 8px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  /* Sit below nav (z-index 100) is NOT correct — we want it above nav visually.
     We use fixed + top:0 to show it above everything except modals (z-index: 3000+). */
}
.server-down-msg { flex-shrink: 0; }
.server-down-countdown { color: rgba(255,255,255,0.8); font-weight: 400; white-space: nowrap; }

/* Green "Reconnected" flash — auto-dismissed after 2s. */
.server-reconnected-flash {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #27ae60;
  color: #fff;
  padding: 8px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  z-index: 200;
  animation: reconnected-fade 2s ease forwards;
}
@keyframes reconnected-fade {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}


/* === V2 banner on V1 === */
.v2-banner {
  background: #1a3a5c; color: #e0e0e0; padding: 8px 16px;
  text-align: center; font-size: 14px; display: flex;
  align-items: center; justify-content: center; gap: 12px;
}
.v2-banner a { color: #60a5fa; }
.v2-banner button {
  background: none; border: none; color: #888; font-size: 18px;
  cursor: pointer; margin-left: 8px;
}

/* === Airplane easter egg (shown when offline / server down) === */
.airplane-easter-egg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}
.airplane-sprite {
  position: absolute;
  width: 90px;
  opacity: 0.4;
  image-rendering: pixelated;
  /* JS sets top, animation-duration, and animation-delay per instance */
  animation: fly-across linear infinite;
}
@keyframes fly-across {
  0%   { transform: translateX(110vw) translateY(0px); }
  25%  { transform: translateX(82.5vw) translateY(-8px); }
  50%  { transform: translateX(55vw)   translateY(0px); }
  75%  { transform: translateX(27.5vw) translateY(8px); }
  100% { transform: translateX(-20vw)  translateY(0px); }
}
@media (max-width: 480px) {
  .airplane-sprite { width: 60px; }
}

/* === Responsive: tablet === */
@media (max-width: 900px) {
  .browse-books-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .browse-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* === Responsive: mobile === */
@media (max-width: 768px) {
  .browse-books-grid { grid-template-columns: 1fr; }
  .browse-grid { grid-template-columns: 1fr; }
  .browse-search-input { font-size: 16px; } /* prevent iOS zoom on focus */

  .book-tabs { overflow-x: auto; }
  .book-title { font-size: 18px; }

  .new-story-form { max-width: 100%; }
  .radio-group { flex-wrap: wrap; }

  #app { padding: 16px 12px; }
  .page-header { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .backends-grid { grid-template-columns: 1fr; }
  .queue-admin-btns { flex-wrap: wrap; }
}

/* === Home Page — Collection Rows === */

.home-page {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: var(--content-bottom-pad);
}

/* Collection row: header + horizontal scroll area */
.collection-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.collection-row__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  min-height: 24px;
}

.collection-row__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
}

.collection-row__see-all {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.collection-row__see-all:hover { opacity: 0.8; }

.collection-row__scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox */
  padding-bottom: 4px;        /* room for focus outlines */
}

.collection-row__scroll::-webkit-scrollbar { display: none; }

.collection-row__empty {
  color: var(--muted);
  font-size: 13px;
  padding: 8px 4px;
}

/* Book card — 120×180 cover + label area below (2:3 aspect ratio) */
.book-card-home {
  flex-shrink: 0;
  width: 120px;
  scroll-snap-align: start;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.book-card-home:focus { outline: 2px solid var(--accent); border-radius: 4px; }

/* Cover wrapper: fixed 3:4 aspect ratio with overlay slots */
.book-card-home__cover-wrap {
  position: relative;
  width: 120px;
  height: 180px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-2);
  flex-shrink: 0;
}

.book-card-home__cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}

/* MPAA rating badge — moved to meta strip below cover */
.book-card-home__rating {
  display: none;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.3);
  line-height: 1.4;
  text-transform: uppercase;
  pointer-events: none;
}

/* Progress bar — bottom of cover */
.book-card-home__progress-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.2);
}

.book-card-home__progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  transition: width 0.3s ease;
}

/* Book title — 2-line clamp */
/* Metadata strip: rating • format • duration */
.book-card-home__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 2px 2px;
  flex-wrap: wrap;
}
.card-meta__rating {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  text-transform: uppercase;
  line-height: 1.4;
}
.card-meta__format {
  font-size: 10px;
  color: var(--muted);
}
.card-meta__duration {
  font-size: 10px;
  color: var(--muted);
}
.card-meta__format + .card-meta__duration::before {
  content: '·';
  margin-right: 5px;
  color: var(--border);
}
.book-card-home__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  padding: 0 1px;
}

/* Empty + error states */
.home-empty,
.home-error {
  padding: 40px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

/* === Shimmer loading animation === */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    #2a2a2a 50%,
    var(--surface-2) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}

.shimmer-card .book-card-home__cover-wrap {
  background: var(--surface-2);
}

.shimmer-text {
  border-radius: 4px;
  min-height: 14px;
}

.collection-row__title.shimmer-text {
  width: 120px;
  height: 16px;
  display: inline-block;
}

.book-card-home__title.shimmer-text {
  width: 100%;
  height: 38px;
}

/* === Queue: mobile fixes === */
@media (max-width: 600px) {
  /* Larger touch targets for admin action buttons */
  .btn-sm {
    min-height: 44px; padding: 8px 12px; font-size: 13px;
  }

  /* Details line: wrap on narrow screens */
  .queue-item-details {
    display: flex; flex-wrap: wrap; gap: 2px 0;
    white-space: normal;
  }

  /* Stats bar: slightly larger text */
  .queue-stats { font-size: 14px; }
}

/* ============================================================
   Collection Detail Page (.collection-page)
   §6.2 — banner, stats, description, ordered book list
   ============================================================ */

.collection-page {
  padding-bottom: 80px;  /* above mini-player */
}

/* Back row: "← Collection Title" */
.collection-back-row {
  padding: 12px 16px 8px;
}

.collection-back-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  letter-spacing: 0.01em;
}

.collection-back-btn:hover { opacity: 0.8; }

/* 16:9 banner — 2×2 mosaic of book covers */
.collection-banner {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  background: var(--surface-2);
}

/* Gradient-only banner (no books) */
.collection-banner--gradient {
  display: block;
}

/* Each quadrant in the 2×2 mosaic */
.collection-banner-quarter {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
}

/* Cover image inside a quadrant — blurred and darkened */
.collection-banner-quarter-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.6) blur(2px);
  transform: scale(1.05);  /* hide blur edge artefacts */
}

/* Aggregate stats — "8 books • 22h 14m total" */
.collection-stats {
  padding: 12px 16px 4px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* Collapsible description */
.collection-description {
  padding: 4px 16px 8px;
}

.collection-description__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary, var(--text));
  margin: 0 0 4px;
}

.collection-description__toggle {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}

.collection-description__toggle:hover { opacity: 0.8; }

/* Divider above book list */
.collection-divider {
  border: none;
  border-top: 1px solid var(--surface-2);
  margin: 8px 0 0;
}

/* Ordered book list */
.collection-book-list {
  display: flex;
  flex-direction: column;
}

/* Empty state */
.collection-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* Book card — horizontal layout (thumbnail + info) */
.collection-book-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--surface-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.collection-book-card:hover {
  background: var(--surface-2);
}

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

/* Cover thumbnail */
.collection-book-card__cover-wrap {
  position: relative;
  width: 72px;
  height: 108px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-2);
}

.collection-book-card__cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 4px;
}

/* MPAA rating badge on thumbnail */
.collection-book-card__rating {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 1px 3px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.3);
  line-height: 1.4;
  text-transform: uppercase;
  pointer-events: none;
}

/* Progress bar — bottom of thumbnail */
.collection-book-card__progress-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.2);
}

.collection-book-card__progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  transition: width 0.3s ease;
}

/* Info column: title + meta */
.collection-book-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.collection-book-card__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.collection-book-card__meta {
  font-size: 12px;
  color: var(--muted);
}

/* === Empty state v2 (§10.2) === */
.empty-state-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px;
  gap: 8px;
  text-align: center;
}
.empty-state-v2 .es-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 4px;
}
.empty-state-v2 .es-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.empty-state-v2 .es-sub {
  font-size: 14px;
  color: var(--muted);
  max-width: 280px;
  line-height: 1.5;
}

/* === Offline downloaded badge on home book cards (§9.2) === */
/* Small green dot on top-left of cover when book is downloaded. */
.card-offline-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  pointer-events: none;
}

/* === Offline mode: amber dot above bottom nav (§9.3) === */
/* CSS-only indicator — body.offline is set by offline.js. */
body.offline .bottom-nav::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b; /* amber */
  pointer-events: none;
  z-index: 1;
}

/* === Admin page === */
.admin-section {
  padding: 20px 16px 8px;
  max-width: 640px;
  margin: 0 auto;
}
.admin-section + .admin-section {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 20px;
}
.admin-section-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 12px;
}
.admin-section-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.admin-user-pic-wrap {
  flex-shrink: 0;
}
.admin-user-pic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.admin-user-pic-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-user-email {
  font-size: 12px;
  color: var(--muted);
}
.admin-user-meta {
  font-size: 11px;
  color: var(--dim);
  margin-top: 2px;
}
.admin-user-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.admin-badge {
  display: inline-block;
  background: rgba(212,160,23,0.15);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.service-badge {
  display: inline-block;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.admin-empty {
  color: var(--muted);
  font-size: 14px;
  padding: 12px 4px;
}
.admin-loading {
  color: var(--muted);
  font-size: 14px;
  padding: 12px 4px;
}
.admin-auth-loading {
  display: flex;
  justify-content: center;
  padding: 60px 16px;
}

/* === Download section (M4B / MP3 / ZIP) === */
.book-download-section {
  margin-bottom: 1rem;
}

.download-wrapper {
  position: relative;
  display: inline-block;
}

.download-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: #16213e;
  border: 1px solid #444;
  border-radius: 6px;
  min-width: 270px;
  margin-top: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.download-option {
  display: flex;
  flex-direction: column;
  padding: 0.7rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid #2a2a4a;
  min-height: 48px;
  justify-content: center;
  gap: 0.15rem;
  transition: background 0.15s;
}

.download-option:last-child { border-bottom: none; }
.download-option:hover { background: #1a2744; }

.dl-format-name {
  font-weight: 600;
  color: #e0e0e0;
  font-size: 0.88rem;
}

.dl-format-desc {
  color: #888;
  font-size: 0.76rem;
  line-height: 1.35;
}

.dl-format-size {
  color: #e94560;
  font-size: 0.76rem;
  margin-top: 0.1rem;
}

.dl-status-area {
  background: #16213e;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 0.65rem 1rem;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.dl-status-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.875rem;
  color: #ccc;
}

.dl-status-error { color: #e94560; }

.dl-progress-bar {
  height: 5px;
  background: #2a2a4a;
  border-radius: 3px;
  overflow: hidden;
}

.dl-progress-fill {
  height: 100%;
  background: #e94560;
  border-radius: 3px;
  transition: width 0.4s ease;
  min-width: 4px;
}

/* ============================================================
   Worlds page — world card grid
   ============================================================ */
.worlds-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 0;
  max-width: 640px; margin: 0 auto; width: 100%;
}
.worlds-header h1 { font-size: 22px; font-weight: 700; }
.worlds-create-btn { flex-shrink: 0; }

.worlds-list {
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  max-width: 640px; margin: 0 auto; width: 100%;
}
.worlds-loading { color: var(--muted); display: flex; align-items: center; gap: 8px; padding: 24px 0; }
.worlds-empty { text-align: center; padding: 60px 24px; color: var(--muted); }
.worlds-empty-icon { font-size: 48px; margin-bottom: 12px; }
.worlds-empty p { font-size: 16px; color: var(--muted); margin-bottom: 24px; }
.worlds-empty-btn { font-size: 16px; padding: 14px 32px; border-radius: 10px; min-height: 50px; }

.world-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  border-left-width: 3px;
}
.world-card:hover { border-color: #555; background: var(--surface-2); }
.world-card-fiction  { border-left-color: #7b9cff; }
.world-card-nonfiction { border-left-color: #7bcf7b; }
.world-card-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.world-card-meta { display: flex; align-items: center; gap: 10px; }
.world-card-chars { font-size: 13px; color: var(--muted); }

.world-type-badge {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 20px; text-transform: uppercase;
}
.world-type-fiction  { background: #1a1f3a; color: #7b9cff; }
.world-type-nonfiction { background: #1a2a1a; color: #7bcf7b; }

/* Worlds page — mobile responsive */
@media (max-width: 600px) {
  .worlds-header { padding: 12px 16px 0; }
  .worlds-header h1 { font-size: 18px; }
  .worlds-create-btn { font-size: 13px; padding: 8px 14px; }
  .worlds-list { padding: 12px; gap: 10px; }
  .worlds-empty { padding: 40px 20px; }
  .worlds-empty-btn { width: 100%; max-width: 320px; }
  .world-card { padding: 14px; min-height: 52px; }
}

/* ============================================================
   World builder page — form
   ============================================================ */
.wb-form {
  display: flex; flex-direction: column; gap: 0;
  padding: 0 0 80px;
  max-width: 640px; margin: 0 auto;
}
.wb-section {
  padding: 16px 16px 20px;
  border-bottom: 1px solid var(--border);
}
.wb-section:last-of-type { border-bottom: none; }
.wb-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.wb-char-section-header {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 10px;
}
.wb-section-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.wb-label {
  display: block; font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px;
}
.wb-title-input {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border);
  color: var(--text); font-size: 22px; font-weight: 700; padding: 4px 0;
  outline: none;
}
.wb-title-input:focus { border-bottom-color: var(--accent); }
.wb-title-input::placeholder { color: var(--dim); }

.wb-type-selector { display: flex; gap: 8px; }
.wb-type-pill {
  padding: 10px 28px; border: 1px solid var(--border); border-radius: 20px;
  background: transparent; color: var(--muted); font-size: 15px; font-weight: 600;
  cursor: pointer; transition: all 0.15s; min-height: 44px;
}
.wb-type-pill:hover { border-color: #555; color: var(--text); }
.wb-type-pill.active { border-color: var(--accent); color: var(--accent); background: #1a1500; }
.wb-type-pill:disabled { opacity: 0.5; cursor: not-allowed; }

.wb-textarea {
  width: 100%; min-height: 90px; resize: vertical;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 10px 12px; outline: none;
  transition: border-color 0.15s;
}
.wb-textarea:focus { border-color: var(--accent); }
.wb-textarea::placeholder { color: var(--dim); }

/* Characters section */
.wb-char-section { display: flex; flex-direction: column; gap: 0; }
.wb-char-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wb-autogen-btn { font-size: 14px; padding: 10px 16px; min-height: 40px; }
.wb-char-list { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.wb-char-empty { color: var(--muted); font-size: 13px; padding: 12px 0; }

.wb-char-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.wb-char-card-header { display: flex; align-items: center; gap: 8px; }
.wb-char-name {
  flex: 0 0 100px; background: transparent; border: none;
  border-bottom: 1px solid var(--border); color: var(--text);
  font-size: 14px; font-weight: 700; padding: 2px 0; outline: none;
}
.wb-char-name:focus { border-bottom-color: var(--accent); }
.wb-char-name::placeholder { color: var(--dim); }
.wb-char-fullname {
  flex: 1; background: transparent; border: none;
  border-bottom: 1px solid var(--border); color: var(--text);
  font-size: 14px; padding: 2px 0; outline: none;
}
.wb-char-fullname:focus { border-bottom-color: var(--accent); }
.wb-char-fullname::placeholder { color: var(--dim); }
.wb-char-remove {
  flex-shrink: 0; background: transparent; border: none; color: var(--dim);
  font-size: 16px; padding: 4px; cursor: pointer; border-radius: 4px;
  transition: color 0.15s;
}
.wb-char-remove:hover { color: #e94560; }

.wb-char-card-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-char-meta-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.wb-char-select {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 8px 12px; font-size: 14px; outline: none; cursor: pointer;
  min-height: 40px;
}
.wb-char-select:focus { border-color: var(--accent); }

.wb-char-desc {
  width: 100%; min-height: 60px; resize: vertical;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 8px 10px; font-size: 13px; outline: none;
  transition: border-color 0.15s;
}
.wb-char-desc:focus { border-color: var(--accent); }
.wb-char-desc::placeholder { color: var(--dim); }

/* Voice controls on character cards */
.wb-voice-row { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.wb-voice-style-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.wb-voice-style { flex: 1; background: var(--surface-1); border: 1px solid #333; border-radius: 8px; padding: 8px 12px; color: var(--text); font-size: 14px; }
.wb-voice-style:focus { border-color: var(--accent); }
.wb-voice-style::placeholder { color: var(--dim); }
.wb-voice-state { margin-top: 10px; }
.wb-voice-controls, .wb-voice-badge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-voice-btn { font-size: 13px; padding: 8px 14px; min-height: 36px; }
.wb-voice-label { font-size: 13px; color: var(--muted); }
.wb-voice-id { font-size: 13px; color: var(--accent); font-family: monospace; margin-right: 8px; }
.wb-voice-clear { color: #e94560; border-color: #e94560; }
.wb-voice-clear:hover { background: rgba(233,69,96,0.1); }
.wb-char-audio { width: 100%; margin-top: 8px; height: 36px; }
.wb-voice-loading { margin-top: 10px; text-align: center; }
.wb-voice-loading-text { display: block; color: #aaa; font-size: 13px; margin-top: 6px; }
.wb-voice-loading-bar {
  height: 3px; background: #555; border-radius: 2px; overflow: hidden; position: relative;
}
.wb-voice-loading-bar::after {
  content: ''; position: absolute; top: 0; left: -40%; height: 100%; width: 40%;
  background: #e8a030; border-radius: 2px;
  animation: wb-loading-slide 1.2s ease-in-out infinite;
}
@keyframes wb-loading-slide { 0% { left: -40%; } 100% { left: 100%; } }
.wb-voice-effect-sel { background: var(--surface-1); border: 1px solid #333; border-radius: 8px; padding: 7px 10px; color: var(--text); font-size: 14px; cursor: pointer; }
.wb-voice-effect-sel:focus { border-color: var(--accent); outline: none; }
@media (max-width: 600px) {
  .wb-voice-controls { flex-direction: column; }
  .wb-voice-controls .wb-voice-btn { width: 100%; min-height: 44px; }
  .wb-voice-row { flex-direction: column; align-items: stretch; }
  .wb-voice-badge { flex-wrap: wrap; gap: 6px; }
}

/* Voice picker — catalog browser (Mode A) */
.wb-voice-catalog-loading { color: var(--muted); font-size: 13px; padding: 8px 0; }
.wb-voice-filters { display: flex; align-items: center; gap: 8px; margin-top: 8px; margin-bottom: 4px; }
.wb-voice-search { flex: 1; background: var(--surface-1); border: 1px solid #333; border-radius: 8px; padding: 7px 12px; color: var(--text); font-size: 14px; outline: none; }
.wb-voice-search:focus { border-color: var(--accent); }
.wb-voice-search::placeholder { color: var(--dim); }
.wb-voice-gender-filter { background: var(--surface-1); border: 1px solid #333; border-radius: 8px; padding: 7px 10px; color: var(--text); font-size: 14px; cursor: pointer; }
.wb-voice-gender-filter:focus { border-color: var(--accent); outline: none; }
.wb-voice-list { max-height: 280px; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; }
.wb-voice-entry { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.1s; }
.wb-voice-entry:last-child { border-bottom: none; }
.wb-voice-entry:hover { background: var(--surface-1); }
.wb-voice-entry-selected { background: #1a1500; border-left: 3px solid var(--accent); padding-left: 9px; }
.wb-voice-entry-info { flex: 1; min-width: 0; }
.wb-voice-entry-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wb-voice-entry-name { font-size: 14px; color: var(--text); font-weight: 500; }
.wb-voice-entry-desc { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-voice-gender { font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: 600; text-transform: uppercase; }
.wb-voice-gender-male { background: rgba(59,130,246,0.2); color: #93c5fd; }
.wb-voice-gender-female { background: rgba(236,72,153,0.2); color: #f9a8d4; }
.wb-voice-gender-neutral { background: rgba(167,139,250,0.2); color: #c4b5fd; }
.wb-voice-tag { font-size: 11px; padding: 2px 6px; border-radius: 4px; background: var(--surface-2); color: var(--muted); }
.wb-voice-play-btn { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s; }
.wb-voice-play-btn:hover { border-color: var(--accent); color: var(--accent); }
.wb-voice-empty { padding: 12px; color: var(--muted); font-size: 13px; text-align: center; }
.wb-voice-design-btn { margin-top: 6px; font-size: 13px; }
.wb-voice-browse-link { font-size: 12px; padding: 6px 10px; min-height: 32px; }
@media (max-width: 600px) {
  .wb-voice-filters { flex-direction: column; align-items: stretch; }
  .wb-voice-gender-filter { width: 100%; }
  .wb-voice-entry-desc { white-space: normal; }
  .wb-voice-list { max-height: 240px; }
}

.wb-submit-btn {
  margin: 16px 16px 0; width: calc(100% - 32px);
  padding: 14px 0; font-size: 16px; font-weight: 600;
  position: sticky; bottom: 8px; border-radius: 10px;
}

/* World builder — mobile responsive */
@media (max-width: 600px) {
  .wb-char-actions { flex-direction: column; gap: 8px; }
  .wb-char-actions .btn { width: 100%; min-height: 44px; justify-content: center; }
  .wb-char-card-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .wb-char-select { width: 100%; min-height: 44px; }
  .wb-char-name { flex: 1 1 auto; }
  .wb-char-card-header { flex-wrap: wrap; gap: 8px; }
  .wb-type-selector { flex-wrap: wrap; }
  .wb-type-pill { flex: 1; min-height: 44px; text-align: center; }
}

/* ============================================================
   World builder — revision history panel
   ============================================================ */
.wb-history-toggle-row {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 16px 10px; gap: 8px;
}
.wb-history-toggle-btn {
  font-size: 13px; padding: 8px 14px; min-height: 36px;
  color: var(--muted); border-color: var(--border);
}
.wb-history-toggle-btn.active {
  color: var(--accent); border-color: var(--accent);
}
.wb-history-panel {
  margin: 0 16px 12px; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden;
}
.wb-history-loading {
  color: var(--muted); font-size: 13px; padding: 16px; text-align: center;
}
.wb-history-empty {
  color: var(--muted); font-size: 13px; padding: 16px; text-align: center;
}
.wb-history-entry {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.wb-history-entry:last-child { border-bottom: none; }
.wb-history-entry:hover { background: var(--surface-1); }
.wb-history-meta {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
}
.wb-history-top {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.wb-history-sha {
  font-family: monospace; font-size: 12px; color: var(--accent);
  background: var(--surface-2); padding: 2px 6px; border-radius: 4px;
  flex-shrink: 0;
}
.wb-history-date {
  font-size: 12px; color: var(--muted); flex-shrink: 0;
}
.wb-history-tag {
  font-size: 11px; padding: 2px 7px; border-radius: 10px;
  background: rgba(232,160,48,0.15); color: #e8a030;
  border: 1px solid rgba(232,160,48,0.3); font-weight: 600;
}
.wb-history-msg {
  font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-history-actions {
  display: flex; gap: 6px; flex-shrink: 0; align-items: center;
}
.wb-history-btn {
  font-size: 12px; padding: 6px 10px; min-height: 30px;
}

/* Revision banner — shown when viewing a historical snapshot */
.wb-revision-banner {
  margin: 8px 16px 0;
  background: rgba(232,160,48,0.12); border: 1px solid rgba(232,160,48,0.35);
  border-radius: 8px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.wb-revision-banner-text {
  flex: 1; font-size: 13px; color: #e8a030; min-width: 0;
}
.wb-revision-banner-actions {
  display: flex; gap: 6px; flex-shrink: 0;
}
.wb-revision-restore-btn {
  font-size: 13px; padding: 8px 14px; min-height: 34px;
  background: #e8a030; color: #111; border-color: #e8a030; font-weight: 600;
}
.wb-revision-restore-btn:hover { background: #d4912a; }
.wb-revision-back-btn {
  font-size: 13px; padding: 8px 14px; min-height: 34px;
}

/* Form read-only overlay — disables editing when viewing a historical revision */
.wb-form-readonly .wb-title-input,
.wb-form-readonly .wb-textarea,
.wb-form-readonly .wb-char-name,
.wb-form-readonly .wb-char-fullname,
.wb-form-readonly .wb-char-desc,
.wb-form-readonly .wb-voice-style {
  pointer-events: none; opacity: 0.6;
}
.wb-form-readonly .wb-char-select,
.wb-form-readonly .wb-type-pill,
.wb-form-readonly .wb-autogen-btn,
.wb-form-readonly .wb-char-remove,
.wb-form-readonly .wb-voice-btn,
.wb-form-readonly .wb-submit-btn {
  display: none;
}
.wb-form-readonly .wb-voice-effect-sel { pointer-events: none; opacity: 0.6; }

/* ============================================================
   New story page — world selector section
   ============================================================ */
.ns2-world-section {
  border-bottom: 1px solid var(--border);
}
.ns2-world-toggle {
  width: 100%; background: transparent; border: none; text-align: left;
  color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 12px 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  transition: color 0.15s;
}
.ns2-world-toggle:hover { color: var(--text); }

.ns2-world-body {
  padding: 0 16px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.ns2-world-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; background: var(--surface); transition: border-color 0.15s;
}
.ns2-world-item:hover { border-color: #555; }
.ns2-world-item.selected { border-color: var(--accent); background: #1a1500; }
.ns2-world-item-title { font-size: 14px; color: var(--text); }
.ns2-world-item-type { font-size: 12px; color: var(--muted); }

.ns2-world-new-link {
  font-size: 13px; color: var(--accent); padding: 6px 0; display: block;
}
.ns2-world-empty { color: var(--muted); font-size: 13px; }
.ns2-world-empty p { margin-bottom: 6px; }
.ns2-world-error { color: #e94560; font-size: 13px; }

.ns2-tag-picker { padding: 8px 0; }
.ns2-tag-select {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); padding: 8px 10px; font-size: 14px;
  outline: none; cursor: pointer;
}
.ns2-tag-select:focus { border-color: var(--accent); }

.ns2-update-check {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; font-size: 13px; color: var(--muted);
}
.ns2-update-check input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer;
}
.ns2-update-check label { cursor: pointer; }

/* === Personal CTA card (§10) — shown in Favorites / Continue Listening rows for anon users === */
/* Renders inside a .collection-row__scroll alongside regular book cards. */
.personal-cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 180px;
  min-width: 180px;
  padding: 16px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  flex-shrink: 0;
}
.personal-cta-card__icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 4px;
}
.personal-cta-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.personal-cta-card__sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 4px;
}
.personal-cta__btn {
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 20px;
}

/* === Library guest CTA banner (§10) — shown at top of library page for anon === */
.library-guest-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.library-guest-cta__text {
  font-size: 14px;
  color: var(--muted);
  flex: 1;
}
.library-guest-cta__btn {
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 20px;
  white-space: nowrap;
}