.login{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login-art{position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:56px;background:#00363C;color:#fff;min-height:100vh}
.login-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.login-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,54,60,.05) 0%,rgba(0,54,60,.15) 40%,rgba(0,40,45,.88) 100%)}
.login-art-copy{position:relative;z-index:1;max-width:440px}
.login-art-logo{height:34px;width:auto;margin-bottom:26px;display:block}
.login-art-copy h2{font-size:clamp(28px,3vw,40px);font-weight:800;line-height:1.05;color:#fff}
.login-art-copy p{color:rgba(255,255,255,.82);font-size:16px;margin:14px 0 0;max-width:38ch}
.login-credit{position:absolute;z-index:1;right:16px;bottom:12px;font-size:11px;color:rgba(255,255,255,.6)}
.login-form{display:grid;place-items:center;padding:32px 16px}
.login-card{width:min(400px,100%);padding:32px 28px}
.login-card h1{font-size:30px;font-weight:800}
.login-card > p{margin:8px 0 22px}
.login-mark{display:none;margin-bottom:22px}
.login-mark .wm{height:30px}
.login-btn{width:100%;padding:12px;margin-top:6px}
.login-link{width:100%;margin-top:6px;color:var(--muted)}
.login-err{background:var(--danger-soft);color:var(--danger);font-size:13.5px;padding:10px 12px;border-radius:10px;margin-bottom:10px}
.login-ok{background:var(--ok-soft);color:var(--ok)}
@media (max-width:860px){
  .login{grid-template-columns:1fr}
  .login-art{min-height:220px;padding:22px 20px;align-items:flex-end}
  .login-art-copy h2,.login-art-copy p,.login-art-logo{display:none}
  .login-credit{bottom:8px;right:12px}
  .login-form{align-items:start;padding:0 16px 32px}
  .login-card{margin-top:-36px;position:relative;z-index:2}
  .login-mark{display:block}
}