.login-page {
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 12% 16%, rgba(21, 101, 192, .18), transparent 34%),
    radial-gradient(circle at 86% 82%, rgba(31, 157, 102, .12), transparent 30%),
    #eef3f8;
}
.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .75fr);
  width: min(980px, 100%);
  min-height: 560px;
  overflow: hidden;
  border: 1px solid #cbd9e8;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(24, 47, 74, .16);
}
.login-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px;
  color: #fff;
  background: linear-gradient(145deg, #113c66, #1769aa 62%, #228476);
}
.login-brand-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 34px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  font-weight: 900;
  letter-spacing: -.05em;
}
.login-brand h1 { max-width: 480px; margin: 4px 0 16px; font-size: clamp(31px, 4vw, 48px); line-height: 1.04; }
.login-brand p { max-width: 510px; margin: 0; color: rgba(255,255,255,.8); font-size: 16px; line-height: 1.55; }
.login-eyebrow { margin: 0 0 8px !important; color: #4f7495 !important; font-size: 11px !important; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.login-brand .login-eyebrow { color: rgba(255,255,255,.68) !important; }
.login-card { align-self: center; padding: 48px; }
.login-card h2 { margin: 0 0 8px; font-size: 27px; }
.login-submit { width: 100%; min-height: 46px; margin-top: 22px; border: 0; cursor: pointer; }
.login-submit:disabled { cursor: wait; opacity: .65; }
.login-status { min-height: 24px; margin-top: 16px; color: #52677a; font-size: 13px; line-height: 1.4; }
.login-status.is-error { color: #a62929; }
.login-status.is-success { color: #17663a; }
.login-bootstrap { margin-top: 14px; padding: 12px; border: 1px solid #e6c273; border-radius: 12px; background: #fff9e8; color: #765411; font-size: 12px; line-height: 1.45; }
.is-hidden { display: none !important; }
@media (max-width: 760px) {
  .login-page { padding: 14px; }
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { padding: 34px; }
  .login-brand h1 { font-size: 31px; }
  .login-brand-mark { margin-bottom: 20px; }
  .login-card { padding: 34px; }
}