<div class="multistep">
  <!-- Progress -->
  <div class="step-progress">
    <div class="step-item active">
      <div class="step-dot">1</div>
      <span>Account</span>
    </div>
    <div class="step-line"></div>
    <div class="step-item">
      <div class="step-dot">2</div>
      <span>Profile</span>
    </div>
    <div class="step-line"></div>
    <div class="step-item">
      <div class="step-dot">3</div>
      <span>Review</span>
    </div>
  </div>

  <!-- Step 1 -->
  <div class="step-panel" id="step1">
    <div class="input-group">
      <label class="input-label">Email</label>
      <input class="input" type="email" placeholder="you@example.com" />
    </div>
    <div class="input-group">
      <label class="input-label">Password</label>
      <input class="input" type="password" />
    </div>
    <button class="btn btn-primary" onclick="goStep(2)">Continue →</button>
  </div>
</div>

<style>
.step-progress { display: flex; align-items: center; margin-bottom: 2rem; }
.step-item { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; }
.step-dot {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 2px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600; color: var(--muted);
  transition: all 0.2s;
}
.step-item.active .step-dot { border-color: var(--accent); background: var(--accent); color: #fff; }
.step-item span { font-size: 0.75rem; color: var(--muted); }
.step-item.active span { color: var(--text); font-weight: 500; }
.step-line { flex: 1; height: 1px; background: var(--border); margin: 0 0.5rem; margin-bottom: 1.25rem; }
.multistep { display: flex; flex-direction: column; gap: 1rem; }
</style>