.login-screen {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 24px 24px;
}
.login-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 1040px;
  min-height: 610px;
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 60px -28px rgba(29, 41, 57, .18);
}
.login-brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 46px;
  border-right: 1px solid #e4e8fa;
  background: #f0f3ff;
}
.login-brand .brand { font-size: 42px; letter-spacing: -2px; }
.login-brand .brand span { margin-top: 0; letter-spacing: 2.1px; }
.login-intro { margin: auto 0; padding: 60px 0; }
.login-intro .eyebrow { font-size: 10px; letter-spacing: 1.4px; }
.login-intro h2 { margin: 20px 0; font-size: 42px; line-height: 1.14; letter-spacing: -1.7px; font-weight: 650; }
.login-intro p { max-width: 270px; margin: 0; font-size: 15px; line-height: 1.75; }
.login-brand-footer { display: flex; align-items: center; gap: 9px; color: #596580; font-size: 12px; }
.login-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.login-shape { position: absolute; z-index: -1; width: 330px; height: 330px; border: 1px solid #dce2ff; border-radius: 70px; transform: rotate(-28deg); right: -170px; bottom: -130px; box-shadow: 0 0 0 30px #e9edff, 0 0 0 31px #dce2ff; }
.login-form-panel { display: flex; align-items: center; justify-content: center; padding: 48px; }
.login-form-wrap { width: 100%; max-width: 350px; }
.login-lock { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid #e3e8ff; border-radius: 13px; background: #f5f7ff; color: var(--blue); margin-bottom: 25px; }
.login-form-wrap h1 { margin: 0 0 10px; font-size: 29px; letter-spacing: -.8px; }
.login-description { margin: 0 0 30px; font-size: 14px; line-height: 1.6; }
.login-form { display: grid; gap: 21px; }
.login-field label { margin-bottom: 8px; font-size: 13px; color: #344054; }
.login-field input { min-height: 48px; padding: 12px 14px; border-radius: 9px; font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.login-field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px #465fff14; }
.login-field input[aria-invalid="true"] { border-color: #d92d20; }
.login-submit { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; min-height: 49px; margin-top: 5px; font-weight: 600; font-size: 14px; }
.login-submit span { font-size: 20px; font-weight: 400; line-height: 1; }
.login-access { margin: 24px 0 0; font-size: 12px; text-align: center; color: #667085; }
.login-error { margin-bottom: 24px; padding: 12px 14px; border: 1px solid #fecdca; background: #fffbfa; border-radius: 9px; color: #b42318; }
.login-error .errorlist, .login-field-error .errorlist { padding: 0; margin: 0; list-style: none; }
.login-field-error { margin-top: 8px; }
.login-footer { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; color: #667085; font-size: 11px; letter-spacing: 1px; }
.login-footer span { color: #98a2b3; }
@media (max-width: 820px) {
  .login-shell { grid-template-columns: .85fr 1fr; min-height: 560px; }
  .login-brand { padding: 32px; }
  .login-intro h2 { font-size: 34px; }
  .login-form-panel { padding: 32px; }
}
@media (max-width: 620px) {
  .login-screen { padding: 24px 16px; }
  .login-shell { grid-template-columns: 1fr; min-height: auto; max-width: 430px; border-radius: 18px; }
  .login-brand { padding: 24px 28px; border-right: 0; border-bottom: 1px solid #e4e8fa; }
  .login-brand .brand { font-size: 30px; }
  .login-brand .brand span { display: block; font-size: 9px; letter-spacing: 1.6px; }
  .login-intro, .login-brand-footer, .login-shape { display: none; }
  .login-form-panel { padding: 30px 28px; }
  .login-lock { display: none; }
  .login-form-wrap h1 { font-size: 25px; }
  .login-description { font-size: 13px; margin-bottom: 26px; }
  .login-footer { margin-top: 20px; }
}