.recovery-page { padding: 40px 20px; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--blue) 8%, transparent), transparent 60%), var(--bg); }
.recovery-shell { width: 100%; max-width: 480px; margin: auto; }
.recovery-brand { display: flex; justify-content: center; gap: 9px; margin: 0 auto 28px; font-size: 22px; letter-spacing: -.8px; }
.recovery-brand img { width: 32px; height: 32px; border-radius: 10px; }
.recovery-card { padding: 38px; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: 0 16px 64px #14203908; }
.recovery-orb { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 26px; border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line)); border-radius: 21px; color: var(--blue); background: linear-gradient(145deg, var(--soft), var(--surface)); box-shadow: 0 6px 20px color-mix(in srgb, var(--blue) 8%, transparent); }
.recovery-orb::after { position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border: 3px solid var(--surface); border-radius: 50%; background: var(--blue); content: ''; }
.recovery-orb svg { width: 29px; height: 29px; }
.recovery-eyebrow { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: 1.7px; margin: 0 0 12px; }
.recovery-card h1 { max-width: 350px; font-size: clamp(28px, 5.8vw, 34px); line-height: 1.18; letter-spacing: -1.4px; }
.recovery-card .login-intro { margin: 14px 0 24px; font-size: 13px; line-height: 1.85; }
.recovery-card .login-field:first-child { margin-top: 0; }
.recovery-card .login-field input { background: var(--bg); }
.recovery-card .login-submit { min-height: 48px; border-radius: 12px; text-decoration: none; }
.recovery-card .login-help { margin-top: 8px; }
.recovery-card .login-error { margin-bottom: 0; }
.recovery-back { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; min-height: 44px; margin: 14px auto 0; font-size: 12px; font-weight: 650; color: var(--muted); text-decoration: none; }
.recovery-back:hover { color: var(--blue); }
.recovery-help { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.8; }
.recovery-help summary { width: fit-content; cursor: pointer; font-weight: 650; }
.recovery-help p { margin-bottom: 0; }
.recovery-help strong { color: var(--ink); font-weight: 600; }
.recovery-link-note { display: flex; align-items: flex-start; gap: 9px; margin: 20px 0 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--muted); font-size: 11px; line-height: 1.8; }
.recovery-note-dot { flex: 0 0 5px; width: 5px; height: 5px; margin-top: 7px; border-radius: 50%; background: var(--blue); }
.recovery-confirmed-email { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.recovery-text-button { display: block; min-height: 44px; margin: 10px auto 0; border: 0; padding: 8px; background: transparent; color: var(--blue); font-size: 12px; font-weight: 650; }
.recovery-text-button:hover { text-decoration: underline; }
.recovery-footer { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: 10px; letter-spacing: .2px; }
.recovery-card[data-view="success"] .recovery-orb { color: #059669; background: linear-gradient(145deg, #05966912, var(--surface)); border-color: #05966935; }
.recovery-card[data-view="success"] .recovery-orb::after { background: #059669; }
.recovery-card[data-view="success"] .recovery-eyebrow { color: #059669; }
.recovery-card[data-view="expired"] .recovery-orb { color: #D97706; background: linear-gradient(145deg, #D9770612, var(--surface)); border-color: #D9770635; }
.recovery-card[data-view="expired"] .recovery-orb::after { background: #D97706; }
.recovery-card[data-view="expired"] .recovery-eyebrow { color: #B56A0D; }
@media (prefers-color-scheme: dark) { .recovery-card { box-shadow: 0 20px 80px #00000020; } .recovery-card[data-view="success"] .recovery-orb, .recovery-card[data-view="success"] .recovery-eyebrow { color: #6EE7B7; } .recovery-card[data-view="expired"] .recovery-orb, .recovery-card[data-view="expired"] .recovery-eyebrow { color: #FBBF24; } }
@media (max-width: 640px) { .recovery-page { display: grid; place-items: center; padding: max(28px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom)); } .recovery-card { padding: 30px 26px; border-radius: 23px; } .recovery-brand { margin-bottom: 24px; } }
@media (max-width: 360px) { .recovery-page { padding-inline: 14px; } .recovery-card { padding: 26px 21px; } }