.recovery-card { width: min(100%, 520px); }
.recovery-card h1 { font-size: 32px; letter-spacing: -.02em; }
.recovery-hint { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.recovery-code { display: flex; align-items: stretch; gap: 10px; }
.recovery-code input { min-width: 0; flex: 1; }
.recovery-code-input { width: 100%; height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; }
.recovery-code-input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.recovery-code .button { flex: 0 0 auto; min-height: 46px; padding: 0 14px; font-size: 13px; box-shadow: none; }
.recovery-card [hidden] { display: none !important; }
.recovery-card button:disabled { cursor: not-allowed; opacity: .65; }
.recovery-success { padding: 22px 0 0; }
.recovery-success p { color: var(--muted); font-size: 14px; line-height: 1.8; }
.recovery-success h2 { font-size: 23px; }
.recovery-card .register-message.info { background: #eef5f3; color: var(--ink-deep); }
.forgot-password-link { margin: 12px 0; text-align: right; font-size: 13px; }
.forgot-password-link a { color: #007f78; font-weight: 650; text-decoration: none; }
.forgot-password-link a:hover { text-decoration: underline; }
@media (max-width: 380px) { .recovery-code { flex-direction: column; }.recovery-code .button { width: 100%; } }