:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px;
    color: #f4f1ff; background: #090811; font: 16px/1.6 system-ui, sans-serif; }
.recovery-card { width: 100%; max-width: 460px; padding: 32px; border: 1px solid #302540;
    border-radius: 24px; background: #13101c; box-shadow: 0 24px 80px #0006; }
.recovery-brand { font-weight: 800; letter-spacing: 2px; }
h1 { font-size: 26px; line-height: 1.3; margin: 24px 0 12px; }
p { color: #bbb2ce; }
a { color: #c9adff; }
form { display: grid; gap: 12px; margin: 24px 0; }
label { font-size: 14px; font-weight: 600; }
.og-input { width: 100%; font: inherit; }
.og-btn-primary { width: 100%; font: inherit; padding: 12px; cursor: pointer; }
.recovery-notice,.recovery-error { padding: 12px; border-radius: 12px; border: 1px solid #455a51; color: #bcebd2; }
.recovery-error { border-color: #784652; color: #ffc4d0; }
.recovery-help { font-size: 13px; margin: 0; }
.recovery-back { display: block; margin-top: 24px; }
:focus-visible { outline: 3px solid #c9adff; outline-offset: 3px; }
@media (max-width: 480px) { .recovery-card { padding: 24px; } }