* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  background: #fdf8ee;
  color: #2b2320;
}
#app {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  min-height: 100vh;
}
h1 {
  font-size: 1.6rem;
  margin: 0 0 4px;
  color: #7a3b12;
}
.subtitle {
  color: #6b5d4f;
  margin: 0 0 24px;
  font-size: 1.05rem;
}
.screen { display: none; }
.screen.active { display: block; }

label {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 18px 0 8px;
}
input[type="text"] {
  width: 100%;
  padding: 14px;
  font-size: 1.2rem;
  border: 2px solid #d8c9ae;
  border-radius: 10px;
  background: white;
}

button {
  font-size: 1.15rem;
  font-weight: 600;
  padding: 16px 20px;
  border-radius: 12px;
  border: none;
  width: 100%;
  margin-top: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.45; }

.btn-row {
  display: flex;
  gap: 10px;
}
.btn-row button { flex: 1; }

.btn-primary { background: #b5541a; color: white; }
.btn-secondary { background: #efe3cc; color: #5a3d1e; }
.btn-danger { background: #a33a2c; color: white; }
.btn-record { background: #c23b3b; color: white; }
.btn-record.recording { background: #7a1f1f; }

.card {
  background: white;
  border-radius: 14px;
  padding: 16px;
  margin-top: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.book-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 4px;
  border-bottom: 1px solid #eee1c9;
  font-size: 1.1rem;
}
.book-item:last-child { border-bottom: none; }
.book-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.book-item button,
.book-item .btn-download {
  width: auto;
  margin: 0;
  padding: 10px 16px;
  font-size: 1rem;
}
.btn-download {
  display: inline-block;
  background: #2f7a3f;
  color: white;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}
.btn-download:active { transform: scale(0.98); }

.page-badge {
  display: inline-block;
  background: #7a3b12;
  color: white;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.photo-preview {
  width: 100%;
  border-radius: 10px;
  margin-top: 10px;
  display: none;
  border: 2px solid #d8c9ae;
}
.photo-preview.has-image { display: block; }

.status-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  font-size: 1rem;
  color: #6b5d4f;
}
.status-ok { color: #2f7a2f; font-weight: 700; }

.hidden { display: none !important; }

.spinner {
  border: 5px solid #efe3cc;
  border-top: 5px solid #b5541a;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  animation: spin 1s linear infinite;
  margin: 30px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.center { text-align: center; }
audio { width: 100%; margin-top: 10px; }

.link-back {
  display: inline-block;
  margin-bottom: 10px;
  color: #7a3b12;
  font-weight: 600;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 500;
}
.checkbox-row input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

#crop-stage {
  position: relative;
  display: inline-block;
  touch-action: none;
}
#crop-canvas {
  display: block;
  max-width: 100%;
  border-radius: 8px;
  touch-action: none;
}

.steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f1e6d0;
  font-size: 1.05rem;
}
.steps-list li:last-child { border-bottom: none; }
.step-emoji { font-size: 1.4rem; flex-shrink: 0; }

.tip {
  background: #fbf1de;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.95rem;
  color: #6b5d4f;
  margin-bottom: 0;
}

/* ============================================================
   ONBOARDING — the branded front door, shown on every arrival
   REBRANDING: change the four tokens below and the whole
   onboarding restyles. Nothing else hardcodes these colors.
   ============================================================ */
:root{
  --onb-bg:#0d1b33;        /* deep background / scrim base */
  --onb-text:#ffffff;      /* headline */
  --onb-subtext:#cfe0f5;   /* supporting line */
  --onb-cta:#22a355;       /* primary button */
  --onb-cta-final:#e75d3e; /* last button ("Let's Begin") */
}

#onboarding{position:fixed;inset:0;z-index:1000;background:var(--onb-bg);overflow:hidden;}
#onboarding[hidden]{display:none;}

.onb-screen{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  opacity:0;pointer-events:none;transition:opacity .45s ease;
  background-color:#16305a;background-size:cover;background-repeat:no-repeat;
}
.onb-screen.on{opacity:1;pointer-events:auto;}
.onb-screen::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,22,45,.15) 0%,rgba(10,22,45,.35) 45%,
    rgba(13,27,51,.93) 78%,var(--onb-bg) 100%);
}
.onb-screen.onb-noimg{background:linear-gradient(160deg,#2c4a72,#16305a);}

.onb-copy{
  position:relative;padding:0 30px calc(38px + env(safe-area-inset-bottom,0px));text-align:center;
}
.onb-copy h1{
  margin:0 0 10px;color:var(--onb-text);font-size:clamp(30px,8.5vw,42px);line-height:1.14;
  font-weight:800;letter-spacing:-.02em;text-shadow:0 2px 22px rgba(0,0,0,.5);
}
.onb-copy p{
  margin:0 0 22px;color:var(--onb-subtext);font-size:clamp(15px,4vw,18px);font-weight:500;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.onb-copy h1 + .onb-next{margin-top:22px;}
.onb-next{
  width:100%;max-width:340px;border:0;border-radius:14px;background:var(--onb-cta);
  color:#fff;font-size:19px;font-weight:800;padding:19px 20px;cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(34,163,85,.75);transition:transform .12s ease;
}
.onb-next:active{transform:scale(.975);}
.onb-next.onb-final{background:var(--onb-cta-final);box-shadow:0 10px 26px -8px rgba(231,93,62,.75);}

.onb-ph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:#7d9ac4;font-size:52px;
}
.onb-ph span{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;}

#onb-dots{
  /* Anchored to the TOP: bottom-anchored dots collided with the headline,
     because the copy block's height varies per screen. */
  position:absolute;top:calc(24px + env(safe-area-inset-top,0px));left:0;right:0;
  display:flex;gap:8px;justify-content:center;z-index:6;pointer-events:none;
}
#onb-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.34);transition:all .3s ease;}
#onb-dots i.on{background:#fff;width:22px;border-radius:4px;}

#onb-skip{
  position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:16px;z-index:7;
  background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:20px;padding:9px 17px;
  font-size:13.5px;font-weight:700;cursor:pointer;width:auto;margin:0;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}

/* "How it works" replay link on the home screen */
.howto-link{
  display:inline-block;margin-top:6px;background:none;border:0;width:auto;padding:4px 0;
  color:var(--brown,#7a3b12);font-size:.92rem;font-weight:600;text-decoration:underline;cursor:pointer;
}

/* "I have a code" — quiet escape hatch on every onboarding screen.
   Deliberately understated so "Next" stays the default path. */
.onb-code{
  display:block;width:auto;margin:14px auto 0;padding:10px 18px;
  background:none;border:0;color:rgba(255,255,255,.82);
  font-size:15px;font-weight:600;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.onb-code:active{color:#fff;}

/* On the last screen it becomes the primary action. */
.onb-code.onb-code-primary{
  width:100%;max-width:340px;margin:22px auto 0;padding:19px 20px;
  background:var(--onb-cta);color:#fff;border-radius:14px;
  font-size:19px;font-weight:800;text-decoration:none;
  box-shadow:0 10px 26px -8px rgba(34,163,85,.75);
  transition:transform .12s ease;
}
.onb-code.onb-code-primary:active{transform:scale(.975);}

/* Render status on the book list */
.render-chip{
  display:inline-block;padding:9px 14px;border-radius:12px;font-size:.92rem;font-weight:700;
}
.render-chip.working{background:#dbeafe;color:#1e4fa3;}
.render-chip.failed{background:#fde2e1;color:#a8231c;}

/* Video pages + bulk clip upload */
video.photo-preview { width: 100%; border-radius: 10px; margin-top: 10px;
  display: none; border: 2px solid #d8c9ae; background: #000; }
video.photo-preview.has-image { display: block; }

.linklike { display: inline-block; width: auto; margin: 0; padding: 2px 0;
  background: none; border: 0; color: #7a3b12; font-size: .95rem; font-weight: 600;
  text-decoration: underline; cursor: pointer; }

.bulk-list { margin: 0 0 4px; padding-left: 0; list-style: none; }
.bulk-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px;
  border-bottom: 1px solid #f1e6d0; }
.bulk-row:last-child { border-bottom: none; }
.bulk-name { flex: 1; font-size: .98rem; line-height: 1.35; word-break: break-word; }
.bulk-name small { display: block; color: #8a7c6c; font-weight: 600; font-size: .82rem; }
.bulk-ctrl { display: flex; gap: 6px; flex-shrink: 0; }
.bulk-ctrl button { width: 38px; height: 38px; margin: 0; padding: 0;
  border-radius: 9px; background: #efe3cc; color: #5a3d1e; font-size: 1rem; }
.bulk-ctrl button:disabled { opacity: .35; }