:root { color-scheme: light; font-family: Poppins, system-ui, sans-serif; color: #1f2937; background: #f3f4f6; }
* { box-sizing: border-box; }
body { min-height: 100vh; min-height: 100svh; margin: 0; padding: 32px 16px; display: grid; place-items: center; }
.recovery-card { width: 100%; max-width: 448px; padding: 32px; background: #fff; border: 1px solid #d1d5db; border-radius: 16px; }
.brand { margin: 0 0 32px; font-weight: 700; font-size: 18px; line-height: 28px; color: #4338ca; }
.brand span { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: #4b5563; }
h1 { margin: 0 0 16px; font-size: 30px; line-height: 36px; text-wrap: balance; }
p { margin: 0 0 24px; font-size: 16px; line-height: 24px; text-wrap: pretty; overflow-wrap: anywhere; }
form { display: grid; gap: 12px; }
label { font-size: 14px; line-height: 20px; font-weight: 600; }
input { min-width: 0; width: 100%; min-height: 48px; padding: 12px; border: 1px solid #6b7280; border-radius: 8px; font: inherit; background: white; color: #111827; }
input + label { margin-top: 12px; }
.hint { font-size: 14px; line-height: 20px; color: #4b5563; margin: 0 0 12px; }
button, .button { display: block; width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; background: #4338ca; color: #fff; font: inherit; font-size: 16px; line-height: 24px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 300ms cubic-bezier(.22,1,.36,1), transform 300ms cubic-bezier(.22,1,.36,1); }
button:hover, .button:hover { background: #3730a3; }
button:active, .button:active { transform: translateY(1px); }
:focus-visible { outline: 3px solid #4f46e5; outline-offset: 4px; }
.secondary { display: block; text-align: center; margin-top: 24px; padding: 8px 12px; font-size: 14px; line-height: 20px; color: #4338ca; text-underline-offset: 4px; }
.secondary:hover { color: #312e81; }
.notice { padding: 16px; border: 1px solid #c7d2fe; border-radius: 8px; background: #eef2ff; }
.error { margin: 0 0 24px; border-color: #fca5a5; background: #fef2f2; color: #991b1b; line-height: 24px; }
.skip-link { position: absolute; top: 8px; left: 16px; padding: 12px; background: #fff; color: #4338ca; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
@media (max-width: 400px) { .recovery-card { padding: 24px; } }
@media (prefers-reduced-motion: reduce) { button, .button { transition: none; } button:active, .button:active { transform: none; } }