:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --brand:#4f46e5;
  --brand-2:#22c55e;
  --soft: #e2e8f0;
  --ring: 36, 92%, 62%;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg, #f9fbff 0%, #eef2ff 60%, #f8fafc 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.site-header{
  padding:2.2rem 1.2rem 1rem;
  text-align:center;
}
.site-header h1{
  font-family:'Playfair Display', serif;
  font-weight:700;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  margin:0 0 .4rem;
  letter-spacing:.5px;
}
.subtitle{color:var(--muted); margin:0;}

.layout{
  display:grid;
  gap:1rem;
  grid-template-columns: 1fr;
  padding:1rem;
  max-width:1100px;
  margin:0 auto;
}
@media (min-width: 1000px){
  .layout{
    grid-template-columns: 2fr 1fr;
    align-items:start;
  }
}

.card{
  background:var(--card);
  border-radius:18px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06), 0 2px 6px rgba(2,6,23,.04);
  padding:1rem;
  border:1px solid #eef2ff;
}

.section h2{ margin:.2rem 0 1rem; }
.pill{
  display:inline-block;
  background:linear-gradient(90deg, rgba(79,70,229,.09), rgba(34,197,94,.09));
  color:#111827;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid rgba(99,102,241,.3);
  font-weight:700;
  letter-spacing:.2px;
}

.groups{
  display:grid;
  gap:.8rem;
  grid-template-columns: 1fr;
}
@media (min-width: 780px){
  .groups{ grid-template-columns: 1fr 1fr; }
}

.group{
  border:1px dashed #e5e7eb;
  border-radius:14px;
  padding:.8rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
  overflow:hidden;
}
.group:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(2,6,23,.06);
  border-color:#dbeafe;
}
.group legend{
  padding:0 .4rem;
  font-weight:700;
  color:#1f2937;
}

.checks{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chk{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .55rem; border-radius:999px;
  background:#f8fafc; border:1px solid #e5e7eb;
  transition: all .2s ease;
  cursor:pointer;
  user-select:none;
}
.chk input{ appearance:none; width:1rem; height:1rem; border-radius:4px; border:1.5px solid #cbd5e1; display:inline-block; position:relative; }
.chk input:checked{ background:linear-gradient(180deg, #6366f1, #22c55e); border-color:transparent; }
.chk input:checked::after{ content:''; position:absolute; inset:.18rem; background:white; border-radius:2px; }
.chk:hover{ transform: translateY(-1px); border-color:#c7d2fe; box-shadow: 0 4px 12px rgba(99,102,241,.12); }
.chk span{ font-weight:600; }

.fld{ display:block; }
.fld input{
  width:100%; padding:.8rem .9rem; border-radius:12px; outline:none;
  border:1.5px solid #e5e7eb; background:#f9fafb; transition:border-color .2s ease, box-shadow .2s ease;
}
.fld input:focus{ border-color:#c7d2fe; box-shadow: 0 0 0 6px rgba(99,102,241,.12); background:white; }
.fld.floating{ position:relative; }
.fld.floating > span{
  pointer-events:none; position:absolute; left:.75rem; top:.75rem;
  color:#6b7280; transition: transform .15s ease, color .2s ease, background .2s ease; background:transparent; padding:0 .25rem;
}
.fld.floating input:focus + span,
.fld.floating input:not(:placeholder-shown) + span{
  transform: translateY(-1.2rem) scale(.9); color:#4f46e5; background:white; border-radius:8px;
}

.chip-in input{ padding:.5rem .75rem; border-radius:999px; }

.segmented{
  display:inline-grid;
  grid-auto-flow:column; gap:0; background:#eef2ff;
  border:1px solid #c7d2fe; border-radius:999px; padding:.2rem;
}
.segmented input{ display:none; }
.segmented label{
  padding:.45rem .75rem; border-radius:999px; cursor:pointer; font-weight:700;
  transition: transform .08s ease, background .2s ease;
}
.segmented input:checked + label{ background:white; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(79,70,229,.2); }

.actions{
  display:flex; gap:.6rem; align-items:center; justify-content:flex-end;
  position:sticky; bottom:1rem; z-index:5;
}
button{
  appearance:none; border:none; border-radius:12px; padding:.8rem 1rem; font-weight:800; cursor:pointer;
  background:linear-gradient(90deg, #4f46e5, #22c55e); color:white;
  box-shadow: 0 10px 24px rgba(79,70,229,.25);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
button:hover{ transform: translateY(-1px); filter:saturate(1.1); box-shadow: 0 14px 28px rgba(79,70,229,.3); }
button.ghost{ background:#f1f5f9; color:#0f172a; box-shadow:none; border:1px solid #e2e8f0; }
button.ghost:hover{ background:white; }

.summary{ position:sticky; top:1rem; }
.summary h2{ margin:.2rem 0 .6rem; }
.summary-text{
  min-height:8rem; line-height:1.6; color:#111827; font-size:1rem;
  background: conic-gradient(from 180deg at 50% 50%, rgba(79,70,229,.06), rgba(34,197,94,.06));
  border:1px dashed #dbeafe; border-radius:14px; padding:1rem;
}

.site-footer{ text-align:center; color:#64748b; padding:1rem; }