:root {
  color-scheme: light;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  color: #17303b;
  background: #eef4f5;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #eef4f5; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-panel { width: min(100%, 470px); background: #fff; border: 1px solid #d8e3e5; box-shadow: 0 20px 50px rgba(16, 45, 55, .12); padding: 38px 42px 32px; }
.login-brand { display: flex; align-items: center; gap: 14px; padding-bottom: 28px; border-bottom: 1px solid #e2eaeb; }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #8ca9af; background: #123743; color: #effbfc; font-size: 20px; }
.login-brand p, .login-heading span { margin: 0 0 5px; color: #168a86; font-size: 10px; font-weight: 800; letter-spacing: 1.6px; }
.login-brand strong { font-size: 17px; }
.login-heading { padding: 32px 0 22px; }
.login-heading h1 { margin: 0 0 10px; font-size: 28px; letter-spacing: 0; }
.login-heading p { margin: 0; color: #60767b; font-size: 14px; }
form { display: grid; gap: 16px; }
label { display: grid; gap: 8px; color: #405b62; font-size: 13px; font-weight: 700; }
input { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid #c8d7da; background: #fbfdfd; color: #17303b; font: inherit; font-size: 16px; outline: none; }
input:focus { border-color: #168a86; box-shadow: 0 0 0 3px rgba(22, 138, 134, .13); }
button { min-height: 46px; border: 0; background: #087d78; color: white; font: inherit; font-weight: 800; cursor: pointer; }
button:hover { background: #066965; }
button:disabled { cursor: wait; opacity: .65; }
.login-message { min-height: 20px; margin: 0; color: #bd4338; font-size: 13px; }
.login-foot { margin: 24px 0 0; color: #789096; font-size: 12px; line-height: 1.7; }
@media (max-width: 520px) { .login-panel { padding: 28px 24px 24px; } .login-heading h1 { font-size: 25px; } }