.login-page-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 40px 20px;
  background: radial-gradient(ellipse at top, #eaf1ff 0, #f5f7fb 60%);
  color: #24324b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page.login-page-simple {
  width: 100%;
  max-width: 480px;
  min-height: 0;
  margin: 0;
  padding: 40px;
  border: 1px solid #e4eaf3;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 60px -20px rgb(30 58 100 / 20%);
}

.login-page-simple .page-title {
  min-height: 0;
  margin: 0 0 32px;
  padding: 0;
  border: 0;
  text-align: center;
}

.login-page-simple .page-title h1 {
  color: #172b4d;
  font-size: clamp(24px, 4vw, 30px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.6px;
  text-wrap: balance;
}

.login-page-simple .returning-wrapper {
  float: none;
  width: 100%;
  margin: 0;
}

.login-page-simple .returning-wrapper .form-fields {
  min-height: 0;
  overflow: visible;
  padding: 0;
  border: 0;
  background: none;
}

.login-page-simple .returning-wrapper .inputs {
  margin: 0 0 22px;
  white-space: normal;
}

.login-page-simple .returning-wrapper .inputs:not(.reversed) {
  text-align: start;
}

.login-page-simple .returning-wrapper .inputs:not(.reversed) label {
  display: block;
  width: auto;
  margin: 0 0 9px;
  color: #334155;
  font-size: 14px;
  font-weight: 600;
  text-align: start;
}

.login-page-simple .returning-wrapper .inputs input[type="text"],
.login-page-simple .returning-wrapper .inputs input[type="email"],
.login-page-simple .returning-wrapper .inputs input[type="password"] {
  width: 100%;
  height: 52px;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fbfcfe;
  color: #172b4d;
  font-family: inherit;
  font-size: 16px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.login-page-simple .returning-wrapper .inputs input:focus {
  border-color: #2563eb;
  outline: 2px solid transparent;
  background: #fff;
  box-shadow: 0 0 0 4px rgb(37 99 235 / 12%);
}

.login-page-simple .login-password {
  width: 100%;
}

.login-page-simple .returning-wrapper .inputs .login-password input {
  padding-inline-end: 48px;
}

.login-page-simple .password-eye {
  inset-inline-start: auto;
  inset-inline-end: 14px;
}

.login-page-simple .returning-wrapper .inputs.reversed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 24px;
  text-align: start;
}

.login-page-simple .returning-wrapper .inputs.reversed * {
  margin: 0;
  color: #475569;
  font-size: 13px;
}

.login-page-simple .returning-wrapper .inputs.reversed input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  accent-color: #2563eb;
  cursor: pointer;
}

.login-page-simple .returning-wrapper .inputs.reversed label {
  width: auto;
  cursor: pointer;
}

.login-page-simple .returning-wrapper .forgot-password {
  margin-inline-start: auto;
}

.login-page-simple .returning-wrapper .forgot-password a {
  color: #1d4ed8;
  font-weight: 600;
  line-height: 1.6;
}

.login-page-simple .returning-wrapper .forgot-password a:hover {
  color: #1e40af;
  text-decoration: underline;
}

.login-page-simple .returning-wrapper .buttons {
  padding: 0;
  background: none;
}

.login-page-simple .login-button {
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  cursor: pointer;
  box-shadow: 0 4px 10px rgb(37 99 235 / 15%);
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.login-page-simple .login-button:hover,
.login-page-simple .login-button:focus {
  background: #1d4ed8;
  box-shadow: 0 6px 16px rgb(37 99 235 / 22%);
}

.login-page-simple a:focus-visible,
.login-page-simple button:focus-visible,
.login-page-simple input[type="checkbox"]:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 4px;
}

.login-page-simple .message-error.validation-summary-errors {
  margin: 0 0 24px;
  padding: 12px 14px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fff5f5;
  color: #b91c1c;
  font-size: 14px;
  text-align: start;
}

.login-page-simple .field-validation-error {
  display: block;
  margin: 8px 0 0;
  color: #b91c1c;
  font-size: 13px;
  white-space: normal;
}

.login-page-simple .returning-wrapper .inputs input.input-validation-error {
  border-color: #dc2626;
}

.login-page-simple .captcha-box {
  margin: 0 0 24px;
}

.password-recovery-page.login-page-simple .fieldset {
  margin: 0;
}

.password-recovery-page.login-page-simple .recovery-description {
  margin: -8px 0 28px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

.password-recovery-page.login-page-simple .inputs .required {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  margin: 0;
  font-size: 16px;
}

.login-page-simple .recovery-login-link {
  margin-top: 24px;
  text-align: center;
}

.login-page-simple .recovery-login-link a {
  display: inline-block;
  padding: 4px 8px;
  color: #1d4ed8;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

.login-page-simple .recovery-login-link a:hover {
  color: #1e40af;
  text-decoration: underline;
}

@media (max-width: 480px) {
  .login-page-shell {
    padding: 24px 12px;
  }

  .page.login-page-simple {
    padding: 32px 24px;
    border-radius: 18px;
  }
}

@media (max-width: 360px) {
  .page.login-page-simple {
    padding: 28px 16px;
  }

  .login-page-simple .returning-wrapper .forgot-password {
    flex-basis: 100%;
    margin: 8px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-page-simple .returning-wrapper .inputs input,
  .login-page-simple .login-button {
    transition: none;
  }
}