/* Create — premium UI
   -------------------------------------------------- */
:root{
  --ink:#111311;
  --ink-2:#2b2e27;
  --muted:#6b6f66;
  --paper:#faf9f4;
  --panel:#ffffff;
  --gold:#d9b260;
  --gold-2:#c7a24f;
  --forest:#1c5d2f;
  --grey-1:#fbfaf6;       /* lighter */
  --grey-2:#eee9e0;
  --shadow: 0 18px 40px rgba(0,0,0,.10);
}

body.create-flow-light{
  background: radial-gradient(1200px 600px at 50% -200px, rgba(217,178,96,.09), transparent) , var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.create-wrap{ width:min(980px, 92vw); margin: 14px auto 96px; }

/* Progress — dots only */
.progress{ display:flex; justify-content:center; margin: 4px 0 14px; }
.progress-dots{ display:flex; gap:22px; list-style:none; padding:0; margin:0; }
.progress-dots li{
  width:14px; height:14px; border-radius:999px;
  background:#ece8df; border:2px solid #ece8df;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.progress-dots li.is-active{
  transform: scale(1.25);
  background:#fff8e7; border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(217,178,96,.26);
}
.progress-dots li.is-done{ background: var(--gold); border-color: var(--gold); }

/* Cards */
.stage-card{
  background: var(--panel);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 22px;
  padding: 18px 18px 22px;
  margin: 10px auto 22px;
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
  width: 100%;
}
.stage-card.is-active{ opacity: 1; transform: none; }
.stage-card--narrow{ max-width: 540px; }  /* narrower */
.stage-card--chooser{ max-width: 900px; }

.card-head{ margin: 4px 6px 10px; }
.card-head.tight{ margin-bottom: 6px; }
.card-title{ font-size: 24px; font-weight: 800; letter-spacing:.2px; margin: 6px 0 4px; }
.muted{ color: var(--muted); }

/* Choices */
.choice-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:8px; }
.choice{
  display:flex; gap:12px; align-items:center; padding:16px 14px; border-radius:16px;
  border:1px solid rgba(0,0,0,.06); background: linear-gradient(180deg,#fff, #f9f7f1);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  cursor:pointer; transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease;
  text-align:left;
}
.choice:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0,0,0,.08); }
.choice-icon{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:#fff8e7; color:#7b5a14; border:1px solid #efdcb8; font-size:18px;
}
.choice-title{ font-weight:800; }
.choice-sub{ color:#6f726a; font-size:.95rem; }

/* Back arrow */
.step-head-over{ display:flex; justify-content:flex-start; align-items:center; margin: 0 2px 8px; }
.back-ghost{
  background:transparent; border:none; color:#6b6f66;
  padding:.35rem .2rem; border-radius:10px; cursor:pointer;
}

/* Profile hero */
.profile-hero{ display:grid; place-items:center; gap:.7rem; margin: 0 0 1rem; }
.avatar{
  position:relative; width:176px; height:176px;       /* +15% */
  border-radius:999px; overflow:hidden; cursor:pointer; display:grid; place-items:center;
}
.avatar img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.avatar--ring{
  padding:8px;                                          /* thicker ring */
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.7), rgba(255,255,255,0) 40%),
    conic-gradient(from 200deg, #e7c985, #b89037, #e7c985);
  border-radius:999px;
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}
.avatar--ring img{ border-radius:999px; border:2px solid rgba(255,255,255,.75); }
.avatar-edit{
  position:absolute; right:12px; bottom:12px;
  background:#1b1f17; color:var(--gold); width:36px; height:36px; border-radius:999px;
  display:grid; place-items:center; border:1px solid rgba(217,178,96,.45);
}

/* Editable title + subtitle (auto-sized) */
.title-input{
  max-width: 90%;
  text-align:center;
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight:800; letter-spacing:.3px;
  outline:none; border:none; background:white; color:var(--ink);
  border-radius:14px; padding:.45rem .9rem;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 6px 16px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6);
}
.title-input::placeholder{ color:#a7a7a0; }

.subtitle-input{
  max-width: 86%;
  text-align:center; font-size: clamp(14px, 2.2vw, 16px);
  color:#5e615a; background:#fff; border:1px solid rgba(0,0,0,.12);
  border-radius:12px; padding:.42rem .78rem; outline:none;
}

/* Stacked light inputs */
.stack-card--light{
  background: var(--grey-1); color:#2b2e27;
  border-radius:18px; padding:.25rem .75rem; margin: .6rem 0 1.1rem 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 18px rgba(0,0,0,.06);
  border:1px solid var(--grey-2);
}
.stack-row{ display:flex; align-items:center; gap:.85rem; padding:1rem .6rem; }
.stack-row i{ color:var(--gold-2); font-size:1.05rem; width:22px; text-align:center; }
.stack-row input{
  flex:1; background:transparent; border:none; color:#2b2e27;
  font-size:1.06rem; outline:none;
}
.stack-row input::placeholder{ color:#9a9d95; }
.stack-row input:focus{ outline: none; }
.divider{ height:1px; background:linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent); }

/* Chips (toggle tags) */
.chip-row{ display:flex; gap:.55rem; flex-wrap:wrap; margin:.35rem 0 1.05rem; }
.chip{
  appearance:none; border:none; cursor:pointer;
  background:#fff; color:#2b2e27; font-weight:800;
  border-radius:999px; padding:.50rem .95rem;
  border:1px solid rgba(0,0,0,.12);
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.chip:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.08); }
.chip--active{ background: #fff6df; border-color: rgba(201,160,68,.55); color:#57420f; }

/* CTA (single centered) */
.cta-large{
  width:100%;
  padding: .98rem 1.2rem; border-radius:14px;
  background:var(--gold); color:#1e1f1a; font-weight:800; font-size:1.05rem;
  border:1px solid rgba(0,0,0,.06); box-shadow: 0 12px 24px rgba(217,178,96,.28);
  transition: transform .08s ease, box-shadow .18s ease;
}
.cta-large:hover{ transform: translateY(-1px); box-shadow: 0 16px 30px rgba(217,178,96,.34); }

/* Fields */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field-label{ font-weight:700; color:#333; }
.field input[type="text"], .field select{
  border:1px solid rgba(0,0,0,.12); border-radius:12px; padding:.7rem .8rem;
  background:white; font-size:1rem; outline:none;
}
.field select{ cursor:pointer; }

/* Review */
.review-list{ display:grid; gap:8px; }
.review-row{ display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed #eee; padding:8px 2px; }
.review-row span{ color:#6f726a; }
.review-row strong{ color:#222; }

@media (max-width: 760px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
}