/* ============================================================
   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; }

/* THE REAL MARK
   The placeholder was a gold gradient tile with a bookmark glyph cut out
   of it. The logo is the other way round — a dark tile with a gold mark
   on it — and it brings its own tile, so the container stops drawing
   one. `is-logo` says that out loud rather than relying on :has(). */
.splash-mark.is-logo, .mark-sm.is-logo {
  background: none !important;
  box-shadow: none !important;
  overflow: hidden;
}
.brand-img {
  width: 100%; height: 100%;
  display: block; object-fit: contain;
  /* The artwork is a rounded square already; matching the container's
     radius keeps the corners from doubling up at small sizes. */
  border-radius: inherit;
}

/* The "are you sure" for something that cannot be undone. Deliberately
   not window.confirm: that blocks the page, cannot say the one thing
   that matters most here — that the publishing fee is not coming back
   — and looks like the browser asking rather than the product. */
/* .feature-overlay is a scrolling page, not a flex box, so centring
   needs saying here rather than inheriting. */
#confirmOverlay.feature-overlay.is-open { display: flex; align-items: center; justify-content: center; }
.confirm-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg, 16px); padding: 24px;
  max-width: 440px; width: calc(100% - 40px); margin: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.confirm-card h2 { font-size: 20px; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
@media (max-width: 480px) {
  .confirm-actions { flex-direction: column-reverse; }
  .confirm-actions .btn { width: 100%; }
}
.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; }

/* The sneak peek's own line: how long it is and what it involves, on the
   button itself, so nobody has to press it to find out. */
/* A profile's own address, printed under the name. It is not a link
   element on purpose — tapping your own handle should not reload the
   page you are on; Copy link is right there. */
/* The handle editor: the whole link, in one row, so what is being
   edited and what will be handed out are visibly the same thing. */
.settings-handle { margin-bottom: 20px; }
.settings-handle .handle-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.settings-handle .handle-prefix {
  color: var(--text-tertiary); font-size: 14px; white-space: nowrap;
}
.settings-handle .input { flex: 1 1 180px; min-width: 140px; }
#handleSay.is-good { color: var(--success, #6FCF97); }
#handleSay.is-bad { color: var(--warning, #E0A33E); }

.profile-handle {
  margin-top: 2px; font-variant-numeric: tabular-nums;
  color: var(--text-tertiary); word-break: break-all;
}

.peek-meta {
  display: inline-block; margin-left: 8px; padding: 2px 7px;
  border-radius: 999px; font-size: 11.5px; letter-spacing: .01em;
  background: rgba(255,255,255,.08); color: var(--text-secondary);
  white-space: nowrap;
}

/* The picture row at the top of Creator Profile settings. Stacks on a
   phone so the buttons never sit squeezed beside the circle. */
.settings-avatar-row {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.settings-avatar-row .caption { max-width: 38ch; }
@media (max-width: 520px) {
  .settings-avatar-row { gap: 12px; }
}
.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 ---------- */
/* 980: above every overlay a modal can be opened FROM, below toasts.

   It was 955, under the player's 970 -- and the player overlay is opaque
   (#08090B, inset 0). So a listener who owned the audiobook, hit Read, and
   was asked to buy the ebook got the purchase box painted behind a solid
   black screen. It was open, it was focusable, and it was invisible: the
   only way to buy was to leave the player first.

   The stack it has to clear:
     creator-overlay 960 · learning 968 · feature 969 · player 970 · sheet 975
   and it must stay under toast-stack (1000), so the toast confirming a
   purchase is still visible over the modal that started it. */
.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: 980; opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity var(--med) var(--ease), visibility 0s linear var(--med);
  padding: 20px;
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.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; visibility: hidden;
  transition: opacity var(--med) var(--ease), visibility 0s linear var(--med);
}
.sheet-overlay.is-open { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.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; visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease), visibility 0s linear var(--med);
}
.detail-overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; transition-delay: 0s; }
.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; visibility: hidden;
  transition: opacity var(--med) var(--ease), visibility 0s linear var(--med);
  display: flex; flex-direction: column;
}
.player-overlay.is-open { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }

.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-zoom { display: inline-flex; align-items: center; gap: 6px; }
.reading-soon { margin-left: auto; font-size: 11.5px; opacity: .55; letter-spacing: .02em; }

/* An extracted book. Nothing here carries the author's choices yet -- the
   theme will -- but the shape of a page does not change with the theme. */
.book-body .book-chapter + .book-chapter { margin-top: 12vh; }
.book-body .book-chapter-title { font-size: 1.35em; margin: 0 0 1.2em; letter-spacing: .01em; }
.book-body .book-h { font-size: 1.1em; margin: 2em 0 .8em; }
.book-body .book-p { margin: 0 0 1.05em; }
/* Printed-book paragraphs: indented and tight, except the one that opens a
   section. Keeps a novel from reading like a web page. */
.book-body .book-p + .book-p { text-indent: 1.4em; margin-top: -.45em; }
.book-body .book-quote { margin: 1.4em 2em; font-style: italic; opacity: .9; }
.book-body .book-list { margin: 0 0 1.05em 1.4em; }
.book-body .book-list li { margin: .3em 0; }
.book-body .book-rule { border: 0; text-align: center; margin: 2.2em 0; }
.book-body .book-rule::before { content: "* * *"; letter-spacing: .5em; opacity: .5; }
.book-body .book-figure { margin: 1.8em 0; text-align: center; }
.book-body .book-figure img { max-width: 100%; height: auto; border-radius: 6px; }
/* ============================================================
   THE AUTHOR'S BOOK DESIGN
   Typeface, measure, leading and palette come from the work, delivered
   with the text as custom properties. The reader's light/dark toggle
   chose which of the author's two palettes is in these vars, and the
   size stepper still owns --reader-size. Nothing here is a per-design
   class, so a design added on the server needs no change in this file.
   ============================================================ */
.reading-shell.has-book-theme { background: var(--book-page); color: var(--book-text); }
.reading-shell.has-book-theme .reading-toolbar {
  background: var(--book-page);
  border-bottom-color: color-mix(in srgb, var(--book-text) 18%, transparent);
}
.reading-shell.has-book-theme .reading-control { color: var(--book-text); border-color: color-mix(in srgb, var(--book-text) 42%, transparent); }
.reading-shell.has-book-theme .reading-control:hover,
.reading-shell.has-book-theme .reading-control.is-active { color: var(--book-accent); border-color: var(--book-accent); }
/* The measure is in em, so it tracks the reader's text size: a comfortable
   line stays a comfortable line after three taps of the magnifier. */
.reading-shell.has-book-theme .reading-manuscript {
  font-family: var(--book-font); max-width: var(--book-measure);
}
.reading-shell.has-book-theme .book-chapter-title,
.reading-shell.has-book-theme .reading-kicker { color: var(--book-accent); }
.reading-shell.has-book-theme .book-rule::before { color: var(--book-accent); opacity: .7; }
.reading-shell.has-book-theme .book-quote { border-left: 2px solid var(--book-accent); padding-left: 1em; margin-left: 1em; opacity: 1; }

/* ---- voices ----
   Text the author marked as not the narrator: a machine, a second
   speaker, a sound. The ink is the design's, chosen per light/dark and
   contrast-checked in test_book_theme.js. A book with no design, or one
   stored before voices existed, sets no property and the run falls
   through to the body colour rather than to nothing. */
.book-v1 { color: var(--book-v1, inherit); }
.book-v2 { color: var(--book-v2, inherit); }
.book-v3 { color: var(--book-v3, inherit); }
/* Embedded Checkout. Stripe's iframe sizes itself, so the job here is to
   give it room and not fight it: a min-height so the modal does not
   collapse while it loads, and a scroll for small screens. */
.checkout-mount { padding: 4px 0 0; }
.checkout-frame { min-height: 420px; max-height: 72vh; overflow-y: auto; }
@media (max-width: 560px) { .checkout-frame { min-height: 360px; max-height: 76vh; } }

/* ---- The Look step: choosing a design, and seeing it ----
   Each card carries both of the design's palettes, because the author is
   shipping both. The two panes below render the author's own first
   chapter through the same bookHTML() the reader uses, at a smaller
   --reader-size, so what they approve here is what gets delivered. */
.book-theme-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.book-theme-card { align-items: flex-start; text-align: left; gap: 8px; }
.btc-swatches { display: flex; gap: 6px; }
.btc-swatch {
  width: 34px; height: 30px; display: grid; place-items: center;
  border-radius: 5px; border: 1px solid; font-family: var(--font-serif);
  font-size: 13px; line-height: 1;
}
.book-theme-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.btp-pane { margin: 0; min-width: 0; }
.btp-label {
  margin-bottom: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.btp-page {
  height: 240px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--book-page); color: var(--book-text);
}
/* Inside a pane the manuscript is a page, not a scrolling screen: no
   centring margin to fight the narrow column, and padding that reads as
   a margin rather than a gutter. */
.btp-page .reading-manuscript {
  max-width: none; margin: 0; padding: 16px 18px 0;
  font-family: var(--book-font); font-size: var(--reader-size); line-height: var(--reader-line);
}
.btp-page .book-chapter-title { color: var(--book-accent); font-size: 1.3em; margin-bottom: .9em; }
.btp-page .book-quote { border-left: 2px solid var(--book-accent); padding-left: .8em; margin: 1em .5em; opacity: 1; }
@media (max-width: 560px) {
  .book-theme-preview { grid-template-columns: 1fr; }
  .btp-page { height: 200px; }
}

/* Who chose what, said once in the toolbar rather than in a modal. It
   takes the right-hand slot, and the sync note tucks in beside it instead
   of claiming its own auto margin -- two of those would split the gap. */
.reading-setby { margin-left: auto; font-size: 11px; opacity: .5; letter-spacing: .02em; white-space: nowrap; }
.reading-setby + .reading-soon { margin-left: 10px; }

.reading-zoom-step { font-size: 11px; opacity: 0.7; font-variant-numeric: tabular-nums; }
.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; visibility:hidden; transform:translateY(14px); transition:opacity var(--med) var(--ease),transform var(--med) var(--ease),visibility 0s linear var(--med); }
.learning-overlay.is-open { opacity:1; pointer-events:auto; transform:none; visibility: visible; transition-delay: 0s; }
.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; visibility: hidden; transform: translateY(-6px); transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), visibility 0s linear var(--fast);
}
.sleep-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; transition-delay: 0s; }
.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; visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease), visibility 0s linear var(--med);
}
.creator-overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; transition-delay: 0s; }
.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; visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease), visibility 0s linear var(--med);
}
.talent-overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; transition-delay: 0s; }

.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).
   ============================================================ */
/* Said out loud when a draft comes back. An author who has lost work
   once does not believe a form that silently refills itself — and the
   one way out has to be here, or starting something new means deleting
   your own answers one step at a time. */
.wizard-resumed {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  font-size: 14px; color: var(--text-primary);
}
.wizard-resumed .icon { color: var(--gold); flex-shrink: 0; }
.wizard-resumed span { flex: 1 1 240px; }
.wizard-resumed .btn { flex-shrink: 0; }

.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; }
/* A step nothing is required on. Dashed rather than solid, so a row of
   thirteen numbers stops reading as thirteen obligations. */
.wizard-step-dot.is-optional { border-style: dashed; }
.wizard-step-dot.is-optional:not(.is-current):not(.is-done) { opacity: 0.62; }

.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; visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease), visibility 0s linear var(--med);
  display: flex; flex-direction: column;
}
.timeline-overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; transition-delay: 0s; }
.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; }
}

/* ---------- Not built yet, and saying so ----------
   A greyed item still has to be legible. The point is not to hide the
   roadmap -- seeing where a platform is going is worth something -- it is
   to make absolutely certain nobody clicks expecting a feature and finds
   a mock. Contrast stays above 4.5:1 so this reads as "later", not as
   "broken". */
.nav-item.is-soon {
  opacity: .48;
  cursor: not-allowed;
}
.nav-item.is-soon:hover { background: transparent; }
/* The same treatment for a Soon surface reached from a list rather than
   the nav — the phone build offers several of those from Profile and the
   More sheet, and a row that refuses to open should look like one. */
.list-row.is-soon { opacity: .52; cursor: not-allowed; }
/* And a button, for the one or two that sit among working controls. */
.btn.is-soon { opacity: .5; cursor: not-allowed; }
.list-row.is-soon .nav-soon { margin-left: auto; }
.nav-item.is-soon .icon { opacity: .7; }
.nav-soon {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 6px;
  line-height: 1.4;
}

/* One-series daily bars. Recessive surface, brand hue for the data,
   2px gaps so adjacent bars read as separate readings. */
.an-chart { display:flex; align-items:flex-end; gap:2px; height:120px;
            padding:6px 0 0; }
.an-bar { flex:1 1 0; min-width:2px; background:var(--gold);
          border-radius:3px 3px 0 0; opacity:.85; }
.an-bar:hover { opacity:1; }

/* The service-fee disclosure. The control has to look tappable and
   reach 44px of hit area without looking like a 44px button. */
.fee-info { width:16px; height:16px; margin-left:6px; padding:0;
  border-radius:50%; border:1px solid var(--border-strong);
  background:transparent; color:var(--text-tertiary);
  font:600 10px/1 ui-sans-serif,system-ui,sans-serif; cursor:pointer;
  vertical-align:middle; position:relative; }
.fee-info::after { content:""; position:absolute; inset:-14px; }
.fee-info:hover { color:var(--text-primary); border-color:var(--text-tertiary); }
.fee-breakdown { margin:2px 0 8px; padding:10px 12px;
  background:rgba(255,255,255,.03); border:1px solid var(--border);
  border-radius:var(--r-sm); }
.buy-line.sub { font-size:13px; color:var(--text-secondary); padding:3px 0; }
.buy-line.sub b { font-weight:600; }

/* ---------- 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; visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease), visibility 0s linear var(--med);
}
.lore-overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; transition-delay: 0s; }

.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; visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease), visibility 0s linear var(--med);
}
.afterword-overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; transition-delay: 0s; }

/* ============================================================
   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; visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease), visibility 0s linear var(--med);
}
.author-room-overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; transition-delay: 0s; }

.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}}
.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; }

/* The policy-change notice. Gold-edged like the connect-your-bank card,
   because it is the other thing on this screen somebody has to actually
   read. Not red: nothing has gone wrong, the terms have changed. */
.policy-notice {
  padding:15px 16px; margin-bottom:18px;
  border:1px solid var(--border-gold); border-radius:var(--r-lg); background:var(--card);
}
.policy-notice-head { display:flex; align-items:flex-start; gap:10px; }
.policy-notice-head strong { flex:1; font-size:15.5px; line-height:1.35; }
.policy-notice-x {
  flex:none; background:none; border:0; cursor:pointer; padding:0 2px;
  font-size:22px; line-height:1; color:var(--text-tertiary);
}
.policy-notice-x:hover { color:var(--text-primary); }
.policy-notice-points { margin:10px 0 0; padding-left:18px; }
.policy-notice-points li {
  font-size:13.5px; line-height:1.55; color:var(--text-secondary); margin-bottom:6px;
}
.policy-notice-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

/* Is the withdrawal open. Sits ABOVE the two withdraw cards rather than
   inside either, because it applies to both and because a creator
   reading a disabled button needs the reason before the button, not
   after it. Not red: nothing has gone wrong and nothing is being
   withheld from them. */
.payout-gate {
  padding:14px 16px; margin-bottom:10px;
  border:1px solid var(--border); border-left:3px solid var(--text-tertiary);
  border-radius:var(--r-lg); background:var(--card);
}
.payout-gate.is-open { border-left-color:var(--success); }
.payout-gate strong { display:block; font-size:15px; margin-bottom:5px; }
.payout-gate p { margin:0 0 7px; }
.payout-gate p:last-child { margin-bottom:0; }
.payout-card .btn[disabled] { opacity:.55; cursor:default; }

/* 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; visibility: hidden; transition:opacity var(--med) var(--ease), visibility 0s linear var(--med);
}
.reader-overlay.is-open { opacity:1; pointer-events:auto; visibility: visible; transition-delay: 0s; }
.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; }
/* ---- the comic scroller ----
   Pages stacked top to bottom, read with a thumb or a wheel. Every one
   is drawn at the SAME WIDTH and keeps its own height, which is the
   refit the upload page promises: a page of a different shape is
   neither cropped nor stretched, only shorter or taller in the column.

   One column, the same on a phone and on a desktop — the reading
   gesture does not change with the screen, only how wide the column
   gets. 860px is about the width of a comic page held at arm's length
   on a large monitor; wider than that and the eye has to travel across
   the panel instead of down the page.

   overscroll-behavior stops a flick at the end of a chapter from
   scrolling the page behind the reader, which on a phone looks like
   the app falling over. */
/* A creator's own face, in the circle that used to hold two initials.
   object-fit: cover so a photo of any shape fills the circle without
   being squashed — the one place cropping is right, because a face in
   a round frame is what everybody expects to see. */
.avatar .avatar-img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }

.reader-scroll {
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; align-items:center;
  gap:2px; padding:0 0 24px; scroll-behavior:smooth;
  background:#0b0c0f;
}
.reader-scroll .reader-page {
  display:block; width:100%; max-width:860px; height:auto;
  user-select:none; border-radius:0; box-shadow:none;
  /* Reserves the row before the image arrives, so a lazy page landing
     does not shove the one being read off the screen. */
  min-height:40px; background:#111318;
}
.reader-scroll .reader-empty { width:100%; max-width:860px; padding:40px 20px; text-align:center; }
.reader-end { padding:36px 20px 10px; color:var(--text-tertiary); text-align:center; }
@media (prefers-reduced-motion: reduce) { .reader-scroll { scroll-behavior:auto; } }

/* Kept for anything still rendering a single page. */
.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; }
}

/* The creator's own status on their own card: waiting on a reviewer, or
   sent back with a reason. Deliberately quiet — it appears on a card
   that is already busy, and a work that is simply live shows nothing at
   all. The left border does the signalling so the text can stay plain. */
.review-banner {
  border-left: 3px solid var(--border-strong);
  background: rgba(248, 247, 244, 0.04);
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
}
.review-banner--wait { border-left-color: var(--gold); }
.review-banner--stop { border-left-color: var(--error); }
/* Accepted, waiting on the creator to pay. Green rather than gold,
   because this is good news with one step attached — not another wait. */
.review-banner--go { border-left-color: var(--success); }
/* The reason a work was refused is the one thing on this card the
   creator has to be able to read; it is never truncated. */
.review-banner .caption { white-space: normal; overflow: visible; text-overflow: clip; }


/* ============================================================
   THE AUDIOBOOK CREATOR  (/audiobookcreator)

   Its own build, so it gets its own frame rather than borrowing the
   Studio's: one column, a bar across the top with a way back, and the
   flow underneath. Deliberately plain — the screen's job is to ask
   three questions, not to look like a mixing desk.
   ============================================================ */
.narration-shell {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--bg);
}
.narration-top {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
  position: sticky; top: 0; z-index: 5;
}
.narration-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--border); color: var(--text-secondary);
  text-decoration: none; flex-shrink: 0;
}
.narration-back:hover { background: var(--surface-2); color: var(--text-primary); }
.narration-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.narration-title {
  font-weight: 650; font-size: 15.5px; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.narration-top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.narration-body { flex: 1 1 auto; overflow-y: auto; }

@media (max-width: 640px) {
  .narration-top { padding: 12px 14px; }
  .narration-title { font-size: 14.5px; }
}

/* ---------- the manuscript, read on the narration screen ----------

   Two marks over the author's own text, so they have to be quiet. A
   wash behind the spoken lines and a weight on the names is enough to
   see the shape of a scene at a glance; anything stronger stops being a
   reading view and starts being a diagram.

   `mark` is used for the meaning, not the look — the browser's own
   yellow is removed. */
.nar-speech {
  background: rgba(212, 175, 110, 0.14);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.nar-name {
  background: transparent;
  color: inherit;
  font-weight: 700;
  border-bottom: 2px solid rgba(212, 175, 110, 0.55);
}
/* A name inside a spoken line is being addressed, not speaking. Still
   marked, because knowing who is named in a line is the point, but it
   must not fight the wash it sits on. */
.nar-speech .nar-name { border-bottom-color: rgba(212, 175, 110, 0.8); }