:root{
  --bg:#f4f6f9;
  --card:#ffffff;
  --ink:#0b1220;
  --muted:#5b6676;
  --line:#d9e0ea;
  --brand:#19b59b;
  --navy:#0f2340;
  --shadow:0 14px 40px rgba(15,35,64,.10);
  --r:14px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

.topbar{
  background: linear-gradient(180deg, #0f2340 0%, #102a4b 100%);
  color:#fff;
  border-bottom: 3px solid rgba(25,181,155,.55);
}
.topbar__inner{
  max-width: 980px;
  margin:0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand__seal{
  width:44px;height:44px;border-radius:999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(25,181,155,.95), rgba(25,181,155,.55));
  border: 1px solid rgba(255,255,255,.30);
}
.brand__name{font-weight:900; letter-spacing:.6px; font-size:14px}
.brand__sub{font-size:12px; opacity:.85}

.meta__pill{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px;
}

.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow:hidden;

  /* subtle entrance */
  opacity:0;
  transform: translateY(10px);
  animation: in .35s ease-out forwards;
}
@keyframes in{to{opacity:1;transform:none}}

.card__head{
  padding: 18px 18px 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15,35,64,.05), rgba(255,255,255,0));
}
.h1{margin:0 0 6px;font-size:20px}
.p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}

.form{padding: 18px}
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 760px){ .grid{ grid-template-columns: 1fr; } }

.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:12px;font-weight:800;color:var(--navy)}
.req{color:#b42318}
.opt{color:var(--muted);font-weight:700;font-size:11px}
.hint{font-size:11px;color:var(--muted);line-height:1.35}

.input{
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 14px;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
  background:#fff;
}
.input:focus{
  border-color: rgba(25,181,155,.65);
  box-shadow: 0 0 0 5px rgba(25,181,155,.12);
}

.mt{margin-top:12px}

.chips{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 760px){ .chips{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.chip{
  border:1px solid var(--line);
  background: #fbfcfe;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink);
  display:flex;
  gap:10px;
  align-items:center;
  cursor:pointer;
  user-select:none;
  transition: background .12s ease, border-color .12s ease;
}
.chip:hover{ background:#f3fbf9; border-color: rgba(25,181,155,.35); }
.chip input{ width:auto; }

.alert{
  display:none;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  border: 1px solid;
}
.alert--error{
  border-color: rgba(180,35,24,.30);
  background: rgba(180,35,24,.06);
  color:#7a271a;
}

.consent{ margin-top: 12px; }
.consent__row{
  display:flex; gap:10px; align-items:flex-start;
  padding: 10px 12px;
  border:1px solid var(--line);
  border-radius: 12px;
  background:#fbfcfe;
  font-size: 13px;
  color: var(--muted);
}

.actions{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top: 14px;
}
.btn{
  border:0;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 900;
  cursor:pointer;
  background: var(--brand);
  color:#06201a;
  box-shadow: 0 10px 22px rgba(25,181,155,.18);
  transition: filter .12s ease, transform .12s ease;
}
.btn:hover{ filter:brightness(1.02); transform: translateY(-1px); }
.btn:disabled{ opacity:.75; cursor:not-allowed; transform:none; }

.fineprint{
  margin:0;
  font-size: 12px;
  color: var(--muted);
  line-height:1.4;
  max-width: 540px;
}

.hp{display:none}

/* Overlay */
.overlay{
  position:fixed;
  inset:0;
  background: rgba(15,35,64,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
.overlay__card{
  width: min(520px, 100%);
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(15,35,64,.15);
  box-shadow: 0 30px 70px rgba(0,0,0,.22);
  padding: 18px;
  text-align:center;
  animation: pop .18s ease-out forwards;
}
@keyframes pop{ from{transform:scale(.98);opacity:.8} to{transform:scale(1);opacity:1} }

.spinner{
  width:18px;height:18px;
  border-radius:999px;
  border: 2px solid rgba(15,35,64,.18);
  border-top-color: rgba(15,35,64,.70);
  margin: 2px auto 10px;
  animation: spin .75s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.overlay__title{ font-weight: 900; color: var(--navy); font-size: 16px; margin-bottom:4px; }
.overlay__desc{ color: var(--muted); font-size: 13px; margin-bottom: 12px; }

.steps{
  display:grid;
  gap:8px;
  text-align:left;
}
.step{
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--muted);
  background:#fbfcfe;
}
.step.active{
  border-color: rgba(25,181,155,.35);
  background: #f3fbf9;
  color: #0f3d32;
  font-weight: 800;
}