:root {
  --bg-start: #f7f4ff;
  --bg-end: #e8f7ff;
  --card: #ffffffd6;
  --text-main: #243251;
  --text-soft: #5f6f8f;
  --primary: #ff8ba7;
  --primary-strong: #f06b8d;
  --mint: #92d4c4;
  --outline: #d9e2f5;
  --shadow: 0 16px 36px rgba(65, 86, 130, 0.14);

  /* Aliases used by inline styles in library.html and pricing.html */
  --muted: var(--text-soft);
  --surface: var(--card);
  --line: var(--outline);
  --text: var(--text-main);
  --clr-border: var(--outline);
  --clr-muted: var(--text-soft);
}

/* -- Skip-to-content accessibility link -- */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-to-content:focus {
  position: fixed;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Nunito', sans-serif;
  color: var(--text-main);
  background:
    radial-gradient(circle at 12% 8%, #fff9de, transparent 34%),
    radial-gradient(circle at 88% 11%, #dff3ff, transparent 40%),
    linear-gradient(145deg, var(--bg-start), var(--bg-end));
}

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle at 8% 8%, #ffffff8c 0 10%, transparent 12%),
    radial-gradient(circle at 24% 78%, #ffffff7a 0 8%, transparent 10%),
    radial-gradient(circle at 74% 24%, #ffffff92 0 9%, transparent 11%);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  letter-spacing: 0.01em;
}

p {
  margin: 0;
}

.app-shell {
  width: min(1200px, 94vw);
  margin: 1.05rem auto 2rem;
  display: grid;
  gap: 1.1rem;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.68rem 0.92rem;
  background: #ffffffd7;
  backdrop-filter: blur(8px);
  border: 1px solid #ffffffb8;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(70, 92, 141, 0.12);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.56rem;
  font-weight: 800;
  color: #2d416b;
  text-decoration: none;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  justify-content: center;
}

.nav-links a {
  color: #46608b;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.93rem;
}

.nav-auth {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.account-pill {
  border-radius: 999px;
  border: 1px solid #cfdcf2;
  background: #f9fbff;
  color: #3f5680;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.28rem 0.6rem;
}

.hero {
  display: grid;
  grid-template-columns: 1fr minmax(250px, 330px);
  align-items: center;
  gap: 1rem;
  background: var(--card);
  backdrop-filter: blur(4px);
  border: 1px solid #ffffff9e;
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 1.2rem 1.4rem;
}

.hero p {
  color: var(--text-soft);
}

.hero h1 {
  font-size: clamp(1.65rem, 3.1vw, 2.5rem);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.hero-cta {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.hero-card {
  border-radius: 18px;
  border: 1px solid #d6e1f4;
  background: linear-gradient(155deg, #f5f9ff, #fff7f1);
  padding: 0.9rem;
}

.hero-card h3 {
  margin-bottom: 0.35rem;
  font-size: 1.1rem;
  color: #2f4166;
}

.hero-card ul {
  margin: 0;
  padding-left: 1.1rem;
  color: #52658e;
  display: grid;
  gap: 0.35rem;
  font-size: 0.92rem;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.trust-strip article {
  border-radius: 16px;
  border: 1px solid #ffffffb8;
  background: #ffffffc8;
  box-shadow: 0 10px 24px rgba(75, 91, 128, 0.1);
  padding: 0.9rem;
}

.trust-strip h3 {
  margin-bottom: 0.2rem;
  font-size: 1.02rem;
  color: #344972;
}

.trust-strip p {
  color: #5b6d91;
  font-size: 0.9rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.74rem;
  color: #7584a8;
  font-weight: 700;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(280px, 480px) 1fr;
  gap: 1rem;
}

.controls-panel,
.storybook-panel {
  background: var(--card);
  border: 1px solid #ffffff9e;
  border-radius: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(4px);
}

.controls-panel {
  padding: 1rem;
}

.controls-panel h2 {
  margin-bottom: 0.6rem;
}

.panel-note {
  margin-bottom: 0.45rem;
  color: #5f6b86;
  font-size: 0.9rem;
}

#story-form {
  display: grid;
  gap: 0.78rem;
}

.wizard-progress-shell {
  border: 1px solid #d8e3f5;
  border-radius: 16px;
  background: linear-gradient(160deg, #f7fbff, #fff7f0);
  padding: 0.7rem 0.8rem;
  display: grid;
  gap: 0.45rem;
}

.wizard-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.wizard-step-indicator,
.wizard-step-percent {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: #4a5f8a;
}

.wizard-progress-track {
  height: 8px;
  background: #e1e9f8;
  border-radius: 999px;
  overflow: hidden;
}

.wizard-progress-fill {
  height: 100%;
  width: 10%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8ba7, #7a9cff);
  transition: width 280ms ease;
}

.wizard-step-title {
  margin: 0;
  font-size: 1.16rem;
  color: #23395f;
}

.wizard-step-subtitle {
  margin: 0;
  color: #5f6f90;
  font-size: 0.9rem;
}

.studio-wizard-form [data-wizard-step] {
  display: none;
}

.studio-wizard-form [data-wizard-step].is-active {
  display: grid;
}

.studio-wizard-form .field-row[data-wizard-step].is-active {
  display: grid;
}

.studio-wizard-form .field-row[data-wizard-step='2'].is-active {
  grid-template-columns: 1fr;
  gap: 0.62rem;
}

.wizard-story-prompt textarea {
  min-height: 132px;
}

.wizard-advanced-toggle {
  margin-top: 0.2rem;
}

.wizard-style-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.wizard-style-card {
  padding: 0.56rem;
  gap: 0.35rem;
  border-radius: 16px;
  align-content: start;
}

.wizard-style-card .style-option-thumb {
  height: auto;
  aspect-ratio: 4 / 3;
  min-height: 118px;
  border-radius: 12px;
  background-size: cover;
  background-position: center 26%;
  border: 1px solid rgba(63, 87, 129, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.wizard-style-card .style-option-title {
  font-size: 1rem;
  line-height: 1.2;
}

.wizard-style-card .style-option-meta {
  font-size: 0.85rem;
  line-height: 1.35;
}

.wizard-step-generate h3,
.wizard-step-gate h3 {
  margin: 0;
  color: #23395f;
}

.wizard-step-generate p,
.wizard-step-gate p {
  margin: 0;
}

.wizard-gate-highlight {
  margin-top: 0.35rem;
  border: 1px solid #ffd5a6;
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  background: #fff8ec;
  color: #8d5b24;
  font-weight: 800;
}

.wizard-pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-top: 0.4rem;
}

.wizard-price-card {
  border: 1px solid #d7e2f4;
  border-radius: 12px;
  background: #fbfdff;
  padding: 0.55rem 0.6rem;
  display: grid;
  gap: 0.16rem;
}

.wizard-price-card h4,
.wizard-price-card p,
.wizard-price-card small {
  margin: 0;
}

.wizard-price-card p {
  color: #223861;
  font-weight: 800;
}

.wizard-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.wizard-navigation [disabled] {
  opacity: 0.62;
  cursor: not-allowed;
}

.pronoun-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pronoun-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.pronoun-option {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #cfd9eb;
  border-radius: 12px;
  background: #fff;
  color: #3e5480;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.2;
  padding: 0.56rem 0.25rem;
  min-height: 48px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease,
    color 0.18s ease;
}

.pronoun-option:hover {
  border-color: #b8c9e4;
  background: #f8fbff;
  transform: translateY(-1px);
}

.pronoun-option.is-active {
  border-color: #e2a7b8;
  background: linear-gradient(145deg, #fff4f8, #fff9f2);
  color: #2f446f;
}

.pronoun-option:focus-visible {
  outline: 3px solid #ffc3d2;
  outline-offset: 1px;
}

.pronoun-helper {
  margin: 0;
  min-height: 1.05em;
  color: #5f7197;
  font-size: 0.79rem;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.pronoun-helper.is-visible {
  opacity: 1;
  color: #9a4864;
  font-weight: 700;
}

.field-group {
  display: grid;
  gap: 0.35rem;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.size-visual-trigger {
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
  font-size: 0.75rem;
  line-height: 1.2;
}

.size-visual-trigger:hover {
  border-color: #b9cbe6;
  background: #f8fbff;
}

.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.suggestion-chip {
  border-radius: 999px;
  border: 1px solid #d5deef;
  background: #fff;
  color: #46608c;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
}

.suggestion-chip:hover {
  background: #f8fbff;
  border-color: #bbcbe6;
}

.appearance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.color-field {
  border: 1px solid #dce5f4;
  border-radius: 12px;
  background: #fff;
  padding: 0.45rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  font-size: 0.83rem;
  font-weight: 700;
  color: #445a86;
}

.color-field input[type='color'] {
  width: 34px;
  height: 26px;
  border: 1px solid #cad6eb;
  border-radius: 8px;
  padding: 0;
  background: #fff;
  cursor: pointer;
}

.compact-select {
  display: grid;
  gap: 0.3rem;
  font-size: 0.84rem;
}

.compact-select span {
  font-weight: 700;
  color: #435983;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

label {
  font-weight: 700;
  color: #394a73;
  font-size: 0.95rem;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
}

.check-row input[type='checkbox'] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary-strong);
}

input,
select,
button {
  font: inherit;
}

input[type='text'],
input[type='email'],
input[type='password'],
textarea,
select {
  border: 1.5px solid var(--outline);
  border-radius: 14px;
  padding: 0.62rem 0.7rem;
  color: var(--text-main);
  background: #ffffff;
}

input[type='text']:focus,
textarea:focus,
select:focus,
button:focus,
.upload-drop:focus-within {
  outline: 3px solid #ffc2d2;
  outline-offset: 2px;
}

textarea {
  resize: vertical;
  min-height: 88px;
  font: inherit;
}

input[type='range'] {
  width: 100%;
  accent-color: var(--primary);
}

small {
  color: #7c8aae;
}

.upload-drop {
  border: 2px dashed #c8d4ea;
  border-radius: 16px;
  padding: 0.95rem;
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
  display: grid;
  gap: 0.3rem;
}

.upload-drop:hover {
  border-color: #a8badc;
  transform: translateY(-1px);
}

#photo-upload,
#char2-photo,
#char3-photo {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Additional character fieldsets */
.extra-character {
  border: 1.5px solid var(--outline, #d5deef);
  border-radius: 14px;
  padding: 1rem 1rem 0.75rem;
  margin: 0.75rem 0 0;
  background: #f8fbff;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.additional-characters {
  min-width: 0;
}

.extra-character legend {
  font-weight: 700;
  color: #394a73;
  font-size: 0.95rem;
  padding: 0 0.4rem;
}

.additional-characters > small {
  display: block;
  margin: 0.35rem 0 0.25rem;
}

/* Allow fieldset grid columns to shrink below input min-content */
.extra-character .field-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.extra-character input,
.extra-character select {
  min-width: 0;
}

.upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.camera-panel {
  border: 1px solid #d8e3f5;
  border-radius: 14px;
  background: #f7fbff;
  padding: 0.5rem;
  display: grid;
  gap: 0.45rem;
}

.camera-panel video {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #cbd8ee;
  background: #1f2b47;
}

.camera-actions {
  display: flex;
  gap: 0.45rem;
}

.camera-actions button {
  flex: 1;
}

.camera-status {
  color: #5f6f93;
  font-size: 0.85rem;
}

.preview-wrap {
  margin-top: 0.45rem;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0.6rem;
  align-items: center;
  background: #f8fbff;
  border: 1px solid #e4ebf8;
  border-radius: 14px;
  padding: 0.5rem;
}

.preview-wrap img {
  width: 92px;
  height: 92px;
  border-radius: 12px;
  object-fit: cover;
}

#photo-status {
  color: var(--text-soft);
  font-size: 0.92rem;
}

.trait-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-height: 1.8rem;
}

.trait-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  border: 1px solid #d5dff3;
  background: #fff;
  color: #4f5f84;
  font-size: 0.84rem;
  padding: 0.26rem 0.56rem;
}

.swatch {
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 50%;
  border: 1px solid #c3cce0;
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.62rem;
}

button {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.66rem 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.primary,
button.primary {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--primary), var(--primary-strong));
  color: #fff;
  box-shadow: 0 10px 18px rgba(242, 100, 135, 0.3);
}

.ghost,
button.ghost {
  border-color: #d5deef;
  background: #fff;
  color: #41537c;
  text-decoration: none;
}

.storybook-panel {
  padding: 0.35rem;
  display: grid;
  gap: 0.2rem;
  align-content: start;
}
.storybook-panel > * {
  min-width: 0;
}

.storybook-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 0.9rem;
}

.storybook-head p {
  color: var(--text-soft);
}

.book-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.guest-preview-note {
  border-radius: 12px;
  border: 1px solid #f1cfca;
  background: #fff7f6;
  color: #6f4f4c;
  padding: 0.55rem 0.65rem;
  font-size: 0.87rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.guest-preview-note button {
  margin-left: auto;
}

.wizard-preview-panel {
  border: 1px solid #dce6f6;
  border-radius: 16px;
  background: linear-gradient(150deg, #f8fbff, #fff8f1);
  padding: 0.55rem;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0.65rem;
  align-items: center;
}

.wizard-preview-art {
  position: relative;
  overflow: hidden;
  width: 140px;
  height: 140px;
  border-radius: 14px;
  border: 1px solid #cfdcf1;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 218, 163, 0.92) 0%, rgba(255, 218, 163, 0) 37%),
    radial-gradient(circle at 70% 30%, rgba(183, 224, 255, 0.88) 0%, rgba(183, 224, 255, 0) 42%),
    linear-gradient(160deg, #f8d0be, #f6ecbf, #d8ebd3, #cfe3ff);
}

.wizard-preview-art.style-storybook-painterly {
  background:
    radial-gradient(circle at 20% 22%, rgba(255, 217, 191, 0.75) 0 18%, rgba(255, 217, 191, 0) 36%),
    radial-gradient(circle at 80% 24%, rgba(180, 224, 255, 0.73) 0 17%, rgba(180, 224, 255, 0) 32%),
    linear-gradient(155deg, #ffd8cc 0%, #ffeecb 38%, #d8ecdf 67%, #c9e4ff 100%);
}

.wizard-preview-art.style-cinematic-realistic {
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 246, 202, 0.92) 0 14%, rgba(255, 246, 202, 0) 34%),
    linear-gradient(165deg, #a7c5e9 0%, #d6e6fa 45%, #fdd8bd 100%);
}

.wizard-preview-art.style-pixar-3d {
  background:
    radial-gradient(circle at 76% 16%, rgba(255, 241, 177, 0.95) 0 13%, rgba(255, 241, 177, 0) 32%),
    linear-gradient(165deg, #8db8ff 0%, #77d6da 38%, #f8b8a2 100%);
}

.wizard-preview-art.style-classic-cartoon {
  background:
    radial-gradient(circle at 78% 14%, #ffe6a8 0 12%, rgba(255, 230, 168, 0) 14%),
    linear-gradient(180deg, #d8ecff 0 64%, #bcdcb2 64% 100%);
}

.wizard-preview-art.has-generated-image {
  border-color: #b9cde8;
  box-shadow: inset 0 0 0 1px #ffffffab;
  background-size: cover;
  background-position: center 32%;
  background-repeat: no-repeat;
}

.wizard-preview-copy {
  display: grid;
  gap: 0.2rem;
}

.wizard-preview-inline-progress {
  margin-top: 0.18rem;
  display: grid;
  gap: 0.2rem;
}

.wizard-preview-inline-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  color: #5c7098;
  font-size: 0.73rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.wizard-preview-inline-track {
  height: 7px;
  border-radius: 999px;
  background: #dfe8f7;
  overflow: hidden;
}

.wizard-preview-inline-fill {
  height: 100%;
  width: 10%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8ba7, #7a9cff);
  transition: width 240ms ease;
}

.wizard-preview-step {
  margin: 0;
  color: #667ca7;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}

.wizard-preview-copy h3 {
  margin: 0;
  color: #263c65;
}

.wizard-preview-copy p {
  margin: 0;
}

#wizard-preview-subtitle {
  color: #5b6f95;
  font-size: 0.88rem;
}

#wizard-preview-story {
  color: #455b87;
  font-size: 0.9rem;
}

.preview-conversion-banner {
  margin: 0;
  border: 1px solid #ffd299;
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
  background: #fff8ec;
  color: #8b531f;
  font-weight: 800;
  font-size: 0.95rem;
}

.company-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1rem;
}

.company-card {
  background: var(--card);
  border: 1px solid #ffffff9e;
  border-radius: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(4px);
  padding: 1rem;
}

.company-card p {
  color: var(--text-soft);
}

.pricing-card .plan-grid {
  margin-top: 0.7rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.plan-tile {
  border-radius: 15px;
  border: 1px solid #d8e2f4;
  background: #fff;
  padding: 0.8rem;
  display: grid;
  gap: 0.35rem;
}

.plan-tile h3 {
  font-size: 1.08rem;
  color: #30456f;
}

.plan-tile .price {
  color: #2b3f69;
  font-weight: 800;
  font-size: 1.35rem;
}

.plan-tile .price span {
  font-size: 0.84rem;
  color: #60729a;
  font-weight: 700;
}

.plan-tile.featured {
  border-color: #e2b7c4;
  background: linear-gradient(155deg, #fff8fc, #fff8f0);
  box-shadow: 0 8px 16px rgba(218, 155, 175, 0.18);
}

.plan-tile.is-current {
  border-color: #8fc0a8;
  background: linear-gradient(155deg, #f3fff8, #f9fffb);
}

.disclaimer {
  margin-top: 0.6rem;
  font-size: 0.84rem;
  color: #7b89a8;
}

.about-list {
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
  color: #4c618c;
  display: grid;
  gap: 0.4rem;
}

.legal-preview {
  background: #ffffffd0;
  border: 1px solid #ffffffa0;
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 1rem;
}

.legal-links {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.legal-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  border: 1px solid #cedaf0;
  background: #fff;
  padding: 0.45rem 0.8rem;
  text-decoration: none;
  color: #3c527f;
  font-weight: 700;
}

.site-footer {
  width: min(1200px, 94vw);
  margin: 0 auto 1.6rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.55rem;
  color: #5e6f90;
  font-size: 0.9rem;
}

.site-footer a {
  color: #44679f;
}

.size-visual-modal {
  width: min(700px, 94vw);
  border: none;
  padding: 0;
  border-radius: 20px;
  box-shadow: 0 22px 48px rgba(63, 83, 122, 0.32);
}

.size-visual-modal::backdrop {
  background: rgba(40, 55, 88, 0.42);
  backdrop-filter: blur(1px);
}

.size-visual-shell {
  margin: 0;
  padding: 1rem;
  display: grid;
  gap: 0.8rem;
  background: #fff;
}

.size-visual-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 0.6rem;
}

.size-visual-head h3 {
  margin: 0;
  color: #2d4168;
}

.size-visual-head p {
  margin: 0.2rem 0 0;
  color: #627295;
  font-size: 0.9rem;
}

.size-visual-head .ghost {
  white-space: nowrap;
}

.size-visual-body {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(230px, 1fr);
  gap: 0.75rem;
  align-items: stretch;
}

.size-visual-stage {
  border: 1px solid #d9e3f5;
  border-radius: 16px;
  background: #f8fbff;
  padding: 0.75rem;
  display: grid;
  place-items: center;
  min-height: 230px;
}

.size-visual-canvas {
  width: min(250px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid #d8e4f8;
  background: #ffffff;
  display: grid;
  place-items: center;
}

.size-visual-frame {
  position: relative;
  width: var(--preview-width, 88%);
  max-width: 92%;
  aspect-ratio: var(--preview-ratio, 3 / 2);
  border-radius: 13px;
  border: 2px solid #8ea8d5;
  background: #f5f8ff;
  box-shadow: 0 8px 14px rgba(99, 125, 175, 0.16);
  transition:
    width 0.2s ease,
    aspect-ratio 0.2s ease;
}

.size-visual-frame::before {
  content: none;
}

.size-visual-frame::after {
  content: none;
}

.size-visual-options {
  display: grid;
  gap: 0.45rem;
}

.size-option-card {
  text-align: left;
  border: 1.5px solid #d4dfef;
  border-radius: 14px;
  background: #fff;
  padding: 0.55rem 0.65rem;
  display: grid;
  gap: 0.14rem;
  color: #435783;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease;
}

.size-option-card:hover {
  border-color: #b7cae6;
  background: #f9fbff;
  transform: translateY(-1px);
}

.size-option-card.active {
  border-color: #e1aebe;
  background: linear-gradient(145deg, #fff4f7, #fff9f2);
  color: #30446d;
}

.size-option-card:focus-visible {
  outline: 3px solid #ffc2d2;
  outline-offset: 1px;
}

.size-option-title {
  font-weight: 800;
  font-size: 0.95rem;
}

.size-option-meta {
  color: #66779d;
  font-size: 0.82rem;
}

.size-visual-note {
  margin: 0;
  padding: 0.62rem 0.7rem;
  border-radius: 12px;
  border: 1px solid #e5ebf8;
  background: #f8fbff;
  color: #4c6089;
  font-size: 0.88rem;
}

.style-visual-modal {
  width: min(1080px, 96vw);
  border: none;
  padding: 0;
  border-radius: 20px;
  box-shadow: 0 22px 48px rgba(63, 83, 122, 0.32);
}

.style-visual-modal::backdrop {
  background: rgba(40, 55, 88, 0.42);
  backdrop-filter: blur(1px);
}

.style-visual-shell {
  margin: 0;
  padding: 1rem;
  display: grid;
  gap: 0.8rem;
  background: #fff;
}

.style-visual-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 0.6rem;
}

.style-visual-head h3 {
  margin: 0;
  color: #2d4168;
}

.style-visual-head p {
  margin: 0.2rem 0 0;
  color: #627295;
  font-size: 0.9rem;
}

.style-visual-head .ghost {
  white-space: nowrap;
}

.style-visual-body {
  display: grid;
  grid-template-columns: minmax(360px, 1.45fr) minmax(240px, 0.9fr);
  gap: 0.75rem;
  align-items: start;
}

.style-visual-stage {
  border: 1px solid #d9e3f5;
  border-radius: 16px;
  background: linear-gradient(155deg, #f5f9ff, #fff9f0);
  padding: 0.75rem;
  display: grid;
  place-items: start center;
  align-self: start;
  min-height: 0;
}

.style-visual-frame {
  position: relative;
  width: 100%;
  max-width: 680px;
  aspect-ratio: var(--style-preview-ratio, 1 / 1);
  overflow: hidden;
  border-radius: 16px;
  border: 2px solid #9ab0d4;
  background: #eef3fc;
  box-shadow: 0 12px 22px rgba(88, 110, 152, 0.24);
  transition:
    background 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.style-visual-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #eef3fc;
}

.style-visual-frame::before {
  content: '';
  position: absolute;
  left: 38%;
  bottom: 19%;
  width: 22%;
  height: 41%;
  border-radius: 45% 45% 36% 36%;
  border: 2px solid rgba(65, 84, 122, 0.26);
  background: rgba(255, 242, 210, 0.88);
}

.style-visual-frame::after {
  content: '';
  position: absolute;
  left: 41%;
  bottom: 48%;
  width: 16%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 2px solid rgba(65, 84, 122, 0.28);
  background: rgba(255, 232, 196, 0.9);
  transition: opacity 0.2s ease;
}

.style-visual-ground {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -8%;
  height: 34%;
  border-radius: 50% 50% 0 0 / 80% 80% 0 0;
  background: rgba(255, 255, 255, 0.58);
  transition: opacity 0.2s ease;
}

.style-visual-empty {
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  padding: 0.45rem 0.55rem;
  text-align: center;
  color: #495e88;
  font-size: 0.79rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
  z-index: 2;
}

.style-visual-frame.has-generated::before,
.style-visual-frame.has-generated::after,
.style-visual-frame.has-generated .style-visual-ground,
.style-visual-frame.has-generated .style-visual-empty {
  opacity: 0;
}

.style-visual-frame.style-cinematic-realistic {
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 246, 202, 0.92) 0 14%, rgba(255, 246, 202, 0) 34%),
    linear-gradient(165deg, #a7c5e9 0%, #d6e6fa 45%, #fdd8bd 100%);
  border-color: #8fa9cf;
  box-shadow: 0 14px 26px rgba(78, 101, 150, 0.3);
}

.style-visual-frame.style-storybook-painterly {
  background:
    radial-gradient(circle at 20% 22%, rgba(255, 217, 191, 0.75) 0 18%, rgba(255, 217, 191, 0) 36%),
    radial-gradient(circle at 80% 24%, rgba(180, 224, 255, 0.73) 0 17%, rgba(180, 224, 255, 0) 32%),
    linear-gradient(155deg, #ffd8cc 0%, #ffeecb 38%, #d8ecdf 67%, #c9e4ff 100%);
  border-color: #beabbd;
  box-shadow: 0 12px 24px rgba(132, 111, 138, 0.28);
}

.style-visual-frame.style-storybook-painterly::before,
.style-visual-frame.style-storybook-painterly::after,
.style-visual-frame.style-storybook-painterly .style-visual-ground {
  filter: saturate(0.88);
}

.style-visual-frame.style-pixar-3d {
  background:
    radial-gradient(circle at 76% 16%, rgba(255, 241, 177, 0.95) 0 13%, rgba(255, 241, 177, 0) 32%),
    linear-gradient(165deg, #8db8ff 0%, #77d6da 38%, #f8b8a2 100%);
  border-color: #7da0d6;
  box-shadow: 0 15px 28px rgba(64, 99, 160, 0.33);
}

.style-visual-frame.style-pixar-3d::before,
.style-visual-frame.style-pixar-3d::after {
  border: 2px solid rgba(48, 74, 130, 0.24);
  box-shadow: inset 0 7px 9px rgba(255, 255, 255, 0.28);
}

.style-visual-frame.style-classic-cartoon {
  background:
    radial-gradient(circle at 78% 14%, #ffe6a8 0 12%, rgba(255, 230, 168, 0) 14%),
    linear-gradient(180deg, #d8ecff 0 64%, #bcdcb2 64% 100%);
  border: 2px solid #8fa7c8;
  box-shadow: 0 12px 20px rgba(88, 109, 149, 0.22);
}

.style-visual-frame.style-classic-cartoon::before,
.style-visual-frame.style-classic-cartoon::after {
  border: 2px solid #8fa7c8;
  background: #ffe1be;
}

.style-visual-frame.style-classic-cartoon .style-visual-ground {
  background: #b6d8a8;
}

.style-visual-options {
  display: grid;
  gap: 0.58rem;
  align-content: start;
  max-height: min(72vh, 660px);
  overflow-y: auto;
  padding-right: 0.24rem;
}

.style-visual-options .style-option-card {
  padding: 0.56rem 0.6rem;
  border-radius: 15px;
  gap: 0.28rem;
  border-color: #ccd9ee;
  box-shadow: 0 1px 0 rgba(90, 113, 156, 0.08);
}

.style-visual-options .style-option-card:hover {
  border-color: #b6c9e7;
  background: linear-gradient(160deg, #ffffff, #f8fbff);
  transform: translateY(-1px);
}

.style-visual-options .style-option-card.active {
  border-color: #d9a6b7;
  background: linear-gradient(150deg, #fff5f8, #fffaf4);
  box-shadow: 0 6px 14px rgba(110, 86, 113, 0.12);
}

.style-visual-options .style-option-thumb {
  height: auto;
  aspect-ratio: 4 / 3;
  min-height: 130px;
  border-radius: 12px;
  border: 1px solid rgba(67, 89, 128, 0.26);
  background-size: cover;
  background-position: center 26%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
}

.style-visual-options .style-option-thumb[data-style-thumb='storybook-painterly'] {
  background-position: center 24%;
}

.style-visual-options .style-option-thumb[data-style-thumb='cinematic-realistic'] {
  background-position: center 23%;
}

.style-visual-options .style-option-thumb[data-style-thumb='pixar-3d'] {
  background-position: center 24%;
}

.style-visual-options .style-option-thumb[data-style-thumb='classic-cartoon'] {
  background-position: center 21%;
}

.style-visual-options .style-option-title {
  font-size: 0.98rem;
  line-height: 1.2;
}

.style-visual-options .style-option-meta {
  font-size: 0.84rem;
  line-height: 1.35;
}

.style-option-card {
  text-align: left;
  border: 1.5px solid #d4dfef;
  border-radius: 14px;
  background: #fff;
  padding: 0.45rem 0.55rem;
  display: grid;
  gap: 0.14rem;
  color: #435783;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease;
}

.style-option-thumb {
  display: block;
  width: 100%;
  height: clamp(64px, 9.5vw, 94px);
  border-radius: 10px;
  border: 1px solid rgba(68, 89, 128, 0.24);
  background-color: #eef3fc;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.style-option-thumb.style-swatch-storybook-painterly {
  background-image: url('/assets/style-preview/generated/exported-v4/storybook-painterly.png');
}

.style-option-thumb.style-swatch-cinematic-realistic {
  background-image: url('/assets/style-preview/generated/exported-v4/cinematic-realistic.png');
}

.style-option-thumb.style-swatch-pixar-3d {
  background-image: url('/assets/style-preview/generated/exported-v4/pixar-3d.png');
}

.style-option-thumb.style-swatch-classic-cartoon {
  background-image: url('/assets/style-preview/generated/exported-v4/classic-cartoon.png');
}

.style-option-thumb.loading {
  background-image: linear-gradient(100deg, #e8eefb 20%, #f6f9ff 45%, #e8eefb 70%);
  background-size: 220% 100%;
  animation: styleThumbPulse 1.2s linear infinite;
}

.style-option-card:hover {
  border-color: #b7cae6;
  background: #f9fbff;
  transform: translateY(-1px);
}

.style-option-card.active {
  border-color: #e1aebe;
  background: linear-gradient(145deg, #fff4f7, #fff9f2);
  color: #30446d;
}

.style-option-card:focus-visible {
  outline: 3px solid #ffc2d2;
  outline-offset: 1px;
}

.style-option-line {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.style-option-swatch {
  width: 24px;
  height: 16px;
  border-radius: 6px;
  border: 1px solid rgba(56, 77, 116, 0.26);
}

.style-option-swatch.style-swatch-cinematic-realistic {
  background: linear-gradient(160deg, #a9c5e9, #ffd9bf);
}

.style-option-swatch.style-swatch-storybook-painterly {
  background: linear-gradient(160deg, #ffd7ca, #e4f0cd, #c6e4ff);
}

.style-option-swatch.style-swatch-pixar-3d {
  background: linear-gradient(160deg, #8eb7ff, #79d6d8, #f6baa6);
}

.style-option-swatch.style-swatch-classic-cartoon {
  background: linear-gradient(160deg, #ffe0ba, #f4f2cb, #cee4c5);
}

.style-option-title {
  font-weight: 800;
  font-size: 0.94rem;
}

.style-option-meta {
  color: #66779d;
  font-size: 0.82rem;
}

.style-option-error {
  color: #8d4b57;
  font-size: 0.75rem;
  font-weight: 700;
}

.style-visual-note {
  margin: 0;
  padding: 0.62rem 0.7rem;
  border-radius: 12px;
  border: 1px solid #e5ebf8;
  background: #f8fbff;
  color: #4c6089;
  font-size: 0.88rem;
}

.auth-modal {
  width: min(480px, 92vw);
  border: none;
  padding: 0;
  border-radius: 20px;
  box-shadow: 0 20px 46px rgba(65, 84, 120, 0.3);
}

.auth-modal::backdrop {
  background: rgba(40, 55, 88, 0.42);
  backdrop-filter: blur(1px);
}

.auth-shell {
  margin: 0;
  padding: 1rem;
  display: grid;
  gap: 0.7rem;
  background: #fff;
}

.auth-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.auth-tab {
  border: 1px solid #d7e1f3;
  background: #fff;
  color: #4d5f87;
}

.auth-tab.active {
  border-color: #e8b1c0;
  background: linear-gradient(150deg, #ffe9f0, #fff6e8);
  color: #2f4166;
}

.auth-message {
  min-height: 1.15rem;
  color: #556b95;
  font-size: 0.9rem;
}

.auth-message.error {
  color: #9b3e3e;
}

.auth-panel {
  display: grid;
  gap: 0.45rem;
}

.story-canvas {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f7fbff 0%, #fffdf9 100%);
  border: 1.5px solid #dbe5f5;
  border-radius: 20px;
  padding: 0.3rem;
}

.story-canvas::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.story-canvas.page-turn-forward::after {
  animation: pageTurnForward 0.44s ease-out;
}

.story-canvas.page-turn-backward::after {
  animation: pageTurnBackward 0.44s ease-out;
}

.empty-state {
  height: 100%;
  min-height: 420px;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.5rem;
  color: #5c6f94;
}

.story-page {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 0.35rem;
}

.story-page .text-frame {
  display: none;
}

.illustration-frame {
  position: relative;
  border-radius: 16px;
  border: 1px solid #cfdbef;
  background: #fff;
  overflow: hidden;
  min-height: 200px;
  max-height: 560px;
}

.illustration-frame.guest-watermarked::after {
  content: 'Sweet Story Studio Preview';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #ffffffd9;
  text-shadow: 0 2px 6px rgba(31, 43, 71, 0.42);
  pointer-events: none;
  z-index: 4;
}

.illustration-frame.guest-locked::before {
  content: 'Sign in to unlock all pages';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  color: #3e5078;
  font-weight: 800;
  background: linear-gradient(145deg, #f7faff, #fff4ef);
  z-index: 5;
}

.illustration-frame,
.text-frame {
  will-change: opacity, transform, filter;
}

.story-page.page-enter-forward .illustration-frame {
  animation: panelInFromRight 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.story-page.page-enter-forward .text-frame {
  animation: panelInFromRightSoft 0.48s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: 0.03s;
}

.story-page.page-enter-backward .illustration-frame {
  animation: panelInFromLeft 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.story-page.page-enter-backward .text-frame {
  animation: panelInFromLeftSoft 0.48s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: 0.03s;
}

.story-page.page-enter-fade .illustration-frame,
.story-page.page-enter-fade .text-frame {
  animation: panelFadeIn 0.35s ease both;
}

.illustration-frame svg {
  width: 100%;
  height: 100%;
  display: block;
}

.generated-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-copy-overlay {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  display: grid;
  justify-items: center;
  text-align: center;
  padding: clamp(1.05rem, 3.2vw, 1.6rem) clamp(0.55rem, 1.8vw, 0.95rem)
    clamp(0.72rem, 2.1vw, 1.05rem);
  pointer-events: none;
}

.story-copy-overlay.story-layout-bottom,
.illustration-frame.story-text-layout-bottom .story-copy-overlay {
  inset: auto 0 0;
  background: linear-gradient(
    180deg,
    rgba(248, 251, 255, 0) 0%,
    rgba(248, 251, 255, 0.5) 22%,
    rgba(248, 251, 255, 0.82) 45%,
    rgba(248, 251, 255, 0.95) 66%,
    #f8fbff 100%
  );
}

.story-copy-overlay.story-cover-overlay {
  left: 50%;
  top: var(--cover-overlay-top, clamp(0.72rem, 2.4vw, 1.15rem));
  transform: translateX(-50%);
  right: initial;
  bottom: auto;
  width: min(74%, 560px);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.24rem;
  padding: 0;
  background: none;
  text-align: center;
}

.illustration-frame.cover-layout-upper {
  --cover-overlay-top: clamp(0.52rem, 1.75vw, 0.9rem);
}

.illustration-frame.cover-layout-upper .story-copy-overlay.story-cover-overlay {
  left: auto;
  right: clamp(0.65rem, 2.2vw, 1.2rem);
  transform: none;
  justify-items: end;
  text-align: right;
}

.illustration-frame.cover-layout-center {
  --cover-overlay-top: clamp(0.72rem, 2.4vw, 1.15rem);
}

.illustration-frame.cover-layout-lower {
  --cover-overlay-top: clamp(0.52rem, 1.75vw, 0.9rem);
}

.illustration-frame.cover-layout-lower .story-copy-overlay.story-cover-overlay {
  left: clamp(0.65rem, 2.2vw, 1.2rem);
  right: auto;
  transform: none;
  justify-items: start;
  text-align: left;
}

.illustration-frame.cover-layout-upper .story-cover-title,
.illustration-frame.cover-layout-lower .story-cover-title {
  font-size: clamp(1.32rem, 4.9vw, 2.62rem);
  line-height: 1.02;
}

.illustration-frame.cover-layout-upper .story-cover-subtitle,
.illustration-frame.cover-layout-lower .story-cover-subtitle {
  font-size: clamp(0.72rem, 2.1vw, 0.94rem);
}

.story-cover-badge {
  margin: 0;
  color: var(--cover-text-color, #4f6490);
  font-family: var(--story-copy-font-family, 'Nunito', sans-serif);
  font-size: clamp(0.64rem, 1.5vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-shadow: var(--cover-soft-shadow, 0 1px 10px rgba(255, 255, 255, 0.86));
}

.story-cover-title {
  margin: 0;
  color: var(--cover-text-color, #23395f);
  font-family: 'Baloo 2', cursive;
  font-size: clamp(1.72rem, 6.4vw, 3.25rem);
  line-height: 0.98;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-wrap: balance;
  -webkit-text-stroke: var(--cover-title-stroke, 1.1px rgba(255, 255, 255, 0.92));
  paint-order: stroke fill;
  text-shadow: var(--cover-title-shadow, 0 2px 12px rgba(255, 255, 255, 0.78));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.story-cover-subtitle {
  margin: 0;
  color: var(--cover-text-color, #405a88);
  font-family: var(--story-copy-font-family, 'Nunito', sans-serif);
  font-size: clamp(0.8rem, 2vw, 0.96rem);
  line-height: 1.24;
  font-weight: 700;
  text-shadow: var(--cover-soft-shadow, 0 1px 10px rgba(255, 255, 255, 0.86));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.illustration-frame.cover-bg-light {
  --cover-text-color: #23395f;
  --cover-title-stroke: 1.15px rgba(255, 255, 255, 0.92);
  --cover-title-shadow: 0 2px 14px rgba(255, 255, 255, 0.85), 0 1px 5px rgba(33, 57, 95, 0.25);
  --cover-soft-shadow: 0 1px 10px rgba(255, 255, 255, 0.86);
}

.illustration-frame.cover-bg-dark {
  --cover-text-color: #f7fbff;
  --cover-title-stroke: 1.15px rgba(27, 44, 74, 0.9);
  --cover-title-shadow: 0 2px 12px rgba(12, 23, 44, 0.85);
  --cover-soft-shadow: 0 1px 8px rgba(12, 23, 44, 0.82);
}

.story-copy-text {
  margin: 0;
  color: #2f4168;
  font-family: var(--story-copy-font-family, 'Nunito', sans-serif);
  font-size: var(--story-copy-font-size, 1.06rem);
  line-height: var(--story-copy-line-height, 1.44);
  letter-spacing: var(--story-copy-letter-spacing, 0.006em);
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
  display: block;
  width: min(98%, 920px);
  max-width: min(98%, 920px);
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  text-align: center;
}

/* ── Orientation-aware text overlay adjustments ───────────────── */

/* Landscape: short image within contain, tighten overlay to hug bottom */
.illustration-frame.orientation-landscape .story-copy-overlay.story-layout-bottom,
.illustration-frame.orientation-landscape.story-text-layout-bottom .story-copy-overlay {
  padding-top: clamp(0.6rem, 2vw, 1rem);
}

/* Portrait: taller image fills more space, extra breathing room */
.illustration-frame.orientation-portrait .story-copy-overlay.story-layout-bottom,
.illustration-frame.orientation-portrait.story-text-layout-bottom .story-copy-overlay {
  padding-top: clamp(1.6rem, 5vw, 2.4rem);
}

/* Square: balanced between landscape and portrait */
.illustration-frame.orientation-square .story-copy-overlay.story-layout-bottom,
.illustration-frame.orientation-square.story-text-layout-bottom .story-copy-overlay {
  padding-top: clamp(1rem, 3vw, 1.6rem);
}

.art-preview-wrap {
  position: relative;
  min-height: 200px;
}

.art-loading-wrap {
  position: relative;
  min-height: 200px;
  background: linear-gradient(145deg, #f4f8ff, #fff6ea);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Blurred child photo as loading placeholder */
.art-loading-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(28px) saturate(1.2);
  transform: scale(1.15);
  opacity: 0.7;
  pointer-events: none;
}

/* Indeterminate shimmer bar at bottom of loading frame */
.art-loading-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #e0e8f5;
  overflow: hidden;
  z-index: 2;
}

.art-loading-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #7ba3e0, transparent);
  animation: shimmerBar 1.5s ease-in-out infinite;
}

@keyframes shimmerBar {
  0% {
    left: -40%;
  }
  100% {
    left: 100%;
  }
}

/* Status label inside loading state */
.art-loading-label {
  position: relative;
  z-index: 2;
  font-size: 0.85rem;
  font-weight: 600;
  color: #2b3e5e;
  text-align: center;
  padding: 0.45rem 0.9rem;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

/* Blur-to-clear reveal for generated images */
.generated-art.art-reveal {
  filter: blur(18px);
  transform: scale(1.08);
  animation: artReveal 1.2s ease-out forwards;
}

@keyframes artReveal {
  to {
    filter: blur(0);
    transform: scale(1);
  }
}

.art-preview-wrap .story-illustration {
  width: 100%;
  height: 100%;
  display: block;
}

.art-overlay {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
  background: #ffffffcf;
  border: 1px solid #d6def0;
  color: #47608d;
  font-size: 0.85rem;
  font-weight: 700;
}

.art-fail {
  min-height: 200px;
  display: grid;
  place-content: center;
  gap: 0.45rem;
  text-align: center;
  padding: 1rem;
  background: #fff8f6;
  border: 1px solid #f4ccc6;
  color: #8a3a35;
}

.art-fail h4 {
  margin: 0;
  font-size: 1.1rem;
}

.art-fail p {
  margin: 0;
}

.art-fail-error {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
  font-size: 0.82rem;
  word-break: break-word;
  color: #913d38;
}

.story-illustration .ambient {
  animation: drift 6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.story-illustration .ambient.delay-1 {
  animation-delay: -1.4s;
}

.story-illustration .ambient.delay-2 {
  animation-delay: -2.8s;
}

.story-illustration .delay-1 {
  animation-delay: -1.2s;
}

.story-illustration .delay-2 {
  animation-delay: -2.4s;
}

.story-illustration .helper {
  animation: hover 3.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.story-illustration .character {
  animation: bob 2.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center bottom;
}

.story-illustration .character-jump {
  animation: jump 1.9s ease-in-out infinite;
}

.story-illustration .character-crawl {
  animation: crawl 2.3s ease-in-out infinite;
}

.story-illustration .character-hug {
  animation: hugPulse 2.4s ease-in-out infinite;
}

.story-illustration .trail {
  animation: trailFade 1.2s linear infinite;
}

.story-illustration .spark {
  animation: twinkle 1.6s ease-in-out infinite;
}

.story-illustration .blink-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 5.2s ease-in-out infinite;
}

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

@keyframes jump {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-2.6px);
  }
}

@keyframes hover {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1.7px) scale(1.03);
  }
}

@keyframes crawl {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-0.8px) translateX(1.1px);
  }
}

@keyframes hugPulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-0.6px) scale(1.02);
  }
}

@keyframes drift {
  0%,
  100% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(1.8px) translateY(-1px);
  }
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.95;
  }
}

@keyframes blink {
  0%,
  44%,
  47%,
  96%,
  100% {
    transform: scaleY(1);
  }
  45%,
  46% {
    transform: scaleY(0.08);
  }
  97%,
  98% {
    transform: scaleY(0.12);
  }
}

@keyframes trailFade {
  0% {
    opacity: 0.45;
  }
  100% {
    opacity: 0.05;
  }
}

.text-frame {
  border-radius: 16px;
  border: 1px solid #dbe4f5;
  background: #fff;
  padding: 0.85rem;
  line-height: 1.58;
  font-size: 1.02rem;
  color: #314260;
}

.page-tag {
  font-weight: 700;
  color: #7080a5;
  margin-bottom: 0.3rem;
}

.page-editor {
  border: 1px solid #d8e2f4;
  border-radius: 16px;
  background: #fff;
  padding: 0.3rem 0.5rem;
  display: grid;
  gap: 0.35rem;
}

.page-editor-head {
  display: grid;
  gap: 0.2rem;
}

.page-editor-head p {
  color: #60739b;
  font-size: 0.9rem;
}

.page-editor textarea {
  min-height: 118px;
}

.page-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.page-editor-note {
  min-height: 1.2rem;
  font-size: 0.86rem;
  color: #5d7197;
}

.translation-box {
  border: 1px solid #dbe5f5;
  border-radius: 10px;
  background: #f8faff;
  padding: 0.5rem 0.7rem;
  margin-top: 0.3rem;
}

.translation-box summary {
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  color: #4a5b82;
}

.translation-content {
  padding: 0.4rem 0;
}

.translation-text {
  font-size: 0.85rem;
  color: #3d4f7c;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
}

.pager {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.4rem;
}

.page-dots {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  overflow-y: visible;
  padding-inline: 0.35rem;
  margin-inline: 0;
  padding-top: 0.2rem;
  padding-bottom: 0.25rem;
  scroll-padding-inline: 0.35rem;
}

.dot {
  position: relative;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #cfdaef;
  background: #fff;
  color: #567;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  transition:
    transform 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease;
}

.dot.active {
  background: linear-gradient(135deg, #ffd2de, #ffecbe);
  border-color: #e2b1c0;
  transform: none;
}

.dot.active::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #ffc2d2;
  pointer-events: none;
}

.dot:focus,
.dot:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #ffc2d2;
}

/* ─── Post-Generation Action Panel ──────────────────────────────── */

.post-gen-panel {
  border: 1.5px solid #d8e2f4;
  border-radius: 16px;
  background: linear-gradient(180deg, #f4f8ff 0%, #fff 100%);
  padding: 0.3rem 0.5rem;
  display: grid;
  gap: 0.25rem;
  margin-top: 0;
}

.post-gen-header h3 {
  color: #2e3d5c;
  font-size: 1.15rem;
  margin: 0 0 0.15rem;
}

.post-gen-header p {
  color: #60739b;
  font-size: 0.9rem;
  margin: 0;
}

.post-gen-primary {
  display: grid;
  gap: 0.35rem;
}

.post-gen-primary .primary {
  width: 100%;
  font-size: 1.05rem;
  padding: 0.75rem 1.5rem;
}

.post-gen-disclaimer {
  color: #7080a5;
  font-size: 0.82rem;
  font-style: italic;
  margin: 0;
  line-height: 1.4;
}

.post-gen-downloads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.post-gen-print {
  display: grid;
  gap: 0.25rem;
}

.post-gen-print-note {
  color: #7080a5;
  font-size: 0.82rem;
  margin: 0;
  line-height: 1.4;
}

.post-gen-new {
  border-top: 1px solid #e8edf5;
  padding-top: 0.4rem;
}

.post-gen-new .ghost {
  width: 100%;
}

/* ─── Generation Progress Bar ──────────────────────────────────── */

.gen-progress {
  border: 1px solid #d8e2f4;
  border-radius: 12px;
  background: #f4f8ff;
  padding: 0.6rem 0.8rem;
  display: grid;
  gap: 0.3rem;
}

.gen-progress-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #2e3d5c;
}

.gen-progress-track {
  height: 8px;
  background: #e2e8f4;
  border-radius: 4px;
  overflow: hidden;
}

.gen-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.gen-progress-detail {
  font-size: 0.78rem;
  color: #60739b;
}

/* ─── Dynamic Frame Sizing ─────────────────────────────────────── */

.storybook-panel > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.page-editor,
.pager,
.post-gen-panel,
.story-canvas,
.gen-progress {
  min-width: 0;
  max-width: 100%;
}

/* ─── Save Progress Button ─────────────────────────────────────── */

.save-progress-bar {
  display: inline-flex;
}

.save-progress-bar button {
  font-size: 0.72rem;
  padding: 0.18rem 0.55rem;
  border-radius: 4px;
  border: 1px solid #b8c7e2;
  background: #fff;
  color: #3d4f7c;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
  white-space: nowrap;
}

.save-progress-bar button:hover {
  background: #e4eaf6;
}

.save-progress-bar button.saving {
  color: #7a8bb5;
  cursor: default;
  pointer-events: none;
}

.save-progress-bar button.saved {
  color: #2e7d32;
  border-color: #a5d6a7;
}

@media (max-width: 980px) {
  .site-nav {
    grid-template-columns: 1fr;
    justify-items: start;
    position: static;
  }

  .nav-links {
    justify-content: start;
    flex-wrap: wrap;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .trust-strip {
    grid-template-columns: 1fr;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .storybook-head {
    flex-direction: column;
  }

  .book-actions {
    width: 100%;
  }

  .book-actions button {
    flex: 1;
  }

  .wizard-preview-panel {
    grid-template-columns: 1fr;
  }

  .wizard-preview-art {
    width: 100%;
    height: 150px;
  }

  .appearance-grid {
    grid-template-columns: 1fr;
  }

  .company-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card .plan-grid {
    grid-template-columns: 1fr;
  }

  .site-footer {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .field-row,
  .actions,
  .page-editor-actions,
  .wizard-navigation,
  .wizard-pricing-grid,
  .wizard-style-cards {
    grid-template-columns: 1fr;
  }

  .field-label-row {
    align-items: start;
    flex-direction: column;
  }

  .pronoun-options {
    grid-template-columns: 1fr;
  }

  .size-visual-body {
    grid-template-columns: 1fr;
  }

  .style-visual-body {
    grid-template-columns: 1fr;
  }

  .size-visual-stage {
    min-height: 185px;
  }

  .style-visual-stage {
    min-height: 200px;
  }

  .style-option-thumb {
    height: clamp(72px, 24vw, 98px);
  }

  .story-copy-overlay {
    padding-inline: 0.56rem;
  }

  .story-copy-overlay.story-layout-bottom,
  .illustration-frame.story-text-layout-bottom .story-copy-overlay {
    padding-top: clamp(1.7rem, 8.8vw, 2.7rem);
    padding-bottom: 0.76rem;
  }

  .story-copy-overlay.story-cover-overlay {
    left: 50%;
    top: var(--cover-overlay-top-mobile, 0.72rem);
    transform: translateX(-50%);
    width: min(84%, 380px);
    padding: 0;
  }

  .illustration-frame.cover-layout-upper {
    --cover-overlay-top-mobile: 0.48rem;
  }

  .illustration-frame.cover-layout-upper .story-copy-overlay.story-cover-overlay {
    left: auto;
    right: 0.52rem;
    transform: none;
    justify-items: end;
    text-align: right;
    width: min(86%, 340px);
  }

  .illustration-frame.cover-layout-center {
    --cover-overlay-top-mobile: 0.72rem;
  }

  .illustration-frame.cover-layout-lower {
    --cover-overlay-top-mobile: 0.48rem;
  }

  .illustration-frame.cover-layout-lower .story-copy-overlay.story-cover-overlay {
    left: 0.52rem;
    right: auto;
    transform: none;
    justify-items: start;
    text-align: left;
    width: min(86%, 340px);
  }

  .illustration-frame.cover-layout-upper .story-cover-title,
  .illustration-frame.cover-layout-lower .story-cover-title {
    font-size: clamp(1.08rem, 6.2vw, 1.84rem);
  }

  .story-cover-badge {
    font-size: 0.6rem;
  }

  .story-cover-title {
    font-size: clamp(1.28rem, 7.4vw, 2.18rem);
  }

  .story-cover-subtitle {
    font-size: clamp(0.72rem, 2.7vw, 0.86rem);
  }

  .story-copy-text {
    font-size: max(0.88rem, calc(var(--story-copy-font-size, 1.02rem) - 0.1rem));
    line-height: var(--story-copy-line-height, 1.42);
  }

  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
}

@media print {
  .site-nav,
  .trust-strip,
  .controls-panel,
  .pager,
  .book-actions,
  .hero,
  .company-grid,
  .legal-preview,
  .site-footer {
    display: none !important;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  body {
    background: #fff;
  }

  .storybook-panel,
  .story-canvas,
  .text-frame,
  .illustration-frame {
    border: none;
    box-shadow: none;
    background: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-canvas.page-turn-forward::after,
  .story-canvas.page-turn-backward::after,
  .story-page.page-enter-forward .illustration-frame,
  .story-page.page-enter-forward .text-frame,
  .story-page.page-enter-backward .illustration-frame,
  .story-page.page-enter-backward .text-frame,
  .story-page.page-enter-fade .illustration-frame,
  .story-page.page-enter-fade .text-frame,
  .story-illustration .ambient,
  .story-illustration .helper,
  .story-illustration .character,
  .story-illustration .trail,
  .story-illustration .spark,
  .story-illustration .blink-eye {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .dot {
    transition: none;
  }
}

@keyframes panelInFromRight {
  0% {
    opacity: 0;
    filter: blur(1.8px);
    transform: translateX(18px) scale(0.99);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) scale(1);
  }
}

@keyframes panelInFromRightSoft {
  0% {
    opacity: 0;
    transform: translateX(12px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes styleThumbPulse {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: 110% 0;
  }
}

@keyframes panelInFromLeft {
  0% {
    opacity: 0;
    filter: blur(1.8px);
    transform: translateX(-18px) scale(0.99);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) scale(1);
  }
}

@keyframes panelInFromLeftSoft {
  0% {
    opacity: 0;
    transform: translateX(-12px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes panelFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes pageTurnForward {
  0% {
    opacity: 0;
    background: linear-gradient(90deg, #ffffff00 0%, #ffffff00 68%, #fff7e3cc 100%);
  }
  30% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    background: linear-gradient(90deg, #ffffff00 0%, #ffffff00 60%, #ffffff00 100%);
  }
}

@keyframes pageTurnBackward {
  0% {
    opacity: 0;
    background: linear-gradient(270deg, #ffffff00 0%, #ffffff00 68%, #e8f3ffcc 100%);
  }
  30% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    background: linear-gradient(270deg, #ffffff00 0%, #ffffff00 60%, #ffffff00 100%);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Site pages (merged from site.css)
   Variable mapping applied:
     --bg-1 → --bg-start, --bg-2 → --bg-end, --surface → --card,
     --text → --text-main, --muted → --text-soft, --brand-a → --primary,
     --brand-b → --primary-strong, --line → --outline
   ═══════════════════════════════════════════════════════════════════ */

a {
  color: #3e5fa0;
}

.container {
  width: min(1180px, 94vw);
  margin: 1rem auto 2rem;
  display: grid;
  gap: 1rem;
}

.nav-center {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.nav-center a {
  color: #44608f;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.93rem;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.account-pill {
  border-radius: 999px;
  border: 1px solid #d2ddf2;
  background: #f8fbff;
  color: #405a84;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.28rem 0.62rem;
}

.btn {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.62rem 0.9rem;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background: linear-gradient(150deg, var(--primary), var(--primary-strong));
  color: #fff;
  box-shadow: 0 10px 20px rgba(240, 107, 141, 0.32);
}

.btn-ghost {
  border-color: #d2ddef;
  background: #fff;
  color: #41547f;
}

.hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid #ffffffbb;
  background: linear-gradient(150deg, #ffffffd8, #f8fcffcf);
  box-shadow: var(--shadow);
  padding: clamp(1.1rem, 2vw, 1.7rem);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1rem;
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  opacity: 0.32;
  pointer-events: none;
}

.hero::before {
  width: 260px;
  height: 260px;
  right: -60px;
  top: -100px;
  background: radial-gradient(circle, #ffd6db, transparent 66%);
}

.hero::after {
  width: 220px;
  height: 220px;
  left: -70px;
  bottom: -90px;
  background: radial-gradient(circle, #cde8ff, transparent 66%);
}

.hero-copy {
  display: grid;
  gap: 0.78rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.74rem;
  color: #7283a8;
  font-weight: 800;
}

.hero h1 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.04;
  color: #29395f;
}

.hero p {
  color: var(--text-soft);
  font-size: 1.02rem;
  line-height: 1.56;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.hero-visual {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(41, 57, 95, 0.18);
  align-self: center;
}

.hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  border-radius: 20px;
}

.hero-visual-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.55rem 0.8rem;
  background: linear-gradient(transparent, rgba(20, 30, 50, 0.65));
  color: #ffffffcc;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: right;
}

.quick-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.66rem;
}

.stat {
  border-radius: 15px;
  border: 1px solid #dde6f6;
  background: #fff;
  padding: 0.72rem;
  text-align: center;
}

.stat strong {
  display: block;
  font-size: 1.2rem;
  color: #2f426d;
}

.stat span {
  font-size: 0.84rem;
  color: #627399;
}

.section {
  border-radius: 24px;
  border: 1px solid #ffffffb7;
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 1rem;
}

.section-head {
  display: grid;
  gap: 0.36rem;
  margin-bottom: 0.8rem;
}

.section-head p {
  color: var(--text-soft);
}

.sample-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
}

.sample-card {
  border-radius: 16px;
  border: 1px solid #d9e2f4;
  background: #fff;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto;
}

.sample-preview {
  height: 260px;
  background: #f2f6ff;
}

.sample-preview object,
.sample-preview embed {
  width: 100%;
  height: 100%;
  border: 0;
}

.sample-meta {
  padding: 0.72rem;
  display: grid;
  gap: 0.28rem;
}

.sample-meta h3 {
  font-size: 1rem;
  color: #344a76;
}

.sample-meta p {
  color: #607196;
  font-size: 0.9rem;
}

/* ─── Sample book carousel (landing page) ─── */
.sample-carousel {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: #c4d0e8 transparent;
}

.sample-carousel::-webkit-scrollbar {
  height: 6px;
}

.sample-carousel::-webkit-scrollbar-thumb {
  background: #c4d0e8;
  border-radius: 4px;
}

.sample-book-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
  border-radius: 18px;
  border: 1px solid #d9e2f4;
  background: #fff;
  box-shadow: 0 6px 18px rgba(66, 88, 133, 0.1);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.sample-book-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(66, 88, 133, 0.16);
}

.sample-book-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #f2f6ff;
}

.sample-book-info {
  padding: 0.72rem 0.8rem;
  display: grid;
  gap: 0.22rem;
}

.sample-book-info h3 {
  font-size: 0.95rem;
  color: #2f4168;
  line-height: 1.3;
}

.sample-book-info p {
  font-size: 0.82rem;
  color: #607196;
  line-height: 1.4;
}

.sample-tag {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #7b8bb5;
  background: #f0f4ff;
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.sample-carousel-hint {
  text-align: center;
  margin-top: 0.6rem;
  font-size: 0.92rem;
}

.sample-carousel-hint a {
  color: var(--accent, #5b7fdb);
  font-weight: 600;
  text-decoration: none;
}

.sample-carousel-hint a:hover {
  text-decoration: underline;
}

.sample-story-copy {
  display: grid;
  gap: 0.5rem;
  padding-inline: 0.22rem;
}

.sample-scene-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid #d5dff2;
  background: #f6f9ff;
  color: #46618e;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.62rem;
}

.sample-story-copy p:last-child {
  color: #465d8a;
  font-size: 1.04rem;
  line-height: 1.58;
}

.sample-doc-links {
  margin-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sample-doc-links a {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #cfdbf1;
  background: #fff;
  color: #3e5f99;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 0.45rem 0.78rem;
}

.sample-guest-note {
  margin-top: 0.55rem;
  border-radius: 12px;
  border: 1px solid #f2d4d3;
  background: #fff8f7;
  color: #725150;
  padding: 0.55rem 0.65rem;
  font-size: 0.88rem;
}

.sample-guest-note a {
  font-weight: 800;
}

.style-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0.72rem;
}

.style-card {
  border-radius: 16px;
  border: 1px solid #dce5f5;
  background: #fff;
  overflow: hidden;
  display: grid;
  gap: 0.45rem;
  padding-bottom: 0.75rem;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.style-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(41, 57, 95, 0.14);
}

.style-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid #dfe8f8;
  transition: transform 0.3s ease;
}

.style-card:hover img {
  transform: scale(1.03);
}

.style-card h3 {
  padding-inline: 0.72rem;
  color: #2f436e;
  font-size: 1.03rem;
}

.style-card p {
  padding-inline: 0.72rem;
  color: #5b6f96;
  font-size: 0.88rem;
  line-height: 1.5;
}

.style-cinematic img {
  filter: saturate(1.1) contrast(1.05);
}

.style-painterly img {
  filter: saturate(0.85) contrast(0.95) brightness(1.03);
}

.style-animated img {
  filter: saturate(1.2) contrast(1.12);
}

.style-cartoon img {
  filter: saturate(1.25) contrast(1.08);
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 0.72rem;
}

.review {
  border-radius: 16px;
  border: 1px solid #dde6f6;
  background: #fff;
  padding: 0.8rem;
  display: grid;
  gap: 0.45rem;
}

.stars {
  color: #ffb739;
  letter-spacing: 0.08em;
}

.review p {
  color: #51658f;
  font-size: 0.92rem;
  line-height: 1.5;
}

.review-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  font-size: 0.83rem;
  color: #6a7ba2;
}

.verified {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 800;
  color: #3f8f5e;
}

.story-banner {
  border-radius: 24px;
  border: 1px solid #f1d3da;
  background: linear-gradient(150deg, #fff8fa, #fffef6);
  box-shadow: 0 14px 30px rgba(193, 126, 145, 0.16);
  padding: 1rem;
  display: grid;
  gap: 0.65rem;
}

.story-banner p {
  color: #5e6f91;
  line-height: 1.56;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 0.82rem;
}

.card {
  border-radius: 18px;
  border: 1px solid #dce5f5;
  background: #fff;
  padding: 0.95rem;
  display: grid;
  gap: 0.45rem;
}

.card p {
  color: #5f7298;
  line-height: 1.55;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0.72rem;
}

.plan {
  border-radius: 16px;
  border: 1px solid #d8e2f4;
  background: #fff;
  padding: 0.8rem;
  display: grid;
  gap: 0.38rem;
}

.plan.featured {
  border-color: #e8b4c5;
  background: linear-gradient(160deg, #fff8fb, #fff8f1);
}

.plan.current-plan {
  border-color: #8ec6ab;
  background: linear-gradient(160deg, #f3fff8, #f7fff9);
}

.plan h3 {
  color: #324770;
  font-size: 1.1rem;
}

.price {
  font-size: 1.36rem;
  color: #2d416a;
  font-weight: 900;
}

.price span {
  color: #63749a;
  font-size: 0.84rem;
  font-weight: 700;
}

.plan ul {
  margin: 0;
  padding-left: 1.1rem;
  color: #556992;
  display: grid;
  gap: 0.3rem;
  font-size: 0.89rem;
}

.auth-wrap {
  width: min(520px, 94vw);
  margin: 1.4rem auto 2rem;
}

.auth-card {
  border-radius: 24px;
  border: 1px solid #ffffffb6;
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 1rem;
  display: grid;
  gap: 0.72rem;
}

.auth-card p {
  color: var(--text-soft);
}

.auth-form {
  display: grid;
  gap: 0.58rem;
}

.auth-form label {
  color: #3b517d;
  font-weight: 800;
}

.auth-form input {
  border: 1.5px solid var(--outline);
  border-radius: 12px;
  padding: 0.62rem 0.72rem;
  font: inherit;
}

.auth-message {
  min-height: 1.25rem;
  color: #50648f;
  font-size: 0.92rem;
}

.auth-message.error {
  color: #a24646;
}

/* ─── Social Login ────────────────────────────────────── */

.social-login-buttons {
  display: grid;
  gap: 0.5rem;
}

.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--outline);
  border-radius: 12px;
  background: #fff;
  color: var(--text-main);
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}

.btn-social:hover {
  border-color: #b3c1e0;
  box-shadow: 0 4px 12px rgba(65, 86, 130, 0.08);
}

.btn-social:active {
  background: #f6f8fc;
}

.btn-social:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-google:hover {
  border-color: #4285f4;
}

.btn-apple {
  color: #1d1d1f;
}

.btn-apple:hover {
  border-color: #1d1d1f;
}

.social-icon {
  flex-shrink: 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--outline);
}

.footer {
  width: min(1180px, 94vw);
  margin: 0 auto 1.4rem;
  color: #5f7093;
  font-size: 0.88rem;
}

@media (max-width: 1080px) {
  .hero {
    grid-template-columns: 1fr;
    overflow: clip;
  }

  .hero-visual {
    max-height: 380px;
  }

  .hero-image {
    max-height: 380px;
  }
}

/* ── Mobile hamburger menu ──────────────────────────────────────── */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--outline);
  border-radius: 10px;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--text-main);
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: inline-flex;
  }

  .nav-center,
  .nav-right,
  .nav-links,
  .nav-auth {
    display: none;
  }

  body.nav-open .nav-center,
  body.nav-open .nav-right,
  body.nav-open .nav-links,
  body.nav-open .nav-auth {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
}

@media (max-width: 760px) {
  .site-nav {
    grid-template-columns: 1fr;
    justify-items: start;
    position: static;
  }

  .nav-center {
    justify-content: start;
  }

  .quick-stats,
  .sample-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-right {
    flex-wrap: wrap;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Checkout page (extracted from checkout.html inline styles)
   ═══════════════════════════════════════════════════════════════════ */

.shell {
  width: min(700px, 92vw);
  margin: 2rem auto;
  display: grid;
  gap: 1rem;
}

.shell .card {
  background: var(--card);
  border: 1px solid #ffffffa8;
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(75, 91, 128, 0.14);
  padding: 1rem;
}

.summary {
  display: grid;
  gap: 0.35rem;
}

.summary strong {
  color: #314260;
}

.shell form {
  display: grid;
  gap: 0.7rem;
}

.shell label {
  font-weight: 700;
  color: #394a73;
  font-size: 0.94rem;
}

.shell input {
  width: 100%;
  border: 1.5px solid var(--outline);
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: var(--text-main);
  background: #fff;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.shell button {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.66rem 0.9rem;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(150deg, var(--primary), var(--primary-strong));
  color: #fff;
  box-shadow: 0 10px 18px rgba(242, 100, 135, 0.3);
}

.shell button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.message {
  min-height: 1.25rem;
  font-size: 0.93rem;
  color: #4f628a;
}

.message.error {
  color: #a14343;
}

.link-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #3c5a8e;
  text-decoration: none;
  font-weight: 700;
  margin-top: 0.4rem;
}

@media (max-width: 720px) {
  .row {
    grid-template-columns: 1fr;
  }
}

/* ─── Credit Pill ─── */
.nav-credits {
  font-size: 0.8rem;
  padding: 4px 10px;
  background: #f0edff;
  color: #6c63ff;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
}

/* ─── Account Dropdown ─── */
.nav-account-wrapper {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  min-width: 180px;
  z-index: 200;
  overflow: hidden;
}

.nav-dropdown a,
.nav-dropdown button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  color: #333;
  text-decoration: none;
  cursor: pointer;
}

.nav-dropdown a:hover,
.nav-dropdown button:hover {
  background: #f7f4ff;
}

/* ─── Mobile Drawer ─── */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  background: #fff;
  z-index: 1000;
  padding: 24px;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
}

.mobile-drawer-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 1.8rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
  line-height: 1;
}

.mobile-drawer nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 40px;
}

.mobile-drawer nav a,
.mobile-drawer nav button {
  display: block;
  padding: 12px 16px;
  font-size: 1rem;
  color: #333;
  text-decoration: none;
  border-radius: 8px;
  border: none;
  background: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.mobile-drawer nav a:hover,
.mobile-drawer nav button:hover {
  background: #f7f4ff;
}

.mobile-drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

/* ─── Footer Grid ─── */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  padding: 40px 24px 24px;
  max-width: 900px;
  margin: 0 auto;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: 1.1rem;
  color: #243251;
}

.footer-brand .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
}

.footer-tagline {
  color: #5f6f8f;
  font-size: 0.9rem;
  margin-top: 8px;
}

.footer-col h4 {
  font-family: 'Baloo 2', cursive;
  font-size: 0.95rem;
  color: #243251;
  margin: 0 0 12px;
}

.footer-col a {
  display: block;
  color: #5f6f8f;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 4px 0;
}

.footer-col a:hover {
  color: #ff8ba7;
}

.footer-bottom {
  text-align: center;
  padding: 16px 24px;
  border-top: 1px solid #eee;
  font-size: 0.85rem;
  color: #aab4cc;
}

.footer-bottom a {
  color: #aab4cc;
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .footer-brand {
    justify-content: center;
  }
}

/* ─── FAQ Accordion ─── */
.faq-list {
  max-width: 740px;
  margin: 0 auto;
}
.faq-item {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.faq-item summary {
  padding: 16px 20px;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-item summary::after {
  content: '+';
  font-size: 1.3rem;
  font-weight: 700;
  color: #ff8ba7;
  transition: transform 0.2s;
}
.faq-item[open] summary::after {
  content: '\2212';
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-answer {
  padding: 0 20px 16px;
  color: #5f6f8f;
  line-height: 1.6;
}
.faq-answer a {
  color: #ff8ba7;
  text-decoration: underline;
}

/* ─── Contact Page ─── */
.contact-wrapper {
  max-width: 560px;
  margin: 0 auto;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-form label {
  font-weight: 700;
  font-size: 0.9rem;
  color: #243251;
}
.contact-form input,
.contact-form textarea {
  padding: 12px 14px;
  border: 1.5px solid #d9e2f5;
  border-radius: 10px;
  font: inherit;
  font-size: 0.95rem;
  color: #243251;
  background: #fff;
  transition: border-color 0.15s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #ff8ba7;
  box-shadow: 0 0 0 3px rgba(255, 139, 167, 0.15);
}
.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}
.contact-submit {
  align-self: flex-start;
  margin-top: 4px;
}
.contact-status {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.contact-status--success {
  background: #e8f7ee;
  color: #2d6a4f;
}
.contact-status--error {
  background: #fde8e8;
  color: #a14343;
}
.contact-alt {
  margin-top: 32px;
  text-align: center;
  color: #5f6f8f;
  font-size: 0.9rem;
  line-height: 1.6;
}
.contact-alt a {
  color: #ff8ba7;
  text-decoration: underline;
}

/* ─── 404 Page ─── */
.not-found-section {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.not-found-content {
  text-align: center;
  max-width: 480px;
}
.not-found-code {
  font-family: 'Baloo 2', cursive;
  font-size: 7rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(150deg, #ff8ba7, #f06b8d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
.not-found-content h1 {
  font-family: 'Baloo 2', cursive;
  font-size: 1.5rem;
  color: #243251;
  margin-bottom: 8px;
}
.not-found-desc {
  color: #5f6f8f;
  font-size: 1rem;
  margin-bottom: 24px;
}

/* ─── Toast Notifications ─── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  animation: toast-in 0.3s ease;
}

.toast--success {
  background: #2d6a4f;
}
.toast--error {
  background: #d32f2f;
}
.toast--info {
  background: #1976d2;
}
.toast--warning {
  background: #f57c00;
}

.toast--exiting {
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
}

.toast-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.8;
  line-height: 1;
}

.toast-close:hover {
  opacity: 1;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 480px) {
  #toast-container {
    right: 12px;
    left: 12px;
    max-width: none;
  }
}

/* ─── Loading Skeletons ─── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-text {
  height: 1em;
  margin-bottom: 8px;
}

.skeleton-card {
  height: 200px;
  border-radius: 12px;
}

/* ─── Focus Styles ─── */
:focus-visible {
  outline: 3px solid #6c63ff;
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #6c63ff;
  outline-offset: 2px;
}

/* ─── Back to Top ─── */
.back-to-top {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(150deg, #ff8ba7, #f06b8d);
  color: #fff;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 500;
  transition: opacity 0.3s;
}

.back-to-top:hover {
  opacity: 0.85;
}

/* ─── Sample Books Gallery ─── */
.samples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.sample-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid var(--outline, #d5deef);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.sample-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.sample-card-cover {
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sample-card-placeholder {
  font-size: 4rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Baloo 2', cursive;
}

.sample-card-body {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sample-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2b3a5e;
  margin: 0;
  line-height: 1.3;
}

.sample-card-subtitle {
  font-size: 0.85rem;
  color: #6b7fa3;
  margin: 0;
  line-height: 1.4;
}

.sample-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  line-height: 1.4;
}

.badge-style {
  background: #eef1f8;
  color: #5f7fbb;
}

.badge-age {
  background: #fef3e2;
  color: #c5842a;
}

.sample-card-cta {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #ff6b8a;
}

.sample-card:hover .sample-card-cta {
  text-decoration: underline;
}

/* ─── Sample Mode (studio viewer) ─── */
.sample-banner {
  text-align: center;
  padding: 1.5rem 1rem 0.5rem;
}

.sample-back-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #5f7fbb;
  margin-bottom: 0.75rem;
}

.sample-banner-info .eyebrow {
  margin-bottom: 0.25rem;
}

.sample-banner-info h1 {
  font-size: 1.8rem;
  margin-bottom: 0.25rem;
}

.sample-banner-info p {
  color: #6b7fa3;
  font-size: 1rem;
}

/* Full-width storybook when in sample mode */
body.sample-mode .workspace {
  grid-template-columns: 1fr;
}

body.sample-mode .storybook-panel {
  max-width: 860px;
  margin: 0 auto;
}

/* Sample text-only pages (title, dedication, the-end, about, back-cover) */
.sample-text-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 2rem;
  text-align: center;
  border-radius: 12px;
}

.sample-text-content {
  max-width: 520px;
}

.sample-text-content p {
  margin: 0.5rem 0;
  line-height: 1.6;
}

.sample-text-title {
  background: linear-gradient(135deg, #f0e6ff 0%, #e6f0ff 100%);
}

.sample-text-title .sample-text-content p {
  font-family: 'Baloo 2', cursive;
  font-size: 2rem;
  font-weight: 700;
  color: #3a2c6e;
}

.sample-text-dedication {
  background: linear-gradient(135deg, #fff5f7 0%, #ffeef3 100%);
}

.sample-text-dedication .sample-text-content p {
  font-style: italic;
  font-size: 1.1rem;
  color: #6b4c5e;
  line-height: 1.7;
}

.sample-text-the-end {
  background: linear-gradient(135deg, #e8f4f0 0%, #f0f8ff 100%);
}

.sample-text-the-end .sample-text-content p {
  font-family: 'Baloo 2', cursive;
  font-size: 2.2rem;
  font-weight: 700;
  color: #2c5e4a;
}

.sample-text-about {
  background: linear-gradient(135deg, #f8f6ff 0%, #f0f4ff 100%);
  text-align: left;
}

.sample-text-about .sample-text-content p {
  font-size: 0.95rem;
  color: #4a5568;
  line-height: 1.7;
}

.sample-text-about .sample-text-content p:first-child {
  font-weight: 700;
  font-size: 1.1rem;
  color: #2b3a5e;
}

.sample-text-back-cover {
  background: linear-gradient(135deg, #fff8f0 0%, #fff0e6 100%);
}

.sample-text-back-cover .sample-text-content p {
  font-size: 0.95rem;
  color: #5a4a3e;
}

.sample-text-back-cover .sample-text-content p:first-child {
  font-family: 'Baloo 2', cursive;
  font-size: 1.4rem;
  font-weight: 700;
  color: #2b3a5e;
}

/* Sample CTA */
.sample-cta {
  text-align: center;
  padding: 1.5rem 1rem;
  margin-top: 0.5rem;
  background: linear-gradient(135deg, #fff5f7 0%, #f0e6ff 100%);
  border-radius: 16px;
  border: 1.5px solid var(--outline, #d5deef);
}

.sample-cta-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: #2b3a5e;
  margin-bottom: 0.75rem;
}

.sample-cta-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── Story outline section labels ─── */
.story-outline > small {
  margin-bottom: 0.25rem;
}

.section-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #5f7fbb;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════
   Global responsive — ensure no section overflows on any screen.
   Must come AFTER all component styles to win the cascade.
   ═══════════════════════════════════════════════════════════════════ */

/* All pages: prevent content from bursting container on any width */
.container,
.shell {
  min-width: 0;
  box-sizing: border-box;
}

.section,
.hero,
.card,
.plan,
.faq-item,
.auth-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 1200px) {
  .workspace {
    grid-template-columns: minmax(260px, 380px) 1fr;
  }
}

@media (max-width: 980px) {
  .hero,
  .workspace {
    grid-template-columns: 1fr;
    min-width: 0;
    max-width: 100%;
  }

  .hero-card,
  .controls-panel,
  .storybook-panel {
    min-width: 0;
    max-width: 100%;
  }

  .sample-book-card {
    flex: 0 0 220px;
  }
}

@media (max-width: 760px) {
  .sample-book-card {
    flex: 0 0 200px;
  }

  .section {
    padding: 0.75rem;
  }
}

@media (max-width: 640px) {
  .extra-character .field-row {
    grid-template-columns: 1fr;
  }

  .sample-book-card {
    flex: 0 0 180px;
  }

  .sample-book-info h3 {
    font-size: 0.85rem;
  }

  .sample-book-info p {
    font-size: 0.76rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Large screen overrides — let content breathe on wide monitors
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  .container,
  .footer,
  .app-shell {
    width: min(1440px, 92vw);
  }

  .sample-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero {
    padding: clamp(1.5rem, 2.5vw, 2.5rem);
  }

  .section {
    padding: 1.5rem;
  }
}

@media (min-width: 1800px) {
  .container,
  .footer,
  .app-shell {
    width: min(1680px, 90vw);
  }

  .sample-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .hero {
    padding: 2.5rem;
  }

  .section {
    padding: 2rem;
  }
}

/* ==========================================================================
   UI refresh overrides (2026-03)
   Keeps all existing behavior/markup and improves visual design consistency.
   ========================================================================== */

:root {
  --bg-start: #fff4e8;
  --bg-end: #e6f2ff;
  --card: rgba(255, 255, 255, 0.83);
  --text-main: #1f2b46;
  --text-soft: #52658a;
  --primary: #ff7d6a;
  --primary-strong: #f05d8f;
  --outline: #cfdbf0;
  --shadow: 0 18px 40px rgba(39, 58, 97, 0.14);
}

body {
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 222, 191, 0.58), transparent 34%),
    radial-gradient(circle at 90% 8%, rgba(182, 225, 255, 0.48), transparent 36%),
    linear-gradient(155deg, var(--bg-start), var(--bg-end));
  color: var(--text-main);
}

a {
  color: #2f5ea6;
}

.container,
.app-shell {
  width: min(1240px, 94vw);
}

.site-nav {
  top: 0.5rem;
  padding: 0.72rem 1rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(250, 252, 255, 0.66));
  box-shadow: 0 14px 36px rgba(41, 58, 95, 0.16);
}

.brand {
  color: #20365f;
}

.nav-center a {
  padding: 0.36rem 0.62rem;
  border-radius: 999px;
  color: #315386;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.nav-center a:hover {
  background: rgba(240, 245, 255, 0.95);
  color: #213d6e;
}

.nav-credits {
  border: 1px solid #d7e4f8;
  background: #f2f7ff;
  color: #355c9b;
  font-weight: 700;
}

.account-pill {
  border: 1px solid #d8e2f3;
  background: #f7fbff;
  color: #35527f;
}

.nav-dropdown {
  border: 1px solid #d9e3f4;
  box-shadow: 0 16px 34px rgba(35, 56, 94, 0.19);
}

.nav-dropdown a,
.nav-dropdown button {
  color: #294977;
}

.nav-dropdown a:hover,
.nav-dropdown button:hover {
  background: #f3f8ff;
}

.btn {
  border-radius: 14px;
  padding: 0.66rem 0.98rem;
  font-weight: 800;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  box-shadow: 0 12px 26px rgba(237, 91, 119, 0.31);
}

.btn-primary:hover {
  box-shadow: 0 14px 30px rgba(237, 91, 119, 0.4);
}

.btn-ghost {
  border-color: #cad7ef;
  background: rgba(255, 255, 255, 0.8);
}

.hero {
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 231, 201, 0.56), transparent 30%),
    radial-gradient(circle at 10% 94%, rgba(201, 228, 255, 0.5), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(245, 250, 255, 0.74));
  box-shadow: 0 22px 48px rgba(38, 57, 95, 0.16);
  padding: clamp(1.25rem, 2.4vw, 2rem);
  gap: clamp(1rem, 2vw, 1.4rem);
}

.hero-copy > * {
  animation: uiRiseIn 0.45s ease both;
}

.hero-copy > *:nth-child(2) {
  animation-delay: 0.03s;
}
.hero-copy > *:nth-child(3) {
  animation-delay: 0.06s;
}
.hero-copy > *:nth-child(4) {
  animation-delay: 0.09s;
}
.hero-copy > *:nth-child(5) {
  animation-delay: 0.12s;
}

.hero h1 {
  color: #1f345b;
  letter-spacing: 0.01em;
}

.hero p {
  color: #4f648a;
}

.hero-visual {
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 18px 34px rgba(29, 46, 78, 0.23);
}

.quick-stats .stat {
  border: 1px solid #dce6f6;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(246, 251, 255, 0.92));
}

.quick-stats .stat strong {
  color: #25436f;
}

.quick-stats .stat span {
  color: #597099;
}

.section,
.card,
.plan,
.review,
.auth-card,
.company-card,
.legal-preview,
.shell .card,
.controls-panel,
.storybook-panel {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: var(--card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.section {
  padding: clamp(0.95rem, 1.6vw, 1.4rem);
}

.card,
.plan,
.review {
  border-color: #d9e4f4;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 251, 255, 0.9));
}

.card:hover,
.plan:hover,
.review:hover,
.style-card:hover,
.sample-book-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(35, 57, 96, 0.17);
}

.sample-book-card {
  border-color: #d7e2f2;
}

.sample-book-info h3,
.style-card h3,
.plan h3,
.card h3 {
  color: #213a64;
}

.sample-tag {
  border: 1px solid #d8e4f8;
  background: #f4f8ff;
  color: #4f6e9f;
  border-radius: 999px;
  font-weight: 700;
}

.style-card {
  border-color: #d8e3f4;
}

.style-card p,
.review p,
.card p,
.plan ul,
.faq-answer,
.section-head p {
  color: #50678e;
}

.faq-item {
  border: 1px solid #dde6f5;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 20px rgba(44, 65, 104, 0.1);
}

.faq-item summary::after {
  color: var(--primary-strong);
}

input[type='text'],
input[type='email'],
input[type='password'],
textarea,
select,
.contact-form input,
.contact-form textarea,
.auth-form input,
.shell input {
  border: 1.5px solid #ccdaef;
  background: rgba(255, 255, 255, 0.92);
}

input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
textarea:focus,
select:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(255, 113, 142, 0.35);
  outline-offset: 2px;
  border-color: #a6bde2;
}

.mobile-menu-toggle {
  border: 1px solid #d3dff2;
  background: rgba(255, 255, 255, 0.86);
}

.mobile-drawer {
  border-left: 1px solid #d8e2f4;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow: -12px 0 30px rgba(28, 47, 83, 0.2);
}

.mobile-drawer nav a,
.mobile-drawer nav button {
  color: #2d4f80;
}

.mobile-drawer nav a:hover,
.mobile-drawer nav button:hover {
  background: #edf4ff;
}

.footer-grid {
  border-top: 1px solid #e2eaf8;
}

@keyframes uiRiseIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-actions .btn {
    flex: 1;
  }

  .site-nav {
    top: 0.35rem;
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .card,
  .plan,
  .review,
  .style-card,
  .sample-book-card,
  .hero-copy > * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Page-Specific Styles (extracted from inline <style> blocks)
   ═══════════════════════════════════════════════════════════════ */

/* ── Account Page ──────────────────────────────────────────── */
.account-wrap {
  width: min(640px, 94vw);
  margin: 1.4rem auto 2rem;
}
.account-section {
  border-radius: 24px;
  border: 1px solid #ffffffb6;
  background: var(--card);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.2rem;
}
.account-section h2 {
  font-size: 1.25rem;
  margin: 0 0 1rem;
  color: var(--heading);
}
.account-field {
  margin-bottom: 1rem;
}
.account-field label {
  display: block;
  color: #3b517d;
  font-weight: 800;
  font-size: 0.92rem;
  margin-bottom: 0.3rem;
}
.account-field input[type='text'],
.account-field input[type='email'],
.account-field input[type='password'] {
  width: 100%;
  border: 1.5px solid var(--outline);
  border-radius: 12px;
  padding: 0.62rem 0.72rem;
  font: inherit;
  box-sizing: border-box;
}
.account-field input[readonly] {
  background: #f4f6fa;
  color: #6b7a9a;
  cursor: default;
}
.account-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.account-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.account-stat-label {
  color: #7584a8;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.account-stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--heading);
}
.plan-badge {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: capitalize;
}
.plan-badge--free {
  background: #e8ecf4;
  color: #5b6d91;
}
.plan-badge--plus {
  background: #e0f0ff;
  color: #2b6fb0;
}
.plan-badge--pro {
  background: #ffeaef;
  color: #c04060;
}
.billing-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: capitalize;
}
.billing-badge--active {
  background: #d4edda;
  color: #256d37;
}
.billing-badge--trial {
  background: #fff3cd;
  color: #856404;
}
.billing-badge--canceled,
.billing-badge--past_due {
  background: #f8d7da;
  color: #823040;
}
.billing-tx-card {
  border: 1px solid #e8edf6;
  border-radius: 14px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
  background: #f9fbff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.billing-tx-left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.billing-tx-type {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.billing-tx-type--subscription {
  background: #e3f2fd;
  color: #1565c0;
}
.billing-tx-type--credit_pack {
  background: #f3e5f5;
  color: #7b1fa2;
}
.billing-tx-name {
  font-weight: 600;
  color: var(--text);
}
.billing-tx-date {
  font-size: 0.82rem;
  color: var(--text-soft);
}
.billing-tx-right {
  text-align: right;
}
.billing-tx-amount {
  font-weight: 700;
  color: var(--text);
}
.billing-tx-credits {
  font-size: 0.82rem;
  color: var(--text-soft);
}
.account-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.3rem;
  flex-wrap: wrap;
}
.account-divider {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 1.2rem 0;
}
.account-divider::before,
.account-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--outline);
}
.password-form {
  display: grid;
  gap: 0.58rem;
}
.btn-danger {
  background: #dc3545;
  color: #fff;
  border-color: #dc3545;
}
.btn-danger:hover {
  background: #c82333;
  border-color: #c82333;
}
.order-card {
  border: 1.5px solid var(--outline);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  margin-bottom: 0.75rem;
  background: #fff;
}
.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.order-card-title {
  font-weight: 700;
  color: var(--heading);
  font-size: 1rem;
}
.order-status {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: capitalize;
}
.order-status--created,
.order-status--pending {
  background: #fff3cd;
  color: #856404;
}
.order-status--in_production,
.order-status--manufacturing {
  background: #d1ecf1;
  color: #0c5460;
}
.order-status--shipped,
.order-status--delivered,
.order-status--completed {
  background: #d4edda;
  color: #256d37;
}
.order-status--canceled,
.order-status--failed {
  background: #f8d7da;
  color: #823040;
}
.order-meta {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  color: var(--text-soft);
  font-size: 0.88rem;
}
.order-meta a {
  color: var(--primary);
  font-weight: 600;
}
.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-soft);
}
.empty-state p {
  margin: 0.5rem 0;
}
.account-message {
  min-height: 1.15rem;
  color: #556b95;
  font-size: 0.9rem;
}
.account-message.error {
  color: #a24646;
}
.account-message.success {
  color: #256d37;
}
.account-loading {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-soft);
}
.delete-zone {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--outline);
}
.delete-zone p {
  color: var(--text-soft);
  font-size: 0.88rem;
  margin: 0 0 0.6rem;
}

/* ── Checkout Page ─────────────────────────────────────────── */
.checkout-shell {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}
.checkout-header {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}
.checkout-header h1 {
  font-size: 1.8rem;
  margin: 0.4rem 0 0;
}
.checkout-header p {
  color: var(--muted);
  max-width: 500px;
  margin: 0.4rem auto 0;
}

/* Book preview card */
.book-preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow);
}
.book-preview h2 {
  font-size: 1.2rem;
  margin: 0 0 0.6rem;
}
.book-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.book-meta-tag {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  background: #f0f4ff;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.book-meta-tag--complete {
  background: #d4edda;
  color: #155724;
}

/* Sections */
.checkout-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.4rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow);
}
.checkout-section h2 {
  font-size: 1.1rem;
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

/* Format selector */
.format-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.format-option {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border: 2px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.format-option:hover {
  background: #f8f9ff;
}
.format-option:has(input:checked) {
  border-color: var(--clr-primary, #6c63ff);
  background: #f0f0ff;
}
.format-option input[type='radio'] {
  margin-top: 0.15rem;
  accent-color: var(--clr-primary, #6c63ff);
}
.format-option-info {
  flex: 1;
}
.format-option-label {
  font-weight: 700;
  font-size: 0.95rem;
}
.format-option-desc {
  font-size: 0.83rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* Shipping form */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
}
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 0.25rem;
}
.form-field input,
.form-field select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.92rem;
  font-family: inherit;
  background: #fff;
  transition: border-color 0.15s;
}
.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--clr-primary, #6c63ff);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12);
}
.form-field .field-optional {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Shipping level selector */
.shipping-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.shipping-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.shipping-option:hover {
  background: #f8f9ff;
}
.shipping-option:has(input:checked) {
  border-color: var(--clr-primary, #6c63ff);
  background: #f0f0ff;
}
.shipping-option input[type='radio'] {
  accent-color: var(--clr-primary, #6c63ff);
}
.shipping-option-info {
  flex: 1;
}
.shipping-option-label {
  font-weight: 600;
  font-size: 0.9rem;
}
.shipping-option-meta {
  font-size: 0.8rem;
  color: var(--muted);
}
.shipping-option-surcharge {
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
}

/* Price breakdown */
.price-section {
  text-align: center;
}
.price-breakdown {
  background: #f8f9ff;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin-top: 0.8rem;
}
.price-row {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0;
  font-size: 0.92rem;
}
.price-row--total {
  border-top: 2px solid var(--line);
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  font-weight: 700;
  font-size: 1.05rem;
}

/* Action buttons */
.checkout-actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 1rem;
}
.checkout-actions .btn {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-align: center;
  transition:
    background 0.15s,
    opacity 0.15s;
}
.checkout-actions .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.checkout-actions .btn-primary {
  background: var(--clr-primary, #6c63ff);
  color: #fff;
}
.checkout-actions .btn-primary:hover:not(:disabled) {
  background: var(--clr-primary-dark, #5a52d5);
}
.checkout-actions .btn-ghost {
  background: transparent;
  border: 2px solid var(--line);
  color: var(--text);
}
.checkout-actions .btn-ghost:hover:not(:disabled) {
  background: #f8f9ff;
}

/* Status message */
.checkout-message {
  text-align: center;
  padding: 0.5rem;
  font-size: 0.9rem;
  min-height: 1.4rem;
  border-radius: 8px;
}
.checkout-message.error {
  color: #a94442;
  background: #fff0f0;
  padding: 0.7rem 1rem;
}

/* Confirmation card */
.confirmation {
  text-align: center;
  padding: 2rem 1rem;
}
.confirmation-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}
.confirmation h2 {
  border: none;
  padding: 0;
  margin: 0 0 0.6rem;
  font-size: 1.4rem;
  color: #155724;
}
.confirmation p {
  color: var(--muted);
  margin: 0.3rem 0;
  font-size: 0.92rem;
}
.confirmation .order-id {
  font-family: monospace;
  background: #f0f4ff;
  padding: 0.3rem 0.8rem;
  border-radius: 8px;
  font-size: 0.88rem;
  display: inline-block;
  margin: 0.6rem 0;
}
.confirmation-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}
.confirmation-links a {
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  transition: background 0.15s;
}
.confirmation-links .link-primary {
  background: var(--clr-primary, #6c63ff);
  color: #fff;
}
.confirmation-links .link-primary:hover {
  background: var(--clr-primary-dark, #5a52d5);
}
.confirmation-links .link-ghost {
  border: 2px solid var(--line);
  color: var(--text);
}
.confirmation-links .link-ghost:hover {
  background: #f8f9ff;
}

/* Full-page error / loading states */
.checkout-state {
  text-align: center;
  padding: 3rem 1rem;
}
.checkout-state h2 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.checkout-state p {
  color: var(--muted);
  max-width: 400px;
  margin: 0 auto;
}
.checkout-state .btn {
  margin-top: 1rem;
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.92rem;
}

@media (max-width: 600px) {
  .form-row-2 {
    grid-template-columns: 1fr;
  }
  .book-meta {
    flex-direction: column;
    gap: 0.4rem;
  }
}

/* ── Library Page ──────────────────────────────────────────── */
.library-header {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}
.library-header h1 {
  font-size: 1.8rem;
}
.library-header p {
  color: var(--muted);
  max-width: 540px;
  margin: 0.4rem auto 0;
}
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2rem;
  padding: 1rem 0 2rem;
}
.book-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}
.book-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(65, 86, 130, 0.18);
}
.book-card-thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: linear-gradient(135deg, #ffe4e4, #e4ecff);
  display: block;
}
.book-card-body {
  padding: 0.85rem 1rem;
}
.book-card-body h3 {
  font-size: 1.05rem;
  margin: 0 0 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book-card-body p {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0;
}
.book-card-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0 1rem 0.85rem;
}
.book-card-actions button {
  font-size: 0.82rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
}
.book-card-actions button:hover {
  background: #f0f4ff;
}
.book-card-actions .delete-btn {
  color: #b44;
  border-color: #e4c4c4;
}
.book-card-actions .delete-btn:hover {
  background: #fff0f0;
}
.library-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}
.library-empty h2 {
  font-size: 1.3rem;
  color: var(--text);
}
.library-empty .btn {
  margin-top: 1rem;
}
.js-credits-wrap.hidden {
  display: none;
}
.credits-bar {
  text-align: center;
  padding: 0.6rem 0;
  font-size: 0.92rem;
  color: var(--muted);
}
.credits-bar strong {
  color: var(--text);
}

/* ── Confirmation Page ─────────────────────────────────────── */
.confirm-card {
  max-width: 560px;
  width: 94vw;
  margin: 2rem auto;
}
.confirm-icon {
  font-size: 3rem;
  margin-bottom: 0.25rem;
}
.confirm-card h1 {
  margin-bottom: 0.3rem;
}
.confirm-subtitle {
  color: var(--text-soft);
  margin-bottom: 1.2rem;
}
.order-summary {
  border: 1px solid #e8edf6;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.2rem;
  background: #f9fbff;
}
.order-summary h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7283a8;
  margin-bottom: 0.7rem;
  font-weight: 700;
}
.order-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
}
.order-line + .order-line {
  border-top: 1px solid #e8edf6;
}
.order-line .label {
  color: var(--text);
  font-weight: 600;
}
.order-line .value {
  color: var(--text-soft);
}
.features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  display: grid;
  gap: 0.45rem;
}
.features-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-size: 0.95rem;
}
.features-list li::before {
  content: '\2713';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e8f5e9;
  color: #388e3c;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.confirm-cta {
  margin-top: 0.5rem;
  width: 100%;
  text-align: center;
}
.confirm-fallback {
  text-align: center;
  padding: 3rem 1rem;
}
.confirm-fallback h1 {
  margin-bottom: 0.5rem;
}