:root{
  --blue:#1d73ff;
  --muted:#d5e1ff;
  --bg:#f4f6f9;
  --card:#fff;
}
*{box-sizing:border-box}
body{
  font-family:Arial,Helvetica,sans-serif;
  margin:0;
  background:var(--bg);
  padding:20px;
  color:#222;
}
.form-container{
  max-width:1100px;
  margin:auto;
  background:var(--card);
  padding:25px;
  border-radius:12px;
  box-shadow:0 4px 18px rgba(0,0,0,0.06);
}

/* Progress */
.progressbar{
  display:flex;
  justify-content:space-between;
  counter-reset: step;
  margin-bottom:24px;
}
.progress-step{
  position:relative;
  text-align:center;
  width:100%;
}
.progress-step::before{
  content:counter(step);
  counter-increment:step;
  width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;
  background:var(--muted);
  color:var(--blue);
  font-weight:700;
  z-index:2;
}
.progress-step.active::before{
  background:var(--blue); color:#fff;
}
.progress-step::after{
  content:"";
  position:absolute; top:21px; left:50%; height:4px;
  width:100%; background:var(--muted); z-index:1;
}
.progress-step:last-child::after{ display:none; }
.progress-step.active + .progress-step::after{ background:var(--blue); }

/* Steps */
.form-step{ display:none; }
.form-step.active{ display:block; animation:fadeIn .35s ease; }
@keyframes fadeIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* Fields */
.form-row{ display:flex; gap:20px; margin-bottom:16px; flex-wrap:wrap; }
.form-group{ flex:1; min-width:220px; }
.form-group.full{ flex-basis:100%;}
label{ display:block; margin-bottom:6px; font-weight:700; font-size:14px;}
input,select{ width:100%; padding:10px 12px; border-radius:6px; border:1px solid #cfcfcf; font-size:14px;}
input[type="file"]{ padding:6px; background:#fbfbfb;}
.hint{ display:block; font-size:12px; color:#666; margin-top:4px;}

/* Buttons */
.btn-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:18px;}
button{ cursor:pointer; border:0; padding:10px 18px; border-radius:6px; font-size:15px;}
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:#0057e0; }
.btn-back{ background:#6c757d; color:#fff; }
.btn-back:hover{ background:#565e64; }
.btn-secondary{ background:#f0f2f8; color:#333; border:1px solid #e0e6f3; }
.btn-secondary:hover{ background:#e9eefc; }

/* status message */
#statusMessage{ margin-top:14px; font-size:15px; }

/* small screens */
@media(max-width:640px){
  .form-row{ gap:12px; }
  button{ width:100%; }
  .btn-row{ flex-direction:column-reverse; align-items:stretch; }
}