/* ── Layout ─────────────────────────────────────── */
.fp-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: #f7f7f7;
}

.fp-card {
  background: #fff;
  border-radius: 20px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}

.fp-logo {
  text-align: center;
  margin-bottom: 1.75rem;
}
.fp-logo-name { font-size: 1.25rem; font-weight: 800; color: #16a34a; }
.fp-logo-sub { font-size: 0.72rem; color: #9ca3af; }

.fp-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #f0fdf4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}
.fp-icon svg { width: 28px; height: 28px; color: #16a34a; }

.fp-title { font-size: 1.2rem; font-weight: 700; color: #111827; text-align: center; }
.fp-desc { font-size: 0.875rem; color: #6b7280; text-align: center; margin-top: 0.375rem; line-height: 1.5; }
.fp-email-highlight { font-weight: 600; color: #111827; }

.fp-field { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 1.25rem; }
.fp-field label { font-size: 0.8rem; font-weight: 600; color: #374151; }
.fp-input {
  width: 100%;
  padding: 0.7rem 0.875rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 0.9rem;
  color: #111827;
  outline: none;
  transition: border-color 0.15s;
}
.fp-input:focus { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.1); }
.fp-input-wrap { position: relative; }
.fp-input-wrap .fp-input { padding-right: 2.5rem; }
.fp-eye {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  display: flex;
  padding: 0;
}
.fp-eye:hover { color: #6b7280; }
.fp-eye svg { width: 16px; height: 16px; }

/* OTP inputs */
.fp-otp-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1.5rem;
}
.fp-otp-input {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  outline: none;
  color: #111827;
  transition: border-color 0.15s;
}
.fp-otp-input:focus { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.1); }
.fp-otp-input.filled { border-color: #16a34a; background: #f0fdf4; }

/* Password strength */
.fp-strength-bar { display: flex; gap: 4px; margin-top: 0.5rem; }
.fp-seg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: #e5e7eb;
  transition: background 0.2s;
}
.fp-seg.s1 { background: #ef4444; }
.fp-seg.s2 { background: #f59e0b; }
.fp-seg.s3 { background: #3b82f6; }
.fp-seg.s4 { background: #16a34a; }

/* Button */
.fp-btn {
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.75rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
.fp-btn-primary { background: #16a34a; color: #fff; }
.fp-btn-primary:hover { background: #15803d; }
.fp-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

.fp-link {
  display: block;
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: #6b7280;
}
.fp-link a { color: #16a34a; font-weight: 600; text-decoration: none; }
.fp-link a:hover { text-decoration: underline; }

.fp-resend {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.82rem;
  color: #9ca3af;
}
.fp-resend button {
  color: #16a34a;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  font-size: inherit;
}
.fp-resend button:hover { text-decoration: underline; }

/* Step indicator */
.fp-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}
.fp-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5e7eb;
  transition: background 0.2s, width 0.2s;
}
.fp-step-dot.active { background: #16a34a; width: 24px; border-radius: 4px; }
.fp-step-dot.done { background: #bbf7d0; }

/* Success */
.fp-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #f0fdf4;
  border: 3px solid #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}
.fp-success-icon svg { width: 32px; height: 32px; color: #16a34a; }