.web-login { --login-ink: #19372b; --login-muted: #566b5e; min-height: 100dvh; display: grid; place-items: center; padding: 40px 24px; color: var(--login-ink); background: #f4f7f5; }
.web-login .login-wrap { width: min(880px, 100%); }
.web-login .login-card { display: grid; grid-template-columns: minmax(280px, .88fr) minmax(360px, 1fr); overflow: hidden; background: #fff; border: 1px solid #d7e3da; border-radius: 10px; box-shadow: 0 8px 28px -18px rgba(25,55,43,.18); }
.web-login .login-brand { display: flex; flex-direction: column; align-items: flex-start; padding: 44px 40px 30px; color: var(--login-ink); background: #eaf2ed; border-right: 1px solid #d7e3da; }
.web-login .login-logo { display: block; width: 178px; height: auto; margin: 0; }
.web-login .login-intro { margin: 58px 0 54px; }
.web-login .login-intro h1 { margin: 0 0 20px; font-size: 34px; line-height: 1.28; font-weight: 750; letter-spacing: -.04em; color: var(--login-ink); }
.web-login .login-intro p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--login-muted); }
.web-login .login-brand .login-department { display: block; margin: auto 0 0; font-size: 11px; color: var(--login-muted); }
.web-login .login-form-panel { padding: 44px 42px 32px; }
.web-login .login-form-heading { margin-bottom: 30px; }
.web-login .login-form-heading h2 { margin: 0 0 8px; font-size: 23px; font-weight: 700; color: var(--login-ink); letter-spacing: -.02em; }
.web-login .login-form-heading p { margin: 0; font-size: 13px; color: var(--login-muted); line-height: 1.7; }
.web-login .login-field + .login-field { margin-top: 22px; }
.web-login .login-field label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--login-ink); }
.web-login .login-field input { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid #82978a; border-radius: 8px; color: var(--login-ink); background: #fff; font-size: 15px; }
.web-login .login-field input:focus-visible { outline: 2px solid #00593d; outline-offset: 2px; }
.web-login #login-submit { min-height: 46px; width: 100%; padding: 10px 18px; margin-top: 28px; border: 1px solid #00593d; border-radius: 8px; background: #00593d; color: #fff; font-size: 14px; font-weight: 650; white-space: nowrap; }
.web-login #login-submit:hover { background: #004b33; border-color: #004b33; }
.web-login #login-submit:disabled { opacity: .6; }
.web-login #login-error { margin: 18px 0 -8px; padding: 12px; border-radius: 8px; font-size: 13px; line-height: 1.7; }
.web-login .login-lock-note { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid #e5ece7; font-size: 12px; color: var(--login-muted); line-height: 1.8; }
.web-login .login-help { margin: 20px 0 0; text-align: center; font-size: 12px; line-height: 1.8; color: var(--login-muted); }
@media (max-width: 760px) {
  .web-login { padding: 28px 20px; }
  .web-login .login-wrap { max-width: 450px; }
  .web-login .login-card { grid-template-columns: minmax(0, 1fr); }
  .web-login .login-brand { padding: 28px; border-right: 0; border-bottom: 1px solid #d7e3da; }
  .web-login .login-logo { width: 150px; }
  .web-login .login-intro { margin: 24px 0 0; }
  .web-login .login-intro h1 { margin-bottom: 0; font-size: 26px; }
  .web-login .login-intro h1 br { display: none; }
  .web-login .login-intro p, .web-login .login-brand .login-department { display: none; }
  .web-login .login-form-panel { padding: 28px; }
  .web-login .login-form-heading { margin-bottom: 26px; }
}