:root { --ink:#1d2635; --muted:#52647c; --blue:#3459bc; --blue-deep:#28489d; --line:#d8e1ee; --paper:#f4f8fc; --card:#fff; --focus:#345fc4; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; min-height:100%; }
body { color:var(--ink); background:var(--paper); font:15px/1.5 "DM Sans", "Segoe UI", Arial, sans-serif; }
a { color:var(--blue-deep); }
.recovery-shell { min-height:100vh; display:grid; place-items:center; position:relative; overflow:hidden; padding:32px 20px; }
.recovery-wave { position:absolute; inset:auto -120px -125px auto; width:min(700px,80vw); opacity:.55; transform:rotate(-7deg); pointer-events:none; }
.recovery-wave img { display:block; width:100%; }
.recovery-card { width:min(100%,460px); background:color-mix(in srgb, var(--card) 95%, transparent); border:1px solid rgba(216,225,238,.85); border-radius:20px; padding:34px 38px 30px; box-shadow:0 22px 70px rgba(45,73,126,.15); position:relative; }
.brand { display:flex; flex-direction:column; align-items:flex-start; text-decoration:none; color:var(--muted); font-size:11px; letter-spacing:.7px; margin-bottom:42px; }
.brand-mark { width:188px; aspect-ratio:1480 / 330; position:relative; overflow:hidden; flex:none; }
.brand-mark img { position:absolute; width:119.865%; height:auto; max-width:none; left:-10.743%; top:-93.939%; }
.brand span { margin-top:5px; }
.eyebrow { color:var(--blue); font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; margin:0 0 7px; }
h1 { font:800 30px/1.15 "Segoe UI", Arial, sans-serif; letter-spacing:-.8px; margin:0 0 12px; }
.intro { color:var(--muted); margin:0 0 26px; }
label { display:block; font-weight:700; font-size:13px; margin:16px 0 7px; }
input { width:100%; border:1px solid var(--line); border-radius:9px; padding:12px 13px; color:var(--ink); background:#fff; font:inherit; }
input:focus { outline:2px solid var(--focus); outline-offset:2px; border-color:var(--focus); }
.primary { width:100%; border:0; border-radius:9px; padding:12px 16px; margin-top:22px; color:#fff; background:var(--blue); font-weight:700; font:inherit; cursor:pointer; }
.primary:hover { background:var(--blue-deep); }
.primary:disabled { opacity:.65; cursor:wait; }
.message { min-height:24px; margin:16px 0 0; color:var(--muted); }
.message.error, .message.success { color:var(--ink); }
.unavailable { display:flex; flex-direction:column; gap:2px; margin-top:18px; padding:13px 14px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); }
.back-link { display:block; margin-top:30px; font-size:13px; text-decoration:none; }
@media (max-width:520px) { .recovery-card { padding:28px 24px 25px; } .brand { margin-bottom:32px; } h1 { font-size:27px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }
:is(a,button,input):focus-visible { outline:2px solid var(--focus); outline-offset:3px; }