/* ===========================
   StoryMe — Main Stylesheet
   =========================== */

:root {
  --gold: #C97D2E;
  --gold-light: #E09A4A;
  --gold-dark: #A8641C;
  --navy: #1A2744;
  --navy-light: #243562;
  --cream: #FFFDF8;
  --cream-dark: #F5F0E8;
  --text: #2D2D2D;
  --text-muted: #6B7280;
  --launch: #C8385A;
  --border: #E5DFD3;
  --white: #FFFFFF;
  --success: #2D7D46;
  --error: #C0392B;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --shadow: 0 4px 24px rgba(26,39,68,0.08);
  --shadow-lg: 0 12px 48px rgba(26,39,68,0.14);
  --transition: 0.2s ease;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--cream);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Lora', serif;
  color: var(--navy);
  line-height: 1.25;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-dark); }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
}
.btn-primary:hover:not(:disabled) { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--white); }

.btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline:hover:not(:disabled) { background: var(--navy); color: var(--white); }

.btn-lg { padding: 16px 36px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ===== NAV ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,253,248,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Welcome-back recovery banner (returning customer with an unfinished story) */
.welcome-back {
  display: none;
  align-items: center;
  gap: 14px;
  max-width: 1200px;
  margin: 16px auto 0;
  padding: 14px 18px;
  background: var(--navy);
  color: var(--cream);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(26, 39, 68, 0.18);
}
.welcome-back-emoji { font-size: 1.4rem; line-height: 1; }
.welcome-back-text { flex: 1; font-size: 0.95rem; line-height: 1.4; }
.welcome-back-btn { white-space: nowrap; }
.welcome-back-close {
  background: transparent;
  border: none;
  color: var(--cream);
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.7;
  padding: 4px 6px;
  line-height: 1;
}
.welcome-back-close:hover { opacity: 1; }
@media (max-width: 640px) {
  .welcome-back { flex-wrap: wrap; margin: 12px 16px 0; }
  .welcome-back-text { flex-basis: 100%; }
}

.nav-logo {
  font-family: 'Lora', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  gap: 28px;
  flex: 1;
}

.nav-links a {
  color: var(--text);
  font-weight: 500;
  font-size: 0.9rem;
  transition: color var(--transition);
}
.nav-links a:hover { color: var(--gold); }

.nav-cta { margin-left: auto; }

/* ===== HERO ===== */
.hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: 80px 24px 60px;
  max-width: 1200px;
  margin: 0 auto;
  gap: 60px;
  position: relative;
}

.hero-inner { flex: 1; max-width: 560px; }

.hero-badge {
  display: inline-block;
  background: var(--navy);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 24px;
}

.hero-title {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 20px;
  color: var(--navy);
}

.hero-title em {
  color: var(--gold);
  font-style: italic;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-muted);
  margin-bottom: 36px;
  max-width: 480px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.hero-books {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 360px;
}

.floating-book {
  display: flex;
  animation: float 4s ease-in-out infinite;
}

.book-1 { animation-delay: 0s; }
.book-2 { animation-delay: 1.3s; }
.book-3 { animation-delay: 2.6s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.book-spine {
  width: 18px;
  background: var(--navy-light);
  border-radius: 4px 0 0 4px;
  box-shadow: inset -2px 0 4px rgba(0,0,0,0.2);
}

.book-cover {
  width: 120px;
  height: 160px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border-radius: 0 8px 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-shadow: var(--shadow-lg);
}

.book-1 .book-cover { background: linear-gradient(135deg, #8B4C8C, #C07EC0); }
.book-2 .book-cover { background: linear-gradient(135deg, #1A2744, #243562); }
.book-3 .book-cover { background: linear-gradient(135deg, #C97D2E, #E09A4A); }

.book-title-text {
  font-family: 'Lora', serif;
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

/* ===== SECTIONS ===== */
.section { padding: 100px 24px; }
.section-alt { background: var(--cream-dark); }

.container { max-width: 1200px; margin: 0 auto; }

.section-header {
  text-align: center;
  margin-bottom: 60px;
}
.section-header h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 12px; }
.section-header p { font-size: 1.1rem; color: var(--text-muted); }

/* ===== HOW IT WORKS ===== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}

.step-card {
  text-align: center;
  padding: 36px 24px;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.step-number {
  width: 52px;
  height: 52px;
  background: var(--gold);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lora', serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 auto 20px;
}

.step-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.step-card p { color: var(--text-muted); font-size: 0.9rem; }

/* ===== THEMES ===== */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.themes-grid--modal {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.theme-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
}
.theme-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow); }
.theme-card.selected { border-color: var(--gold); background: #FFF8EE; box-shadow: 0 0 0 3px rgba(201,125,46,0.2); }

.theme-icon { font-size: 2.2rem; margin-bottom: 10px; }
.theme-name { font-weight: 600; font-size: 0.9rem; color: var(--navy); }

/* ===== PRICING ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  align-items: start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pricing-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.pricing-card--featured {
  border-color: var(--gold);
  background: linear-gradient(160deg, #FFFDF8 0%, #FFF3E0 100%);
  transform: scale(1.04);
}
.pricing-card--featured:hover { transform: scale(1.04) translateY(-4px); }

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 18px;
  border-radius: 100px;
  white-space: nowrap;
}

.pricing-name { font-family: 'Lora', serif; font-size: 1.2rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.pricing-price { font-size: 2.6rem; font-weight: 700; color: var(--gold); margin-bottom: 4px; font-family: 'Lora', serif; }
.pricing-desc { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 24px; }

.pricing-features { list-style: none; margin-bottom: 28px; }
.pricing-features li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pricing-features li::before { content: '✓'; color: var(--gold); font-weight: 700; }

/* ===== LAUNCH OFFER ===== */
.launch-badge {
  display: inline-block;
  background: var(--launch);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
  white-space: nowrap;
}
.price-was {
  font-size: 0.5em;
  color: var(--text-muted);
  text-decoration: line-through;
  font-weight: 600;
  margin-right: 10px;
  vertical-align: middle;
}
.price-now { color: var(--launch); }
/* Smaller variants for the in-creator purchase panel rows */
.product-price .price-was { font-size: 0.8rem; margin-right: 6px; }
.product-price .price-now { color: var(--launch); }

/* ===== CTA BANNER ===== */
.cta-banner {
  background: var(--navy);
  padding: 80px 24px;
  text-align: center;
}
.cta-banner h2 { color: var(--white); font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 16px; }
.cta-banner p { color: rgba(255,255,255,0.75); font-size: 1.1rem; margin-bottom: 32px; }

/* ===== FOOTER ===== */
.footer {
  background: var(--cream-dark);
  padding: 48px 24px;
  text-align: center;
  border-top: 1px solid var(--border);
}
.footer-logo { font-family: 'Lora', serif; font-size: 1.4rem; font-weight: 700; color: var(--gold); margin-bottom: 8px; }
.footer p { color: var(--text-muted); font-size: 0.9rem; }
.footer-links { display: flex; gap: 24px; justify-content: center; margin: 16px 0; }
.footer-links a { color: var(--text-muted); font-size: 0.85rem; }
.footer-links a:hover { color: var(--gold); }
.footer-copy { font-size: 0.8rem; color: var(--border); margin-top: 8px; }

/* ===== LEGAL PAGES ===== */
.legal-hero {
  background: var(--navy);
  color: var(--cream);
  padding: 64px 24px 48px;
  text-align: center;
}
.legal-hero h1 {
  font-family: 'Lora', serif;
  color: var(--cream);
  font-size: 2.4rem;
  margin: 0 0 8px;
}
.legal-hero p { color: rgba(255,253,248,0.7); font-size: 0.95rem; margin: 0; }
.legal {
  max-width: 800px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}
.legal h2 {
  font-family: 'Lora', serif;
  color: var(--navy);
  font-size: 1.4rem;
  margin: 40px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 {
  font-family: 'Lora', serif;
  color: var(--navy);
  font-size: 1.05rem;
  margin: 24px 0 8px;
}
.legal p, .legal li {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.7;
}
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--gold); }
.legal a:hover { color: var(--gold-dark); }
.legal strong { color: var(--navy); }
.legal .legal-updated {
  display: inline-block;
  background: var(--cream-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 32px;
}
.legal-back {
  display: inline-block;
  margin-top: 40px;
  font-size: 0.9rem;
  font-weight: 500;
}

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,39,68,0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--cream);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 900px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--cream);
  z-index: 10;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-logo { font-family: 'Lora', serif; font-size: 1.3rem; font-weight: 700; color: var(--gold); }

.modal-close {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--cream-dark);
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all var(--transition);
}
.modal-close:hover { background: var(--border); color: var(--navy); }

/* ===== PROGRESS ===== */
.modal-progress {
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--cream);
}

.progress-steps {
  display: flex;
  align-items: center;
  gap: 0;
}

.progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.4;
  transition: opacity var(--transition);
}
.progress-step.active { opacity: 1; }
.progress-step.done { opacity: 0.7; }

.progress-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  transition: all var(--transition);
  flex-shrink: 0;
}
.progress-step.active .progress-dot { background: var(--gold); color: var(--white); }
.progress-step.done .progress-dot { background: var(--navy); color: var(--white); }

.progress-step span { font-size: 0.8rem; font-weight: 500; white-space: nowrap; }
.progress-line { flex: 1; height: 2px; background: var(--border); margin: 0 8px; min-width: 20px; }

/* ===== STEPS ===== */
.modal-step { display: none; padding: 32px 28px; }
.modal-step.active { display: block; }

.modal-step h2 { font-size: 1.6rem; margin-bottom: 8px; }
.step-intro { color: var(--text-muted); margin-bottom: 28px; font-size: 0.95rem; }
.ai-disclaimer {
  margin: 24px 0 4px;
  padding: 14px 18px;
  background: var(--cream-dark);
  border: 1px solid rgba(201, 125, 46, 0.25);
  border-radius: 12px;
  color: var(--navy);
  font-size: 0.85rem;
  line-height: 1.5;
}
.appearance-section {
  margin-bottom: 20px;
  padding: 18px 18px 4px;
  background: var(--cream-dark);
  border: 1px solid rgba(201, 125, 46, 0.2);
  border-radius: 12px;
}
.appearance-heading { font-size: 1.05rem; margin-bottom: 4px; color: var(--navy); }
.appearance-hint { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 16px; line-height: 1.5; }

/* ===== FORMS ===== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-group label { font-weight: 600; font-size: 0.9rem; color: var(--navy); }

.required { color: var(--gold); }
.optional { color: var(--text-muted); font-weight: 400; font-size: 0.8rem; }

input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--transition);
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
textarea { resize: vertical; }

/* ===== CHIPS ===== */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  padding: 8px 16px;
  border: 2px solid var(--border);
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--white);
  user-select: none;
}
.chip:hover { border-color: var(--gold); color: var(--gold); }
.chip.selected { background: var(--gold); border-color: var(--gold); color: var(--white); }

/* ===== UPLOAD ZONES ===== */
.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }

.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 32px 16px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--white);
}
.upload-zone:hover { border-color: var(--gold); background: #FFF8EE; }

.upload-placeholder { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.upload-icon { font-size: 2rem; }
.upload-hint { font-size: 0.75rem; color: var(--text-muted); }

.upload-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  border-radius: calc(var(--radius) - 2px);
}

/* ===== STEP ACTIONS ===== */
.step-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

/* ===== GENERATING ===== */
.generating-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 24px;
  gap: 16px;
}

.quill-icon { font-size: 3rem; animation: quillBob 1.5s ease-in-out infinite; }
@keyframes quillBob { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-8px); } }

.generating-animation h2 { font-size: 1.8rem; color: var(--navy); }
.generating-animation p { color: var(--text-muted); max-width: 360px; }

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

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 100px;
  width: 0%;
  transition: width 0.4s ease;
  animation: progressPulse 2s ease-in-out infinite;
}
@keyframes progressPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* ===== STORY LAYOUT ===== */
.story-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}

/* ===== BOOK READER ===== */
.book-reader {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}

.book-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--navy);
  gap: 16px;
}

.book-nav-btn {
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.book-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,0.15); border-color: var(--white); }
.book-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }

#pictureCorrectionDialog { width: min(480px, calc(100vw - 32px)); box-sizing: border-box; border: 0; border-radius: 16px; padding: 24px; color: var(--navy); max-height: 90dvh; overflow: auto; }
#pictureCorrectionDialog::backdrop { background: rgba(0,0,0,0.55); }
#pictureCorrectionLabel { display: block; font-weight: 700; font-size: 1.1rem; }
#pictureCorrectionDialog p { font-size: 0.9rem; margin: 12px 0; }
#pictureCorrectionText { box-sizing: border-box; width: 100%; resize: vertical; padding: 12px; font: inherit; border: 1px solid #aaa; border-radius: 8px; }
.picture-correction-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.book-page-info { text-align: center; flex: 1; min-width: 0; overflow-wrap: anywhere; }
#regeneratePictureBtn {
  color: #fff;
  border-color: rgba(255,255,255,0.65);
  background: transparent;
  white-space: normal;
  max-width: 100%;
  padding: 7px 10px;
  margin-top: 8px;
  font-size: 0.8rem;
}
#regeneratePictureBtn:hover:not(:disabled) { background: rgba(255,255,255,0.15); }
#regeneratePictureBtn:disabled { opacity: 0.55; cursor: wait; }
#regeneratePictureStatus { color: #fff; font-size: 0.75rem; margin-top: 5px; }
.story-layout > .book-reader { min-width: 0; }
.book-title-display { font-family: 'Lora', serif; color: var(--white); font-size: 0.95rem; font-weight: 600; margin-bottom: 2px; }
.page-indicator { color: rgba(255,255,255,0.6); font-size: 0.75rem; }

.book-page { padding: 0; }

.page-illustration {
  position: relative;
  background: var(--cream-dark);
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#pageImage {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  display: block;
}

.page-image-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--cream-dark);
  color: var(--text-muted);
  font-size: 0.85rem;
}

.image-loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.page-text {
  padding: 24px;
  font-family: 'Lora', serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--navy);
  min-height: 120px;
}

/* ===== VIDEO BADGE ===== */
.page-video-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(10,26,63,0.78);
  backdrop-filter: blur(6px);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

/* ===== ANIMATE BAR ===== */
.animate-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: #0f1e45;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.animate-btn {
  background: linear-gradient(135deg, #C9A84C, #E8C97A);
  color: var(--navy);
  border: none;
  border-radius: var(--radius);
  padding: 8px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity var(--transition), transform var(--transition);
}
.animate-btn:hover { opacity: 0.9; transform: scale(1.03); }
.animate-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.animate-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.animate-info-text {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.animate-progress-track {
  height: 4px;
  background: rgba(255,255,255,0.12);
  border-radius: 100px;
  overflow: hidden;
}
.animate-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #C9A84C, #E8C97A);
  border-radius: 100px;
  transition: width 0.4s ease;
}

/* ===== THEATER LAUNCH BAR ===== */
.theater-launch-bar {
  display: flex;
  justify-content: center;
  padding: 10px 16px;
  background: #0f1e45;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.theater-launch-btn {
  background: transparent;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  border-radius: var(--radius);
  padding: 8px 28px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background var(--transition), color var(--transition);
}
.theater-launch-btn:hover { background: var(--gold); color: var(--navy); }

/* ===== THEATER OVERLAY ===== */
.theater-overlay {
  position: fixed;
  inset: 0;
  background: #05091a;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Fullscreen / maximized state — fill the whole screen and grow the video as
   large as possible while leaving room for the text + transport controls. The
   .theater-fs class is toggled in JS (works even where the Fullscreen API is
   blocked, e.g. an embedded preview iframe). */
.theater-overlay.theater-fs .theater-content {
  max-width: none;
  width: 100%;
  height: 100%;
  justify-content: center;
  gap: 14px;
}
.theater-overlay.theater-fs .theater-media {
  width: auto;
  height: min(72vh, calc(100vw * 9 / 16));
  max-width: 100%;
  aspect-ratio: 16 / 9;
}

.theater-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255,255,255,0.08);
  border: none;
  color: rgba(255,255,255,0.6);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
  z-index: 10;
}
.theater-close:hover { background: rgba(255,255,255,0.18); color: #fff; }

.theater-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 820px;
  padding: 20px;
  box-sizing: border-box;
}

.theater-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Branded gradient — always visible even when both media layers are empty */
  background: linear-gradient(135deg, #0a1833 0%, #1a3468 50%, #0a1833 100%);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

/* Decorative background pattern so bare pages look intentional, not broken */
.theater-media::before {
  content: '✨';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
}

/* Illustration — base layer. Controlled via opacity only, never display:none */
.theater-fallback-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;          /* always in the render tree */
  z-index: 1;
  /* opacity controlled inline by JS */
}

/* Video layer — opacity controlled inline by JS for precise transition timing */
.theater-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
  opacity: 0;              /* JS sets transition + opacity when ready */
}

.theater-text {
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.88);
  text-align: center;
  max-width: 680px;
}

.theater-controls {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.theater-page-indicator {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
}
.theater-progress-track {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 100px;
  overflow: hidden;
}
.theater-progress-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 100px;
  transition: width 0.5s ease;
}
.theater-nav {
  display: flex;
  gap: 16px;
}
.theater-nav-btn {
  background: rgba(255,255,255,0.08);
  border: none;
  color: rgba(255,255,255,0.7);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.theater-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,0.18); color: #fff; }
.theater-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.theater-nav { flex-wrap: wrap; align-items: center; justify-content: center; }
.theater-nav-btn { position: relative; }
.theater-btn-sub {
  position: absolute;
  bottom: 6px;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0;
}
.theater-playpause {
  background: var(--gold);
  color: var(--navy);
  width: 52px;
  height: 52px;
  font-size: 1.1rem;
}
.theater-playpause:hover:not(:disabled) { background: var(--gold); color: var(--navy); filter: brightness(1.08); }

/* Scrubbable time progress bar */
.theater-scrub {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.theater-time {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: center;
}
.theater-scrub .theater-progress-track {
  cursor: pointer;
  height: 6px;
  transition: height var(--transition);
}
.theater-scrub .theater-progress-track:hover { height: 9px; }
.theater-scrub .theater-progress-fill { transition: none; position: relative; }
.theater-scrub .theater-progress-track:hover .theater-progress-fill::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
}

/* Volume control */
.theater-volume {
  display: flex;
  align-items: center;
  gap: 6px;
}
.theater-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 4px;
  border-radius: 100px;
  background: rgba(255,255,255,0.18);
  outline: none;
  cursor: pointer;
}
.theater-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
}
.theater-volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
}
@media (max-width: 560px) {
  .theater-volume-slider { width: 56px; }
  .theater-nav { gap: 10px; }
}

/* Paywall overlay — covers the theater when a free reader hits a locked page */
.theater-paywall {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(5, 9, 26, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.theater-paywall-card {
  width: 100%;
  max-width: 440px;
  text-align: center;
  background: linear-gradient(160deg, #11203f 0%, #0a1430 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius);
  padding: 40px 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.theater-paywall-lock {
  font-size: 2.6rem;
  margin-bottom: 14px;
}
.theater-paywall-card h2 {
  font-family: 'Lora', serif;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 12px;
}
.theater-paywall-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
  margin: 0 0 24px;
}
.theater-paywall-dismiss {
  display: block;
  width: 100%;
  margin-top: 14px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  cursor: pointer;
  transition: color var(--transition);
}
.theater-paywall-dismiss:hover { color: rgba(255,255,255,0.85); }

/* Reader paywall — overlays the regular book view past the free preview */
.book-page { position: relative; }
.reader-paywall {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(5, 9, 26, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius);
}

/* page-illustration needs position:relative for the badge */
.page-illustration { position: relative; }

/* ===== STORY PLAYER — MOBILE (proper full-bleed storybook) ===== */
@media (max-width: 640px) {
  /* Modals become a true full-screen takeover: opaque, edge-to-edge, with the
     homepage fully hidden behind and unable to scroll. 100dvh keeps it correct
     under mobile-browser toolbars (e.g. when landing from an email link). */
  .modal-overlay {
    padding: 0;
    background: var(--cream);
    overscroll-behavior: contain;
    /* Pin the overlay to the DYNAMIC viewport and stop centring. A fixed
       inset:0 overlay otherwise sizes to the large (toolbar-hidden) viewport,
       so on Android Chrome — where the address bar is visible — the 100dvh
       modal gets centred inside a taller box, leaving empty bars above and
       below. Matching dvh here makes the takeover line up with what's actually
       on screen. */
    height: 100vh;
    height: 100dvh;
    align-items: stretch;
    justify-content: flex-start;
    /* backdrop-filter (like transform/filter) turns this into the containing
       block for position:fixed children, which would anchor the immersive
       image to the overlay instead of the viewport. Drop it on mobile so the
       fixed full-screen image maps to the real device viewport. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .modal {
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    overscroll-behavior: contain;
  }
  /* Larger, easy-to-tap close control */
  .modal-close { width: 40px; height: 40px; font-size: 1.4rem; }

  /* Normalise the creator padding so the reader can break out cleanly */
  #step4 { padding-left: 14px; padding-right: 14px; }

  /* Reader goes edge-to-edge for a real picture-book feel */
  #step4 .book-reader {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-left: -14px;
    margin-right: -14px;
  }

  /* Illustration fills the full screen width and at least half its height */
  .page-illustration { min-height: 56vh; }
  #pageImage,
  #pageVideo {
    width: 100%;
    height: 56vh;
    max-height: none;
    object-fit: cover;
  }

  /* Story text sits neatly below the image, sized for a phone */
  .page-text {
    font-size: 0.9rem;
    line-height: 1.65;
    padding: 16px 18px 22px;
    min-height: auto;
  }

  /* ===== IMMERSIVE FULL-SCREEN READER (saved-story player on mobile) =====
     Rather than relying on the modal/overlay box to size correctly (which broke
     on Android Chrome's dynamic toolbar), the illustration is pinned directly
     to the viewport with position:fixed + 100dvh so it ALWAYS fills the whole
     phone screen with zero rounded corners, padding or margins. The story text
     and playback controls then overlay the bottom of that image, and the
     paywall (when shown) is promoted to its own full-screen fixed layer. */
  .immersive-reader .modal-progress { display: none; }
  .immersive-reader .purchase-panel { display: none; }
  .immersive-reader .story-layout { display: block; }
  .immersive-reader #step4 { padding: 0; }

  /* The image itself fills the entire device viewport — the lowest layer */
  .immersive-reader .page-illustration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    min-height: 0;
    z-index: 1;
  }
  .immersive-reader #pageImage,
  .immersive-reader #pageVideo {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  /* The reader is a transparent bar anchored to the BOTTOM of the screen that
     holds the text + controls. Anchoring with bottom:0 (instead of a 100dvh
     box) keeps the controls glued to the visible bottom on Android Chrome even
     as its toolbar shows/hides — a 100dvh box could resolve taller than the
     visible area and push the controls off the bottom. Height is driven by its
     content (text + control strips) and capped so it can never exceed the
     screen; the fixed image fills everything behind it. */
  .immersive-reader #step4 .book-reader {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    /* Clear the phone's system navigation / gesture bar so the controls are
       never hidden behind it. Needs viewport-fit=cover on the meta tag for the
       inset to resolve to a real value; the 20px fallback handles older UAs. */
    padding-bottom: env(safe-area-inset-bottom, 20px);
    z-index: 2;
  }
  .immersive-reader .book-page {
    order: -1;
    flex: 0 1 auto;
    min-height: 0;
    position: static;
    padding: 0;
  }

  /* Close button floats over the top of the image. viewport-fit=cover lets the
     image draw under the status area, so pad the header down past it. */
  .immersive-reader .modal-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
    border-bottom: none;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
  }
  .immersive-reader .modal-logo { color: #fff; }
  .immersive-reader .modal-close { background: rgba(0,0,0,0.4); color: #fff; }

  /* Story text overlays the bottom of the image with a dark gradient scrim.
     z-index lifts it above the fixed image, which (being a descendant of the
     fixed book-reader) would otherwise paint over these sibling elements. */
  .immersive-reader .page-text {
    position: relative;
    z-index: 3;
    margin: 0;
    padding: 56px 18px 16px;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,0.6);
    background: linear-gradient(to top, rgba(8,12,28,0.96) 0%, rgba(8,12,28,0.82) 55%, rgba(8,12,28,0) 100%);
    max-height: 40dvh;
    overflow-y: auto;
  }

  /* Controls sit in a compact strip beneath the text, still over the image */
  .immersive-reader .book-nav,
  .immersive-reader .audio-bar,
  .immersive-reader .audio-generating,
  .immersive-reader .animate-bar,
  .immersive-reader .theater-launch-bar {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
  }

  /* When the free-preview paywall appears it must cover the whole screen */
  .immersive-reader .reader-paywall {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 5;
  }
}

/* ===== AUDIO NARRATION BAR ===== */
.audio-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.audio-play-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  color: var(--white);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition);
}
.audio-play-btn:hover { background: var(--gold-dark); transform: scale(1.08); }
.audio-play-btn:active { transform: scale(0.96); }

.audio-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.audio-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-progress-track {
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 100px;
  overflow: hidden;
}

.audio-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gold);
  border-radius: 100px;
  transition: width 0.25s linear;
}

.audio-status {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  flex-shrink: 0;
  white-space: nowrap;
}

.audio-generating {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
}

.audio-generating-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

/* ===== PURCHASE PANEL ===== */
.purchase-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  position: sticky;
  top: 20px;
}

.purchase-header { margin-bottom: 20px; }
.purchase-header h3 { font-size: 1.1rem; margin-bottom: 4px; }
.purchase-header p { color: var(--text-muted); font-size: 0.85rem; }

.product-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.product-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}
.product-option:hover { border-color: var(--gold); }
.product-option.selected { border-color: var(--gold); background: #FFF8EE; }

.product-radio {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0;
  transition: all var(--transition);
}
.product-radio.checked { border-color: var(--gold); background: var(--gold); box-shadow: inset 0 0 0 3px var(--white); }

.product-info { flex: 1; }
.product-name { font-weight: 600; font-size: 0.9rem; color: var(--navy); }
.product-desc { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.product-price { font-weight: 700; color: var(--gold); font-size: 0.95rem; flex-shrink: 0; }

.purchase-length-note {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 12px;
}

/* Book length selector (step 3) */
.length-select { margin-top: 28px; }
.length-select-title {
  font-size: 1rem;
  color: var(--navy);
  text-align: center;
  margin-bottom: 14px;
}
.length-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 460px;
  margin: 0 auto;
}
.length-option {
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
}
.length-option:hover { border-color: var(--gold); }
.length-option.selected { border-color: var(--gold); background: #FFF8EE; }
.length-pages { font-weight: 700; color: var(--navy); font-size: 1.05rem; }
.length-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }

.badge-popular {
  background: var(--gold);
  color: var(--white);
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 100px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 4px;
}

.purchase-note { font-size: 0.75rem; color: var(--text-muted); text-align: center; margin-top: 10px; }

/* ===== ERROR STATE ===== */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 24px;
  gap: 16px;
}
.error-icon { font-size: 2.5rem; }
.error-state h3 { font-size: 1.4rem; color: var(--error); }
.error-state p { color: var(--text-muted); max-width: 360px; }
.error-state .btn { margin-top: 8px; }

/* ===== SUCCESS PAGE ===== */
.success-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.success-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  max-width: 560px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

.success-icon { font-size: 3.5rem; margin-bottom: 16px; }
.success-card h1 { font-size: 2rem; margin-bottom: 12px; }
.success-subtitle { color: var(--text-muted); margin-bottom: 32px; }

.success-details {
  background: var(--cream-dark);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin-bottom: 32px;
  text-align: left;
}

.success-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.success-item:last-child { border-bottom: none; }
.success-label { font-size: 0.85rem; color: var(--text-muted); }
.success-value { font-weight: 600; font-size: 0.9rem; color: var(--navy); }
.success-status { color: var(--success); }

.success-steps { margin-bottom: 32px; text-align: left; }
.success-steps h3 { font-size: 1.1rem; margin-bottom: 16px; }

.next-steps { display: flex; flex-direction: column; gap: 16px; }
.next-step { display: flex; gap: 16px; align-items: flex-start; }
.next-step-num {
  width: 28px;
  height: 28px;
  background: var(--gold);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.next-step strong { display: block; font-size: 0.9rem; color: var(--navy); margin-bottom: 2px; }
.next-step p { font-size: 0.85rem; color: var(--text-muted); }

.success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .hero { flex-direction: column; min-height: auto; padding: 48px 20px 40px; }
  .hero-books { min-height: 200px; }
  .floating-book { transform: scale(0.8); }
  .form-grid { grid-template-columns: 1fr; }
  .upload-grid { grid-template-columns: 1fr; }
  .story-layout { grid-template-columns: 1fr; }
  .purchase-panel { position: static; }
  .progress-step span { display: none; }
  .success-card { padding: 32px 20px; }
  .pricing-card--featured { transform: none; }
  .pricing-card--featured:hover { transform: translateY(-4px); }
}

@media (max-width: 480px) {
  .modal { border-radius: var(--radius); }
  .modal-step { padding: 24px 16px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
}

/* ===== NAV AUTH ===== */
.nav-auth {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 24px;
}
.nav-auth .nav-auth-link {
  color: var(--text);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  transition: color var(--transition);
}
.nav-auth .nav-auth-link:hover { color: var(--gold); }
.nav-auth .nav-auth-name { font-weight: 600; color: var(--navy); font-size: 0.9rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-cta { margin-left: 8px; }

.btn-sm { padding: 8px 16px; font-size: 0.85rem; }

/* ===== AUTH MODAL ===== */
.auth-card { max-width: 440px; }
.auth-body { padding: 8px 28px 28px; }
.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(26,39,68,0.12);
}
.auth-tab {
  flex: 1;
  padding: 12px 0;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: all var(--transition);
}
.auth-tab.active { color: var(--navy); border-bottom-color: var(--gold); }
.auth-form { display: none; flex-direction: column; gap: 16px; }
.auth-form.active { display: flex; }
.auth-error {
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fecdca;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.88rem;
  margin: 0;
}
.auth-switch { text-align: center; font-size: 0.88rem; color: var(--text-muted, #6b7280); margin: 4px 0 0; }
.auth-switch a { color: var(--gold); font-weight: 600; }
.checkbox-label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 0.9rem; cursor: pointer; line-height: 1.4; }
.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--gold); cursor: pointer; flex-shrink: 0; }

/* ===== SAVED PROFILE BAR (creator step 1) ===== */
.saved-profile-bar {
  background: var(--cream-dark, #f3ece0);
  border: 1px solid rgba(212,160,52,0.35);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.saved-profile-bar label { font-weight: 600; font-size: 0.85rem; color: var(--navy); }
.saved-profile-bar select { width: 100%; }
.save-profile-row { margin-top: 4px; }

/* ===== DASHBOARD ===== */
.dash-card { max-width: 720px; }
.dash-body { padding: 8px 28px 28px; }
.dash-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(26,39,68,0.1);
}
.dash-email { font-weight: 600; color: var(--navy); }
.dash-section { margin-top: 26px; }
.dash-section > h3 { font-family: 'Lora', serif; color: var(--navy); margin: 0 0 14px; font-size: 1.25rem; }
.dash-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dash-section-head h3 { margin: 0; font-family: 'Lora', serif; color: var(--navy); font-size: 1.25rem; }
.dash-empty { color: var(--text-muted, #6b7280); font-size: 0.92rem; font-style: italic; }
.dash-stories { display: flex; flex-direction: column; gap: 12px; }
.dash-story {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--white);
  border: 1px solid rgba(26,39,68,0.12);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.dash-story-info { min-width: 0; }
.dash-story-title { font-weight: 600; color: var(--navy); font-size: 0.98rem; }
.dash-story-meta { font-size: 0.82rem; color: var(--text-muted, #6b7280); margin-top: 2px; }
.dash-story-actions { display: flex; gap: 8px; flex-shrink: 0; }
.dash-badge { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; margin-left: 8px; }
.dash-badge--paid { background: #ecfdf3; color: #027a48; }
.dash-badge--draft { background: #fef3f2; color: #b42318; }
.dash-profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dash-profile {
  background: var(--white);
  border: 1px solid rgba(26,39,68,0.12);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.dash-profile-name { font-weight: 600; color: var(--navy); }
.dash-profile-meta { font-size: 0.82rem; color: var(--text-muted, #6b7280); margin: 4px 0 12px; }
.dash-profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.link-btn { background: none; border: none; color: var(--gold); font-weight: 600; font-size: 0.85rem; cursor: pointer; padding: 0; font-family: 'Inter', sans-serif; }
.link-btn:hover { text-decoration: underline; }
.link-btn--danger { color: #b42318; }

@media (max-width: 600px) {
  .nav-auth { margin-left: auto; gap: 10px; }
  .nav-auth .nav-auth-name { max-width: 90px; }
  .dash-story { flex-direction: column; align-items: flex-start; }
}