/* =====================================================================
   WOAIL Mail — Register Page
   Reuses login.css common styles; adds: step indicator / OTP invite code / pane switch
   ===================================================================== */

/* ---------- 1. Step indicator ---------- */
.reg-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; max-width: 360px; }
.reg-step {
  font-size: 11px; font-weight: 600; color: var(--ink-mute);
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.4); border: 1px solid rgba(0,0,0,0.05);
  transition: 0.3s var(--ease); white-space: nowrap;
}
.reg-step.active {
  color: #fff;
  background: linear-gradient(135deg, var(--ai-purple-deep), var(--ai-purple));
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(184,167,255,0.35);
}
.reg-step.done { color: var(--ai-purple-deep); background: rgba(184,167,255,0.15); border-color: rgba(184,167,255,0.25); }
.reg-step-line { width: 30px; flex: none; height: 2px; background: var(--line-soft); border-radius: 2px; }

/* ---------- 2. Step pane switch ---------- */
.reg-pane { display: none; }
.reg-pane.active { display: block; animation: paneIn 0.45s var(--ease) both; }
@keyframes paneIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.reg-pane-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.reg-pane-desc { font-size: 12px; color: var(--ink-mute); line-height: 1.55; margin-bottom: 14px; }

/* ---------- 3. OTP 6-digit invite code ---------- */
.otp-wrap { display: flex; gap: 7px; margin-bottom: 12px; }
.otp-input {
  flex: 1; aspect-ratio: 1; min-width: 0;
  text-align: center; font-size: 18px; font-weight: 700; font-family: var(--font-mono);
  color: var(--ink); background: rgba(255,255,255,0.6);
  border: 1.5px solid rgba(0,0,0,0.08); border-radius: 11px;
  transition: 0.25s var(--ease); outline: none; text-transform: uppercase;
}
.otp-input:focus {
  border-color: var(--ai-purple);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 0 3px rgba(184,167,255,0.15);
  transform: translateY(-2px);
}
.otp-input.filled { border-color: rgba(184,167,255,0.5); background: rgba(184,167,255,0.08); color: var(--ai-purple-deep); }
.otp-input.invalid { border-color: #FF6B6B; box-shadow: 0 0 0 3px rgba(255,107,107,0.12); animation: otpShake 0.4s; }
@keyframes otpShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- 4. Agreement / back button ---------- */
.reg-agree { margin: 2px 0 0; align-items: flex-start; line-height: 1.5; }
.reg-back {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  font-size: 12px; color: var(--ink-mute); transition: 0.2s var(--ease);
  background: none; border: none; padding: 4px 0;
}
.reg-back:hover { color: var(--ink); transform: translateX(-2px); }

/* ---------- 5. Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  .reg-step { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
  .reg-step.done { background: rgba(184,167,255,0.12); border-color: rgba(184,167,255,0.2); }
  .otp-input { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
  .otp-input:focus { background: rgba(255,255,255,0.08); }
  .otp-input.filled { background: rgba(184,167,255,0.1); }
}