.login-view {
  width: 100%;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #f9fafb;
  overflow: visible;
}
.login-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  padding: 40px 56px 28px;
  background: #fff;
}
.login-brand { display: block; width: 200px; max-width: 100%; flex: 0 0 auto; }
.login-brand img { display: block; width: 100%; height: auto; }
.login-card {
  display: block;
  width: min(100%, 430px);
  margin: auto 0;
  padding: 38px 0;
  border-radius: 0;
}
.login-card h1 { margin: 0 0 12px; font-size: 34px; line-height: 1.12; font-weight: 700; letter-spacing: 0; color: #242b2c; }
.login-intro { margin: 0 0 30px; color: #727c80; font-size: 14px; line-height: 1.5; text-align: left; }
.login-form { width: 100%; gap: 18px; }
.login-field label { display: block; margin: 0 0 8px; color: #424c50; font-size: 12px; font-weight: 700; }
.login-field input {
  display: block;
  width: 100%;
  height: 49px;
  min-height: 49px;
  border: 1px solid #dfe5e7;
  border-radius: 7px;
  padding: 0 13px;
  background: #fff;
  color: #242b2c;
  font-size: 14px;
  box-shadow: none;
  transition: border-color .2s, box-shadow .2s;
}
.login-field input::placeholder { color: #9aa2a7; }
.login-field input:focus { outline: 0; border-color: #126d68; box-shadow: 0 0 0 3px #126d6819; }
.login-options { margin: 0; font-size: 12px; color: #727c80; }
.login-form .primary {
  width: 100%;
  height: 49px;
  min-height: 49px;
  margin: 0;
  border: 0;
  border-radius: 7px;
  background: #126d68;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 22px #126d6822;
  cursor: pointer;
}
.login-form .primary:hover { background: #0b5753; }
.login-form .primary:disabled { opacity: .65; cursor: wait; }
.login-error { min-height: 0; margin: 0; padding: 11px 12px; border: 1px solid #efd3d3; border-radius: 7px; background: #fff3f3; color: #983737; font-size: 12px; text-align: left; line-height: 1.5; overflow-wrap: anywhere; }
.login-error:empty { display: none; }
.login-secure { margin: 18px 0 0; text-align: center; color: #8b959a; font-size: 12px; }
.login-footer { width: 100%; margin: 0; color: #8b959a; font-size: 12px; }
.login-side {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 18px;
  padding: 40px;
  border-radius: 8px;
  background: #183a37;
  isolation: isolate;
}
.login-image { position: absolute; inset: 0; z-index: -2; object-position: center 38%; }
.login-side::after { z-index: -1; background: linear-gradient(180deg, transparent 38%, rgba(13, 38, 35, .22) 60%, rgba(13, 38, 35, .9) 100%); }
.login-visual-foot { position: absolute; top: 32px; left: 40px; color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 8px #183a37; }
.login-visual-copy { max-width: 470px; }
.login-visual-copy strong { display: block; color: #fff; font-size: 48px; line-height: 1.08; font-weight: 700; letter-spacing: 0; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .login-panel { padding: 32px; }
  .login-side { padding: 28px; }
  .login-visual-foot { left: 28px; }
  .login-visual-copy strong { font-size: 38px; }
}
@media (max-width: 780px) {
  .login-view { display: block; }
  .login-panel { padding: 28px 24px; align-items: center; }
  .login-brand { width: 180px; align-self: flex-start; }
  .login-card { padding: 40px 0; }
  .login-card h1 { font-size: 30px; }
  .login-side { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .login-view button, .login-view input { transition: none; }
}