:root{
  --bg:#fff;
  --paper:#ffffff;
  --ink:#1b1b1b;
  --muted:#6b6b6b;
  --accent:#c9981f;    /* warm apricot accent */
  --accent-ink:#3a2a1a;
  --line:#e9e6e2;
  --focus:#71bfff33;
  --err:#b91c1c;
  --pill:#f7f4f0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
}

.wrap{
  min-height:70dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.card{
  width:min(880px,100%);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:15px;
  padding:clamp(20px,4vw,42px);
  box-shadow:0 14px 36px rgba(0,0,0,.06);
}

h1,h2,h3{
  font-family:"PT Serif", Georgia, "Times New Roman", serif;
  margin:0 0 10px;
  line-height:1.15;
}
h1{font-size:clamp(28px,4.4vw,44px)}
h2{font-size:clamp(22px,3vw,28px)}
p{margin:0 0 12px; color:var(--ink)}
.muted{color:var(--muted)}
.foot{color:var(--muted); font-size:13px}

.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:10px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.progress{display:flex;align-items:center;gap:6px}
.node{width:8px;height:8px;border-radius:50%;background:#e0e0e0}
.node.on{background:var(--accent)}

.backbar{display:flex;gap:10px;align-items:center;margin-bottom:24px}
.hidden{display:none !important}

.row{display:flex;gap:14px;flex-wrap:wrap}
.col{flex:1}
.spacer{height:16px}

label{display:block;font-size:13px;color:#2b2b2b;margin:0 0 6px}
input, select, textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 14px !important;
  background:#fff;
  font:inherit;
  color:inherit;
  outline:none;
}
input:focus, select:focus, textarea:focus{border-color:#90cdf4; box-shadow:0 0 0 4px var(--focus)}

textarea{min-height:110px; resize:vertical}

.error{color:var(--err); font-size:13px; margin-top:6px; font-weight:600}
.pillset{display:flex;flex-wrap:wrap;gap:10px}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--pill);cursor:pointer;user-select:none
}
.pill input{width:auto; accent-color:var(--accent)}
.pill span{font-size:14px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 18px; border-radius:15px; border:1px solid var(--line);
  background:var(--accent); color:var(--accent-ink); font-weight:700;
  cursor:pointer; text-decoration:none; user-select:none;
  transition:transform .04s ease, box-shadow .2s ease;
  color: #fff;
}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:#fff; color:#333}

.step{display:none}
.step.active{display:block}
.fade{opacity:0; transform:translateY(8px); transition:.35s ease}
.fade.is-in{opacity:1; transform:none}

.result-card{background:#f2fbf5;border-left:4px solid #22c55e;padding:12px;border-radius:8px}
@media (max-width:720px){ .row{flex-direction:column} }

.container{
  width: 100% !important;
}
#main-content{
  background:
  radial-gradient(1200px 600px at 85% -10%, #f5efe8 0%, transparent 60%),
  radial-gradient(900px 400px at -10% 90%, #f7f3ee 0%, transparent 60%) ;
}