/* v3.css — Pick → Brand → Upgrade → Generate wizard (reference UI). */
:root {
  --indigo:#2b2fc4; --purple:#a12bc4; --violet:#7c3aed;
  --ink:#111827; --muted:#6b7280; --faint:#9ca3af; --line:#e5e7eb;
  --green:#16a34a; --green-soft:#dcfce7; --red:#dc2626; --amber:#b45309;
  --chip-bg:#efe7fb; --lavender:#f7f3fd; --grad:linear-gradient(90deg,var(--indigo),var(--purple));
}
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:#fff; color:var(--ink); font-family:'Inter',ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
.page { max-width:1000px; margin:0 auto; padding:28px 24px 90px; }

/* ── step bar ── */
.stepbar { display:flex; align-items:center; gap:0; padding:16px 32px; border-bottom:1px solid var(--line); background:#fbfbfe; }
.stepbar .step { display:flex; align-items:center; gap:10px; flex:1; position:relative; font-size:15px; color:var(--faint); cursor:default; }
.stepbar .step:not(:last-child)::after { content:''; flex:1; height:1px; background:var(--line); margin:0 14px; }
.stepbar .step .dot { width:26px; height:26px; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; background:#fff; }
.stepbar .step.active { color:var(--indigo); font-weight:600; }
.stepbar .step.active .dot { background:var(--indigo); color:#fff; border-color:var(--indigo); }
.stepbar .step.done { color:var(--ink); cursor:pointer; }
.stepbar .step.done .dot { background:var(--violet); border-color:var(--violet); color:#fff; }
.stepbar .step.done:not(:last-child)::after { background:var(--grad); }

.settings { margin:0 0 18px; font-size:13px; }
.settings summary { cursor:pointer; color:var(--muted); }
.field-row { display:flex; gap:14px; margin-top:10px; flex-wrap:wrap; }
.field { flex:1; min-width:160px; }
.field label { display:block; font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
.field input, .field textarea { width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 11px; font:inherit; font-size:14px; }

.screen { display:none; }
.screen.active { display:block; animation:fade .25s ease; }
@keyframes fade { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

.hi { text-align:center; font-size:17px; color:var(--ink); margin:8px 0 6px; }
.headline { text-align:center; font-family:'Poppins',sans-serif; font-size:clamp(28px,5vw,44px); font-weight:700; line-height:1.15; margin:0 0 12px; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.sub { text-align:center; color:var(--muted); font-size:16px; margin:0 auto 28px; max-width:640px; }
.tag { text-align:center; color:var(--faint); font-size:13.5px; margin-top:26px; }

/* ── pick cards ── */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { text-align:left; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; cursor:pointer; transition:.15s; font:inherit; }
.card:hover { transform:translateY(-2px); border-color:var(--violet); box-shadow:0 8px 24px rgba(124,58,237,.12); }
.card-thumb { margin-bottom:12px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:linear-gradient(180deg,#fdfcff,#f6f4fc); padding:10px; }
.card:hover .card-thumb { border-color:#e2d8f5; }
.card-title { font-size:16px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.card-desc { font-size:13.5px; color:var(--muted); }
.card-thumb { position:relative; }
.card-badge { position:absolute; top:8px; right:8px; z-index:2; font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--grad); border-radius:999px; padding:3px 8px; }
.card-meta { margin-top:7px; font-size:11.5px; color:var(--violet); font-family:ui-monospace,Consolas,monospace; opacity:0; max-height:0; transition:.2s; }
.card:hover .card-meta { opacity:1; max-height:22px; }

/* example prompt chips (brand tab) */
.ex-chips { text-align:center; margin:14px auto 0; max-width:720px; font-size:13px; color:var(--faint); }
.ex-chips button { font:inherit; font-size:13px; color:var(--violet); background:var(--chip-bg); border:0; border-radius:999px; padding:5px 12px; margin:0 3px; cursor:pointer; transition:.15s; }
.ex-chips button:hover { background:#e4d8f7; }

/* brand reveal — "here's what I found" (brand tab) */
.brand-reveal { display:none; align-items:center; gap:14px; max-width:520px; margin:18px auto 0; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--lavender); box-shadow:0 6px 20px rgba(124,58,237,.08); animation:fade .3s ease; }
.brand-reveal.on { display:flex; }
.rv-logo { width:40px; height:40px; flex:0 0 40px; border-radius:9px; object-fit:contain; background:#fff; border:1px solid var(--line); }
.rv-logo.dot { border:0; }
.rv-body { flex:1; text-align:left; }
.rv-name { font-size:14px; color:var(--muted); margin-bottom:7px; }
.rv-name b { color:var(--ink); font-weight:700; }
.rv-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.rv-sws { display:flex; }
.rv-sw { width:20px; height:20px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.15); margin-right:-6px; }
.rv-font { font-size:17px; font-weight:700; color:var(--ink); }
.pick-foot { text-align:center; margin-top:22px; }
.pick-foot a, #paste-toggle { color:var(--violet); font-weight:600; text-decoration:none; }
.paste { max-width:640px; margin:14px auto 0; }
.paste summary { cursor:pointer; color:var(--muted); font-size:14px; }
.paste textarea { width:100%; min-height:120px; margin-top:10px; border:1px solid var(--line); border-radius:10px; padding:12px; font-family:ui-monospace,Consolas,monospace; font-size:12px; }

/* ── prompt card / actions / buttons ── */
.prompt-card { border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(17,24,39,.06); max-width:720px; margin:0 auto; }
.prompt-topbar { height:4px; background:var(--grad); }
.prompt-card textarea { display:block; width:100%; min-height:120px; border:0; outline:none; resize:vertical; padding:18px 20px; font:inherit; font-size:16px; }
.actions { display:flex; gap:12px; align-items:center; justify-content:center; margin-top:22px; }
.btn { border:0; border-radius:999px; padding:13px 30px; font:inherit; font-size:15px; font-weight:600; cursor:pointer; }
.btn-primary { background:var(--grad); color:#fff; box-shadow:0 6px 20px rgba(124,58,237,.35); }
.btn-primary:hover { filter:brightness(1.06); }
.btn-primary:disabled { opacity:.5; cursor:default; box-shadow:none; }
.btn-ghost { background:#fff; color:var(--violet); border:1px solid var(--line); }
.btn-ghost:hover { border-color:var(--violet); }
.btn-sm { padding:9px 18px; font-size:14px; }

/* ── live progress (brand + generate) ── */
.brand-live { display:none; max-width:640px; margin:26px auto 0; }
.brand-live.on { display:block; }
.bar-row { display:flex; align-items:center; gap:16px; }
.bar-track { flex:1; height:6px; border-radius:999px; background:var(--line); overflow:hidden; }
.bar-fill { height:100%; width:0; border-radius:999px; background:var(--grad); transition:width .5s ease; }
.token-chip { background:var(--chip-bg); color:var(--violet); font-family:ui-monospace,Consolas,monospace; font-size:13px; font-weight:600; padding:6px 13px; border-radius:999px; min-width:52px; text-align:center; }
.status-line { color:var(--faint); font-size:14px; margin:10px 2px 22px; }
.timeline { margin-top:18px; }
.step-row { display:flex; align-items:flex-start; gap:12px; padding:8px 0; font-size:15px; }
.step-row .ico { width:20px; height:20px; flex:0 0 20px; border-radius:50%; margin-top:1px; display:inline-flex; align-items:center; justify-content:center; }
.step-row .lbl { flex:1; }
.step-row .detail { color:var(--faint); font-size:13px; }
.step-row.pending { color:var(--faint); }
.step-row.pending .ico { background:#d1d5db; transform:scale(.55); }
.step-row.active .ico { border:2.5px solid var(--violet); border-top-color:transparent; animation:spin .9s linear infinite; }
.step-row.done .ico { background:var(--green); color:#fff; }
.step-row.done .ico svg { width:11px; height:11px; }
.step-row.skipped { color:var(--faint); text-decoration:line-through; }
.step-row.skipped .ico { background:var(--line); transform:scale(.55); }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── upgrade: before/after hero ── */
.hero { display:flex; align-items:center; justify-content:center; gap:20px; margin:6px 0 30px; }
.mock { margin:0; width:230px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 8px 24px rgba(17,24,39,.08); }
.mock-thumb { padding:12px; background:#fff; }
.mock-free .mock-thumb { background:#f8fafc; }
.mock figcaption { text-align:center; font-size:12.5px; font-weight:600; color:var(--muted); padding:9px; border-top:1px solid var(--line); }
.mock-solo { border-color:var(--violet); box-shadow:0 10px 30px rgba(124,58,237,.2); }
.mock-solo figcaption { color:var(--violet); }
.hero-arrow { font-size:26px; color:var(--faint); }

/* ── plan cards ── */
.plans { display:flex; gap:16px; max-width:640px; margin:0 auto; }
.plan { flex:1; position:relative; border:1.5px solid var(--line); border-radius:14px; padding:18px; cursor:pointer; transition:.15s; }
.plan input { position:absolute; opacity:0; }
.plan.sel { border-color:var(--violet); box-shadow:0 8px 24px rgba(124,58,237,.15); }
#plan-solo { background:linear-gradient(#fff,#fbfaff); }
.plan-badge { position:absolute; top:-10px; right:16px; background:var(--grad); color:#fff; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; }
.plan-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.plan-name { font-size:17px; font-weight:700; }
.plan-price { font-size:22px; font-weight:800; color:var(--ink); }
.plan-price small { font-size:12px; font-weight:600; color:var(--muted); }
.plan-list { list-style:none; margin:0; padding:0; font-size:14px; }
.plan-list li { padding:4px 0 4px 24px; position:relative; color:var(--ink); }
.plan-list li.yes::before { content:'✓'; position:absolute; left:0; color:var(--green); font-weight:700; }
.plan-list li.no { color:var(--faint); }
.plan-list li.no::before { content:'✗'; position:absolute; left:0; color:var(--faint); }

/* ── checkout ── */
.checkout { display:none; max-width:460px; margin:16px auto 0; text-align:center; }
.checkout.on { display:block; }
.checkout-drawer { overflow:hidden; max-height:0; opacity:0; transition:max-height .38s ease, opacity .25s ease, margin-top .38s ease; }
.checkout-drawer.open { max-height:560px; opacity:1; margin-top:14px; }
.checkout-card { border:1px solid var(--line); border-radius:14px; padding:20px; background:#fff; text-align:left; box-shadow:0 12px 34px rgba(124,58,237,.14); }
.demo-note { font-size:11px; color:var(--muted); margin-bottom:15px; text-transform:uppercase; letter-spacing:.05em; text-align:center; }
.cf-field { display:block; margin-bottom:13px; font-size:12px; font-weight:600; color:var(--muted); }
.cf-field input { display:block; width:100%; margin-top:5px; border:1px solid var(--line); border-radius:9px; padding:11px 12px; font:inherit; font-size:15px; color:var(--ink); }
.cf-field input:focus { outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.cf-two { display:flex; gap:12px; }
.cf-two .cf-field { flex:1; }
#btn-pay { width:100%; margin-top:4px; }
#btn-pay:disabled { opacity:.65; cursor:default; box-shadow:none; }
.cf-error { display:none; color:var(--red); font-size:13px; margin-top:11px; text-align:center; }
.cf-error.on { display:block; }

/* ── evidence strip ── */
.evidence { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:760px; margin:26px auto 0; padding-top:22px; border-top:1px solid var(--line); }
.ev-item { min-width:120px; }
.ev-lbl { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:5px; }
.ev-sw { display:flex; }
.ev-sw .sw { width:20px; height:20px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.15); margin-right:-6px; }
.ev-font { font-size:18px; font-weight:700; }
.ev-logo { height:26px; max-width:90px; object-fit:contain; }
.ev-val { font-size:13px; color:var(--ink); max-width:200px; }

/* ── generate card / done ── */
.gen-card { background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 14px 40px rgba(17,24,39,.07); padding:40px 48px; max-width:760px; margin:0 auto; }
.done-view { display:none; text-align:center; }
.done-view.visible { display:block; }
.done-thumb { width:170px; margin:4px auto 14px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 8px 24px rgba(17,24,39,.08); }
.folio-name { font-family:'Poppins',sans-serif; font-size:26px; font-weight:700; margin:6px 0 14px; }
.meta-chips { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }
.meta-chip { display:inline-flex; align-items:center; gap:7px; background:#f8fafc; border:1px solid var(--line); border-radius:999px; padding:7px 15px; font-size:13.5px; color:var(--muted); }
.meta-chip .dot { width:14px; height:14px; border-radius:50%; }
.brand-logo.sm { width:20px; height:20px; border-radius:5px; object-fit:contain; background:#fff; }
.ribbon { display:none; align-items:center; justify-content:space-between; gap:14px; background:var(--lavender); border:1px solid #ece4fa; border-radius:12px; padding:14px 18px; margin:0 0 18px; font-size:14.5px; color:var(--ink); text-align:left; }
.json-details { text-align:left; margin-top:18px; }
.json-details summary { cursor:pointer; font-weight:600; color:var(--muted); font-size:14px; }
.json-details pre { background:#f8fafc; border:1px solid var(--line); border-radius:10px; padding:14px; max-height:400px; overflow:auto; font-size:12px; line-height:1.5; }
.error-banner { display:none; background:#fef2f2; border:1px solid #fecaca; color:var(--red); border-radius:10px; padding:13px 17px; margin-bottom:18px; font-size:14.5px; }
.error-banner.visible { display:block; }

@media (max-width:720px) {
  .cards { grid-template-columns:1fr; }
  .hero { flex-direction:column; } .hero-arrow { transform:rotate(90deg); }
  .plans { flex-direction:column; }
  .gen-card { padding:26px 20px; }
  .ribbon { flex-direction:column; align-items:stretch; }
}