.login-page.login-page-branded {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 54px;
  padding: 76px 24px 52px;
  background: #eaf4fd;
  color: #334155;
}

.login-page-branded > * { position: relative; z-index: 2; }

.login-corner {
  position: absolute;
  z-index: 1;
  width: clamp(220px, 19vw, 360px);
  height: auto;
  pointer-events: none;
  user-select: none;
}

.login-corner-top { top: 0; right: 0; }
.login-corner-bottom { bottom: 0; left: 0; transform: rotate(180deg); }

.login-watermark {
  position: absolute;
  z-index: 0;
  width: min(47vw, 820px);
  right: -9vw;
  bottom: -20vw;
  opacity: .72;
  pointer-events: none;
}

.login-outline {
  position: absolute;
  z-index: 0;
  width: 140px;
  height: 140px;
  top: -92px;
  left: 70px;
  border: 3px solid #21b8ee;
  border-radius: 20px;
  transform: rotate(45deg);
}

.login-outline-two {
  left: 142px;
  top: -114px;
  border-color: #9fc71b;
}

.login-platform-title { text-align: center; }

.login-platform-title h1 {
  margin: 0;
  color: #1077bd;
  font-size: clamp(30px, 2.35vw, 46px);
  font-weight: 900;
  letter-spacing: .03em;
}

.login-platform-title p {
  margin: 8px 0 0;
  color: #188dce;
  font-size: clamp(12px, 1vw, 17px);
  font-weight: 800;
  letter-spacing: .045em;
}

.login-card.login-system-card {
  width: min(430px, calc(100vw - 36px));
  padding: 31px 38px 27px;
  border-radius: 6px;
  box-shadow: 0 16px 42px rgba(48, 91, 130, .16);
}

.login-card-heading { text-align: center; }
.login-card-heading h2 { margin: 0; color: #168acb; font-size: 25px; font-weight: 500; }
.login-card-heading i { display: block; width: 42px; height: 3px; margin: 10px auto 13px; border-radius: 99px; background: #7ac5ea; }
.login-card-heading p { margin: 0; color: #94a3b8; font-size: 12px; }

.branded-login-form { gap: 17px; margin-top: 23px; }
.branded-login-form label { color: #64748b; font-size: 12px; }
.branded-login-form label > span { display: block; margin-bottom: 6px; }
.branded-login-form input {
  margin: 0;
  padding: 12px 3px;
  border: 0;
  border-bottom: 1px solid #cad6e2;
  border-radius: 0;
  outline: 0;
  color: #334155;
}
.branded-login-form input:focus { border-color: #198dcd; box-shadow: 0 1px 0 #198dcd; }
.branded-login-form input::placeholder { color: #a4afbc; }
.branded-login-form .remember-login {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  color: #7c8b9d;
  cursor: pointer;
  user-select: none;
}
.branded-login-form .remember-login input {
  width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
  border: 1px solid #a8b9c9;
  accent-color: #1889c9;
  box-shadow: none;
}
.branded-login-form .remember-login span { display: inline; margin: 0; }
.branded-login-form button { margin-top: 5px; padding: 12px; border-radius: 4px; background: #1889c9; }
.branded-login-form button:hover { background: #0877b7; }

.login-system-card .security-note { margin: 20px 0 0; color: #9aa8b8; }

.login-company {
  margin-top: 4px;
  display: flex;
  justify-content: center;
}
.login-company img { width: min(270px, 62vw); height: auto; }

@media (max-height: 780px) {
  .login-page.login-page-branded { gap: 26px; padding-top: 44px; padding-bottom: 28px; }
  .login-card.login-system-card { padding-top: 24px; padding-bottom: 22px; }
  .login-company img { width: 220px; }
}

@media (max-width: 620px) {
  .login-page.login-page-branded { justify-content: flex-start; gap: 34px; padding-top: 100px; }
  .login-corner { width: 210px; }
  .login-outline { left: 18px; }
  .login-outline-two { left: 88px; }
  .login-watermark { width: 540px; right: -290px; bottom: -150px; }
  .login-card.login-system-card { padding: 28px 25px 24px; }
}