/* ============================================================
   INDIEWRIGHT — SHARED DESIGN SYSTEM
   Used by both mobile.html and desktop.html.
   Contains: design tokens, resets, typography, and every
   reusable UI component (buttons, inputs, cards, badges, tabs,
   avatars, modals, toasts, progress, skeletons, icons).
   Layout-specific rules live in mobile.css / desktop.css.
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Surfaces */
  --bg: #0F1115;
  --surface: #171A21;
  --card: #1D212A;
  --card-hover: #232834;
  --bg-light: #F7F5F1;

  /* Text */
  --text-primary: #F8F7F4;
  --text-secondary: #AAAEB8;
  --text-tertiary: #6E7280;
  --text-on-light: #23211D;

  /* Accents */
  --gold: #D5AE68;
  --gold-soft: rgba(213, 174, 104, 0.14);
  --gold-strong: #E4C588;
  --plum: #64394B;
  --plum-soft: rgba(100, 57, 75, 0.28);

  /* Status */
  --success: #7EB69B;
  --success-soft: rgba(126, 182, 155, 0.14);
  --warning: #CB9C4C;
  --warning-soft: rgba(203, 156, 76, 0.14);
  --error: #C1686B;
  --error-soft: rgba(193, 104, 107, 0.14);

  /* Lines */
  --border: rgba(248, 247, 244, 0.08);
  --border-strong: rgba(248, 247, 244, 0.16);
  --border-gold: rgba(213, 174, 104, 0.4);

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.44);
  --shadow-gold: 0 8px 20px rgba(213, 174, 104, 0.22);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 140ms;
  --med: 240ms;
  --slow: 420ms;

  /* Type */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  color-scheme: dark;
}

/* ---------- Reset ---------- */
* , *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.1px; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; color: inherit; background: transparent; border: 0; }
input, textarea, select { font-family: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
svg { display: block; }
::selection { background: var(--gold-soft); color: var(--text-primary); }

/* Scrollbars (webkit) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ---------- Typography Utilities ---------- */
.font-serif { font-family: var(--font-serif); }
.font-sans { font-family: var(--font-sans); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-gold { color: var(--gold); }
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold);
}
.display-xl { font-size: 40px; line-height: 1.12; letter-spacing: -0.3px; }
.display-lg { font-size: 32px; line-height: 1.15; letter-spacing: -0.2px; }
.display-md { font-size: 24px; line-height: 1.2; }
.display-sm { font-size: 19px; line-height: 1.3; }
.body-lg { font-size: 16.5px; line-height: 1.6; color: var(--text-secondary); }
.body-md { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }
.body-sm { font-size: 13px; line-height: 1.5; color: var(--text-tertiary); }
.caption { font-size: 12px; color: var(--text-tertiary); }

/* ---------- Layout Helpers ---------- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-xs { gap: 6px; }
.gap-sm { gap: 10px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Icons (inline SVG sprite via <use>) ---------- */
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 26px; height: 26px; }
.icon-fill { fill: currentColor; stroke: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  padding: 13px 22px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), opacity var(--fast) var(--ease);
  white-space: nowrap;
  user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn.is-disabled { opacity: 0.45; pointer-events: none; }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-lg { padding: 16px 28px; font-size: 15.5px; }
.btn-icon-only { padding: 11px; border-radius: var(--r-full); }

.btn-primary {
  background: linear-gradient(180deg, var(--gold-strong), var(--gold));
  color: #1A1408;
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover { filter: brightness(1.05); }

.btn-secondary {
  background: var(--card);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--card-hover); border-color: var(--border-gold); }

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border);
}
.btn-ghost:hover { background: rgba(248,247,244,0.04); }

.btn-plum {
  background: var(--plum);
  color: var(--text-primary);
}
.btn-plum:hover { filter: brightness(1.12); }

.btn-danger {
  background: var(--error-soft);
  color: var(--error);
  border-color: rgba(193,104,107,0.35);
}
.btn-danger:hover { background: rgba(193,104,107,0.22); }

.btn-link {
  background: transparent;
  border: none;
  color: var(--gold);
  padding: 4px 2px;
  border-radius: 4px;
}
.btn-link:hover { text-decoration: underline; }

.splash-actions { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.splash-actions-desktop { width: min(460px, 90vw); flex-direction: row; justify-content: center; }
.splash-actions-desktop .btn { flex: 1; }

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field-label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.2px; }
.field-hint { font-size: 12px; color: var(--text-tertiary); }
.field-error { font-size: 12px; color: var(--error); display: none; }

/* The reason a sign-in or signup failed, on the form, above the button,
   staying until the next attempt. A toast in the far corner that lasts
   3.4 seconds is not an answer to "why did nothing happen?". */
.auth-error {
  font-size: 13px; line-height: 1.45; color: var(--error);
  background: var(--error-soft); border: 1px solid var(--error);
  border-radius: var(--r-md, 10px); padding: 10px 12px; margin: 0 0 14px;
}
.auth-error[hidden] { display: none; }
.field.has-error .field-error { display: block; }
.field.has-error .input { border-color: var(--error); }

.input, .textarea, .select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-primary);
  padding: 13px 16px;
  font-size: 14.5px;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.textarea { resize: vertical; min-height: 96px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23AAAEB8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }

.input-with-icon { position: relative; }
.input-with-icon .input { padding-left: 42px; }
.input-with-icon .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); }

.pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-tertiary); padding: 4px; }

.checkbox-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.checkbox-row input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 19px; height: 19px; min-width: 19px; border-radius: 6px; border: 1.5px solid var(--border-strong); background: var(--surface); margin-top: 1px; position: relative; transition: background var(--fast), border-color var(--fast); }
.checkbox-row input[type="checkbox"]:checked { background: var(--gold); border-color: var(--gold); }
.checkbox-row input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 10px; border: solid #1A1408; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checkbox-row span { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.checkbox-row a { color: var(--gold); }

/* Toggle switch */
.switch { position: relative; width: 42px; height: 25px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .track { position: absolute; inset: 0; background: var(--border-strong); border-radius: var(--r-full); transition: background var(--fast) var(--ease); }
.switch .thumb { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; background: var(--text-primary); border-radius: 50%; transition: transform var(--fast) var(--ease); }
.switch input:checked + .track { background: var(--gold); }
.switch input:checked + .track .thumb { transform: translateX(17px); }
.switch input:checked ~ .thumb { transform: translateX(17px); background: #1A1408; }

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease), background var(--fast) var(--ease);
}
.card-hover:hover { border-color: var(--border-gold); transform: translateY(-2px); background: var(--card-hover); }
.card-flat { background: var(--surface); border-color: transparent; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
}
.badge-gold { background: var(--gold-soft); color: var(--gold); }
.badge-plum { background: var(--plum-soft); color: #D9A9BB; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-error { background: var(--error-soft); color: var(--error); }
.badge-neutral { background: rgba(248,247,244,0.08); color: var(--text-secondary); }
.badge-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary); }
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  background: none; border: none; color: var(--text-tertiary);
  padding: 12px 16px; font-size: 13.5px; font-weight: 600;
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.tab:hover { color: var(--text-secondary); }
.tab.is-active { color: var(--gold); border-color: var(--gold); }

.pill-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pill-tabs::-webkit-scrollbar { display: none; }
.pill-tab {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-secondary);
  padding: 8px 16px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: all var(--fast) var(--ease);
}
.pill-tab.is-active { background: var(--gold); color: #1A1408; border-color: var(--gold); }

/* ---------- Avatars ---------- */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, var(--plum), #33202B);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary); font-family: var(--font-serif); font-weight: 600;
  flex-shrink: 0; position: relative;
}
.avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-md { width: 44px; height: 44px; font-size: 15px; }
.avatar-lg { width: 64px; height: 64px; font-size: 20px; }
.avatar-xl { width: 96px; height: 96px; font-size: 30px; }
.avatar-ring { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); }
.avatar-status { position: absolute; bottom: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--success); border: 2px solid var(--bg); }

/* ---------- Loading Skeletons ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--r-sm);
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(248,247,244,0.06), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton-text { height: 12px; border-radius: 4px; margin-bottom: 8px; }
.skeleton-title { height: 18px; width: 60%; border-radius: 5px; margin-bottom: 10px; }
.skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; }
.skeleton-cover { width: 100%; aspect-ratio: 1/1; border-radius: var(--r-md); }

/* ---------- Progress ---------- */
.progress-bar { width: 100%; height: 6px; background: var(--surface); border-radius: var(--r-full); overflow: hidden; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-strong)); border-radius: var(--r-full); transition: width var(--slow) var(--ease); }
.progress-bar.is-thin { height: 3px; }

.progress-ring { transform: rotate(-90deg); }
.progress-ring circle { fill: none; stroke-width: 4; }
.progress-ring .ring-track { stroke: var(--border); }
.progress-ring .ring-fill { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset var(--slow) var(--ease); }

.steps { display: flex; align-items: center; gap: 6px; }
.step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); transition: background var(--fast), width var(--fast); }
.step-dot.is-active { background: var(--gold); width: 20px; border-radius: var(--r-full); }
.step-dot.is-done { background: var(--gold); opacity: 0.5; }

/* ---------- Modals ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(6, 7, 9, 0.66);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 955; opacity: 0; pointer-events: none;
  transition: opacity var(--med) var(--ease);
  padding: 20px;
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  width: 100%; max-width: 440px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(0.98);
  transition: transform var(--med) var(--ease);
}
.modal-overlay.is-open .modal { transform: translateY(0) scale(1); }
.modal-lg { max-width: 640px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 0; }
.modal-close { background: var(--card); border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.modal-close:hover { color: var(--text-primary); border-color: var(--border-gold); }
.modal-body { padding: 18px 22px; overflow-y: auto; }
.modal-footer { padding: 4px 22px 22px; display: flex; gap: 10px; }

/* Bottom sheet (mobile) */
.sheet-overlay {
  position: fixed; inset: 0; background: rgba(6,7,9,0.6);
  z-index: 975; opacity: 0; pointer-events: none;
  transition: opacity var(--med) var(--ease);
}
.sheet-overlay.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong); border-bottom: none;
  border-radius: 22px 22px 0 0;
  max-height: 84vh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  transition: transform var(--med) var(--ease);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.sheet-overlay.is-open .sheet { transform: translateY(0); }
.sheet-handle { width: 36px; height: 4px; background: var(--border-strong); border-radius: var(--r-full); margin: 12px auto 6px; }
.sheet-body { padding: 6px 20px 20px; overflow-y: auto; }

/* ---------- Toasts ---------- */
.toast-stack {
  position: fixed; z-index: 1000;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 13px 16px;
  box-shadow: var(--shadow-md);
  min-width: 240px; max-width: 360px;
  animation: toast-in var(--med) var(--ease);
  pointer-events: auto;
}
.toast.is-leaving { animation: toast-out var(--fast) var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.toast-icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.toast-success .toast-icon { background: var(--success-soft); color: var(--success); }
.toast-error .toast-icon { background: var(--error-soft); color: var(--error); }
.toast-info .toast-icon { background: var(--gold-soft); color: var(--gold); }
.toast-text { font-size: 13.5px; color: var(--text-primary); }
.toast-sub { font-size: 12px; color: var(--text-tertiary); }

/* ---------- "Coming Soon" / Demo labels ---------- */
.demo-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-tertiary); background: rgba(248,247,244,0.05);
  border: 1px dashed var(--border-strong);
  padding: 3px 9px; border-radius: var(--r-full);
}
.demo-tag .icon { width: 12px; height: 12px; }

/* ---------- Icon buttons (circular, used in headers) ---------- */
.icon-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); position: relative; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.icon-btn:hover { color: var(--text-primary); border-color: var(--border-gold); }
.icon-btn .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); border: 1.5px solid var(--bg); }

/* ---------- List rows (settings-style tappable rows) ---------- */
.list-row { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--border); }
.list-row:last-child { border-bottom: none; }

/* ---------- Social login badge (used inside authway-btn) ---------- */
.authway-mark { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; margin-right: 4px; flex-shrink: 0; }

/* ---------- Auth footer note ---------- */
.auth-footer-note { margin-top: 20px; text-align: center; }

/* ============================================================
   BOOK CARDS, ROWS/GRIDS, MOOD + GENRE DISCOVERY, SEARCH
   (Part 2). Card component styling lives here so it's pixel-
   identical on both layouts; container layout (scroll rows vs.
   wrapping grids, card widths) is set per-platform in
   mobile.css / desktop.css.
   ============================================================ */

.mood-section, .genre-section { margin-bottom: 30px; }
.mood-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mood-row::-webkit-scrollbar { display: none; }
.mood-chip {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--border-strong); color: var(--text-secondary);
  padding: 10px 16px; border-radius: var(--r-full); font-size: 13px; font-weight: 600;
  transition: all var(--fast) var(--ease); flex-shrink: 0;
}
.mood-chip:hover { border-color: var(--border-gold); color: var(--text-primary); }
.mood-chip.is-active { background: var(--gold); color: #1A1408; border-color: var(--gold); }
.mood-results .section-head h2 { color: var(--gold); }

/* Listener Home: clear hierarchy and an immediate primary action. */
.home-feature { position: relative; display: grid; grid-template-columns: 1fr 250px; gap: 28px; overflow: hidden; margin: 8px 0 34px; padding: 34px; border: 1px solid var(--border-gold); border-radius: var(--r-xl); background: radial-gradient(circle at 78% 22%,rgba(213,174,104,.17),transparent 38%),linear-gradient(145deg,#191c24,#111319); }
.home-feature-copy { align-self: center; max-width: 650px; }
.home-feature-copy h2 { margin: 13px 0 10px; font-size: clamp(32px,4vw,52px); line-height: 1.02; }
.home-feature-copy>p { max-width: 590px; color: var(--text-secondary); font-size: 15px; }
.home-feature-meta,.home-feature-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.home-feature-meta { margin: 15px 0; color: var(--text-tertiary); font-size: 12px; }
.home-feature-meta span+span:before { content: "·"; margin-right: 12px; }
.home-feature-art { position: relative; width: 210px; aspect-ratio: 3/4; justify-self: center; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; box-shadow: 0 22px 50px rgba(0,0,0,.48); transform: rotate(2deg); }
.home-feature-art:hover { transform: rotate(0) translateY(-4px); transition: transform var(--med) var(--ease); }
.home-feature-initial { position: relative; z-index: 2; font: 82px var(--font-serif); color: rgba(255,255,255,.86); }
.home-feature-glow { position: absolute; inset: auto -30% -25%; height: 65%; border-radius: 50%; background: rgba(213,174,104,.22); filter: blur(25px); }
.home-value-strip { grid-column: 1/-1; display: flex; gap: 28px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--text-tertiary); font-size: 11px; }
.home-value-strip b { color: var(--gold); margin-right: 4px; }

.genre-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.genre-tile {
  background: var(--card); border: 1px solid var(--border); color: var(--text-primary);
  padding: 20px 16px; border-radius: var(--r-lg); font-family: var(--font-serif); font-size: 16px;
  text-align: left; transition: all var(--fast) var(--ease); position: relative; overflow: hidden;
}
.genre-tile::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 90% 110%, rgba(213,174,104,0.16), transparent 60%);
  opacity: 0; transition: opacity var(--fast) var(--ease);
}
.genre-tile:hover::after { opacity: 1; }
.genre-tile:hover { border-color: var(--border-gold); transform: translateY(-2px); }
.genre-tile.is-active { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }

/* ---------- Book card ---------- */
.book-section { margin-bottom: 30px; }
.book-card { flex-shrink: 0; cursor: pointer; }
.book-cover {
  position: relative; width: 100%; aspect-ratio: 3/4; border-radius: var(--r-md);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--fast) var(--ease);
}
.book-card:hover .book-cover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.book-cover-initial {
  font-family: var(--font-serif); font-size: 40px; color: rgba(248,247,244,0.16);
  user-select: none;
}
.book-cover-wide { aspect-ratio: 16/10; }
.book-cover-wide .book-cover-initial { font-size: 30px; }

.cover-tags { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cover-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--r-full); backdrop-filter: blur(4px);
}
.cover-tag-gold { background: rgba(213,174,104,0.88); color: #1A1408; }
.cover-tag-neutral { background: rgba(15,17,21,0.72); color: var(--text-primary); border: 1px solid rgba(248,247,244,0.18); }

.book-save-btn {
  position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(15,17,21,0.55); backdrop-filter: blur(4px); border: 1px solid rgba(248,247,244,0.18);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.book-save-btn:hover { background: rgba(15,17,21,0.8); }
.book-save-btn.is-saved { color: var(--gold); }
.book-save-btn.is-saved svg { fill: var(--gold); }

.book-play-btn {
  position: absolute; bottom: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--gold); color: #1A1408; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.book-play-btn .icon { width: 15px; height: 15px; }

.book-info { padding-top: 9px; }
.book-title {
  font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.book-card-continue .book-title { -webkit-line-clamp: 1; }
.book-creator { font-size: 12px; color: var(--text-tertiary); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11.5px; color: var(--text-secondary); flex-wrap: wrap; }
.book-rating { display: inline-flex; align-items: center; gap: 3px; color: var(--gold); }
.book-dot { color: var(--text-tertiary); }
.book-price { margin-left: auto; font-weight: 700; color: var(--text-secondary); }
.book-price.is-free { color: var(--success); }

/* ---------- Quick preview ---------- */
.qp-body { display: flex; flex-direction: column; gap: 16px; }
.qp-cover {
  position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.qp-cover .book-cover-initial { font-size: 46px; }
.qp-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.qp-actions { display: flex; gap: 10px; margin-top: 18px; }
.qp-actions .btn-secondary { flex-shrink: 0; }

/* ---------- Search ---------- */
.search-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 50px 20px; }
.search-results-list { display: flex; flex-direction: column; }
.search-result-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.search-result-row:last-child { border-bottom: none; }
.search-result-row:hover { background: rgba(248,247,244,0.03); }
.search-result-cover {
  width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); color: rgba(248,247,244,0.35); font-size: 16px;
}

/* ============================================================
   BOOK DETAIL + SERIES + EPISODES (Part 3)
   Full-screen overlay above the app shell — not a nav destination,
   reached by tapping a book card / search result / series entry.
   ============================================================ */
.detail-overlay {
  position: fixed; inset: 0; background: var(--bg);
  z-index: 950; opacity: 0; pointer-events: none;
  transform: translateY(16px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
}
.detail-overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.detail-scroll { height: 100%; overflow-y: auto; }
.detail-topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: rgba(15,17,21,0.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.detail-topbar-actions { display: flex; gap: 8px; }

.detail-hero { padding: 22px 20px 8px; }
.detail-hero-cover { width: 100%; max-width: 220px; aspect-ratio: 3/4; margin: 0 auto 20px; }
.detail-hero-info { max-width: 640px; margin: 0 auto; }
.detail-link { color: var(--gold); cursor: pointer; }
.detail-link:hover { text-decoration: underline; }
.content-warning-tag {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 12px; color: var(--warning); background: var(--warning-soft);
  border-radius: var(--r-full); padding: 6px 12px;
}
.detail-section { max-width: 640px; margin: 34px auto 0; padding: 0 20px; }

/* Series */
.series-row { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.series-row::-webkit-scrollbar { display: none; }
.series-book-card { width: 128px; flex-shrink: 0; cursor: pointer; }
.series-book-card .book-cover { position: relative; }
.series-book-card.is-current .book-cover { box-shadow: 0 0 0 2px var(--gold); }
.series-book-card.is-locked { cursor: default; opacity: 0.7; }
.series-lock-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(6,7,9,0.5); border-radius: inherit; color: var(--text-secondary);
}

/* Episodes */
.episode-list { display: flex; flex-direction: column; }
.episode-row { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.episode-row:last-child { border-bottom: none; }
.episode-row:hover { background: rgba(248,247,244,0.03); }
.episode-row.is-locked { cursor: pointer; }
.ep-status { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-tertiary); }
.ep-status-done { color: var(--success); }
.ep-status-new { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); margin: 7px; }
.episode-info { flex: 1; min-width: 0; }
.episode-title { font-size: 14px; font-weight: 700; }
.episode-meta { display: flex; align-items: center; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.episode-meta .icon { width: 12px; height: 12px; }
.ep-free-tag { color: var(--success); font-weight: 700; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.3px; }
.episode-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.episode-actions .icon-btn { width: 34px; height: 34px; }
.episode-download-btn.is-active { color: var(--gold); border-color: var(--border-gold); }

.creator-about-row { display: flex; align-items: center; gap: 14px; }

/* Free sample + buy modals */
.sample-cover { width: 96px; aspect-ratio: 3/4; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; margin: 0 auto; position: relative; }
.sample-cover .book-cover-initial { font-size: 32px; color: rgba(248,247,244,0.5); font-family: var(--font-serif); }
.sample-transport { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.sample-ended { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); text-align: center; }
.buy-price { font-family: var(--font-serif); font-size: 32px; color: var(--gold); margin-top: 10px; }
#sampleModalBody, #buyModalBody { text-align: center; }

/* ============================================================
   STORY PLAYER / IMMERSIVE PLAYER (Part 4)
   Full-screen overlay, above Book Detail. Shared markup ids
   (#playerVisualStage, #playerCaptions, #playerBottomControls,
   #playerTabs/#playerTabsBody) are rendered identically by
   app.js on both layouts — mobile.css/desktop.css only place
   them differently (stacked vs. stage + side panel).
   ============================================================ */
.player-overlay {
  position: fixed; inset: 0; background: #08090B;
  z-index: 970; opacity: 0; pointer-events: none;
  transition: opacity var(--med) var(--ease);
  display: flex; flex-direction: column;
}
.player-overlay.is-open { opacity: 1; pointer-events: auto; }

.player-visual-stage {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.player-visual-stage::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,7,9,0.5) 0%, transparent 22%, transparent 68%, rgba(6,7,9,0.7) 100%);
  pointer-events: none;
}
.player-cover-face, .player-visual-marker {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; padding: 0 30px;
}
.player-visual-marker .icon { width: 56px; height: 56px; color: rgba(248,247,244,0.75); }
.player-quote {
  font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1.4;
  max-width: 480px; color: var(--text-primary);
}
.storylayer-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--gold); background: rgba(15,17,21,0.5); border: 1px solid var(--border-gold);
  padding: 5px 12px; border-radius: var(--r-full);
}

.player-captions {
  position: relative; z-index: 2; text-align: center; padding: 0 24px 10px;
  font-size: 14px; color: var(--text-primary); opacity: 0; transition: opacity var(--fast) var(--ease);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.player-captions.is-visible { opacity: 1; }

.player-top-controls {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
}
.player-glass {
  background: rgba(15,17,21,0.5); backdrop-filter: blur(8px);
  border: 1px solid rgba(248,247,244,0.14); color: var(--text-primary);
}
.player-glass:hover { border-color: var(--border-gold); }
.player-glass.is-active { color: var(--gold); border-color: var(--border-gold); background: var(--gold-soft); }

.player-mode-switch { display: flex; gap: 4px; background: rgba(15,17,21,0.5); backdrop-filter: blur(8px); border: 1px solid rgba(248,247,244,0.14); border-radius: var(--r-full); padding: 4px; }
.player-mode-btn { background: none; border: none; color: var(--text-secondary); padding: 7px 14px; border-radius: var(--r-full); font-size: 12.5px; font-weight: 700; }
.player-mode-btn.is-active { background: var(--gold); color: #1A1408; }

/* ============================================================
   READ + LISTEN MODE (Part 26)
   Synchronized transcript, persistent typography/theme controls,
   sentence seeking, and distraction-reducing reading focus.
   ============================================================ */
.player-mode-switch { overflow-x: auto; max-width: calc(100vw - 112px); scrollbar-width: none; }
.player-mode-switch::-webkit-scrollbar { display: none; }
.player-mode-btn { white-space: nowrap; }
.player-visual-stage.mode-read, .player-visual-stage.mode-read-listen { align-items: stretch; background: #101216; }
.player-visual-stage.mode-read::after, .player-visual-stage.mode-read-listen::after { display: none; }
.reading-shell { width: 100%; height: 100%; overflow-y: auto; color: #eee9df; background: #101216; }
.reading-shell.reading-theme-light { color: #29251f; background: #f6f0e5; }
.reading-toolbar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 6px; padding: 10px 14px; overflow-x: auto; background: rgba(16,18,22,.94); border-bottom: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(12px); scrollbar-width: none; }
.reading-theme-light .reading-toolbar { background: rgba(246,240,229,.95); border-bottom-color: rgba(41,37,31,.14); }
.reading-toolbar::-webkit-scrollbar { display: none; }
.reading-control { flex: 0 0 auto; min-height: 32px; border: 1px solid currentColor; border-radius: 999px; padding: 5px 10px; background: transparent; color: inherit; font-size: 11px; font-weight: 700; opacity: .76; }
.reading-control:hover, .reading-control.is-active { opacity: 1; border-color: var(--gold); color: var(--gold); }
.reading-control.reading-swatch::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--gold); }
.reading-control.swatch-mint::before { background: #61c7a7; }.reading-control.swatch-rose::before { background: #df8098; }.reading-control.swatch-blue::before { background: #77aee8; }
.reading-manuscript { max-width: 760px; margin: 0 auto; padding: 7vh 9% 30vh; font-size: var(--reader-size); line-height: var(--reader-line); }
.reading-manuscript.font-serif { font-family: var(--font-serif); }.reading-manuscript.font-sans { font-family: var(--font-sans); }
.reading-kicker { margin-bottom: 24px; font-family: var(--font-sans); color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.reading-sentence { display: inline; border: 0; padding: 2px 3px; margin: 0 -1px; border-radius: 5px; background: transparent; color: inherit; font: inherit; line-height: inherit; text-align: left; cursor: pointer; transition: opacity .2s ease, background .2s ease, color .2s ease; }
.reading-sentence:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.reading-sentence.is-current.highlight-gold { background: rgba(213,174,104,.32); }.reading-sentence.is-current.highlight-mint { background: rgba(97,199,167,.34); }.reading-sentence.is-current.highlight-rose { background: rgba(223,128,152,.34); }.reading-sentence.is-current.highlight-blue { background: rgba(119,174,232,.36); }
.reading-sentence.is-muted { opacity: .18; }.reading-sentence.is-current { opacity: 1; }
.reading-shell.is-focus .reading-manuscript { max-width: 620px; }
@media (max-width: 560px) { .reading-manuscript { padding: 5vh 24px 35vh; }.reading-toolbar { padding-inline: 10px; }.player-mode-btn { padding-inline: 10px; font-size: 11.5px; } }

/* ============================================================
   KIDS MODE + CLASSROOM MODE (Part 27)
   Brighter editorial accenting without juvenile styling.
   ============================================================ */
.learning-overlay { position:fixed; inset:0; z-index:968; overflow-y:auto; background:linear-gradient(150deg,#111827 0%,#171520 48%,#10211f 100%); opacity:0; pointer-events:none; transform:translateY(14px); transition:opacity var(--med) var(--ease),transform var(--med) var(--ease); }
.learning-overlay.is-open { opacity:1; pointer-events:auto; transform:none; }
.learning-header,.learning-tabs,.learning-body { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.learning-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:28px 0 18px; }
.learning-header h2 { margin-top:4px; font-size:28px; }.learning-tabs { display:flex; gap:8px; border-bottom:1px solid rgba(255,255,255,.12); }.learning-tabs .tab { padding:12px 16px; }
.learning-body { padding:22px 0 60px; }.learning-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:18px; }.learning-control-card,.learning-library-card { min-width:0; }
.learning-safety-list { display:flex; flex-direction:column; border-top:1px solid var(--border); margin-top:8px; }.learning-safety-row { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--border); cursor:pointer; }.learning-safety-row > span:first-child { flex:1; display:flex; flex-direction:column; }.learning-safety-row small { color:var(--text-tertiary); }.learning-safety-row input { position:absolute; opacity:0; }.safety-lock { min-width:38px; text-align:center; font-size:11px; font-weight:800; color:var(--text-tertiary); }.safety-lock.is-open { color:#7ee2bb; }
.learning-book-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:420px; overflow-y:auto; }.learning-book-row { display:flex; align-items:center; gap:10px; min-width:0; padding:9px; border:1px solid var(--border); border-radius:var(--r-md); background:rgba(255,255,255,.025); cursor:pointer; }.learning-book-row.is-approved { border-color:rgba(126,226,187,.4); background:rgba(126,226,187,.06); }.learning-book-cover { width:38px; height:48px; flex:0 0 auto; display:grid; place-items:center; border-radius:7px; font-family:var(--font-serif); font-weight:800; }.learning-book-info { min-width:0; flex:1; display:flex; flex-direction:column; }.learning-book-info strong,.learning-book-info span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.learning-book-info span { color:var(--text-tertiary); font-size:11px; }.learning-book-row input { accent-color:var(--gold); }.learning-safe-creators { margin-top:16px; }.learning-creator-pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.classroom-layout { display:flex; flex-direction:column; gap:18px; }.learning-class-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 22px; border:1px solid rgba(119,174,232,.32); border-radius:var(--r-lg); background:linear-gradient(120deg,rgba(119,174,232,.13),rgba(97,199,167,.08)); }.learning-class-hero h3 { font-size:24px; margin:4px 0; }.episode-check-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.episode-check-list .checkbox-row { margin:0; padding:9px; border:1px solid var(--border); border-radius:var(--r-sm); }.episode-check-list small { color:var(--text-tertiary); display:block; }.learning-questions { display:flex; flex-direction:column; gap:7px; }.learning-question { display:grid; grid-template-columns:24px 1fr auto; align-items:start; gap:8px; padding:10px; background:var(--surface); border-radius:var(--r-sm); }.learning-question > span { color:var(--gold); font-weight:800; }.learning-inline-form { display:flex; gap:8px; margin-top:10px; }.student-progress-list { display:flex; flex-direction:column; gap:13px; }.student-progress-row { display:grid; grid-template-columns:30px 70px 1fr 38px; align-items:center; gap:9px; }.student-progress-row strong { font-size:11px; text-align:right; }.class-discussion { max-width:100%; }.class-discussion-list { display:flex; flex-direction:column; gap:10px; }.class-message { display:flex; gap:10px; padding:11px; background:var(--surface); border-radius:var(--r-md); }.class-message p { margin-top:3px; color:var(--text-secondary); }
.kids-preview-shell { min-height:65vh; padding:4px 0 30px; }.kids-preview-top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:22px; border:1px solid rgba(97,199,167,.34); border-radius:var(--r-lg); background:linear-gradient(125deg,rgba(97,199,167,.14),rgba(119,174,232,.10)); }.kids-preview-top h3 { margin:5px 0; font-size:25px; }.kids-guardrail-row { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 20px; }.kids-guardrail-row span { display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.07); color:var(--text-secondary); font-size:11px; font-weight:700; }.kids-preview-books { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; }.kids-preview-book { display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:12px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--card); color:var(--text-primary); text-align:left; }.kids-preview-book:hover { border-color:rgba(97,199,167,.55); transform:translateY(-2px); }.kids-preview-cover { width:100%; aspect-ratio:4/5; display:grid; place-items:center; border-radius:var(--r-md); font-family:var(--font-serif); font-size:34px; font-weight:800; }.kids-preview-book small { color:var(--text-tertiary); margin-bottom:6px; }
@media(max-width:760px){.learning-header,.learning-tabs,.learning-body{width:calc(100% - 28px)}.learning-header{padding-top:18px}.learning-header h2{font-size:22px}.learning-grid{grid-template-columns:1fr}.learning-book-list,.episode-check-list{grid-template-columns:1fr}.learning-inline-form{align-items:stretch}.learning-inline-form .btn{flex:0 0 auto}.learning-class-hero{align-items:flex-start;flex-direction:column}.student-progress-row{grid-template-columns:30px 62px 1fr 34px}}
.feature-overlay{position:fixed;inset:0;z-index:969;overflow:auto;background:var(--bg);opacity:0;pointer-events:none;transform:translateY(12px);transition:.2s}.feature-overlay.is-open{opacity:1;pointer-events:auto;transform:none}.feature-header,.feature-body{width:min(1120px,calc(100% - 36px));margin:auto}.feature-header{display:flex;justify-content:space-between;align-items:center;padding:26px 0 18px}.feature-body{padding-bottom:60px;display:flex;flex-direction:column;gap:24px}.journey-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px;border:1px solid var(--border-gold);border-radius:var(--r-xl);background:linear-gradient(125deg,rgba(213,174,104,.13),rgba(100,57,75,.14))}.journey-hero h3{font-family:var(--font-serif);font-size:26px;margin:5px 0}.journey-ring{width:112px;height:112px;border-radius:50%;display:grid;place-content:center;text-align:center;border:9px solid rgba(213,174,104,.26);box-shadow:inset 0 0 0 2px var(--gold)}.journey-ring strong{font-size:24px}.journey-ring span{font-size:10px;color:var(--text-tertiary)}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.metric-card,.achievement-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px}.metric-card strong{display:block;font-family:var(--font-serif);font-size:26px;color:var(--gold)}.metric-card span{font-size:11px;color:var(--text-tertiary)}.achievement-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.achievement-card{display:flex;flex-direction:column;gap:8px;opacity:.62}.achievement-card.is-earned{opacity:1;border-color:var(--border-gold)}.achievement-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--surface);color:var(--gold)}.achievement-card small{color:var(--text-tertiary);min-height:30px}.creator-milestones{padding:20px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card)}.milestone-row{display:grid;grid-template-columns:170px 1fr 130px;gap:12px;align-items:center;padding:10px 0}.milestone-row strong{text-align:right;font-size:11px}@media(max-width:760px){.journey-hero{align-items:flex-start}.journey-ring{width:88px;height:88px;flex:0 0 auto}.metric-grid{grid-template-columns:repeat(2,1fr)}.achievement-grid{grid-template-columns:repeat(2,1fr)}.milestone-row{grid-template-columns:1fr 70px}.milestone-row .progress-bar{grid-column:1/-1;grid-row:2}.milestone-row strong{grid-column:2}.feature-header h2{font-size:22px}}

.player-bottom-controls { position: relative; z-index: 3; padding: 6px 20px 22px; }
.player-titles { text-align: center; margin-bottom: 10px; }
.player-ep-title { font-size: 15px; font-weight: 700; }
.player-scrubber-row { display: flex; align-items: center; gap: 10px; }
.player-time { font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; width: 34px; flex-shrink: 0; }
.player-time:last-child { text-align: right; }
.player-scrubber {
  flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--gold) var(--pct, 0%), rgba(248,247,244,0.18) 0);
  outline: none; cursor: pointer;
}
.player-scrubber::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(213,174,104,0.25); }
.player-scrubber::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--gold); border: none; }
.player-demo-note { text-align: center; margin-top: 6px; }

.player-transport { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 16px; }
.player-transport .icon-btn { width: 44px; height: 44px; position: relative; }
.player-play-btn { width: 62px; height: 62px; border-radius: 50%; }
.player-play-btn .icon { width: 26px; height: 26px; }
.player-skip-label { position: absolute; bottom: -2px; right: -2px; font-size: 8.5px; font-weight: 800; background: var(--bg); border-radius: 50%; width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; }

.player-secondary-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.player-secondary-row .icon-btn { width: 36px; height: 36px; font-size: 11px; font-weight: 700; position: relative; }
.player-volume { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.player-volume-slider { width: 64px; height: 3px; }
.sleep-badge { position: absolute; top: -4px; right: -4px; background: var(--gold); color: #1A1408; font-size: 9px; font-weight: 800; border-radius: 50%; width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; }

.reaction-bar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.reaction-btn { background: rgba(15,17,21,0.5); border: 1px solid rgba(248,247,244,0.14); border-radius: 50%; width: 38px; height: 38px; font-size: 17px; transition: transform var(--fast) var(--ease); }
.reaction-btn.is-bumped { transform: scale(1.35); }

.sleep-menu {
  position: fixed; z-index: 1200; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; min-width: 150px;
  opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.sleep-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sleep-menu-item { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text-primary); padding: 9px 12px; border-radius: var(--r-sm); font-size: 13px; }
.sleep-menu-item:hover { background: rgba(248,247,244,0.06); }

.player-tab-list { display: flex; flex-direction: column; }
.player-tab-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--border); background: none; border-left: none; border-right: none; border-top: none; color: var(--text-secondary); text-align: left; font-size: 13.5px; }
.player-tab-row:last-child { border-bottom: none; }
.player-tab-row.is-active { color: var(--gold); }
.player-tab-row .icon { vertical-align: -3px; margin-right: 4px; }
.player-notes-input { padding-top: 4px; }
.player-note-item { padding: 10px 4px; border-bottom: 1px solid var(--border); }
.player-note-item:last-child { border-bottom: none; }

/* Mini player (shared visual component; positioning is per-layout) */
.mini-player {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; position: relative;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  cursor: pointer;
}
.mini-player-cover { width: 40px; height: 40px; border-radius: 9px; background: linear-gradient(150deg, var(--plum), #24151C); flex-shrink: 0; background-size: cover; }
.mini-player-info { flex: 1; min-width: 0; }
.mini-player-title { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-player-sub { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-player-controls { display: flex; align-items: center; gap: 4px; }
.mini-player-controls .icon-btn { width: 34px; height: 34px; background: transparent; border: none; }
.mini-player-progress { position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--border); border-radius: var(--r-full); overflow: hidden; }
.mini-player-progress > div { height: 100%; background: var(--gold); }

/* ============================================================
   STORYLAYERS™ AVAILABILITY INDICATOR (Part 5)
   ============================================================ */
.storylayer-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; }
.storylayer-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(213,174,104,0.08); border: 1px solid var(--border-gold); color: var(--gold);
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-full);
}
.storylayer-chip .icon { width: 13px; height: 13px; }

/* ============================================================
   COMMENTS + SPOILER SYSTEM (Part 6)
   Shared by Book Detail (book-level) and the Story Player's
   Comments tab (episode-level) via the same rendering engine.
   ============================================================ */
.comments-composer .textarea { margin-bottom: 0; }
.comment-row { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.comment-row:last-child { border-bottom: none; }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.comment-author { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.comment-text { margin-top: 4px; }
.mention { color: var(--gold); font-weight: 600; }
.comment-actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.comment-actions .btn-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-tertiary); }
.comment-actions .btn-link.is-active { color: var(--gold); }
.comment-actions .btn-link:disabled { opacity: 0.5; pointer-events: none; }
.pinned-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--gold); }
.pinned-tag .icon { width: 12px; height: 12px; }
.spoiler-blur { position: relative; }
.spoiler-blur .comment-text { filter: blur(6px); user-select: none; pointer-events: none; }
.spoiler-blur .js-reveal-spoiler { margin-top: 8px; }
.reply-composer { margin-top: 10px; padding-left: 4px; }
.reply-composer.hidden { display: none; }

/* ============================================================
   REVIEWS + RATINGS (Part 19)
   Rendered into Book Detail below the episode list, reusing
   .comment-row/.comment-body/.comment-meta/.spoiler-blur (Part 6)
   for each review row and .revenue-bar-row/.progress-bar
   (Part 12) for the 4-dimension sub-rating breakdown — only the
   star-row/star-picker components below are genuinely new.
   ============================================================ */
.review-summary-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; }
.review-summary-score { min-width: 140px; }
.review-summary-bars { flex: 1; min-width: 220px; }
.star-row { position: relative; display: inline-flex; }
.star-row-bg, .star-row-fg { display: flex; gap: 2px; }
.star-row-bg { color: var(--border-strong); }
.star-row-fg { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--gold); }
.star-picker { display: flex; gap: 6px; }
.star-picker-btn { background: none; border: none; padding: 2px; margin: 0; cursor: pointer; color: var(--border-strong); line-height: 0; transition: color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.star-picker-btn:hover { color: var(--gold-strong); transform: scale(1.08); }
.star-picker-btn.is-filled { color: var(--gold); }
.star-picker-btn .icon { width: 22px; height: 22px; }

/* ============================================================
   LIBRARY — SAVED MOMENTS + NOTES + COLLECTIONS (Part 5)
   ============================================================ */
.library-tabs { margin-bottom: 18px; }
.moments-grid, .collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.moment-card, .note-card, .collection-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; }
.moment-quote { font-family: var(--font-serif); font-style: italic; font-size: 13.5px; color: var(--text-secondary); margin-top: 10px; }
.moment-card .textarea { margin-top: 10px; margin-bottom: 0; min-height: 60px; }
.notes-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.note-card { margin-bottom: 12px; }
.note-card .js-note-edit-input { margin-top: 6px; margin-bottom: 0; }
.collection-card { display: flex; flex-direction: column; }

/* ============================================================
   COMMUNITY — TALK ABOUT IT (Part 6)
   ============================================================ */
.thread-list { display: flex; flex-direction: column; gap: 12px; }
.thread-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; cursor: pointer; transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.thread-card:hover { border-color: var(--border-gold); transform: translateY(-1px); }
.thread-card.is-author-question { border-color: var(--border-gold); background: linear-gradient(180deg, rgba(213,174,104,0.06), var(--card) 60%); }
.thread-topic-badge {
  display: inline-flex; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  color: var(--text-secondary); background: rgba(248,247,244,0.08); padding: 3px 9px; border-radius: var(--r-full);
}

/* ============================================================
   LISTENING CIRCLES / BOOK CLUBS (Part 7)
   Lives inside the Community screen, alongside Talk About It.
   ============================================================ */
.community-section-switch { display: flex; gap: 8px; }
.community-section-switch .pill-tab { padding: 9px 18px; }
.member-avatar-stack { display: flex; align-items: center; }
.member-avatar-stack .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--card); }
.member-avatar-stack .avatar:first-child { margin-left: 0; }
.circle-card { display: flex; flex-direction: column; }
.chat-message { display: flex; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.chat-message:last-child { border-bottom: none; }
.chat-message.is-shared-note .body-sm { font-style: italic; color: var(--text-secondary); }
.chat-composer .textarea { margin-bottom: 0; }
.schedule-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.schedule-row:last-child { border-bottom: none; }
.poll-option {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: 10px 14px; margin-bottom: 8px; overflow: hidden; text-align: left;
}
.poll-option:last-of-type { margin-bottom: 0; }
.poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(213,174,104,0.14); transition: width var(--slow) var(--ease); z-index: 0; }
.poll-option.is-voted .poll-bar { background: rgba(213,174,104,0.28); }
.poll-option.is-voted { border-color: var(--border-gold); }
.poll-option-label { position: relative; z-index: 1; font-size: 13.5px; color: var(--text-primary); }
.poll-option-pct { position: relative; z-index: 1; font-size: 12px; color: var(--text-secondary); font-weight: 700; }
.poll-option:disabled { cursor: default; }

/* ============================================================
   CREATOR STUDIO — DASHBOARD + YOUR BOOKS + CREATOR PROFILE (Part 8)
   Dashboard/Your Books live inside the Creator Studio nav
   (Switch Mode) and always describe the app's one mock creator
   account. Creator Profile is a separate full-screen overlay,
   reachable for any of the 8 creators from a book's author link.
   ============================================================ */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.stat-card { display: flex; flex-direction: column; }
.stat-card-icon {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full); background: rgba(213,174,104,0.1); color: var(--gold); margin-bottom: 10px;
}
.stat-card-value { font-family: var(--font-serif); font-size: 24px; color: var(--text-primary); line-height: 1.2; }
.stat-card-delta { font-size: 11.5px; color: var(--success); margin-top: 6px; }

.creator-books-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.creator-book-card { display: flex; flex-direction: column; }
.creator-book-top { display: flex; gap: 12px; }
.creator-book-cover {
  width: 56px; height: 56px; border-radius: var(--r-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.creator-book-cover .book-cover-initial { font-size: 20px; color: rgba(248,247,244,0.5); font-family: var(--font-serif); }
.creator-book-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.creator-book-stats > div { display: flex; flex-direction: column; gap: 2px; }
.creator-stat-value { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.creator-book-actions { display: flex; gap: 8px; margin-top: 14px; }
.creator-book-actions .btn { flex: 1; }

/* Creator Profile overlay — same mechanics as .detail-overlay, one
   level above it (950 < 960 < 970) so it can open from Book Detail
   and still sit below the Story Player. */
.creator-overlay {
  position: fixed; inset: 0; background: var(--bg);
  z-index: 960; opacity: 0; pointer-events: none;
  transform: translateY(16px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
}
.creator-overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.creator-profile-banner { width: 100%; height: 120px; }
.creator-profile-header {
  display: flex; align-items: flex-end; gap: 14px;
  max-width: 640px; margin: -34px auto 0; padding: 0 20px; position: relative;
}
.creator-profile-avatar { box-shadow: 0 0 0 4px var(--bg); flex-shrink: 0; }
.creator-profile-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  max-width: 640px; margin: 22px auto 0; padding: 16px 20px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.creator-profile-stats > div { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.creator-profile-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.creator-link-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(248,247,244,0.05); border: 1px solid var(--border-strong); color: var(--text-secondary);
  font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-full); cursor: pointer;
}
.creator-link-chip:hover { border-color: var(--border-gold); color: var(--text-primary); }
.creator-link-chip .icon { width: 13px; height: 13px; }

/* ============================================================
   TALENT MARKETPLACE (Part 20)
   Talent Profile overlay reuses .creator-profile-banner/-header/
   -avatar/-stats above wholesale (same shape: banner, avatar,
   stat row) — only the outer overlay class and grid/card pieces
   below are new. z-index 961 sits one above Creator Profile (960)
   since both are opened directly from a regular [data-view] screen
   (Marketplace, like Creator Profile's own book-link entry point)
   rather than stacking under one another.
   ============================================================ */
.talent-overlay {
  position: fixed; inset: 0; background: var(--bg);
  z-index: 961; opacity: 0; pointer-events: none;
  transform: translateY(16px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
}
.talent-overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }

.talent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.talent-card { display: flex; flex-direction: column; gap: 10px; }
.talent-card-head { display: flex; align-items: center; gap: 12px; }
.talent-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.talent-portfolio-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.talent-portfolio-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(248,247,244,0.05); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 4px 9px; font-size: 11.5px; color: var(--text-secondary);
}
.talent-portfolio-chip .icon { width: 12px; height: 12px; }
.talent-price { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.talent-pricing-tier { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.talent-pricing-tier:last-child { border-bottom: none; padding-bottom: 0; }
.talent-pricing-tier:first-child { padding-top: 0; }

/* ============================================================
   CREATE / PUBLISH BOOK WIZARD (Part 9)
   12-step flow rendered into #createScreen. No real file/image
   upload or payment processing exists in this no-backend
   prototype — audio upload, processing, and the waveform are
   simulated; publishing writes a demo record to localStorage,
   merged into Your Books/Dashboard (Part 8).
   ============================================================ */
.wizard-tracker { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 20px; }
.wizard-tracker::-webkit-scrollbar { display: none; }
.wizard-step-dot {
  width: 30px; height: 30px; min-width: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1.5px solid var(--border-strong);
  color: var(--text-tertiary); font-size: 12.5px; font-weight: 700;
  transition: all var(--fast) var(--ease);
}
.wizard-step-dot.is-current { border-color: var(--gold); color: var(--gold); background: rgba(213,174,104,0.1); }
.wizard-step-dot.is-done { border-color: var(--success); background: var(--success-soft); color: var(--success); cursor: pointer; }
.wizard-step-dot .icon { width: 14px; height: 14px; }

.wizard-body { max-width: 640px; }
.wizard-step-title { font-size: 19px; margin-bottom: 4px; }
.wizard-footer { display: flex; align-items: center; justify-content: space-between; max-width: 640px; margin-top: 20px; }

.wizard-option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.wizard-option-card {
  text-align: left; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; transition: all var(--fast) var(--ease);
}
.wizard-option-card.is-selected { border-color: var(--gold); background: var(--card-hover); box-shadow: 0 0 0 1px var(--gold) inset; }
.wizard-option-icon { width: 36px; height: 36px; border-radius: 12px; background: var(--surface); color: var(--gold); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.wizard-option-title { font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.wizard-option-desc { font-size: 12px; color: var(--text-tertiary); line-height: 1.4; }

.wizard-cover-layout { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.wizard-cover-preview { width: 160px; aspect-ratio: 3/4; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; }
.wizard-cover-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; max-width: 320px; }
.wizard-cover-swatch { aspect-ratio: 1/1; border-radius: var(--r-md); border: 2px solid transparent; display: flex; align-items: center; justify-content: center; color: #fff; }
.wizard-cover-swatch.is-selected { border-color: var(--gold); }

.wizard-upload-box {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: var(--surface); border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg);
  padding: 16px; text-align: left; color: var(--text-secondary);
}
.wizard-upload-box.is-active, .wizard-upload-box.is-done { border-style: solid; }
.wizard-upload-box.is-done { border-color: var(--border-gold); }
.wizard-upload-box .icon { color: var(--gold); flex-shrink: 0; }
.wizard-upload-box-done { flex-direction: column; align-items: stretch; gap: 12px; }
.wizard-upload-done-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wizard-upload-meta { flex: 1; min-width: 0; }
.wizard-upload-filename { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wizard-waveform { display: flex; align-items: flex-end; gap: 2px; height: 32px; width: 100%; }
.wizard-waveform span { width: 3px; background: var(--gold); border-radius: 2px; opacity: 0.7; }

.wizard-episode-row { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; margin-bottom: 14px; }
.wizard-episode-row-head { margin-bottom: 10px; }
.wizard-episode-row .wizard-upload-box { margin-top: 4px; }

.wizard-review-hero { display: flex; gap: 18px; align-items: flex-start; }
.wizard-review-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.wizard-success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 0; }
.wizard-success-icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--success-soft); color: var(--success);
  display: flex; align-items: center; justify-content: center;
}
.wizard-success-actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }

.icon-spin { animation: icon-spin 900ms linear infinite; }
@keyframes icon-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------
   VISUAL TIMELINE EDITOR (Part 10)
   Full-screen overlay, z-index 965 — sits above Creator Profile
   (960) since it's opened from Your Books, below the Story Player
   (970) since a creator previewing their own player shouldn't be
   blocked by it. Desktop renders a real multi-track drag timeline;
   mobile renders a genuinely different, simplified scene-list
   editor (see isMobileShell() in app.js) rather than a reflowed
   copy of the desktop grid.
--------------------------------------------------------- */
.timeline-overlay {
  position: fixed; inset: 0; background: var(--bg);
  z-index: 965; opacity: 0; pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
  display: flex; flex-direction: column;
}
.timeline-overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.timeline-editor-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
}
.timeline-editor-heading { flex: 1; min-width: 0; }
.timeline-editor-title { font-family: var(--font-serif); font-size: 17px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timeline-editor-topbar-actions { display: flex; align-items: center; gap: 10px; }
.timeline-editor-body { flex: 1; overflow-y: auto; padding: 20px; }

/* Desktop multi-track timeline */
.tl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.tl-transport { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tl-clock { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 13px; min-width: 92px; }
.tl-zoom { display: flex; align-items: center; gap: 6px; }

.tl-tracks { border: 1px solid var(--border); border-radius: var(--r-md); overflow-x: auto; overflow-y: hidden; background: var(--surface); }
.tl-tracks-inner { position: relative; }
.tl-ruler-row { display: flex; height: 34px; border-bottom: 1px solid var(--border); }
.tl-track-label-col { width: 148px; flex-shrink: 0; position: sticky; left: 0; z-index: 3; background: var(--card); border-right: 1px solid var(--border); }
.tl-ruler-ticks { position: relative; flex-shrink: 0; }
.tl-ruler-tick { position: absolute; top: 0; bottom: 0; padding-left: 6px; font-size: 11px; color: var(--text-tertiary); border-left: 1px solid var(--border); display: flex; align-items: center; }
.tl-track-row { display: flex; border-bottom: 1px solid var(--border); }
.tl-track-row:last-child { border-bottom: none; }
.tl-track-label { width: 148px; flex-shrink: 0; position: sticky; left: 0; z-index: 3; background: var(--card); border-right: 1px solid var(--border); padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tl-track-label-name { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.tl-track-lane {
  position: relative; flex-shrink: 0; min-height: 56px;
  background: repeating-linear-gradient(to right, transparent, transparent 59px, var(--border) 59px, var(--border) 60px);
}
.tl-clip {
  position: absolute; top: 8px; bottom: 8px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); cursor: grab; padding: 6px 10px;
  overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  color: var(--text-primary);
}
.tl-clip:active { cursor: grabbing; }
.tl-clip.is-selected { box-shadow: 0 0 0 2px var(--gold); }
.tl-clip-label { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-clip-time { font-size: 10px; color: var(--text-secondary); white-space: nowrap; }
.tl-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); z-index: 4; pointer-events: none; box-shadow: 0 0 8px var(--gold-soft); }

.tl-inspector { margin-top: 20px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px; background: var(--card); }
.tl-inspector-empty { color: var(--text-tertiary); font-size: 13px; text-align: center; padding: 20px 0; }
.tl-inspector-row { margin-bottom: 14px; }
.tl-inspector-row label { display: block; font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.tl-inspector-time-row { display: flex; gap: 12px; }
.tl-inspector-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* Preview strip — shared markup between desktop toolbar and mobile top card */
.tl-preview-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); margin-bottom: 18px; }
.tl-preview-info { flex: 1; min-width: 0; }
.tl-preview-label { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-preview-sub { margin-top: 2px; }

/* Mobile simplified scene editor */
.tl-scene-track { border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 12px; overflow: hidden; background: var(--surface); }
.tl-scene-track > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; cursor: pointer; background: var(--card); }
.tl-scene-track > summary::-webkit-details-marker { display: none; }
.tl-scene-track-name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.tl-scene-chevron { color: var(--text-tertiary); transition: transform var(--fast) var(--ease); }
.tl-scene-track[open] .tl-scene-chevron { transform: rotate(180deg); }
.tl-scene-list { padding: 10px 12px; }
.tl-scene-card { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px; }
.tl-scene-card:last-child { margin-bottom: 0; }
.tl-scene-card-top { display: flex; align-items: center; gap: 8px; }
.tl-scene-card-info { flex: 1; min-width: 0; }
.tl-scene-card-title { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-scene-card-time { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
.tl-scene-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
.tl-scene-card-actions .icon-btn[disabled] { opacity: 0.35; pointer-events: none; }
.tl-scene-edit-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.tl-scene-edit-time-row { display: flex; gap: 10px; }

/* ---------------------------------------------------------
   CREATOR PRICING + MONETIZATION (Part 11)
--------------------------------------------------------- */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.plan-card { position: relative; display: flex; flex-direction: column; padding: 22px; }
.plan-card.is-current { border-color: var(--border-gold); box-shadow: 0 0 0 1px var(--border-gold); }
.plan-card-badge { position: absolute; top: 18px; right: 18px; }
.plan-card-name { font-family: var(--font-serif); font-size: 19px; color: var(--text-primary); }
.plan-card-price { font-size: 26px; font-weight: 700; color: var(--text-primary); margin-top: 6px; }
.plan-card-features { display: flex; flex-direction: column; gap: 9px; margin: 18px 0 22px; flex: 1; }
.plan-feature-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.plan-feature-row .icon { color: var(--success); margin-top: 1px; flex-shrink: 0; }

.pricing-model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pricing-model-card { padding: 16px; }

.fee-breakdown { border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 18px; background: var(--card); max-width: 360px; }
.fee-breakdown-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; font-size: 13.5px; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.fee-breakdown-row:last-child { border-bottom: none; }
.fee-breakdown-total { color: var(--text-primary); font-weight: 700; font-size: 15px; }
.fee-breakdown-total span:last-child { color: var(--success); }

/* ---------------------------------------------------------
   EARNINGS + PAYOUTS + FINANCIAL DASHBOARD (Part 12)
   Reuses .dashboard-grid/.stat-card (Part 8) for the 8 balance/
   revenue stat cards and .pill-tabs (Part 8's Your Books filter)
   for the transaction status filter. .table/.table-scroll are new
   in this part — no table component existed anywhere yet — built
   for reuse by any future part that needs a real data table.
--------------------------------------------------------- */
.payout-methods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.payout-method-card { display: flex; align-items: center; gap: 14px; }
.payout-method-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-full);
  background: rgba(213,174,104,0.1); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
}

.revenue-chart-card { padding: 20px 16px 10px; }
.revenue-chart-svg { width: 100%; height: auto; display: block; }

.revenue-breakdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.revenue-bar-row { margin-bottom: 14px; }
.revenue-bar-row:last-child { margin-bottom: 0; }
.revenue-bar-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }

/* ---------- Table (new component, Part 12) ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.table { width: 100%; border-collapse: collapse; min-width: 640px; }
.table th, .table td { text-align: left; padding: 12px 14px; font-size: 13px; white-space: nowrap; border-bottom: 1px solid var(--border); }
.table th { color: var(--text-tertiary); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; background: var(--surface); }
.table td { color: var(--text-secondary); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--card-hover); }

/* ---------------------------------------------------------
   COLLABORATION + TEAM PERMISSIONS (Part 13)
   Roster cards, revenue-split rows, and the credits list all
   reuse .card/.avatar/.badge/.pill-tabs/.field/.select/.input —
   only the layout wrappers below are new.
--------------------------------------------------------- */
.collab-plan-note {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 24px;
  border-radius: var(--r-lg); border: 1px solid var(--border-gold);
  background: linear-gradient(180deg, rgba(213,174,104,0.08), var(--card) 70%);
}
.collab-card-head { display: flex; align-items: flex-start; gap: 12px; }
.revenue-split-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.revenue-split-row:not(.revenue-split-total-row) { border-bottom: 1px solid var(--border); }
.revenue-split-total-row { border-top: 1px solid var(--border-strong); padding-top: 14px; margin-top: 4px; }
.credits-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.credits-row:last-child { border-bottom: none; }

/* ---------------------------------------------------------
   CLIP STUDIO / SOCIAL SHORTS (Part 14)
   The episode picker and saved-clips grid reuse .list-row/
   .creator-book-cover; the caption/subtitle style pickers and the
   background swatch grid reuse the wizard's .wizard-option-card/
   .wizard-cover-swatch pattern exactly; the toggles reuse
   .checkbox-row. Only the column layout wrappers, the transcript/
   suggestion panels, and the vertical 9:16 preview stage itself
   are new components.
--------------------------------------------------------- */
.clip-saved-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.clip-saved-card { display: flex; align-items: center; gap: 12px; }
.clip-saved-cover { width: 40px; height: 40px; border-radius: var(--r-md); flex-shrink: 0; }

.clip-episode-list { display: flex; flex-direction: column; gap: 8px; }
.clip-episode-row { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; background: var(--card); transition: border-color var(--fast); }
.clip-episode-row:hover { border-color: var(--border-gold); }

.clip-studio-grid { display: grid; grid-template-columns: 1.15fr 1fr 340px; gap: 18px; align-items: start; }
.clip-col { min-width: 0; }
.clip-col-preview { position: sticky; top: 0; }

.clip-suggestion-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.clip-suggestion-card { min-width: 220px; max-width: 240px; flex-shrink: 0; }
.clip-suggestion-card.is-selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.clip-suggestion-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 46px; }
.clip-score-row { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.clip-score-badge { display: grid; grid-template-columns: 52px 1fr 24px; align-items: center; gap: 6px; }
.clip-score-label { font-size: 10.5px; color: var(--text-tertiary); }
.clip-score-val { font-size: 10.5px; color: var(--text-secondary); text-align: right; }

.clip-transcript-panel { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.clip-transcript-line { display: flex; gap: 10px; text-align: left; width: 100%; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid transparent; }
.clip-transcript-line:hover { background: var(--card-hover); }
.clip-transcript-line.is-selected { background: var(--gold-soft); border-color: var(--border-gold); }
.clip-transcript-time { flex-shrink: 0; font-size: 11.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; width: 34px; }
.clip-transcript-text { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.clip-transcript-line.is-selected .clip-transcript-text { color: var(--text-primary); }

.clip-preview-card { display: flex; flex-direction: column; align-items: center; }
.clip-stage {
  width: 100%; max-width: 240px; aspect-ratio: 9/16; border-radius: var(--r-lg);
  position: relative; overflow: hidden; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; justify-content: space-between; padding: 12px;
}
.clip-stage-format-tag { align-self: flex-start; font-size: 9.5px; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(248,247,244,0.75); background: rgba(0,0,0,0.35); padding: 4px 8px; border-radius: var(--r-full); }
.clip-stage-cover-badge { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.clip-stage-cover-badge .book-cover-initial { font-size: 13px; color: rgba(248,247,244,0.75); font-family: var(--font-serif); }
.clip-stage-book-title { font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); max-width: 70%; }

.clip-stage-caption-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.clip-stage-caption-top { justify-content: flex-start; padding-top: 10px; }
.clip-stage-caption-middle { justify-content: center; }
.clip-stage-caption-bottom { justify-content: flex-end; padding-bottom: 10px; }
.clip-stage-caption { font-size: 13px; font-weight: 700; line-height: 1.35; color: #fff; }
.clip-caption-bold-center { text-align: center; font-size: 15px; }
.clip-caption-karaoke { text-align: center; font-size: 14px; color: var(--gold-strong); }
.clip-caption-minimal-lower { text-align: left; font-size: 12px; font-weight: 600; }
.clip-subtitle-clean { text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.clip-subtitle-boxed { background: rgba(0,0,0,0.55); padding: 8px 10px; border-radius: var(--r-sm); display: inline-block; }
.clip-subtitle-outlined { -webkit-text-stroke: 0.6px rgba(0,0,0,0.8); text-shadow: 0 0 6px rgba(0,0,0,0.5); }

.clip-waveform { display: flex; align-items: flex-end; gap: 2px; height: 26px; margin: 8px 0; flex-shrink: 0; }
.clip-waveform span { width: 3px; background: rgba(255,255,255,0.55); border-radius: 2px; display: block; }

.clip-stage-bottom { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.clip-stage-creator { font-size: 10.5px; color: rgba(248,247,244,0.7); }
.clip-stage-cta { font-size: 10.5px; font-weight: 700; color: var(--gold-strong); background: rgba(0,0,0,0.4); padding: 6px 8px; border-radius: var(--r-sm); }

@media (max-width: 980px) {
  .clip-studio-grid { grid-template-columns: 1fr; }
  .clip-col-preview { position: static; }
}

/* ---------- Dividers ---------- */
.divider { height: 1px; background: var(--border); border: none; margin: 20px 0; }
.divider-or { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--text-tertiary); font-size: 12.5px; }
.divider-or::before, .divider-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------- Section headers (shared by list sections) ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.section-head h2 { font-size: 19px; }
.section-head .see-all { font-size: 12.5px; font-weight: 600; color: var(--gold); }

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

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

/* ---------------------------------------------------------
   MARKETING CENTER (Part 15)
   .marketing-grid/.marketing-col mirror Part 14's
   .clip-studio-grid/.clip-col shrink-to-fit fix (min-width:0)
   but as a 2-column layout (options + sticky preview) since
   Trailer/Audiogram/Social don't need Clip Studio's 3rd column.
   .marketing-section-switch reuses Part 6/7's Community pill-
   switch pattern exactly. The Launch Checklist, Trailer stage,
   Audiogram stage, and Social Asset stage are new, deliberately
   distinct compositions: Launch is a plain checklist; Trailer is
   a landscape "audio player" card; Audiogram is a square,
   waveform-dominant card; Social Assets are a 4:5 "post" card —
   none of the three generator stages share Clip Studio's vertical
   9:16 shape or each other's aspect ratio/layout hierarchy.
--------------------------------------------------------- */
.marketing-section-switch { margin-bottom: 4px; }
.marketing-section-switch .pill-tab { padding: 9px 16px; }

.marketing-grid { display: grid; grid-template-columns: 1.2fr 380px; gap: 18px; align-items: start; }
.marketing-col { min-width: 0; }
.marketing-col-preview { position: sticky; top: 0; }
@media (max-width: 900px) {
  .marketing-grid { grid-template-columns: 1fr; }
  .marketing-col-preview { position: static; }
}

.launch-check-list { display: flex; flex-direction: column; }
.launch-check-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.launch-check-row:last-child { border-bottom: none; }
.launch-check-icon {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text-tertiary);
}
.launch-check-row.is-done .launch-check-icon { background: var(--success-soft); color: var(--success); }

/* Trailer — landscape audio-player-style composition */
.trailer-stage {
  width: 100%; border-radius: var(--r-lg); position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px; padding: 18px; box-shadow: var(--shadow-md);
}
.trailer-stage-cover { width: 84px; height: 84px; border-radius: var(--r-md); flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.trailer-stage-cover .book-cover-initial { font-family: var(--font-serif); color: rgba(248,247,244,0.75); }
.trailer-stage-body { flex: 1; min-width: 0; padding-right: 64px; }
.trailer-stage-title { font-size: 14px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.trailer-stage-quote { font-size: 12.5px; font-style: italic; color: rgba(248,247,244,0.9); margin-top: 6px; line-height: 1.4; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.trailer-stage-waveform { display: flex; align-items: flex-end; gap: 2px; height: 30px; margin-top: 10px; }
.trailer-stage-waveform span { width: 3px; background: rgba(255,255,255,0.55); border-radius: 2px; display: block; }
.trailer-stage-cta { font-size: 11px; font-weight: 700; color: var(--gold-strong); background: rgba(0,0,0,0.4); padding: 6px 10px; border-radius: var(--r-sm); margin-top: 10px; display: inline-block; }
.trailer-stage-length-tag { position: absolute; top: 12px; right: 12px; font-size: 9.5px; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(248,247,244,0.75); background: rgba(0,0,0,0.35); padding: 4px 8px; border-radius: var(--r-full); }

/* Audiogram — square, waveform-dominant composition */
.audiogram-stage {
  width: 100%; max-width: 280px; aspect-ratio: 1/1; border-radius: var(--r-lg); position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; padding: 16px; box-shadow: var(--shadow-md);
}
.audiogram-top { display: flex; align-items: center; gap: 8px; }
.audiogram-cover-corner { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.audiogram-cover-corner .book-cover-initial { font-family: var(--font-serif); color: rgba(248,247,244,0.75); }
.audiogram-book-title { font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.audiogram-waveform-big { display: flex; align-items: center; justify-content: center; gap: 3px; flex: 1; }
.audiogram-waveform-big span { width: 4px; background: rgba(255,255,255,0.6); border-radius: 3px; display: block; }
.audiogram-caption { font-size: 13px; font-weight: 700; line-height: 1.35; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.7); text-align: center; }
.audiogram-cta { font-size: 10px; font-weight: 700; color: var(--gold-strong); background: rgba(0,0,0,0.4); padding: 6px 8px; border-radius: var(--r-sm); text-align: center; margin-top: 10px; }

/* Social Assets — 4:5 "post" composition, template gallery */
.social-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.social-template-card { text-align: center; align-items: center; }
.social-asset-stage {
  width: 100%; max-width: 300px; aspect-ratio: 4/5; border-radius: var(--r-lg); position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 24px; gap: 12px; box-shadow: var(--shadow-md);
}
.social-asset-tag { position: absolute; top: 12px; left: 12px; font-size: 9.5px; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(248,247,244,0.75); background: rgba(0,0,0,0.35); padding: 4px 8px; border-radius: var(--r-full); }
.social-asset-icon { color: #fff; opacity: 0.85; }
.social-asset-headline { font-family: var(--font-serif); font-size: 17px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.social-asset-body { font-size: 13px; color: rgba(248,247,244,0.92); line-height: 1.45; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.social-asset-cta { font-size: 11px; font-weight: 700; color: var(--gold-strong); background: rgba(0,0,0,0.4); padding: 6px 10px; border-radius: var(--r-sm); margin-top: 4px; }

/* ---------------------------------------------------------
   PROMOTE / ADVERTISING (Part 16)
   The 5th Marketing Center pill-tab, sitting alongside Launch
   Center/Trailer/Audiogram/Social Assets. Reuses .marketing-grid/
   .marketing-col-preview (Part 15) for the New Campaign form + its
   sticky Estimate panel, and .table/.table-scroll (Part 12) for
   Campaign Analytics — only the small two-stat estimate mini-grid
   below is genuinely new.
--------------------------------------------------------- */
.promote-estimate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.promote-estimate-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--r-md); background: var(--surface); text-align: center; }
.promote-estimate-value { font-family: var(--font-serif); font-size: 22px; color: var(--text-primary); }

/* ---------------------------------------------------------
   ANALYTICS DEEP DIVE (Part 18)
   Reuses .dashboard-grid-less section-head/.card/.progress-bar/
   .revenue-bar-row/.list-row/.table/.table-scroll exactly as
   Parts 12/13/15 already established for every section except
   two genuinely new small components: the Drop-Off Heatmap's
   segmented intensity strip, and the Reaction Timeline's per-
   emoji sparkline row.
--------------------------------------------------------- */
.heat-strip { display: flex; gap: 1.5px; height: 40px; border-radius: var(--r-sm); overflow: hidden; }
.heat-seg { flex: 1; height: 100%; min-width: 1px; }

.reaction-timeline-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.reaction-timeline-row:last-child { margin-bottom: 0; }
.reaction-spark { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.reaction-spark-bar { flex: 1; min-height: 3px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--gold-strong), var(--gold)); }

/* ============================================================
   CHARACTERS + WORLDS + MAPS (Part 21)
   `.lore-teaser-row` is the small preview row inside Book
   Detail's own "Characters & World" section; everything else
   below belongs to the full-screen `.lore-overlay`/
   `#bookLoreScreen` overlay it opens into (z-index 951 — one
   above Book Detail's 950, the same "drill-down opened only
   from inside it" shape Creator Profile/Talent Profile already
   established at their own higher z-indexes). `.avatar-locked`
   and `.blur-locked` are the two progress-gate treatments reused
   throughout: a silhouette avatar in place of initials, and a
   6px blur (matching Part 6/19's own spoiler-blur amount) over
   real prose that hasn't unlocked yet — real content is always
   still there in the DOM, never replaced with fake placeholder
   text, so nothing is silently hidden.
   ============================================================ */
.lore-teaser-row { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-locked { background: rgba(248,247,244,0.06); color: var(--text-tertiary); }
.avatar-locked .icon { width: 55%; height: 55%; }
.blur-locked { filter: blur(6px); user-select: none; pointer-events: none; }

.lore-overlay {
  position: fixed; inset: 0; background: var(--bg);
  z-index: 951; opacity: 0; pointer-events: none;
  transform: translateY(16px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
}
.lore-overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }

.lore-unlock-note { display: flex; align-items: center; gap: 6px; color: var(--text-tertiary); font-size: 12px; margin-top: 6px; }
.lore-unlock-note .icon { width: 13px; height: 13px; }

/* Characters tab */
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.char-card { display: flex; flex-direction: column; }
.char-card-head { display: flex; align-items: center; gap: 12px; }
.char-card.is-locked { align-items: flex-start; }
.char-relationships { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.char-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

/* World tab — 5 stacked sections: Map, Timeline, Family Tree, Locations, Glossary */
.lore-world-block { margin-bottom: 32px; }
.lore-world-block:last-child { margin-bottom: 0; }
.lore-world-block .section-head h2 { display: flex; align-items: center; gap: 8px; }

.lore-map { display: flex; flex-wrap: wrap; gap: 10px; }
.lore-map-pin {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-full);
  padding: 8px 14px; font-size: 12.5px; color: var(--text-secondary);
}
.lore-map-pin.is-locked { color: var(--text-tertiary); }
.lore-map-pin .icon { width: 13px; height: 13px; }
.lore-map-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.lore-map-pin.is-locked .lore-map-dot { background: var(--text-tertiary); }

.lore-timeline-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.lore-timeline-row:last-child { border-bottom: none; padding-bottom: 0; }
.lore-timeline-time { width: 96px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--gold); padding-top: 1px; }

.lore-tree { display: flex; flex-direction: column; gap: 10px; }
.lore-tree-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.lore-tree-node { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-primary); }
.lore-tree-connector { color: var(--text-tertiary); font-size: 12px; font-style: italic; }

.lore-locations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.lore-location-card { padding: 14px 16px; }

.lore-glossary-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.lore-glossary-row:last-child { border-bottom: none; padding-bottom: 0; }

/* ============================================================
   BONUS CONTENT + AFTERWORD ROOMS (Part 22)
   `.bonus-grid`/`.bonus-card` are shared by both Book Detail's
   inline "Bonus Content" section and the Afterword Room's own
   "Deleted Scenes" grid — same auto-fill card-grid shape Part 21's
   `.lore-locations-grid`/`.lore-location-card` already established,
   given a new feature-scoped class name rather than cross-reused
   directly, matching how Part 20 gave Talent Profile its own class
   names for a banner/stat shape it copied from Creator Profile
   rather than literally reusing Creator Profile's own classes.
   `.blur-locked` (Part 21) is reused as-is for locked Paid/
   Subscriber Only bonus descriptions — real content stays in the
   DOM, never faked as missing, the same rule Part 21 established.

   `.afterword-teaser` is the Book Detail teaser card; `.is-unlocked`
   is the "make the completion unlock feel special" treatment the
   spec explicitly calls for — the same gold-gradient card language
   Part 6's pinned Author Question thread (`.thread-card.is-author-
   question`) and Part 13's `.collab-plan-note` already use for a
   "notable, gold-accented moment" card, reused here rather than
   invented fresh. `.afterword-badge-icon` mirrors the wizard's own
   `.wizard-success-icon` "big circular icon" shape (Part 9's publish
   success screen) but in gold rather than success-green, since this
   is a listening milestone, not a publish confirmation — the one
   new visual this part actually needed, since gold is reserved for
   exactly this kind of premium/milestone moment per the design
   system's own token rules.

   `.afterword-overlay`/`#afterwordScreen` is the full-screen overlay
   (z-index 952 — one above Characters & World's 951, since both
   are opened directly from inside Book Detail as siblings rather
   than nested in one another).
   ============================================================ */
.bonus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.bonus-card { display: flex; flex-direction: column; }
.bonus-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bonus-type-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  color: var(--text-secondary); background: rgba(248,247,244,0.08); padding: 4px 10px 4px 8px; border-radius: var(--r-full);
}
.bonus-type-tag .icon { width: 13px; height: 13px; }

.afterword-teaser { text-align: center; padding: 28px 24px; }
.afterword-teaser.is-unlocked { border-color: var(--border-gold); background: linear-gradient(180deg, rgba(213,174,104,0.08), var(--card) 70%); }
.afterword-badge-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--gold-soft); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
}
.afterword-badge-icon.is-locked { background: rgba(248,247,244,0.06); color: var(--text-tertiary); }

.afterword-author-note { border-left: 3px solid var(--gold); }
.afterword-qna-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.afterword-qna-row:last-child { border-bottom: none; padding-bottom: 0; }
.afterword-poll { display: flex; flex-direction: column; gap: 8px; }

.afterword-overlay {
  position: fixed; inset: 0; background: var(--bg);
  z-index: 952; opacity: 0; pointer-events: none;
  transform: translateY(16px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
}
.afterword-overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ============================================================
   PREORDERS + MEMBERSHIPS + EARLY ACCESS (Part 23)
   The Preorder page (Book Detail's branch for an unreleased book)
   and Creator Profile's Membership section reuse existing
   components wherever they fit — .collab-plan-note (Part 13) for
   both the "Early Access active" and "members are already
   listening" gold-tinted rows, and Part 11's .plan-card family for
   the membership plan display — so only the countdown card and the
   now-clickable series-teaser variant needed anything new here.
   ============================================================ */
.preorder-countdown-card { flex-direction: row; align-items: center; gap: 14px; max-width: 320px; }
.preorder-countdown-days { font-family: var(--font-serif); font-size: 34px; font-weight: 700; color: var(--gold); line-height: 1; }
.series-book-card.is-preorder { opacity: 0.88; }
.series-book-card.is-preorder:hover { opacity: 1; }

/* ============================================================
   LIVE EVENTS + AUTHOR Q&A (Part 24)
   Author Room overlay — same mechanics as Book Detail's own
   drill-down sub-overlays (Characters & World / Afterword Room),
   here opened from inside Creator Profile instead: z-index 962,
   one above Creator Profile's 960. Chat reuses Part 7's exact
   .chat-message/.chat-composer components; polls reuse Part 7/22's
   exact .poll-option/.poll-bar; question rows and the submit form
   reuse .card/.textarea/.badge (variants)/.pill-tabs as-is. Only
   the video placeholder stage below is genuinely new markup.
   ============================================================ */
.author-room-overlay {
  position: fixed; inset: 0; background: var(--bg);
  z-index: 962; opacity: 0; pointer-events: none;
  transform: translateY(16px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
}
.author-room-overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }

.ar-video-stage {
  aspect-ratio: 16 / 9; width: 100%; border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--surface), var(--bg));
  border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; cursor: pointer; text-align: center; padding: 24px;
  transition: border-color var(--fast) var(--ease);
}
.ar-video-stage:hover { border-color: var(--border-gold); }
.ar-video-stage .icon { color: var(--text-tertiary); }

/* ============================================================
   AI BOOK SEARCH + RECAPS (Part 25)
   "Ask This Book" / "Search by Quote" live inside the Story
   Player's new 6th tab (renderPlayerTabsBody's "ask" branch) and
   reuse .player-tab-list/.demo-tag/.pill-tabs/.input-with-icon
   wholesale — only the result-row layout below is new. The
   "Previously..." recap panel reuses the native <details>/
   <summary> pattern Part 10's mobile Timeline Editor already
   established for collapsible sections, attached as a sibling
   right after each qualifying episode row inside .episode-list.
   ============================================================ */
.ask-result-row { padding: 12px 4px; border-bottom: 1px solid var(--border); }
.ask-result-row:last-child { border-bottom: none; }
.ask-result-text { font-style: italic; color: var(--text-primary); line-height: 1.5; }
.ask-result-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

.previously-recap {
  margin: 2px 0 12px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}
.previously-recap summary {
  cursor: pointer; list-style: none; padding: 11px 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--gold);
}
.previously-recap summary::-webkit-details-marker { display: none; }
.previously-recap summary::before { content: "\25B8"; transition: transform var(--fast) var(--ease); flex-shrink: 0; }
.previously-recap[open] summary::before { transform: rotate(90deg); }
.previously-recap-body { padding: 2px 16px 16px; }
.previously-recap-bullets { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.support-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:15px}.support-summary>div{padding:15px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}.support-summary strong{display:block;font:25px var(--font-serif);color:var(--gold)}.support-summary span{font-size:11px;color:var(--text-tertiary)}.support-offer-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.support-offer{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:15px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}.support-offer.is-featured{border-color:var(--border-gold)}.support-offer>strong{font:20px var(--font-serif);color:var(--gold)}.support-offer p{color:var(--text-tertiary);font-size:12px;min-height:54px}.support-offer .btn{margin-top:auto}.support-bottom{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;margin-top:15px}.tip-row{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.tip-row button{padding:10px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-primary)}@media(max-width:900px){.support-offer-grid{grid-template-columns:repeat(2,1fr)}.support-bottom{grid-template-columns:1fr}}@media(max-width:560px){.support-summary{grid-template-columns:1fr}.support-offer-grid{grid-template-columns:1fr}.support-offer p{min-height:0}}
.level-chip{padding:12px 18px;border:1px solid var(--border-gold);border-radius:999px;background:var(--gold-soft)}.level-chip strong,.level-chip span{display:block}.level-chip strong{font:22px var(--font-serif);color:var(--gold)}.level-chip span{font-size:10px}.mission-layout,.live-layout,.council-layout,.audience-layout,.release-layout,.fandom-map-layout{display:grid;grid-template-columns:1.5fr .7fr;gap:14px}.mission-grid,.council-polls{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.mission-card{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:16px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}.mission-card.is-complete{border-color:var(--border-gold)}.mission-card p{color:var(--text-tertiary);flex:1}.reputation-card h3{font:26px var(--font-serif);margin:8px 0}.reputation-card h4,.council-brief h4{margin:18px 0 8px}.badge-cloud{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}.live-stage{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;border:1px solid var(--border);border-radius:var(--r-lg);background:radial-gradient(circle,rgba(143,80,108,.35),transparent 55%),#080a0e}.live-stage>.badge{position:absolute;align-self:flex-start;margin:-270px 0 0 18px}.live-play{width:76px;height:76px;border:0;border-radius:50%;background:var(--gold);font-size:26px}.live-stage strong{font:25px var(--font-serif)}.live-stage small{color:var(--gold)}.live-reaction-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.live-reaction-row>button:not(.btn){padding:9px 13px;border:1px solid var(--border);border-radius:999px;background:var(--surface)}.live-poll{display:flex;flex-direction:column;gap:7px}.live-chat{display:flex;flex-direction:column}.live-chat-feed{flex:1;min-height:280px;max-height:370px;overflow:auto}.live-chat-feed p{padding:9px;border-bottom:1px solid var(--border);color:var(--text-secondary)}.live-chat-feed strong{color:var(--gold);margin-right:5px}.live-chat form{display:grid;grid-template-columns:1fr auto;gap:7px}.live-aftershow{margin-top:14px;padding:13px;background:var(--gold-soft);border-radius:var(--r-md)}.live-aftershow p{color:var(--text-tertiary)}.council-roster{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}.council-roster>div{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 6px;border:1px solid var(--border);border-radius:var(--r-md)}.council-roster small{color:var(--text-tertiary)}.council-option{width:100%;display:flex;justify-content:space-between;padding:10px;margin-top:7px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text-primary)}.council-option.is-selected{border-color:var(--gold);color:var(--gold)}.audience-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}.audience-summary>div{padding:14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}.audience-summary strong,.audience-summary span{display:block}.audience-summary strong{font:24px var(--font-serif);color:var(--gold)}.audience-summary span{font-size:10px;color:var(--text-tertiary)}.audience-import{width:100%;min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed var(--border-gold);border-radius:var(--r-md);background:var(--gold-soft);color:var(--text-primary)}.audience-import span{font-size:11px;color:var(--text-tertiary)}.segment-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border)}.segment-row span,.segment-row small{display:block}.segment-row small{color:var(--text-tertiary)}.audience-table-card{margin-top:14px}.release-layout{grid-template-columns:1.3fr .7fr}.release-layout aside{display:flex;flex-direction:column;gap:12px}.split-row{display:grid;grid-template-columns:34px 1fr 75px 15px;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--border)}.split-row small{display:block;color:var(--text-tertiary)}.split-row .input{padding:8px}.fandom-map-layout{grid-template-columns:1.3fr .7fr}.fandom-map{position:relative;min-height:520px;border:1px solid var(--border);border-radius:var(--r-xl);background:radial-gradient(circle,rgba(213,174,104,.13),transparent 48%),var(--surface)}.map-core,.map-node{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:50%}.map-core{width:150px;height:150px;left:calc(50% - 75px);top:calc(50% - 75px);background:var(--gold);color:#17120a}.map-core strong{font:20px var(--font-serif)}.map-node{width:100px;height:100px;border:1px solid var(--border);background:var(--card);color:var(--text-primary)}.map-node.is-active{border-color:var(--gold);box-shadow:0 0 24px var(--gold-soft)}.map-node span{font-size:9px;color:var(--text-tertiary)}.map-node-1{left:5%;top:8%}.map-node-2{left:39%;top:3%}.map-node-3{right:5%;top:8%}.map-node-4{right:2%;top:40%}.map-node-5{right:9%;bottom:5%}.map-node-6{left:39%;bottom:2%}.map-node-7{left:7%;bottom:6%}.map-node-8{left:2%;top:40%}.map-detail h3{font:28px var(--font-serif);margin:10px 0}.map-detail>p{color:var(--text-tertiary)}.map-detail-list{margin:18px 0}.map-detail-list .list-row{width:100%;color:var(--text-primary);background:transparent;border-width:0 0 1px}.world-health span{display:block;color:var(--text-tertiary);margin:6px 0}.world-complete-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:15px;padding:22px;border:1px solid var(--border-gold);border-radius:var(--r-lg);background:var(--gold-soft)}.world-complete-strip h3{font:22px var(--font-serif);margin-top:5px}@media(max-width:850px){.mission-layout,.live-layout,.council-layout,.audience-layout,.release-layout,.fandom-map-layout{grid-template-columns:1fr}.council-roster{grid-template-columns:repeat(3,1fr)}.fandom-map{min-height:470px}}@media(max-width:560px){.mission-grid,.council-polls{grid-template-columns:1fr}.audience-summary{grid-template-columns:1fr 1fr}.council-roster{grid-template-columns:repeat(2,1fr)}.fandom-map{min-height:560px}.map-node{width:86px;height:86px}.map-core{width:130px;height:130px;left:calc(50% - 65px);top:calc(50% - 65px)}.world-complete-strip{align-items:flex-start;flex-direction:column}}
.fan-ops-tabs{margin-bottom:16px}.fan-ops-panel{padding:20px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card)}.fan-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}.fan-panel-head h3{font:25px var(--font-serif);margin:5px 0}.fan-panel-head p{color:var(--text-tertiary)}.moment-filter-row{display:flex;gap:7px;overflow:auto;margin-bottom:14px}.moment-thread-list{display:flex;flex-direction:column;gap:11px}.moment-thread-card{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}.moment-anchor{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;padding:11px 14px;background:rgba(213,174,104,.05);border-bottom:1px solid var(--border)}.moment-time{font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums}.moment-conversation{display:flex;gap:11px;padding:15px}.moment-conversation>div{flex:1}.moment-conversation p{margin:4px 0;color:var(--text-secondary)}.moment-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:9px}.moment-actions button{border:0;background:transparent;color:var(--text-tertiary);font-size:11px}@media(max-width:650px){.fan-panel-head{flex-direction:column}.moment-anchor{grid-template-columns:auto 1fr}.moment-anchor strong,.moment-anchor .btn-link{grid-column:1/-1}.fan-ops-panel{padding:12px}}
.broadcast-layout,.broadcast-bottom{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.broadcast-upload{width:100%;min-height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px dashed var(--border-gold);border-radius:var(--r-lg);background:var(--gold-soft);color:var(--text-primary)}.broadcast-upload .icon{width:30px;height:30px;color:var(--gold)}.broadcast-upload span{font-size:11px;color:var(--text-tertiary)}.source-wave{height:62px;display:flex;align-items:center;justify-content:center;gap:4px;margin-top:12px}.source-wave i{width:4px;border-radius:5px;background:linear-gradient(var(--gold),var(--plum))}.output-list{display:flex;flex-direction:column}.output-row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:9px;padding:11px 0;border-bottom:1px solid var(--border)}.output-row>.icon{color:var(--gold)}.output-row span{display:flex;flex-direction:column}.output-row small{color:var(--text-tertiary)}.output-row input{accent-color:var(--gold)}.broadcast-timeline{margin-top:14px}.broadcast-track{display:grid;grid-template-columns:60px 1fr;gap:10px;align-items:center;margin:8px 0}.broadcast-track>span{font-size:9px;font-weight:900;color:var(--text-tertiary)}.broadcast-track>div{min-height:38px;display:flex;gap:5px;padding:4px;background:var(--surface);border-radius:6px;overflow:hidden}.broadcast-track b{display:flex;align-items:center;justify-content:center;min-width:60px;padding:5px;border-radius:4px;background:rgba(119,174,232,.2);color:var(--text-secondary);font-size:9px;white-space:nowrap}.broadcast-track b.is-gold{background:var(--gold-soft);color:var(--gold)}.broadcast-bottom{margin-top:14px}.broadcast-episode{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border)}.broadcast-episode div{display:flex;flex-direction:column}.broadcast-episode small,.broadcast-episode>span{font-size:10px;color:var(--text-tertiary)}@media(max-width:760px){.broadcast-layout,.broadcast-bottom{grid-template-columns:1fr}.broadcast-track{grid-template-columns:48px 1fr}.broadcast-track>div{overflow-x:auto}.broadcast-episode{grid-template-columns:1fr auto}.broadcast-episode>span:last-child{grid-column:1/-1}}
.world-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}.world-stat-grid>div{padding:15px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md)}.world-stat-grid strong{display:block;font:25px var(--font-serif);color:var(--gold)}.world-stat-grid span{font-size:11px;color:var(--text-tertiary)}.world-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.world-card{position:relative;overflow:hidden;padding:18px;border:1px solid var(--border);border-radius:var(--r-xl);background:linear-gradient(155deg,var(--card),var(--surface))}.world-card.accent-plum{border-color:rgba(143,80,108,.5)}.world-card.accent-gold{border-color:var(--border-gold)}.world-card.accent-blue{border-color:rgba(119,174,232,.45)}.world-card-top,.world-card-stats,.world-card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.world-card-top{justify-content:space-between}.world-orbit{position:relative;width:80px;height:80px;display:grid;place-items:center;margin:22px auto 16px;border:1px solid var(--border);border-radius:50%}.world-orbit:before,.world-orbit:after{content:"";position:absolute;border:1px solid var(--border);border-radius:50%;transform:rotate(32deg)}.world-orbit:before{inset:10px -16px}.world-orbit:after{inset:-12px 15px}.world-orbit b{font:30px var(--font-serif);color:var(--gold)}.world-card h3{font:22px var(--font-serif);margin-bottom:8px}.world-card p{color:var(--text-secondary);min-height:68px}.world-card-stats{justify-content:space-between;padding:13px 0;color:var(--text-tertiary);font-size:11px}.content-types-section{margin-top:30px;padding-top:25px;border-top:1px solid var(--border)}.content-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.content-type-card{display:grid;grid-template-columns:34px 1fr;gap:4px 10px;align-items:center;padding:13px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--card);color:var(--text-primary);text-align:left}.content-type-card .icon{grid-row:1/3;color:var(--gold)}.content-type-card span{font-size:10px;color:var(--text-tertiary)}.world-public-hero{position:relative;padding:80px max(7vw,28px);background:radial-gradient(circle at 75%,rgba(100,57,75,.45),transparent 35%),var(--surface)}.world-public-hero h2{font:clamp(38px,6vw,72px)/1 var(--font-serif);max-width:800px;margin:13px 0}.world-public-hero p{max-width:650px;color:var(--text-secondary);font-size:17px}.world-public-hero .modal-close{position:absolute;top:22px;right:22px}.world-public-hero .mk-actions{display:flex;gap:8px;margin-top:22px}.world-public-body{padding-top:20px}.world-public-nav{display:flex;gap:22px;overflow:auto;padding-bottom:14px;border-bottom:1px solid var(--border);font-size:12px;font-weight:700}.world-public-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.world-public-grid h3{font:21px var(--font-serif);margin:7px 0}.world-public-grid p{color:var(--text-tertiary);margin-bottom:12px}@media(max-width:760px){.world-stat-grid{grid-template-columns:repeat(2,1fr)}.world-grid,.content-type-grid,.world-public-grid{grid-template-columns:1fr}.world-card p{min-height:0}}
/* Part 35 polish: keyboard visibility, touch targets, state transitions */
:where(button,a,input,select,textarea):focus-visible{outline:3px solid rgba(213,174,104,.7);outline-offset:3px}:where(.btn,.icon-btn,.nav-item,.tab,.pill-tab){min-height:40px}:where(.card,.book-card,.thread-card,.following-card){transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}:where(.card-hover,.book-card,.following-card):hover{transform:translateY(-2px)}.tabs{scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{transition:color .16s ease,border-color .16s ease,background .16s ease}.modal-overlay.is-open,.sheet-overlay.is-open,.feature-overlay.is-open{animation:polishFade .18s ease both}@keyframes polishFade{from{opacity:0}to{opacity:1}}.state-loading-grid,.state-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.state-skeleton,.state-card{padding:16px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card)}.state-skeleton>*{display:block;border-radius:6px;background:linear-gradient(90deg,#242832,#313640,#242832);background-size:200% 100%;animation:stateShimmer 1.4s linear infinite}.state-skeleton i{height:130px}.state-skeleton span{height:13px;margin-top:10px}.state-skeleton span+span{width:68%}.state-skeleton b{height:34px;width:45%;margin-top:15px}@keyframes stateShimmer{to{background-position:-200% 0}}.state-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.state-card>.icon{width:28px;height:28px;color:var(--gold)}.state-card p{color:var(--text-tertiary);min-height:42px}.error-state-list{display:flex;flex-direction:column}.error-state{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:13px;border-bottom:1px solid var(--border)}.error-state>.icon{color:var(--error)}.error-state p{color:var(--text-tertiary);margin-top:3px}@media(max-width:700px){:where(.btn,.icon-btn,.nav-item,.tab,.pill-tab){min-height:44px}.state-loading-grid,.state-grid{grid-template-columns:1fr 1fr}.error-state{grid-template-columns:30px 1fr}.error-state .btn{grid-column:2}.app-content,.sheet-body,.feature-body{overscroll-behavior:contain}}@media(max-width:430px){.state-loading-grid,.state-grid{grid-template-columns:1fr}}
.admin-overlay{position:fixed;inset:0;z-index:995;display:grid;grid-template-columns:230px 1fr;background:#0b0d11;opacity:0;pointer-events:none}.admin-overlay.is-open{opacity:1;pointer-events:auto}.admin-sidebar{display:flex;flex-direction:column;gap:6px;padding:24px 16px;background:#12151b;border-right:1px solid #2b303a}.admin-sidebar h2{font:22px var(--font-serif);margin:5px 0 14px}.admin-sidebar button{padding:11px;border:0;border-radius:8px;background:transparent;color:var(--text-secondary);text-align:left}.admin-sidebar button.is-active{background:var(--gold-soft);color:var(--gold)}.admin-sidebar small{margin-top:auto;color:var(--text-tertiary)}.admin-main{overflow:auto;padding:26px}.admin-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.admin-top h2{font:28px var(--font-serif);margin-top:3px}.admin-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:20px}.admin-stat{padding:16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--card)}.admin-stat span,.admin-stat small{display:block;color:var(--text-tertiary)}.admin-stat strong{display:block;font:25px var(--font-serif);margin:5px 0}.admin-stat small{color:var(--success)}.admin-split{display:grid;grid-template-columns:1fr 1fr;gap:14px}.admin-table-wrap{overflow:auto}.admin-table{width:100%;border-collapse:collapse;font-size:12px}.admin-table th,.admin-table td{text-align:left;padding:11px;border-bottom:1px solid var(--border);white-space:nowrap}.admin-table th{color:var(--text-tertiary);font-weight:600}@media(max-width:700px){.admin-overlay{grid-template-columns:1fr}.admin-sidebar{position:sticky;top:0;z-index:2;flex-direction:row;overflow:auto;padding:10px}.admin-sidebar>.eyebrow,.admin-sidebar h2,.admin-sidebar small{display:none}.admin-sidebar button{white-space:nowrap}.admin-main{padding:16px}.admin-stat-grid{grid-template-columns:repeat(2,1fr)}.admin-split{grid-template-columns:1fr}}
.safety-panel{padding:20px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg)}.rights-status{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px;background:var(--surface);border-radius:var(--r-sm)}.rights-status p{color:var(--text-tertiary)}.rights-check-grid,.warning-grid,.report-type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}.rights-check,.warning-card,.report-type-card{display:flex;align-items:center;gap:11px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text-primary)}.rights-check.is-complete,.warning-card.is-selected{border-color:var(--border-gold)}.rights-check span,.warning-card{display:flex;flex-direction:column}.rights-check small,.warning-card small,.report-type-card small{color:var(--text-tertiary)}.rights-check input,.warning-card input{accent-color:var(--gold)}.report-type-card{align-items:flex-start;text-align:left;flex-direction:column}.report-type-card .icon{color:var(--gold)}.moderation-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.moderation-summary>div{padding:16px;background:var(--surface);border-radius:var(--r-md)}.moderation-summary strong{display:block;font:26px var(--font-serif);color:var(--gold)}.moderation-summary span{font-size:11px;color:var(--text-tertiary)}.moderation-list{display:flex;flex-direction:column}.moderation-row{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:12px;padding:13px;border-bottom:1px solid var(--border)}.moderation-row p,.moderation-row small{color:var(--text-tertiary);margin-top:3px}@media(max-width:650px){.rights-check-grid,.warning-grid,.report-type-grid{grid-template-columns:1fr}.safety-panel{padding:14px}.moderation-row{grid-template-columns:70px 1fr}.moderation-row .btn{grid-column:2}.moderation-summary{grid-template-columns:1fr 1fr}.moderation-summary>div:last-child{grid-column:1/-1}}
.settings-layout{display:grid;grid-template-columns:220px 1fr;gap:20px}.settings-nav{display:flex;flex-direction:column;gap:5px}.settings-nav button{border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-secondary);padding:11px 13px;text-align:left}.settings-nav button.is-active{background:var(--gold-soft);color:var(--gold)}.settings-panel{min-width:0;padding:20px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg)}.settings-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.connected-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.settings-preview{margin-top:16px}.settings-preview h3{font:24px var(--font-serif);margin:6px 0}.settings-preview p,.settings-preview small{color:var(--text-tertiary)}.settings-list-card{border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:14px}.high-contrast{--border:rgba(255,255,255,.32);--text-secondary:#fff}.reduced-motion *{animation-duration:.01ms!important;transition-duration:.01ms!important}@media(max-width:760px){.settings-layout{grid-template-columns:1fr}.settings-nav{flex-direction:row;overflow-x:auto}.settings-nav button{white-space:nowrap}.settings-form-grid{grid-template-columns:1fr}.settings-panel{padding:15px}}
.download-summary{display:flex;align-items:baseline;gap:9px;padding:20px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--border)}.download-summary strong{font:32px var(--font-serif);color:var(--gold)}.download-summary small{margin-left:auto;color:var(--text-tertiary)}.download-book-list{display:flex;flex-direction:column}.download-book-row{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--border)}.download-book-row small{display:block;color:var(--text-tertiary);margin-top:3px}.car-overlay{position:fixed;inset:0;z-index:990;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;background:#050608;color:white;opacity:0;pointer-events:none}.car-overlay.is-open{opacity:1;pointer-events:auto}.car-exit{position:absolute;top:24px;right:24px;border:1px solid #555;border-radius:999px;background:#181a1f;color:white;padding:12px 20px}.car-now{text-align:center}.car-now h2{font:clamp(28px,5vw,54px) var(--font-serif);margin:8px 0}.car-controls{display:flex;align-items:center;gap:clamp(28px,7vw,80px)}.car-controls button{width:92px;height:92px;border-radius:50%;border:2px solid #555;background:#15171c;color:white;font-size:34px}.car-controls .car-play{width:132px;height:132px;background:var(--gold);color:#17120a;border:0}.car-controls .car-play .icon{width:48px;height:48px}.car-controls small{font-size:12px}.car-voice{display:flex;align-items:center;gap:10px;border:1px solid #555;border-radius:999px;background:#15171c;color:white;padding:14px 22px}.car-voice span{color:var(--gold);font-size:10px}@media(max-width:600px){.download-summary{align-items:flex-start;flex-wrap:wrap}.download-summary small{width:100%;margin:0}.car-controls button{width:72px;height:72px}.car-controls .car-play{width:104px;height:104px}}
.feature-tabs{margin-bottom:4px}.notification-list,.preference-list{display:flex;flex-direction:column}.notification-row,.preference-row{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid var(--border)}.notification-row>div,.preference-row>span{flex:1}.notification-row p,.notification-row small,.preference-row small{display:block;color:var(--text-tertiary);margin-top:3px}.notification-mark{width:8px;height:8px;border-radius:50%;background:transparent}.notification-row.is-unread .notification-mark{background:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}.following-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}.following-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:17px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg)}.following-card small{color:var(--text-tertiary);min-height:18px}.following-card .btn{margin-top:auto}
.settings-save-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:15px;padding-top:15px;border-top:1px solid var(--border)}.world-public-nav button{padding:9px 12px;border-radius:999px;color:var(--text-secondary);white-space:nowrap}.world-public-nav button:hover{background:var(--gold-soft);color:var(--gold)}
@media(max-width:700px){.home-feature{grid-template-columns:1fr;padding:22px;margin-bottom:26px}.home-feature-art{width:150px;grid-row:1;justify-self:start}.home-feature-copy{grid-row:2}.home-feature-copy h2{font-size:30px}.home-value-strip{grid-row:3;gap:12px;justify-content:space-between}.home-value-strip span{display:flex;flex-direction:column}.home-feature-actions .btn{width:100%}.settings-save-row{align-items:stretch;flex-direction:column}.splash-actions-desktop{flex-direction:column}.fan-ops-tabs{margin-left:-12px;margin-right:-12px;padding-left:12px}}

/* Discover: vertical short-form audiobook and podcast clips */
.discover-shell{max-width:980px;margin:0 auto}.discover-header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}.discover-header h2{font:32px var(--font-serif);margin-top:3px}.discover-filter{display:flex;padding:4px;border:1px solid var(--border);border-radius:999px;background:var(--surface)}.discover-filter button{border:0;border-radius:999px;padding:8px 14px;background:transparent;color:var(--text-tertiary);font-weight:700}.discover-filter button.is-active{background:var(--gold);color:#17120a}.discover-feed{height:calc(100vh - 160px);min-height:600px;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;border-radius:var(--r-xl);scrollbar-width:none}.discover-feed::-webkit-scrollbar{display:none}.discover-card{min-height:100%;display:flex;align-items:center;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;padding:14px}.discover-stage{position:relative;width:min(100%,405px);height:min(calc(100vh - 190px),720px);min-height:580px;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:28px;box-shadow:var(--shadow-lg);isolation:isolate;color:#fff}.discover-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.12) 48%,rgba(0,0,0,.88) 100%);z-index:-1}.discover-stage-glow{position:absolute;inset:10% 12% 30%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 60%);filter:blur(16px);z-index:-1}.discover-play-hit{position:absolute;inset:0;width:100%;border:0;background:transparent;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 58px 210px;text-align:center}.discover-book-mark{width:88px;height:116px;border:1px solid rgba(255,255,255,.42);border-radius:9px;background:rgba(5,6,10,.34);backdrop-filter:blur(8px);display:grid;place-items:center;font:54px var(--font-serif);box-shadow:0 16px 35px rgba(0,0,0,.28);margin-bottom:24px}.discover-quote{font:clamp(21px,2.4vw,28px)/1.28 var(--font-serif);text-shadow:0 2px 18px rgba(0,0,0,.55)}.discover-play-state{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;margin-top:22px;background:rgba(0,0,0,.3);opacity:.86}.discover-play-state .icon{width:22px;height:22px;fill:currentColor}.discover-card.is-playing .discover-book-mark{animation:discoverFloat 2.8s ease-in-out infinite}.discover-card.is-playing .discover-play-state{opacity:.28}.discover-progress{position:absolute;left:16px;right:16px;bottom:5px;height:3px;border-radius:9px;background:rgba(255,255,255,.2)}.discover-progress span{display:block;height:100%;border-radius:inherit;background:var(--gold);transition:width .35s ease}.discover-caption{position:absolute;left:18px;right:82px;bottom:28px;z-index:3;text-shadow:0 1px 9px rgba(0,0,0,.7)}.discover-caption p{font-size:13px;line-height:1.42;margin-top:8px;color:#fff}.discover-creator-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.discover-creator-line strong{font-size:14px}.discover-creator-line>span{font-size:11px;color:rgba(255,255,255,.72)}.discover-follow{padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.24);color:#fff;font-size:10px;font-weight:800}.discover-follow.is-following{border-color:var(--gold);background:var(--gold);color:#17120a}.discover-book-link{max-width:100%;display:flex;align-items:center;gap:5px;margin-top:9px;padding:0;border:0;background:transparent;color:var(--gold);font-size:11px;font-weight:700;text-align:left}.discover-actions{position:absolute;right:12px;bottom:34px;z-index:4;display:flex;flex-direction:column;gap:13px}.discover-action{width:58px;border:0;background:transparent;color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;text-shadow:0 1px 8px rgba(0,0,0,.8)}.discover-action>span{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:rgba(6,7,10,.48);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px)}.discover-action .icon{width:21px;height:21px}.discover-action b{font-size:10px}.discover-action.is-active>span{background:var(--gold);color:#17120a;border-color:var(--gold)}.discover-action.is-active .icon{fill:currentColor}.discover-index{position:absolute;top:13px;right:14px;padding:5px 8px;border-radius:999px;background:rgba(0,0,0,.28);font-size:9px;color:rgba(255,255,255,.76)}.discover-empty{max-width:520px;margin:50px auto;text-align:center;padding:35px}.discover-empty .icon{color:var(--gold)}.discover-empty h3{margin:12px 0 6px}.discover-empty p{color:var(--text-tertiary);margin-bottom:16px}@keyframes discoverFloat{50%{transform:translateY(-7px)}}
.discover-comments-overlay{position:fixed;inset:0;z-index:1005;display:flex;align-items:flex-end;justify-content:center}.discover-comments-backdrop{position:absolute;inset:0;border:0;background:rgba(3,4,7,.72);backdrop-filter:blur(4px)}.discover-comments-sheet{position:relative;width:min(100%,560px);max-height:min(78vh,680px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border-strong);border-radius:24px 24px 0 0;box-shadow:var(--shadow-lg);animation:discoverSheetIn .2s ease both}.discover-comments-sheet>header{display:flex;align-items:center;justify-content:space-between;padding:17px 18px;border-bottom:1px solid var(--border)}.discover-comments-sheet>header strong,.discover-comments-sheet>header span{display:block}.discover-comments-sheet>header span{font-size:11px;color:var(--text-tertiary);margin-top:2px}.discover-comments-list{flex:1;overflow-y:auto;padding:8px 18px}.discover-comment{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--border)}.discover-comment p{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--text-secondary)}.discover-comment strong{color:var(--text-primary);font-size:11px}.discover-comment-form{display:grid;grid-template-columns:1fr auto;gap:9px;padding:14px 18px max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--border)}@keyframes discoverSheetIn{from{transform:translateY(26px);opacity:0}}
.saved-clips-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}.saved-clip-card{display:grid;grid-template-columns:108px 1fr;gap:14px;padding:12px}.saved-clip-art{position:relative;min-height:158px;border:0;border-radius:var(--r-md);color:#fff;display:grid;place-items:center}.saved-clip-art::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.2);border-radius:inherit}.saved-clip-art .icon{position:relative;z-index:1;fill:currentColor}.saved-clip-art span{position:absolute;right:7px;bottom:7px;z-index:1;padding:3px 6px;border-radius:5px;background:rgba(0,0,0,.65);font-size:9px}.saved-clip-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start}.saved-clip-copy h3{font:18px var(--font-serif);margin:4px 0}.saved-clip-copy p{font-size:11px;line-height:1.4;color:var(--text-tertiary);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.saved-clip-actions{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:10px}.library-tabs{overflow-x:auto;white-space:nowrap}
.clip-publish-box{margin-top:14px;padding:13px;border:1px solid var(--border-gold);border-radius:var(--r-md);background:var(--gold-soft)}.clip-publish-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px}.clip-publish-toggle span,.clip-publish-toggle strong,.clip-publish-toggle small{display:block}.clip-publish-toggle strong{font-size:13px;color:var(--text-primary)}.clip-publish-toggle small{margin-top:3px;color:var(--text-tertiary);font-size:10px;line-height:1.35}.clip-destination-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0}.clip-destination-list span{display:flex;align-items:center;gap:5px;padding:7px 8px;border:1px solid var(--border);border-radius:7px;background:var(--surface);font-size:9px;color:var(--text-tertiary)}.clip-destination-list span b{margin-left:auto;font-size:8px;color:var(--text-tertiary)}.clip-destination-list .is-ready{border-color:rgba(126,182,155,.45);color:var(--success)}.clip-destination-list .is-ready b{color:var(--success)}
@media(max-width:700px){.discover-header{align-items:center;margin:0;padding:12px 16px;background:var(--bg);border-bottom:1px solid var(--border)}.discover-header .eyebrow{display:none}.discover-header h2{font-size:21px}.discover-filter button{padding:7px 11px;font-size:11px}.discover-feed{min-height:0;border-radius:0}.discover-card{padding:0}.discover-stage{width:100%;height:100%;min-height:540px;border:0;border-radius:0}.discover-play-hit{padding-left:50px;padding-right:72px}.discover-comments-sheet{max-height:82vh}.saved-clips-grid{grid-template-columns:1fr}.clip-destination-list{grid-template-columns:1fr}}

/* ---------- Range inputs (volume, scrubbers) ----------
   These had no styling at all, so every browser drew its own default —
   a blue thumb sitting in the middle of a gold-and-charcoal player. */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 20px;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--r-full);
  background: var(--border-strong);
}
input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: var(--r-full);
  background: var(--border-strong);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;              /* centres the thumb on a 4px track */
  border-radius: 50%;
  background: var(--gold);
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 3px solid rgba(213, 174, 104, 0.7);
  outline-offset: 2px;
}
input[type="range"]:disabled { opacity: 0.5; cursor: default; }

/* ---------- Preview notice + operator footer ----------
   Stripe's website checklist asks that the operating business, the currency,
   and the payment handling are all stated plainly on the site. This is that,
   and it doubles as the honest "nothing here charges you" notice. */
.preview-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 14px; padding: 7px 14px;
  background: rgba(213, 174, 104, 0.11);
  border-bottom: 1px solid rgba(213, 174, 104, 0.28);
  color: var(--text-secondary); font-size: 12.5px; line-height: 1.4;
  text-align: center;
}
.preview-bar strong { color: var(--gold); }
.preview-bar a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.preview-bar a:hover { color: var(--gold); }
.preview-bar.hidden { display: none; }

/* On a phone the shell is exactly one viewport tall, so a permanent footer
   would eat scarce vertical space and push the nav off screen. The same links
   live in Profile -> "Terms, Privacy & Refunds" there. Shown from 560px up,
   where there is room. */
.site-legal { display: none; }
@media (min-width: 560px) { .site-legal { display: block; } }

.site-legal {
  padding: 20px 18px 26px; border-top: 1px solid var(--border);
  background: var(--bg); color: var(--text-tertiary);
  font-size: 12.5px; line-height: 1.55; text-align: center;
}
.site-legal nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 16px; margin-bottom: 10px;
}
.site-legal a { color: var(--text-secondary); text-decoration: none; }
.site-legal a:hover { color: var(--gold); }
.site-legal p { margin: 0; max-width: 560px; margin-inline: auto; }
.site-legal strong { color: var(--text-secondary); }

/* The Audicoin pill, the wallet screen and the top-up packages used to
   live here. The wallet is gone — people buy editions with a card — and
   every class those rules styled has no markup behind it any more. */

/* ---------- Become a creator ---------- */
.bc-kinds { display:grid; gap:8px; margin-top:6px; }
.bc-kind {
  display:flex; align-items:flex-start; gap:11px; cursor:pointer;
  padding:12px 13px; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--card);
}
.bc-kind:hover { border-color:var(--border-strong); }
.bc-kind input { margin-top:3px; flex:none; accent-color:var(--gold); width:16px; height:16px; }
.bc-kind strong { display:block; font-size:14.5px; }
.bc-kind small { display:block; color:var(--text-tertiary); font-size:12.5px; margin-top:1px; }
.bc-kind:has(input:checked) { border-color:rgba(213,174,104,.55); background:rgba(213,174,104,.07); }

.bc-agree {
  display:flex; align-items:flex-start; gap:11px; cursor:pointer;
  margin-top:16px; padding:13px; border:1px solid var(--border-strong);
  border-radius:var(--r-lg); background:var(--card); font-size:14px; line-height:1.5;
}
.bc-agree input { margin-top:3px; flex:none; accent-color:var(--gold); width:16px; height:16px; }
.bc-agree a { color:var(--gold); }

.bc-error {
  margin:12px 0 0; padding:10px 12px; border-radius:var(--r-md, 10px);
  background:rgba(220,80,70,.12); border:1px solid rgba(220,80,70,.4);
  color:var(--error, #E0735A); font-size:14px;
}
.bc-error.hidden { display:none; }
.bc-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; flex-wrap:wrap; }
/* A listener sees the upsell; a creator never does. */
.is-creator .js-creator-upsell { display:none; }

/* ---------- Creator earnings ---------- */
.earn-hero {
  text-align:center; padding:24px 18px 20px; border:1px solid var(--border-strong);
  border-radius:var(--r-lg); background:
    radial-gradient(120% 100% at 50% 0%, rgba(120,180,140,.12), transparent 68%), var(--card);
}
.earn-big {
  font-size:38px; font-weight:800; letter-spacing:-.03em; line-height:1.05;
  font-variant-numeric:tabular-nums; margin:6px 0 3px; color:var(--success);
}
.earn-sub { color:var(--text-tertiary); font-size:13.5px; }
.earn-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:12px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
}
.earn-stats > div { background:var(--card); padding:11px 12px; }
.earn-stats strong { display:block; margin-top:3px; font-size:16px; font-variant-numeric:tabular-nums; }

.earn-books { display:grid; }
.earn-book {
  display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;
  padding:12px 2px; border-bottom:1px solid var(--border);
}
.earn-book:last-child { border-bottom:none; }
.earn-book-amt { font-weight:700; font-variant-numeric:tabular-nums; color:var(--success); white-space:nowrap; }

.payout-options { display:grid; gap:10px; }
.payout-card { padding:15px 16px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--card); }
.payout-card.is-ready { border-color:rgba(120,180,140,.5); }
.payout-card.is-locked { opacity:.65; }
.payout-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:5px; }
.payout-head strong { font-size:15.5px; }
.payout-badge {
  font-size:11px; letter-spacing:.05em; text-transform:uppercase; font-weight:600;
  padding:2px 7px; border-radius:var(--r-full); border:1px solid currentColor;
}
.payout-badge.free { color:var(--success); }
.payout-badge.cost { color:var(--text-tertiary); }
.payout-card .btn { margin-top:11px; }

/* Connect-your-bank card. Gold-edged because it is the one thing standing
   between a creator and their money — it should read as the next action,
   not as another panel. */
.payout-setup {
  padding:17px 18px; border:1px solid var(--border-gold); border-radius:var(--r-lg);
  background:var(--card);
}
.payout-setup-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:8px;
}
.payout-setup-head strong { font-size:15.5px; }
.payout-setup p { margin:0 0 10px; }
.payout-setup .btn { margin-top:4px; }
.payout-setup .payout-badge.cost { color:var(--gold); }

.payout-why { margin-top:14px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--card); }
.payout-why summary {
  cursor:pointer; padding:13px 15px; font-weight:600; font-size:14.5px; list-style:none;
}
.payout-why summary::-webkit-details-marker { display:none; }
.payout-why summary::after { content:"＋"; float:right; color:var(--text-tertiary); font-weight:400; }
.payout-why[open] summary::after { content:"−"; }
.payout-why-body { padding:0 15px 15px; }
.payout-why-body p { color:var(--text-secondary); font-size:14px; margin:0 0 10px; }
.payout-math {
  margin:12px 0; border:1px solid var(--border); border-radius:10px; overflow:hidden;
}
.payout-math > div {
  display:flex; justify-content:space-between; gap:12px;
  padding:9px 12px; font-size:13.5px; border-bottom:1px solid var(--border);
}
.payout-math > div:last-child { border-bottom:none; }
.payout-math b { font-variant-numeric:tabular-nums; }
.payout-math .tot { background:var(--bg-subtle, rgba(255,255,255,.03)); font-weight:600; }

/* ---------- Purchase confirmation ---------- */
.buy-terms {
  margin-top:14px; border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; text-align:left;
}
.buy-line {
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:10px 13px; font-size:14px; border-bottom:1px solid var(--border);
}
.buy-line:last-child { border-bottom:none; }
.buy-line b { font-variant-numeric:tabular-nums; white-space:nowrap; }
.buy-line.total { background:rgba(213,174,104,.08); font-weight:700; }
.buy-line.total b { color:var(--gold); }

.buy-disclosures {
  margin:12px 0 0; padding:0 0 0 18px; text-align:left;
  font-size:13px; line-height:1.55; color:var(--text-tertiary);
}
.buy-disclosures li { margin-bottom:4px; }
.buy-disclosures strong { color:var(--text-secondary); }

.buy-ack {
  display:flex; align-items:flex-start; gap:10px; cursor:pointer; text-align:left;
  margin-top:13px; padding:11px 12px; border:1px solid var(--border-strong);
  border-radius:var(--r-lg); background:var(--card); font-size:13.5px; line-height:1.5;
}
.buy-ack input { margin-top:2px; flex:none; accent-color:var(--gold); width:16px; height:16px; }
.buy-ack a { color:var(--gold); }
.js-confirm-buy.is-disabled { opacity:.45; pointer-events:none; }

/* ---------- Signup consent gate ----------
   The policies are not a checkbox. A person has to reach the end of each
   document before the Agree button becomes usable, so "I have read this"
   is at least true of the scrolling. */
.policy-gate {
  position:fixed; inset:0; z-index:1200; display:none;
  background:rgba(8,10,14,.86); backdrop-filter:blur(3px);
  padding:20px; overflow:auto;
}
.policy-gate.is-open { display:grid; place-items:center; }
.policy-card {
  width:min(720px,100%); max-height:min(88vh,860px); display:flex; flex-direction:column;
  background:var(--bg); border:1px solid var(--border-strong); border-radius:var(--r-xl,18px);
  overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.policy-head { padding:20px 22px 14px; border-bottom:1px solid var(--border); flex:none; }
.policy-head h2 { font-family:var(--font-serif); font-size:22px; margin:4px 0 0; }
.policy-head p { color:var(--text-tertiary); font-size:13.5px; margin:6px 0 0; }
.policy-steps { display:flex; gap:6px; margin-top:14px; flex-wrap:wrap; }
.policy-step {
  flex:1 1 0; min-width:44px; height:4px; border-radius:99px; background:var(--border);
}
.policy-step.is-done { background:var(--success,#78B48C); }
.policy-step.is-current { background:var(--gold); }
.policy-doc-title {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:14px 22px 10px; flex:none;
}
.policy-doc-title strong { font-size:16px; }
.policy-doc-title span { color:var(--text-tertiary); font-size:12.5px; white-space:nowrap; }
.policy-scroll {
  flex:1 1 auto; min-height:180px; overflow-y:auto; overscroll-behavior:contain;
  padding:0 22px 18px; font-size:14px; line-height:1.62; color:var(--text-secondary);
}
.policy-scroll h1 { font-size:19px; color:var(--text); margin:12px 0 4px; }
.policy-scroll h2 { font-size:15.5px; color:var(--text); margin:20px 0 6px; }
.policy-scroll h3 { font-size:14px; color:var(--text); margin:15px 0 4px; }
.policy-scroll strong { color:var(--text); }
.policy-scroll a { color:var(--gold); }
.policy-scroll ul { padding-left:18px; margin:8px 0; }
.policy-scroll li { margin-bottom:5px; }
.policy-scroll table { width:100%; border-collapse:collapse; font-size:13px; margin:10px 0; }
.policy-scroll th, .policy-scroll td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--border); }
.policy-scroll .note {
  background:var(--card); border:1px solid var(--border-strong); border-left:3px solid var(--gold);
  border-radius:var(--r-lg); padding:12px 14px; margin:14px 0;
}
.policy-scroll .note p { color:var(--text); margin:0; }
.policy-end {
  margin-top:20px; padding:12px 14px; border:1px dashed var(--border-strong);
  border-radius:var(--r-lg); color:var(--text-tertiary); font-size:13px; text-align:center;
}
.policy-foot {
  flex:none; padding:14px 22px 18px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.policy-hint { color:var(--text-tertiary); font-size:13px; }
.policy-hint.is-ready { color:var(--success,#78B48C); }
.policy-foot .btn.is-disabled { opacity:.4; pointer-events:none; }
.policy-error {
  margin:0 22px 12px; padding:10px 12px; border-radius:10px;
  background:rgba(220,80,70,.12); border:1px solid rgba(220,80,70,.4);
  color:var(--error,#E0735A); font-size:13.5px;
}
.policy-error.hidden { display:none; }
@media (max-width:560px) {
  .policy-gate { padding:0; }
  .policy-card { max-height:100vh; max-height:100dvh; height:100dvh; border-radius:0; border:none; width:100%; }
  .policy-head, .policy-doc-title, .policy-scroll, .policy-foot { padding-left:16px; padding-right:16px; }
  .policy-foot { flex-direction:column; align-items:stretch; }
  .policy-foot .btn { width:100%; }
}

/* ---------- Signup account type ---------- */
.acct-choice { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
.acct-opt {
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  padding:11px 12px; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--card);
}
.acct-opt:hover { border-color:var(--border-strong); }
.acct-opt input { margin-top:3px; flex:none; accent-color:var(--gold); width:16px; height:16px; }
.acct-opt strong { display:block; font-size:14px; }
.acct-opt small { display:block; color:var(--text-tertiary); font-size:12px; margin-top:1px; line-height:1.4; }
.acct-opt:has(input:checked) { border-color:rgba(213,174,104,.55); background:rgba(213,174,104,.07); }
@media (max-width:560px) { .acct-choice { grid-template-columns:1fr; } }

/* ---------- Earnings still clearing ---------- */
.earn-clearing {
  margin-top:10px; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--card); overflow:hidden;
}
.earn-clearing-row {
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  padding:13px 15px;
}
.earn-clearing-row strong { display:block; font-size:14.5px; }
.earn-clearing-row small { display:block; color:var(--text-tertiary); font-size:12.5px; margin-top:2px; line-height:1.45; }
.earn-clearing-total { text-align:right; flex:none; }
.earn-clearing-total b { display:block; font-size:16px; font-variant-numeric:tabular-nums; }
.earn-clearing-total small { color:var(--text-tertiary); font-size:11.5px; }
.earn-clearing-why { border-top:1px solid var(--border); }
.earn-clearing-why summary {
  cursor:pointer; padding:11px 15px; font-size:13.5px; color:var(--gold); list-style:none;
}
.earn-clearing-why summary::-webkit-details-marker { display:none; }
.earn-clearing-why p { margin:0 15px 11px; font-size:13px; line-height:1.6; color:var(--text-secondary); }

/* ---------- Wizard cover step ----------
   An uploaded cover is set as a CSS background so it travels through the
   same one field a palette gradient does; these keep it from stretching. */
.wizard-cover-side { width:100%; max-width:320px; }
.wizard-cover-side .wizard-cover-grid { max-width:none; }
.wizard-cover-preview { background-size:cover !important; background-position:center !important; overflow:hidden; }
.book-cover, .book-card-cover, .learning-book-cover, .saved-clip-art,
.creator-profile-banner, .wizard-cover-swatch { background-size:cover; background-position:center; }
/* An avatar showing an uploaded photo drops the initials and the tint. */
.avatar.has-photo { background-size:cover !important; background-position:center !important; color:transparent; }

/* ---------- Bundled policy overlay ---------- */
.legal-body { max-width:720px; font-size:15px; line-height:1.65; color:var(--text-secondary); }
.legal-body h1 { font-family:var(--font-serif); font-size:26px; color:var(--text); margin:0 0 6px; }
.legal-body h2 { font-size:18px; color:var(--text); margin:28px 0 8px; }
.legal-body h3 { font-size:15px; color:var(--text); margin:20px 0 5px; }
.legal-body strong { color:var(--text); }
.legal-body a { color:var(--gold); }
.legal-body ul { padding-left:20px; }
.legal-body li { margin-bottom:6px; }
.legal-body table { width:100%; border-collapse:collapse; margin:14px 0; font-size:14px; }
.legal-body th, .legal-body td { text-align:left; padding:8px 9px; border-bottom:1px solid var(--border); }
.legal-body .note { background:var(--card); border:1px solid var(--border-strong); border-left:3px solid var(--gold);
  border-radius:var(--r-lg); padding:14px 16px; margin:18px 0; }
.legal-body .note p { color:var(--text); margin:0; }
.legal-body .note p + p { margin-top:9px; }
.legal-body .updated { color:var(--text-tertiary); font-size:14px; }

/* ---------- Wizard: what you're publishing ---------- */
/* Three per group, so each row fills exactly rather than leaving one
   card stranded beside a gap. */
.wizard-medium-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
@media (max-width:900px) { .wizard-medium-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .wizard-medium-grid { grid-template-columns:1fr; } }
.wizard-medium {
  display:flex; align-items:flex-start; gap:11px; text-align:left; cursor:pointer;
  padding:14px 15px; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--card); color:var(--text-primary);
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.wizard-medium:hover { border-color:var(--border-strong); }
.wizard-medium .icon { color:var(--gold); margin-top:1px; }
.wizard-medium strong { display:block; font-size:14.5px; }
.wizard-medium small { display:block; color:var(--text-tertiary); font-size:12.5px; margin-top:2px; line-height:1.45; }
.wizard-medium.is-selected { border-color:rgba(213,174,104,.55); background:rgba(213,174,104,.07); }

/* ---------- Wizard: uploaded pages ---------- */
.wizard-page-strip { display:flex; gap:6px; align-items:flex-end; margin-bottom:12px; overflow-x:auto; scrollbar-width:none; }
.wizard-page-strip::-webkit-scrollbar { display:none; }
.wizard-page-thumb {
  position:relative; flex:none; width:44px; aspect-ratio:2/3; border-radius:6px;
  border:1px solid var(--border-strong); background-size:cover; background-position:center;
}
.wizard-page-thumb b {
  position:absolute; left:3px; bottom:3px; padding:1px 4px; border-radius:4px;
  background:rgba(8,9,11,.72); color:var(--text-primary); font-size:9.5px; font-weight:700;
}
.wizard-page-more {
  flex:none; align-self:center; padding:5px 9px; border-radius:var(--r-full);
  background:var(--surface); color:var(--text-tertiary); font-size:11.5px; font-weight:700;
}

/* ---------- Wizard: per-episode artwork ---------- */
.wizard-ep-art {
  display:flex; align-items:center; gap:11px; margin-top:10px; padding:10px 12px;
  border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface);
  flex-wrap:wrap;
}
.wizard-ep-art-thumb {
  flex:none; width:38px; aspect-ratio:1; border-radius:8px; border:1px solid var(--border-strong);
  display:grid; place-items:center; color:var(--text-tertiary);
  background-size:cover; background-position:center;
}
.wizard-ep-art-copy { flex:1; min-width:130px; }
.wizard-ep-art-copy strong { display:block; font-size:13px; }
.wizard-ep-art-copy small { display:block; color:var(--text-tertiary); font-size:11.5px; margin-top:1px; }

/* ---------- Wizard: the visual layer ---------- */
.visual-cue-list { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.visual-cue {
  display:flex; align-items:center; gap:11px; padding:10px 12px; flex-wrap:wrap;
  border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface);
}
.visual-cue-thumb {
  flex:none; width:52px; aspect-ratio:16/10; border-radius:7px;
  border:1px solid var(--border-strong); background-size:cover; background-position:center;
}
.visual-cue-fields { flex:1; min-width:180px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.visual-cue-fields .input { padding:9px 12px; font-size:13.5px; }
.visual-cue-fields > .input { flex:1; min-width:120px; }
.visual-cue-time { display:flex; align-items:center; gap:7px; flex:none; }
.visual-cue-time span { color:var(--text-tertiary); font-size:12px; white-space:nowrap; }
.visual-cue-time .input { width:82px; text-align:center; font-variant-numeric:tabular-nums; }

/* ---------- The reader (comics, graphic novels, books) ---------- */
.reader-overlay {
  position:fixed; inset:0; z-index:972; background:#08090B;
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transition:opacity var(--med) var(--ease);
}
.reader-overlay.is-open { opacity:1; pointer-events:auto; }
.reader-bar {
  flex:none; display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--border); background:rgba(15,17,21,.9);
  backdrop-filter:blur(10px);
}
.reader-title { flex:1; min-width:0; }
.reader-title strong { display:block; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reader-title span { display:block; font-size:12px; color:var(--text-tertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reader-bar-actions { display:flex; align-items:center; gap:8px; flex:none; }
.reader-ep-select { width:auto; max-width:210px; padding:8px 34px 8px 12px; font-size:13px; }

.reader-body { flex:1; min-height:0; display:flex; overflow:hidden; }
.reader-page-stage { flex:1; display:grid; place-items:center; overflow:auto; padding:16px; cursor:pointer; }
.reader-page { display:block; user-select:none; border-radius:4px; box-shadow:var(--shadow-md); }
.reader-page-stage[data-fit="height"] .reader-page { max-height:100%; width:auto; max-width:100%; }
.reader-page-stage[data-fit="width"] .reader-page { width:100%; max-width:1100px; height:auto; }
.reader-doc { flex:1; width:100%; border:0; background:#fff; }
.reader-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 24px; color:var(--text-secondary); }
.reader-empty .icon { color:var(--gold); }

.reader-foot {
  flex:none; display:flex; align-items:center; gap:12px; padding:10px 16px;
  border-top:1px solid var(--border); background:rgba(15,17,21,.9);
}
.reader-strip { flex:1; display:flex; gap:3px; align-items:center; overflow-x:auto; scrollbar-width:none; }
.reader-strip::-webkit-scrollbar { display:none; }
.reader-tick {
  flex:1 1 4px; min-width:4px; max-width:26px; height:4px; border:0; border-radius:2px;
  background:var(--border-strong); cursor:pointer; transition:background var(--fast) var(--ease);
}
.reader-tick:hover { background:var(--text-tertiary); }
.reader-tick.is-current { background:var(--gold); height:7px; }
.reader-count { flex:none; font-size:12px; color:var(--text-tertiary); font-variant-numeric:tabular-nums; }
.player-visual-own { background:rgba(8,9,11,.62); border-radius:var(--r-lg); padding:14px 18px; }
@media (max-width:560px) {
  .reader-bar { padding:10px 12px; }
  .reader-ep-select { max-width:120px; }
  .reader-foot { padding:8px 12px; gap:8px; }
  .reader-foot .btn { padding:8px 12px; }
}

/* ---------- Wizard: what a work is made of ---------- */
.component-picker { margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
.component-list { display:flex; flex-direction:column; gap:7px; }
.component-row {
  display:flex; align-items:flex-start; gap:11px; cursor:pointer;
  padding:11px 13px; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--card);
}
.component-row:hover { border-color:var(--border-strong); }
.component-row input { margin-top:2px; flex:none; accent-color:var(--gold); width:16px; height:16px; }
.component-row strong { display:block; font-size:14px; }
.component-row small { display:block; color:var(--text-tertiary); font-size:12.5px; margin-top:2px; line-height:1.45; }
.component-row.is-on { border-color:rgba(213,174,104,.5); background:rgba(213,174,104,.06); }
.component-row.is-locked { cursor:default; opacity:.9; border-style:dashed; }

/* ---------- Wizard: one upload block per component ---------- */
.upload-group { margin-bottom:20px; }
.upload-group-tight { margin-bottom:12px; }
.upload-group-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.upload-group-head .icon { color:var(--gold); }
.upload-group-head strong { font-size:13.5px; }
.upload-group-head .badge { margin-left:auto; }

/* ---------- Reader: crossing to another component ---------- */
.reader-crossover { display:flex; gap:6px; flex:none; }
@media (max-width:560px) { .reader-crossover .btn { padding:8px 10px; } }

/* ---------- Wizard: per-edition pricing ---------- */
.edition-price-list { display:flex; flex-direction:column; gap:8px; }
.edition-price {
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:13px 15px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--card);
}
/* Pay-what-you-want reads as a different KIND of price, not a disabled
   one, so it is marked rather than dimmed. */
.edition-price.is-pwyw { border-color:rgba(213,174,104,.42); }
/* The line under each price that says what the creator keeps. Full width so
   it sits under both the name and the amount rather than squeezing them. */
.edition-price-note { flex-basis:100%; margin:8px 0 0; font-size:12.5px; text-align:left; }
.edition-price.is-pwyw .edition-price-note { color:var(--gold); }
.edition-price-head { display:flex; align-items:flex-start; gap:10px; flex:1; min-width:190px; }
.edition-price-head .icon { color:var(--gold); margin-top:2px; }
.edition-price-head strong { display:block; font-size:14px; }
.edition-price-head small { display:block; color:var(--text-tertiary); font-size:12.5px; margin-top:1px; }
.edition-price-controls { display:flex; align-items:center; gap:14px; flex:none; }
/* Was the "Free" toggle; now "Let them choose". Same control, opposite
   meaning — nothing is free, but a price can be left to the buyer. */
.edition-free-toggle { display:flex; align-items:center; gap:7px; cursor:pointer; font-size:13px; color:var(--text-secondary); }
.edition-free-toggle input { accent-color:var(--gold); width:16px; height:16px; }
.edition-amount { display:flex; align-items:center; gap:5px; }
.edition-amount > span { color:var(--text-tertiary); font-size:14px; }
.edition-amount .input { width:98px; padding:9px 11px; text-align:right; font-variant-numeric:tabular-nums; }
.edition-amount.is-off { opacity:.35; }

/* ---------- The illustrated edition, inside the player ---------- */
.player-pages {
  width:100%; height:100%; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:12px; align-items:center;
  background:var(--bg);
}
.player-page {
  width:100%; max-width:520px; border-radius:var(--r-md);
  border:1px solid var(--border); display:block;
}
.player-page.is-placeholder {
  aspect-ratio:2/3; display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:center; text-align:center; padding:20px;
  background:linear-gradient(160deg, rgba(213,174,104,.07), transparent 70%), var(--card);
  color:var(--text-tertiary);
}
.player-page.is-placeholder span { font-size:15px; font-weight:700; color:var(--text-secondary); }
.player-page.is-placeholder small { font-size:12.5px; max-width:30ch; line-height:1.5; }

/* A mode somebody has not bought still shows what it is and what it costs,
   rather than vanishing — the point of selling editions separately is that
   people can see what else the author made. */
.player-mode-btn.is-locked { opacity:.62; }
.player-mode-btn.is-locked:hover { opacity:1; }

/* ---------- What it costs to publish ----------
   Stated plainly on the Review step, directly above the button that
   charges it. Bordered in gold because it is the one thing on that screen
   that takes money, and nobody should be able to miss it. */
.publish-fee {
  margin-top:22px; padding:16px 17px; text-align:left;
  border:1px solid rgba(213,174,104,.42); border-radius:var(--r-lg);
  background:radial-gradient(120% 140% at 0% 0%, rgba(213,174,104,.10), transparent 70%), var(--card);
}
.publish-fee-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.publish-fee-head .eyebrow { letter-spacing:.09em; text-transform:uppercase; }
.publish-fee-amount {
  font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.publish-fee > .caption { margin-top:6px; }
.publish-fee-lines { margin-top:12px; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.publish-fee-lines .buy-line { padding:9px 12px; font-size:13.5px; }

/* ---------- Pay what you want (buy sheet) ---------- */
.buy-pwyw {
  margin-top:14px; padding:13px 14px; text-align:left;
  border:1px solid rgba(213,174,104,.42); border-radius:var(--r-lg);
  background:rgba(213,174,104,.06);
}
.buy-pwyw .field-label { display:block; margin-bottom:8px; }
.buy-pwyw .edition-amount .input { width:120px; font-size:16px; font-weight:700; }

/* ---------- Wizard: bundles ---------- */
.bundle-editor { margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }
.bundle-editor-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.bundle-list { display:flex; flex-direction:column; gap:8px; }
.bundle-row {
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:12px 15px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface);
}
.bundle-row.is-on { border-color:rgba(213,174,104,.45); background:rgba(213,174,104,.06); }
.bundle-toggle { display:flex; align-items:flex-start; gap:10px; cursor:pointer; flex:1; min-width:180px; }
.bundle-toggle input { margin-top:2px; accent-color:var(--gold); width:16px; height:16px; flex:none; }
.bundle-toggle strong { display:block; font-size:14px; }
.bundle-toggle small { display:block; color:var(--text-tertiary); font-size:12px; margin-top:1px; }
.bundle-price { display:flex; align-items:center; gap:10px; flex:none; flex-wrap:wrap; justify-content:flex-end; }
.bundle-was { color:var(--text-tertiary); font-size:13px; text-decoration:line-through; font-variant-numeric:tabular-nums; }
.bundle-saving { color:var(--success); font-size:12px; min-width:118px; text-align:right; }
.bundle-empty { margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
@media (max-width:640px) {
  .edition-price, .bundle-row { flex-direction:column; align-items:stretch; }
  .edition-price-controls, .bundle-price { justify-content:space-between; }
  .bundle-saving { text-align:left; }
}

/* ---------- Book detail: what it's sold as ---------- */
.editions-panel { margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
.editions-grid { display:flex; flex-direction:column; gap:7px; margin:10px 0; }
.edition-card {
  display:flex; align-items:center; gap:11px; padding:11px 13px;
  border:1px solid var(--border); border-radius:var(--r-lg); background:var(--card);
}
.edition-card > .icon { color:var(--gold); flex:none; }
.edition-card-copy { flex:1; min-width:0; }
.edition-card-copy strong { display:block; font-size:14px; }
.edition-card-copy small { display:block; color:var(--text-tertiary); font-size:12.5px; margin-top:1px; }
.edition-card.is-owned { border-color:rgba(126,182,155,.35); background:rgba(126,182,155,.06); }
.edition-card .btn { flex:none; font-variant-numeric:tabular-nums; }

.bundle-offer {
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  margin-top:7px; padding:13px; border:1px solid var(--border-gold); border-radius:var(--r-lg);
  background:linear-gradient(120deg, rgba(213,174,104,.10), rgba(100,57,75,.10));
  color:var(--text-primary);
  transition:border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.bundle-offer:hover { transform:translateY(-1px); border-color:var(--gold); }
.bundle-offer > .icon { color:var(--gold); flex:none; }
.bundle-offer-copy { flex:1; min-width:0; }
.bundle-offer-copy strong { display:block; font-size:14px; }
.bundle-offer-copy small { display:block; color:var(--text-secondary); font-size:12.5px; margin-top:1px; }
.bundle-offer-price { flex:none; text-align:right; }
.bundle-offer-price s { display:block; color:var(--text-tertiary); font-size:12px; }
.bundle-offer-price b { display:block; color:var(--gold); font-size:16px; font-variant-numeric:tabular-nums; }

/* ---------- Buy sheet: pick an edition ---------- */
.buy-options { display:flex; flex-direction:column; gap:7px; margin:16px 0 4px; text-align:left; }
.buy-option {
  display:flex; align-items:center; gap:10px; cursor:pointer; padding:11px 13px;
  border:1px solid var(--border); border-radius:var(--r-lg); background:var(--card);
}
.buy-option input { accent-color:var(--gold); width:16px; height:16px; flex:none; }
.buy-option > .icon { color:var(--gold); flex:none; }
.buy-option-copy { flex:1; min-width:0; }
.buy-option-copy strong { display:block; font-size:14px; }
.buy-option-copy small { display:block; color:var(--text-tertiary); font-size:12px; margin-top:1px; }
.buy-option-price { flex:none; text-align:right; }
.buy-option-price s { display:block; color:var(--text-tertiary); font-size:11.5px; }
.buy-option-price b { font-size:15px; font-variant-numeric:tabular-nums; }
.buy-option.is-selected { border-color:rgba(213,174,104,.55); background:rgba(213,174,104,.07); }
.player-mode-btn.is-locked { color:var(--gold); opacity:.85; }

/* Purchases + self-serve refund (library tab). */
.purchase-list { display:flex; flex-direction:column; gap:8px; }
.purchase-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border:1px solid var(--border);
  border-radius:var(--r-md); background:var(--card);
}
.purchase-row.is-refunded { opacity:.6; }
.purchase-main strong { display:block; font-size:14.5px; }
.purchase-main small { display:block; color:var(--text-tertiary); font-size:12.5px; margin-top:2px; }
.purchase-side { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.purchase-amt { font-weight:600; font-size:14.5px; }
.purchase-note { color:var(--text-tertiary); font-size:12px; white-space:nowrap; }
@media (max-width:460px) {
  .purchase-row { flex-direction:column; align-items:flex-start; gap:8px; }
  .purchase-side { width:100%; justify-content:space-between; }
}