.mercurius-login { min-height: 100svh; display: flex; flex-direction: column; background: var(--mx-brand); color: #f4f7fa; font-family: var(--mx-font); font-size: 17px; line-height: 1.6; }
.mercurius-login *, .mercurius-login *::before, .mercurius-login *::after { box-sizing: border-box; }
.mercurius-login ::selection { background: #e2eff8; color: #072a5d; }
.mercurius-login .login-shell { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
body.mercurius-auth .mercurius-login a { color: inherit; text-decoration: none; }
body.mercurius-auth .mercurius-login :focus-visible { outline: 3px solid #e2eff8; outline-offset: 5px; }
.login-header nav { display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 24px; }
.login-header img { display: block; max-width: 100%; }
body.mercurius-auth .mercurius-login .login-contact { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 20px; background: #e2eff8; color: #174a75; border-radius: 14px; font-weight: 500; }
.login-main { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(48px, 7vw, 110px); padding-block: 64px 88px; }
body.mercurius-auth .mercurius-login h1 { margin: 0 0 24px; font: 500 clamp(36px, 4vw, 54px)/1.12 var(--mx-font); letter-spacing: -.035em; color: #f4f7fa; }
body.mercurius-auth .mercurius-login .login-intro p { color: #f4f7fa; max-width: 40ch; margin: 0 0 28px; font-size: 19px; }
.login-home { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; text-decoration: none; }
.login-home-label { text-decoration: underline; text-underline-offset: 5px; }
.login-card-wordmark { display: block; width: 240px; max-width: 100%; height: auto; margin-bottom: 32px; }
.login-panel { background: #f4f7fa; color: #174a75; padding: clamp(28px, 3.5vw, 48px); border-radius: 16px; }
body.mercurius-auth .mercurius-login h2 { margin: 0 0 32px; font: 500 clamp(28px, 3vw, 34px)/1.2 var(--mx-font); letter-spacing: -.03em; color: #174a75; }
.login-field { margin-bottom: 22px; }
body.mercurius-auth .mercurius-login label { color: #174a75; font-size: 16px; font-weight: 500; letter-spacing: 0; }
.login-field label { display: block; margin-bottom: 8px; }
.mercurius-login .login-field input { display: block; width: 100%; height: 52px; border: 1px solid #7295b4; border-radius: 8px; padding: 12px 14px; background: #fff; color: #174a75; font: inherit; caret-color: #174a75; }
body.mercurius-auth .login-panel :focus-visible { outline-color: #2a639d; outline-offset: 3px; }
.login-password { position: relative; }
.mercurius-login .login-password input { padding-right: 56px; }
.mercurius-login .password-toggle { position: absolute; inset: 4px 4px 4px auto; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #174a75; cursor: pointer; transform: none; }
.mercurius-login .password-toggle-hide { display: none; }
.mercurius-login .password-toggle[aria-pressed="true"] .password-toggle-show { display: none; }
.mercurius-login .password-toggle[aria-pressed="true"] .password-toggle-hide { display: block; }
.login-remember { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 22px; cursor: pointer; }
.login-remember input { width: 20px; height: 20px; accent-color: #2a639d; flex-shrink: 0; }
body.mercurius-auth .mercurius-login .login-submit { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; min-height: 52px; padding: 12px 24px; border: 0; border-radius: 12px; background: #2a639d; color: #f4f7fa; font: 600 17px/1.5 var(--mx-font); cursor: pointer; }
body.mercurius-auth .mercurius-login .login-submit:hover { background: #174a75; }
.login-forgot { display: block; width: fit-content; min-height: 44px; margin: 16px auto 0; padding-block: 10px; font-size: 15px; }
body.mercurius-auth .mercurius-login .login-forgot:hover { text-decoration: underline; text-underline-offset: 4px; }
.login-errors.validation-summary-valid { display: none; }
.login-errors { color: #a02525; margin-bottom: 24px; font-size: 16px; }
.login-errors ul { margin: 0; padding-left: 20px; }
.mercurius-login .login-field .input-validation-error { border-color: #a02525; }
.login-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 24px; font-size: 14px; }
.login-footer a { padding-block: 10px; }
.login-skip { position: absolute; left: 20px; top: -100px; padding: 12px; background: #174a75; z-index: 10; }
.login-skip:focus { top: 12px; }
@media (max-width: 760px) {
  .mercurius-login .login-shell { width: calc(100% - 40px); }
  .login-header nav { min-height: 80px; gap: 16px; }
  .login-header img { width: 160px; height: auto; }
  body.mercurius-auth .mercurius-login .login-contact { padding-inline: 12px; font-size: 15px; }
  .login-main { grid-template-columns: 1fr; gap: 32px; padding-block: 32px 48px; }
  .login-intro h1 { max-width: 16ch; }
  .login-intro p { font-size: 17px; margin-bottom: 12px; }
  .login-panel { padding: 28px 24px; }
  .login-footer { flex-wrap: wrap; gap: 0 20px; padding-block: 16px; }
}
/* Password recovery uses the same shell and controls as sign-in. */
body.mercurius-auth .login-recovery h2 { margin-bottom: 16px; }
body.mercurius-auth .mercurius-login .login-recovery-intro { color: #174a75; font-size: 16px; line-height: 1.6; margin: 0 0 28px; }
.login-recovery-label { display: block; margin: 0 0 8px; }
.login-recovery .login-field { margin-bottom: 8px; }
.login-field-error { display: block; color: #a02525; font-size: 14px; margin-bottom: 20px; }
body.mercurius-auth .mercurius-login a.login-submit { color: #f4f7fa; }
body.mercurius-auth .mercurius-login .login-recovery-help { color: #174a75; font-size: 15px; margin: 24px 0 0; }
body.mercurius-auth .mercurius-login .login-recovery-help a { text-decoration: underline; text-underline-offset: 4px; }