body { background: #fff; }
[hidden] { display: none !important; }
.recovery-header { padding: 20px 24px; border-bottom: 1px solid var(--line); }
.recovery-header a { color: var(--ink); text-decoration: none; font-size: 20px; font-weight: 700; }
.recovery-header span { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.recovery-main { max-width: 440px; margin: 40px auto; padding: 0 16px; min-height: 380px; }
.recovery-main h1 { font-size: 24px; margin: 24px 0; }
.back-link { font-size: 13px; color: var(--accent); }
.recovery-main form { display: grid; gap: 12px; }
.recovery-main label { font-size: 14px; }
.recovery-main input,.recovery-main select { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
.recovery-main button { min-height: 44px; margin-top: 8px; }
#recovery-message { font-size: 14px; overflow-wrap: anywhere; }
.recovery-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 24px; border-top: 1px solid var(--line); font-size: 12px; }
#recovery-notice { width: min(420px,calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; margin: auto; padding: 24px; border: 1px solid var(--line); border-radius: 8px; }
#recovery-notice::backdrop { background: rgb(19 34 29 / 45%); }
#recovery-notice h2 { font-size: 20px; }
#recovery-notice button { width: 100%; min-height: 44px; }