<div class="otp-wrap">
  <p class="input-label">Enter the 6-digit code sent to your email</p>
  <div class="otp-inputs">
    <input class="otp-cell" type="text" maxlength="1" inputmode="numeric" />
    <input class="otp-cell" type="text" maxlength="1" inputmode="numeric" />
    <input class="otp-cell" type="text" maxlength="1" inputmode="numeric" />
    <span class="otp-divider">—</span>
    <input class="otp-cell" type="text" maxlength="1" inputmode="numeric" />
    <input class="otp-cell" type="text" maxlength="1" inputmode="numeric" />
    <input class="otp-cell" type="text" maxlength="1" inputmode="numeric" />
  </div>
  <p class="input-hint">Didn't receive a code? <a href="#">Resend</a></p>
</div>

<style>
.otp-inputs { display: flex; align-items: center; gap: 0.5rem; }
.otp-cell {
  width: 3rem; height: 3.5rem; text-align: center;
  font-size: 1.25rem; font-weight: 600;
  border: 1px solid var(--border); border-radius: 0.625rem;
  background: var(--surface); color: var(--text);
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.otp-cell:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.otp-divider { color: var(--muted); font-size: 1.25rem; padding: 0 0.25rem; }
</style>

<script>
document.querySelectorAll('.otp-cell').forEach((cell, i, cells) => {
  cell.addEventListener('input', () => {
    if (cell.value && cells[i + 1]) cells[i + 1].focus();
  });
  cell.addEventListener('keydown', (e) => {
    if (e.key === 'Backspace' && !cell.value && cells[i - 1]) cells[i - 1].focus();
  });
});
</script>