.auth-help-link {
  display: block;
  width: fit-content;
  margin: -2px auto 0;
  color: #1c72e8;
  font-size: 14px;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
}

.auth-help-link:hover { text-decoration: underline; }

.recovery-body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 16px;
  color: #14233b;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 10% 0%, rgba(44, 126, 255, .3), transparent 32rem),
    radial-gradient(circle at 95% 18%, rgba(39, 183, 120, .22), transparent 30rem),
    #061738;
}

.recovery-card {
  width: min(460px, 100%);
  padding: 34px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
}

.recovery-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  color: #061738;
  text-decoration: none;
}

.recovery-brand img { width: 48px; height: 48px; border-radius: 14px; }
.recovery-brand span { display: grid; line-height: 1.15; }
.recovery-brand small { margin-top: 4px; color: #68758a; }
.recovery-eyebrow { margin: 0 0 8px; color: #1c72e8; font-size: 12px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.recovery-card h1 { margin: 0 0 10px; color: #061738; font-size: clamp(30px, 8vw, 42px); line-height: 1.04; letter-spacing: -.04em; }
.recovery-copy { margin: 0; color: #68758a; line-height: 1.55; }
.recovery-form { display: grid; gap: 16px; margin-top: 26px; }
.recovery-form label { display: grid; gap: 7px; color: #3e4c62; font-size: 13px; font-weight: 750; }
.recovery-form input {
  width: 100%;
  min-height: 50px;
  box-sizing: border-box;
  padding: 0 14px;
  color: #14233b;
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 12px;
  outline: none;
  font: inherit;
}
.recovery-form input:focus { border-color: #1c72e8; box-shadow: 0 0 0 4px rgba(28, 114, 232, .1); }
.recovery-button {
  min-height: 50px;
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, #1c72e8, #2862d4);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(28, 114, 232, .22);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}
.recovery-button:disabled { cursor: wait; opacity: .58; }
.recovery-message { margin: 18px 0 0; padding: 12px 14px; border-radius: 11px; font-size: 13px; line-height: 1.5; }
.recovery-message.error { color: #a82435; background: #fff0f2; border: 1px solid #f4cbd1; }
.recovery-message.success { color: #147049; background: #ecfbf4; border: 1px solid #bfe9d6; }
.recovery-back { display: block; margin-top: 22px; color: #1c72e8; font-size: 14px; font-weight: 750; text-align: center; text-decoration: none; }
.recovery-back:hover { text-decoration: underline; }
.recovery-body .hidden { display: none !important; }

@media (max-width: 520px) {
  .recovery-card { padding: 28px 21px; border-radius: 21px; }
}