:root {
  --page-bg:#07111f; --text:#132238; --muted:#637188; --line:#dbe4ee;
  --field:#f7f9fc; --brand:#087fb7; --brand-dark:#05628e;
  --focus:rgba(8,127,183,.18); --success:#087f5b; --danger:#b42318;
}
*{box-sizing:border-box}
html{min-height:100%}
body{
  min-height:100vh; margin:0; color:var(--text);
  background:
    radial-gradient(circle at 15% 15%,rgba(18,91,137,.34),transparent 32rem),
    radial-gradient(circle at 90% 90%,rgba(15,63,98,.30),transparent 30rem),
    var(--page-bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:42px 42px; mask-image:linear-gradient(to bottom,#000,transparent 75%);
}
.recovery-page{
  position:relative; z-index:1; min-height:100vh; display:grid; place-content:center;
  justify-items:center; gap:20px; padding:32px 18px;
}
.recovery-card{
  width:min(100%,500px); padding:34px 38px 30px; border:1px solid rgba(255,255,255,.45);
  border-radius:24px; background:rgba(255,255,255,.985);
  box-shadow:0 28px 80px rgba(0,0,0,.34),0 2px 8px rgba(0,0,0,.1);
}
.recovery-brand{display:inline-flex;align-items:center;gap:10px;color:#27415f;font-size:.92rem;font-weight:750;letter-spacing:.01em}
.brand-mark{
  width:38px;height:38px;display:grid;place-items:center;color:#fff;border-radius:12px;
  background:linear-gradient(145deg,#0799d7,#075c8a);box-shadow:0 7px 16px rgba(8,127,183,.25)
}
.brand-mark svg{width:22px}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.recovery-header{margin:27px 0 24px}
.eyebrow{margin:0 0 7px;color:var(--brand);font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.recovery-header h1{margin:0;color:#101f33;font-size:clamp(1.75rem,5vw,2.15rem);line-height:1.12;letter-spacing:-.035em}
.recovery-header p:last-child{margin:12px 0 0;color:var(--muted);font-size:.96rem;line-height:1.6}
.alert{display:flex;gap:11px;align-items:flex-start;margin-bottom:20px;padding:13px 14px;border:1px solid;border-radius:13px;font-size:.9rem;line-height:1.45}
.alert>span{width:22px;height:22px;flex:0 0 22px;display:grid;place-items:center;border-radius:50%;color:#fff;font-weight:800}
.alert-success{color:#116149;background:#eafaf3;border-color:#b9ead8}.alert-success>span{background:var(--success)}
.alert-error{color:#8f2118;background:#fff1f0;border-color:#f1c2be}.alert-error>span{background:var(--danger)}
.recovery-form{display:grid;gap:17px}
.field label{display:block;margin-bottom:7px;color:#26384f;font-size:.89rem;font-weight:700}
.field small{display:block;margin-top:7px;color:#7a8799;font-size:.78rem}
.input-wrap{position:relative}
.input-wrap svg{position:absolute;top:50%;left:15px;width:20px;color:#8290a3;transform:translateY(-50%);pointer-events:none}
.input-wrap input{
  width:100%;height:52px;padding:0 15px 0 46px;border:1px solid var(--line);border-radius:13px;
  outline:none;color:var(--text);background:var(--field);font:inherit;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.input-wrap input::placeholder{color:#98a4b4}
.input-wrap input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px var(--focus)}
.input-wrap:focus-within svg{color:var(--brand)}
.field-divider{display:flex;align-items:center;gap:12px;color:#98a4b4;font-size:.75rem;font-weight:700;text-transform:uppercase}
.field-divider::before,.field-divider::after{content:"";height:1px;flex:1;background:#e5ebf2}
.submit-button{
  width:100%;min-height:52px;display:flex;justify-content:center;align-items:center;gap:10px;margin-top:3px;
  padding:12px 18px;border:0;border-radius:13px;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  box-shadow:0 10px 24px rgba(8,127,183,.24);font:inherit;font-weight:750;cursor:pointer;
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.submit-button svg{width:19px}.submit-button:hover{transform:translateY(-1px);box-shadow:0 13px 28px rgba(8,127,183,.3);filter:brightness(1.04)}
.submit-button:active{transform:translateY(0)}.submit-button:disabled{cursor:wait;opacity:.72;transform:none}
.back-link{width:fit-content;display:flex;align-items:center;gap:7px;margin:22px auto 0;color:#53657b;font-size:.88rem;font-weight:650;text-decoration:none}
.back-link svg{width:17px}.back-link:hover{color:var(--brand-dark)}
.recovery-footer{margin:0;color:rgba(221,234,247,.72);font-size:.78rem;text-align:center}
@media(max-width:560px){.recovery-page{place-content:start center;padding:18px 12px 24px}.recovery-card{padding:26px 22px 24px;border-radius:20px}.recovery-header{margin:23px 0 21px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}