/* Calm, spacious account entry for sign in and sign up. */
html body .auth-card,
html body .auth-card.signup-mode {
  grid-template-columns: minmax(300px, 0.88fr) minmax(400px, 1.12fr) !important;
  width: min(960px, 100%) !important;
  column-gap: 64px !important;
  row-gap: 12px !important;
  padding: clamp(38px, 4.5vw, 58px) !important;
}

html body .auth-card::before {
  inset: 0 55.5% 0 0 !important;
  border-right: 1px solid rgba(218, 255, 245, 0.2) !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(64, 213, 169, 0.13), transparent 38%),
    linear-gradient(148deg, #073d49 0%, #075b58 54%, #0c7a78 100%) !important;
}

html body .auth-mappi,
html body .auth-card.signup-mode .auth-mappi {
  width: clamp(164px, 18vw, 198px) !important;
  height: clamp(164px, 18vw, 198px) !important;
  margin-bottom: 14px !important;
}

html body .auth-gate-form {
  box-sizing: border-box !important;
  max-width: 420px !important;
  padding: 0 2px 0 28px !important;
  gap: 16px !important;
}

html body .auth-form-heading {
  position: relative;
  gap: 6px !important;
  margin-bottom: 8px !important;
  padding-top: 15px;
}

html body .auth-form-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1cb88f, #37bdda);
  box-shadow: 0 4px 12px rgba(21, 155, 137, 0.15);
}

html body .auth-form-heading strong {
  font-size: clamp(1.72rem, 3vw, 2.12rem) !important;
  letter-spacing: 0 !important;
}

html body .auth-form-heading span {
  max-width: 34ch;
  color: rgba(8, 47, 57, 0.56) !important;
  font-size: 0.88rem !important;
}

html body .auth-gate-form label {
  gap: 8px !important;
  letter-spacing: 0 !important;
}

html body .auth-gate-form input {
  min-height: 54px !important;
  padding: 0 17px !important;
  border-color: rgba(8, 98, 99, 0.12) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow:
    0 8px 22px rgba(7, 73, 78, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

html body .auth-gate-form input::placeholder {
  color: rgba(8, 47, 57, 0.34) !important;
}

html body #authForgotPasswordButton {
  justify-self: center !important;
  margin-right: auto !important;
  margin-left: auto !important;
  margin-top: -10px !important;
  padding-right: 0 !important;
  text-align: center !important;
}

html body .auth-gate-form .account-auth-actions {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-top: 3px !important;
}

html body .auth-gate .account-auth-button {
  min-height: 52px !important;
  border-radius: 15px !important;
}

html body .auth-gate .account-auth-button.primary {
  box-shadow:
    0 15px 30px rgba(11, 126, 117, 0.19),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

html body .auth-local-divider {
  margin: 3px 0 0;
}

html body .auth-local-option {
  gap: 5px !important;
  padding-top: 1px;
}

html body .auth-card.signup-mode {
  min-height: 0 !important;
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

html body .auth-card.signup-mode .auth-gate-form {
  gap: 11px !important;
}

html body .auth-card.signup-mode .auth-gate-form input {
  min-height: 47px !important;
}

html body .auth-card.signup-mode .auth-form-heading {
  margin-bottom: 2px !important;
}

html body .auth-card.signup-mode .account-auth-actions {
  grid-template-columns: minmax(0, 1fr) 108px !important;
  align-items: stretch !important;
}

html body .auth-card.signup-mode #authBackToLoginButton {
  min-width: 108px;
}

html body .auth-card > .account-auth-message,
html body .auth-card > .auth-legal-links {
  box-sizing: border-box;
  width: 100%;
  max-width: 390px;
  justify-self: end !important;
}

@media (max-width: 760px) {
  html body .auth-card,
  html body .auth-card.signup-mode,
  html body .auth-card.verify-mode {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    width: min(100%, 430px) !important;
    column-gap: 20px !important;
    row-gap: 20px !important;
    padding: 18px 18px 20px !important;
  }

  html body .auth-card::before {
    inset: 0 0 auto 0 !important;
    height: 108px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(218, 255, 245, 0.16) !important;
  }

  html body .auth-card .auth-mappi,
  html body .auth-card.signup-mode .auth-mappi {
    width: 70px !important;
    height: 70px !important;
    margin: 0 !important;
  }

  html body .auth-gate-form,
  html body .auth-verification-panel {
    max-width: none !important;
    padding-right: 4px !important;
    padding-left: 4px !important;
  }

  html body .auth-gate-form {
    gap: 13px !important;
  }

  html body .auth-form-heading {
    margin-bottom: 5px !important;
    padding-top: 13px;
  }

  html body .auth-form-heading strong {
    font-size: 1.55rem !important;
  }

  html body .auth-gate-form input {
    min-height: 50px !important;
  }

  html body .auth-card.signup-mode .auth-gate-form {
    gap: 11px !important;
  }

  html body .auth-card.signup-mode .account-auth-actions {
    grid-template-columns: 1fr !important;
  }

  html body .auth-card.signup-mode #authBackToLoginButton {
    min-width: 0;
  }

  html body .auth-card > .account-auth-message,
  html body .auth-card > .auth-legal-links {
    max-width: none;
    justify-self: stretch !important;
  }
}

@media (max-width: 350px) {
  html body .auth-card,
  html body .auth-card.signup-mode,
  html body .auth-card.verify-mode {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }
}