:root{
  --teal:#2fb3c0; --teal-d:#178493; --teal-l:#e7f7f9;
  --ink:#1f2b36; --muted:#64748b; --line:#e2e8ee; --bg:#f5f8fa;
  --ok:#1e7a3d; --err:#c0392b; --shadow:0 1px 3px rgba(20,40,60,.08),0 6px 24px rgba(20,40,60,.06);
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.45; padding-bottom:90px; }

/* header */
.topbar{ background:#fff; border-bottom:1px solid var(--line); padding:14px 18px; position:sticky; top:0; z-index:20; }
.brand{ display:flex; align-items:center; gap:12px; max-width:820px; margin:0 auto; }
.logo{ width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,var(--teal),var(--teal-d));
  color:#fff; font-weight:800; font-size:22px; display:grid; place-items:center; }
.topbar h1{ font-size:18px; margin:0; color:var(--teal-d); }
.topbar p{ margin:0; font-size:12px; color:var(--muted); }

/* progress */
.progress-wrap{ max-width:820px; margin:16px auto 0; padding:0 18px; }
.progress{ height:6px; background:var(--line); border-radius:99px; overflow:hidden; }
#progressBar{ height:100%; width:0; background:linear-gradient(90deg,var(--teal),var(--teal-d)); transition:width .35s ease; }
.steps{ display:flex; justify-content:space-between; margin-top:8px; }
.steps span{ font-size:11px; color:var(--muted); font-weight:600; letter-spacing:.02em; text-align:center; flex:1; }
.steps span.active{ color:var(--teal-d); }
.steps span.done{ color:var(--ink); }

/* layout */
main{ max-width:820px; margin:18px auto; padding:0 18px; }
.step h2{ font-size:22px; margin:6px 0 2px; }
.step h3.review-h{ font-size:17px; margin:26px 0 8px; }
.hint{ color:var(--muted); font-size:14px; margin:0 0 18px; }
.hint.small{ font-size:12px; margin:0; font-weight:400; }
.req{ font-size:11px; color:var(--muted); font-weight:600; }

fieldset{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 16px 8px; margin:0 0 16px; box-shadow:var(--shadow); }
legend{ font-weight:700; color:var(--teal-d); font-size:14px; padding:0 8px; }
fieldset legend b, label b{ color:var(--err); }

/* grids */
.grid{ display:grid; gap:12px 14px; margin-bottom:8px; }
.g2{ grid-template-columns:1fr 1fr; } .g3{ grid-template-columns:1fr 1fr 1fr; } .g4{ grid-template-columns:2fr .7fr 1.3fr .9fr; }
.mh-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px 14px; margin:8px 0 14px; }
@media(max-width:640px){ .g2,.g3,.g4,.mh-grid{ grid-template-columns:1fr; } }

label{ display:block; font-size:12px; font-weight:600; color:#3d4b59; margin-bottom:5px; }
input,select{ width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:9px; font-size:15px; background:#fff; color:var(--ink); }
input:focus,select:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-l); }

.opts{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{ display:inline-flex; align-items:center; gap:6px; margin:0; font-size:14px; font-weight:500;
  border:1px solid var(--line); border-radius:99px; padding:8px 13px; cursor:pointer; background:#fff; }
.pill:has(input:checked){ border-color:var(--teal); background:var(--teal-l); color:var(--teal-d); font-weight:600; }
.pill input{ width:auto; accent-color:var(--teal-d); }
.chk{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:500; color:var(--ink); margin:6px 0 12px; cursor:pointer; }
.chk input{ width:18px; height:18px; accent-color:var(--teal-d); }

/* location cards */
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:640px){ .cards{ grid-template-columns:1fr; } }
.loc-card{ background:#fff; border:2px solid var(--line); border-radius:14px; padding:18px; cursor:pointer; box-shadow:var(--shadow); transition:.15s; }
.loc-card:hover{ border-color:var(--teal); }
.loc-card.sel{ border-color:var(--teal-d); background:var(--teal-l); }
.loc-card h3{ margin:0 0 6px; font-size:17px; color:var(--teal-d); }
.loc-card p{ margin:0; font-size:13px; color:var(--muted); }

/* child cards */
.child-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:16px; box-shadow:var(--shadow); }
.child-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.child-title{ margin:0; font-size:18px; color:var(--teal-d); }
.sub{ font-weight:700; font-size:13px; color:#41505e; text-transform:uppercase; letter-spacing:.04em;
  margin:18px 0 10px; padding-top:12px; border-top:1px dashed var(--line); }
.child-card .sub:first-of-type{ border-top:none; padding-top:0; margin-top:12px; }

/* yes/no rows */
.yn-block{ border:1px solid var(--line); border-radius:11px; padding:6px 12px 10px; margin:10px 0; }
.yn-title{ font-weight:700; font-size:13px; color:#41505e; margin:8px 2px; }
.yn{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 2px; border-top:1px solid #f0f4f7; font-size:14px; }
.yn:first-of-type{ border-top:none; }
.yn .toggle{ display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex:none; }
.yn .toggle button{ border:none; background:#fff; padding:6px 15px; font-size:13px; font-weight:600; cursor:pointer; color:var(--muted); }
.yn .toggle button.no.on{ background:#eef2f5; color:var(--ink); }
.yn .toggle button.yes.on{ background:var(--teal-d); color:#fff; }
.yn .who{ flex:none; width:130px; }
.yn .who input{ padding:6px 8px; font-size:13px; }
@media(max-width:640px){ .yn{ flex-wrap:wrap; } .yn .who{ width:100%; } }

/* uploads */
.upload{ border:1.5px dashed var(--teal); border-radius:10px; padding:12px; background:#f2fbfc; text-align:center; }
.upload label{ color:var(--teal-d); font-weight:700; }
.upload input{ margin-top:8px; }
.thumb{ display:none; max-height:80px; margin-top:8px; border-radius:6px; }

/* optional blocks */
.opt-block{ border:1px solid var(--line); border-radius:10px; padding:0 12px; margin:10px 0; background:#fbfdfe; }
.opt-block summary{ cursor:pointer; padding:11px 2px; font-weight:600; font-size:13px; color:var(--teal-d); }
.opt-block[open]{ padding-bottom:12px; }
.pcpNote{ background:#fff7e6; border:1px solid #f0d79a; color:#8a6d1f; border-radius:9px; padding:10px 12px; font-size:13px; margin:8px 0; }

/* policies */
.init-row{ margin-bottom:14px; }
.policy{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:10px; box-shadow:var(--shadow); }
.policy b.pt{ color:var(--teal-d); }
.policy p{ margin:5px 0 0; font-size:13px; color:#425466; }
.ack{ display:flex; align-items:center; gap:9px; margin-top:10px; font-size:13px; font-weight:600; }
.ack input{ width:18px; height:18px; accent-color:var(--teal-d); }
.ack .echo{ color:var(--teal-d); font-weight:700; }

/* signature */
#padWrap{ border:1px solid var(--line); border-radius:11px; background:#fff; box-shadow:var(--shadow); }
canvas{ width:100%; height:160px; display:block; touch-action:none; border-radius:11px; }
.padbar{ display:flex; justify-content:space-between; align-items:center; padding:7px 12px; font-size:12px; color:var(--muted); }

/* review */
.review{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:6px 16px; box-shadow:var(--shadow); }
.review .r-child{ border-top:1px solid var(--line); padding:12px 0; }
.review .r-child:first-child{ border-top:none; }
.review .r-name{ font-weight:700; color:var(--teal-d); }
.review .r-line{ font-size:13px; color:#425466; margin-top:2px; }
.review .tag{ display:inline-block; background:var(--teal-l); color:var(--teal-d); font-size:11px; font-weight:700;
  border-radius:6px; padding:2px 8px; margin:4px 6px 0 0; }

/* buttons + nav */
.btn{ border:none; border-radius:10px; font-size:15px; font-weight:700; padding:12px 20px; cursor:pointer; }
.btn.primary{ background:var(--teal-d); color:#fff; }
.btn.primary:hover{ background:#12707d; }
.btn.ghost{ background:#fff; color:var(--teal-d); border:1px solid var(--line); }
.btn.big{ width:100%; margin-top:16px; padding:15px; font-size:17px; }
.btn.add{ width:100%; border-style:dashed; }
.link{ background:none; border:none; color:var(--teal-d); font-weight:600; cursor:pointer; font-size:13px; }
.link.danger{ color:var(--err); }
.navbar{ position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:12px; padding:12px 18px; z-index:20; }
.navbar .btn{ min-width:120px; }
.navbar #nextBtn{ margin-left:auto; }

.msg{ display:none; text-align:center; padding:12px; border-radius:10px; margin-top:14px; font-weight:600; }
.msg.ok{ display:block; background:#e6f7ec; color:var(--ok); }
.msg.bad{ display:block; background:#fdecea; color:var(--err); }
.field-error{ border-color:var(--err)!important; box-shadow:0 0 0 3px #fdecea!important; }
.done-screen{ text-align:center; padding:40px 20px; }
.done-screen .check{ width:66px; height:66px; border-radius:50%; background:var(--teal-l); color:var(--teal-d);
  font-size:34px; display:grid; place-items:center; margin:0 auto 16px; }