:root{
  --bg:#f5fbff;
  --text:#123;
  --muted:#6b7a8a;

  --primary:#0aa5b6;
  --primary2:#07b7a4;

  --card:#ffffff;
  --radius:18px;
  --shadow:0 12px 30px rgba(10,165,182,.12);

  --line:#e8f0f6;

  --warnBorder:#ff8b4a;
  --warnShadow:0 18px 40px rgba(255,139,74,.22);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:linear-gradient(180deg,#ffffff 0%, var(--bg) 60%);
  color:var(--text);
}

.page{
  max-width:420px;
  margin:0 auto;
  padding:18px 14px 28px;
}

/* Header */
.topbar{
  position:relative;
  padding:6px 2px 10px;
}
.close-btn{
  position:absolute;
  right:2px;
  top:4px;
  width:42px;height:42px;
  border-radius:14px;
  border:0;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
  display:grid;place-items:center;
  cursor:pointer;
}
.title{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:10px;
}
.title .icon{
  width:26px;height:26px;
  display:grid;place-items:center;
  border-radius:10px;
  background:#eafcff;
  color:var(--primary);
}
.title h1{
  margin:0;
  font-size:20px;
  font-weight:800;
  letter-spacing:.2px;
}
.subbox{
  margin:10px 0 12px;
  border-left:4px solid var(--primary);
  background:#f1fbff;
  padding:10px 12px;
  border-radius:12px;
  color:#3a5268;
  font-size:13px;
}

/* Notice Card */
.notice{
  background:#ffe8dc;
  border:2px solid var(--warnBorder);
  border-radius:16px;
  padding:14px 12px;
  box-shadow:var(--warnShadow);
  position:relative;
}
.notice .mini{
  width:34px;height:34px;
  margin:-2px auto 6px;
  border-radius:10px;
  background:#fff;
  display:grid;place-items:center;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  font-size:18px;
}
.notice h3{
  margin:0 0 8px;
  text-align:center;
  color:#c53b1d;
  font-size:15px;
  font-weight:900;
}
.notice p{
  margin:0;
  font-size:12.5px;
  line-height:1.55;
  color:#8a2d1a;
  text-align:center;
}

/* Stepper */
.stepper{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:14px 0 8px;
  position:relative;
}
.stepper:before{
  content:"";
  position:absolute;
  left:16px; right:16px;
  top:16px;
  height:4px;
  background:#d7eef2;
  border-radius:99px;
}
.step{
  position:relative;
  width:33.33%;
  text-align:center;
}
.dot{
  width:34px;height:34px;
  border-radius:50%;
  margin:0 auto;
  background:#e8f7fa;
  border:2px solid #bfe8ee;
  display:grid;place-items:center;
  font-weight:800;
  color:#6aaab2;
  box-shadow:0 10px 20px rgba(10,165,182,.10);
}
.step.active .dot{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 18px 34px rgba(10,165,182,.30);
}
.step label{
  display:block;
  margin-top:7px;
  font-size:12px;
  color:#6b7a8a;
}
.step.active label{
  color:var(--primary);
  font-weight:700;
}

/* Section Title */
.section-title{
  text-align:center;
  font-size:18px;
  font-weight:900;
  margin:10px 0 10px;
  color:#0c4f63;
}

/* Form */
.form-card{
  background:transparent;
  padding:0;
}
.field{
  margin:10px 0 12px;
}
.field .lbl{
  font-size:13px;
  font-weight:800;
  margin:0 0 6px;
}
.req{color:#ff4d4d; font-weight:900}
.control{
  width:100%;
  height:46px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  padding:0 14px;
  outline:none;
  box-shadow:0 14px 30px rgba(15,23,42,.05);
  font-size:14px;
}
.control:focus{
  border-color:rgba(10,165,182,.55);
  box-shadow:0 16px 34px rgba(10,165,182,.14);
}
.hint{
  margin-top:6px;
  font-size:11.5px;
  color:#94a3b8;
}

.btn-next{
  width:100%;
  height:52px;
  border:0;
  border-radius:16px;
  margin-top:10px;
  cursor:pointer;
  font-weight:900;
  color:#fff;
  font-size:15px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 18px 40px rgba(10,165,182,.30);
}
.btn-next:active{transform:translateY(1px)}