*,*::before,*::after{box-sizing:border-box}
:root{
  --recovery-bg:#eef3f8;
  --recovery-surface:#ffffff;
  --recovery-ink:#0b1f36;
  --recovery-muted:#65788d;
  --recovery-line:#d9e3ec;
  --recovery-line-strong:#cbd8e4;
  --recovery-primary:#0d3b66;
  --recovery-primary-hover:#0a3158;
  --recovery-accent:#1677ff;
  --recovery-success:#17664e;
  --recovery-success-bg:#effaf6;
  --recovery-success-line:#bfe3d7;
  --recovery-error:#9b3030;
  --recovery-error-bg:#fff5f5;
  --recovery-error-line:#efc8c8;
  --recovery-focus:rgba(22,119,255,.13);
}
html,body{margin:0;min-height:100%}
body.recovery-body{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  color:var(--recovery-ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 10% 10%,rgba(22,119,255,.07),transparent 26%),
    radial-gradient(circle at 90% 90%,rgba(12,168,154,.055),transparent 27%),
    linear-gradient(180deg,#f7f9fc 0%,var(--recovery-bg) 100%);
}
.recovery-page{
  flex:1;
  display:grid;
  place-items:center;
  width:100%;
  padding:40px 24px 28px;
}
.recovery-card{
  position:relative;
  width:min(472px,100%);
  padding:34px 36px 30px;
  overflow:hidden;
  border:1px solid rgba(203,216,228,.9);
  border-radius:20px;
  background:rgba(255,255,255,.96);
  box-shadow:0 22px 56px rgba(20,47,76,.10),0 2px 8px rgba(20,47,76,.035);
}
.recovery-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,#0d3b66 0%,#1677ff 56%,#12a594 100%);
}
.recovery-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.recovery-brand-mark{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(145deg,#0d3b66,#176fbf);
  box-shadow:0 8px 18px rgba(13,59,102,.17);
}
.recovery-brand-mark svg{width:21px;height:21px}
.recovery-brand-copy{display:grid;gap:2px;min-width:0}
.recovery-brand-copy strong{
  overflow:hidden;
  color:#102841;
  font-size:13px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.01em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.recovery-brand-copy small{
  overflow:hidden;
  color:#8091a3;
  font-size:.75rem;
  line-height:1.25;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.recovery-divider{
  height:1px;
  margin:24px 0 26px;
  background:var(--recovery-line);
}
.recovery-heading{margin-bottom:24px}
.recovery-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:10px;
  color:#52708d;
  font-size:.75rem;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.recovery-eyebrow svg{width:15px;height:15px;flex:0 0 15px}
.recovery-heading h1{
  margin:0;
  color:var(--recovery-ink);
  font-size:30px;
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.035em;
}
.recovery-heading p{
  margin:11px 0 0;
  color:var(--recovery-muted);
  font-size:13px;
  line-height:1.55;
  font-weight:500;
}
.recovery-message{
  margin:0 0 18px;
  padding:11px 13px;
  border:1px solid;
  border-radius:11px;
  font-size:12px;
  line-height:1.45;
  font-weight:650;
}
.recovery-message-success{color:var(--recovery-success);background:var(--recovery-success-bg);border-color:var(--recovery-success-line)}
.recovery-message-error{color:var(--recovery-error);background:var(--recovery-error-bg);border-color:var(--recovery-error-line)}
.recovery-form{display:grid;gap:16px}
.recovery-field{display:grid;gap:7px}
.recovery-field label{
  color:#405a72;
  font-size:.75rem;
  line-height:1.2;
  font-weight:800;
}
.recovery-input-wrap{position:relative}
.recovery-input-icon{
  position:absolute;
  left:14px;
  top:50%;
  z-index:2;
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  color:#8298ad;
  pointer-events:none;
}
.recovery-input-icon svg{width:18px;height:18px}
.recovery-input-wrap input{
  display:block;
  width:100%;
  height:48px;
  margin:0;
  border:1px solid var(--recovery-line-strong);
  border-radius:11px;
  padding:0 14px 0 43px;
  outline:none;
  background:#fff;
  color:var(--recovery-ink);
  font:inherit;
  font-size:13px;
  font-weight:600;
  appearance:none;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.recovery-input-wrap input::placeholder{color:#9aaabc;font-weight:500}
.recovery-input-wrap input:hover{border-color:#b8c8d7}
.recovery-input-wrap input:focus{border-color:rgba(22,119,255,.68);box-shadow:0 0 0 4px var(--recovery-focus)}
.recovery-input-wrap.is-readonly input,.recovery-input-wrap input:disabled{background:#f5f7fa;color:#708296;cursor:not-allowed}
.recovery-primary{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  height:48px;
  margin-top:2px;
  border:0;
  border-radius:11px;
  background:var(--recovery-primary);
  color:#fff;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(13,59,102,.16);
  transition:background .16s ease,box-shadow .16s ease,transform .16s ease;
}
.recovery-primary svg{width:17px;height:17px;transition:transform .16s ease}
.recovery-primary:hover{background:var(--recovery-primary-hover);box-shadow:0 12px 26px rgba(13,59,102,.20)}
.recovery-primary:hover svg{transform:translateX(2px)}
.recovery-primary:active{transform:translateY(1px)}
.recovery-primary:focus-visible{outline:none;box-shadow:0 0 0 4px var(--recovery-focus),0 10px 22px rgba(13,59,102,.16)}
.recovery-security-note{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:19px;
  padding:11px 12px;
  border:1px solid #e1e8ef;
  border-radius:10px;
  background:#f8fafc;
  color:#52677a;
  font-size:.75rem;
  line-height:1.45;
  font-weight:600;
}
.recovery-security-note svg{width:16px;height:16px;flex:0 0 16px;margin-top:1px;color:#4e789d}
.recovery-back{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:20px;
  color:#4b6781;
  font-size:.75rem;
  font-weight:800;
  text-decoration:none;
}
.recovery-back svg{width:15px;height:15px;flex:0 0 15px;transition:transform .16s ease}
.recovery-back:hover{color:var(--recovery-accent)}
.recovery-back:hover svg{transform:translateX(-2px)}
.recovery-back:focus-visible{outline:3px solid var(--recovery-focus);outline-offset:4px;border-radius:5px}
.recovery-footer{
  width:100%;
  padding:0 20px 16px;
  color:#8090a0;
  text-align:center;
  font-size:.75rem;
  line-height:1.45;
  font-weight:600;
}
.recovery-footer strong{color:#526a82;font-weight:800}
@media(max-width:560px){
  .recovery-page{padding:22px 14px 18px;place-items:center}
  .recovery-card{padding:28px 22px 25px;border-radius:17px}
  .recovery-divider{margin:20px 0 22px}
  .recovery-heading h1{font-size:26px}
  .recovery-heading p{font-size:12.5px}
  .recovery-footer{padding-bottom:12px;font-size:.75rem}
}
@media(max-height:700px) and (min-width:561px){
  .recovery-page{padding:20px 24px 14px}
  .recovery-card{padding:27px 32px 24px}
  .recovery-divider{margin:18px 0 20px}
  .recovery-heading{margin-bottom:18px}
  .recovery-heading h1{font-size:27px}
  .recovery-form{gap:13px}
  .recovery-security-note{margin-top:14px}
  .recovery-back{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}