.login-page { min-height: 100vh; margin: 0; background: #edf4f5; color: #172b3c; font-family: Arial, "Microsoft YaHei", sans-serif; }
.login-layout { width: min(100% - 36px, 430px); margin: 0 auto; padding: max(9vh, 48px) 0 48px; }
.login-brand { margin-bottom: 28px; }
.login-brand__mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 5px; color: #fff; background: #087c78; font-size: 22px; font-weight: 800; }
.login-brand h1 { margin: 17px 0 3px; font-size: 27px; letter-spacing: 0; }
.login-brand p { margin: 0; color: #556a78; font-size: 13px; }
.login-form { display: grid; gap: 18px; border: 1px solid #cbdbdf; border-radius: 7px; padding: 28px; background: #fff; }
.login-form label { display: grid; gap: 7px; font-size: 13px; font-weight: 650; }
.login-form input { width: 100%; min-height: 42px; box-sizing: border-box; border: 1px solid #a8bac5; border-radius: 5px; padding: 9px 11px; color: #172b3c; background: #fff; font: inherit; }
.login-form input:focus { outline: 2px solid #087c78; outline-offset: 1px; }
.login-form h2 { margin: 0 0 4px; font-size: 19px; }
.login-form__error { min-height: 1.3em; margin: 0; color: #b12b2b; font-size: 13px; }
.login-form button { min-height: 43px; border: 0; border-radius: 5px; color: white; background: #087c78; cursor: pointer; font: inherit; font-weight: 700; }
.login-form button:hover { background: #056862; }
.login-form button:disabled { opacity: 0.6; cursor: wait; }
@media (max-width: 560px) { .login-form { padding: 22px; } }