/* ── WelcomeBookMaker — Create wizard ───────────────────────────────────── */
.wizard-body { background: radial-gradient(900px 420px at 80% -10%, var(--c-brand-lt), transparent 60%), var(--c-bg-warm); min-height: 100vh; margin: 0; }

.wiz-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; max-width: 880px; margin: 0 auto; }
.wiz-login { color: var(--c-ink-soft); font-weight: 600; font-size: .92rem; text-decoration: none; }
.wiz-login:hover { color: var(--c-brand); }

/* Step rail */
.wiz-rail { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.wiz-rail-inner { display: flex; justify-content: space-between; position: relative; max-width: 560px; margin: 8px auto 0; }
.wiz-rail-inner::before { content: ""; position: absolute; top: 15px; left: 6%; right: 6%; height: 2px; background: var(--c-line); z-index: 0; }
.rail-step { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; }
.rail-dot { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid var(--c-line); display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: var(--c-muted); transition: .2s; }
.rail-lbl { font-size: .76rem; color: var(--c-muted); font-weight: 600; }
.rail-step.done .rail-dot { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.rail-step.current .rail-dot { border-color: var(--c-brand); color: var(--c-brand); box-shadow: 0 0 0 4px var(--c-brand-lt); }
.rail-step.current .rail-lbl { color: var(--c-brand); }

/* Steps */
.wiz-main { max-width: 720px; margin: 0 auto; padding: 28px 24px 80px; }
.wiz-step { display: none; animation: fadeUp .25s ease; }
.wiz-step.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wiz-step h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: .25em; }
.wiz-sub { color: var(--c-ink-soft); font-size: 1.05rem; margin-bottom: 26px; }

.wiz-form { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); display: grid; gap: 18px; }
.wiz-form label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; }
.wiz-form input, .wiz-form select { padding: .8em 1em; border: 1.5px solid var(--c-line); border-radius: 11px; font-size: 1rem; font-family: var(--font-body); }
.wiz-form input:focus, .wiz-form select:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-lt); }
.wiz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.req { color: #c0392b; } .hint { font-weight: 400; color: var(--c-muted); font-size: .82em; }

/* Uploads */
.upload-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.up-box { display: grid; gap: 7px; }
.up-prev { height: 80px; border: 1.5px dashed var(--c-line); border-radius: 11px; display: grid; place-items: center; color: var(--c-muted); font-size: .85rem; background-size: cover; background-position: center; }
.up-prev.has { border-style: solid; color: transparent; }
.up-btn { text-align: center; font-weight: 600; font-size: .85rem; color: var(--c-brand); cursor: pointer; padding: 7px; border: 1px solid var(--c-line); border-radius: 9px; }
.up-btn:hover { border-color: var(--c-brand); background: var(--c-brand-lt); }
.up-btn.busy { opacity: .55; pointer-events: none; }
.up-note { color: var(--c-muted); font-size: .82rem; margin: 0; }

/* Page picker */
.page-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pp-item { display: flex; align-items: center; gap: 11px; padding: 13px 14px; background: #fff; border: 1.5px solid var(--c-line); border-radius: 12px; cursor: pointer; transition: .12s; }
.pp-item:hover { border-color: var(--c-brand); }
.pp-item.on { border-color: var(--c-brand); background: var(--c-brand-lt); }
.pp-item input { width: 18px; height: 18px; accent-color: var(--c-brand); flex: none; cursor: pointer; }
.pp-ico { font-size: 1.2rem; flex: none; }
.pp-title { font-size: .92rem; font-weight: 500; }
.pp-locked { opacity: .6; cursor: default; }
.pp-locked input { display: none; }

/* Reorder */
.reorder-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; max-width: 520px; }
.ro-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: #fff; border: 1.5px solid var(--c-line); border-radius: 12px; cursor: grab; box-shadow: var(--shadow-sm); }
.ro-item.dragging { opacity: .4; }
.ro-item.locked { cursor: default; opacity: .7; background: var(--c-bg-soft); }
.ro-grip { color: var(--c-muted); font-size: 1rem; }
.ro-ico { font-size: 1.2rem; }
.ro-title { font-weight: 500; }

/* Custom page add */
.add-custom-block { display: grid; gap: 8px; }
.add-custom-row { display: flex; gap: 10px; }
.add-custom-row input { flex: 1; }
.custom-added { display: flex; flex-wrap: wrap; gap: 8px; }
.custom-chip { background: var(--c-brand-lt); color: var(--c-brand-dk); padding: .35em .8em; border-radius: 999px; font-size: .85rem; font-weight: 600; }

/* Themes */
.theme-label, .add-custom-block > label { font-weight: 600; font-size: .92rem; }
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.theme-swatch { border: 2px solid var(--c-line); border-radius: 12px; padding: 9px; cursor: pointer; text-align: center; transition: .15s; }
.theme-swatch:hover { border-color: var(--c-brand); }
.theme-swatch.on { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-lt); }
.theme-bar { height: 34px; border-radius: 8px; margin-bottom: 6px; }
.theme-name { font-size: .78rem; font-weight: 600; color: var(--c-ink-soft); }

/* Nav */
.wiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 12px; }
.wiz-err { background: #fdecea; color: #c0392b; padding: 11px 15px; border-radius: 10px; font-size: .92rem; margin-top: 14px; }
.hidden { display: none !important; }

/* Generation stage */
.gen-stage { text-align: center; max-width: 540px; margin: 4vh auto 0; }
.gen-emoji { font-size: 3.5rem; margin-bottom: 8px; }
.progress-track { height: 12px; background: var(--c-line); border-radius: 999px; overflow: hidden; margin: 22px 0 8px; }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--c-brand), var(--c-accent)); border-radius: 999px; transition: width .4s ease; }
.progress-meta { display: flex; justify-content: space-between; color: var(--c-muted); font-size: .85rem; font-weight: 600; margin-bottom: 22px; }
.gen-edit-note { background: #f3f7f5; border: 1px solid var(--c-line); border-radius: 10px; padding: 12px 16px; margin: 0 0 22px; font-size: .92rem; line-height: 1.5; color: var(--c-ink-soft); }
.gen-log { list-style: none; padding: 0; margin: 0; text-align: left; display: grid; gap: 6px; max-height: 240px; overflow-y: auto; }
.gen-log li { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #fff; border: 1px solid var(--c-line); border-radius: 10px; font-size: .9rem; color: var(--c-ink-soft); animation: fadeUp .2s; }
.gen-log li .gl-ico { flex: none; }
.gen-log li.done .gl-ico { color: var(--c-brand); }

@media (max-width: 560px) {
    .wiz-row, .upload-pair, .page-picker { grid-template-columns: 1fr; }
    .theme-grid { grid-template-columns: 1fr 1fr; }
    .rail-lbl { display: none; }
}