.recovery-page { min-height: 100vh; padding: 28px 16px; }
.recovery-page .recovery-box { width: 420px; max-width: 100%; margin: auto; padding: 28px; background: white; }
.recovery-logo { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto 24px; }
.recovery-page [hidden] { display: none !important; }
.recovery-captcha-row { display: flex; align-items: center; gap: 10px; }
.recovery-captcha-row img { flex: 0 0 100px; width: 100px; height: 50px; }
.recovery-captcha-row input { min-width: 60px; text-transform: uppercase; }
.recovery-page .recovery-otp { font-size: 24px; text-align: center; letter-spacing: 10px; }
.recovery-resend { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e9ecef; }
.recovery-rules { background: #f8f9fa; padding: 14px; margin-bottom: 20px; font-size: 12px; }
.recovery-rules ul { padding-left: 18px; margin: 10px 0; }
.recovery-rules li { list-style: none; position: relative; margin: 4px 0; }
.recovery-rules li::before { content: '\2022'; position: absolute; left: -16px; }
.recovery-rules li.text-success::before { content: '\2713'; }
.recovery-rules li.text-danger::before { content: '\00d7'; }
.recovery-page [aria-invalid="true"] { border-color: #c33; }
#recovery-progress { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 16px; }
.recovery-spinner { width: 18px; height: 18px; border: 2px solid #ddd; border-top-color: #2255a4; border-radius: 50%; animation: recovery-spin .7s linear infinite; }
@keyframes recovery-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .recovery-spinner { animation: none; } }