.recovery-login-card { display: grid; gap: 20px; }
.recovery-login-heading { display: grid; gap: 10px; }
.recovery-login-heading > span { color: #2f4667; font-size: 11px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.recovery-login-heading h1 { margin: 0; color: #17191d; font-size: clamp(34px, 8vw, 48px); line-height: 1; letter-spacing: -.045em; }
.recovery-login-heading p { margin: 0; color: #737983; font-size: 14px; line-height: 1.55; }
.recovery-back-link { display: inline-flex; width: fit-content; color: #6f7680; font-size: 13px; font-weight: 650; text-decoration: none; }
.recovery-back-link:hover { color: #2f4667; }

.recovery-status-panel { padding-bottom: 24px; }
.recovery-generate-form { padding: 0 28px; }
.recovery-count { flex: 0 0 auto; color: #2f4667; font-size: 22px; letter-spacing: -.03em; }
.recovery-code-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 24px 28px; }
.recovery-code-list code { display: block; padding: 15px 17px; border: 1px solid #dfe3e9; border-radius: 14px; background: #f7f8fa; color: #27364d; font: 700 14px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: .04em; text-align: center; user-select: all; }
.recovery-warning { margin: 0 28px 26px; padding: 15px 17px; border: 1px solid rgba(173,63,77,.18); border-radius: 14px; background: rgba(173,63,77,.045); color: #8f3c48; font-size: 13px; line-height: 1.5; }
.recovery-toast { max-width: 360px; padding: 13px 16px; border: 1px solid #d7dbe1; border-radius: 14px; background: #fff; box-shadow: 0 18px 48px rgba(25,35,50,.16); color: #25282d; font-size: 13px; }

@media (max-width: 760px) {
  .recovery-code-list { grid-template-columns: 1fr; padding: 20px 18px; }
  .recovery-generate-form { padding: 0 19px; }
  .recovery-generate-form .security-secondary { width: 100%; }
  .recovery-count { font-size: 18px; }
  .recovery-warning { margin: 0 18px 21px; }
}