:root {
  font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  color: #18212b;
  background: #eef1f3;
  letter-spacing: 0;
}

* { box-sizing: border-box; letter-spacing: 0; }
body { min-height: 100vh; margin: 0; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-panel { width: min(420px, 100%); padding: 32px; border: 1px solid #dbe1e5; border-radius: 8px; background: #fff; box-shadow: 0 16px 40px rgba(24, 33, 43, .1); }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; background: #d94b55; color: #fff; font-size: 20px; font-weight: 800; }
.eyebrow { margin: 22px 0 0; color: #6c7782; font-size: 11px; font-weight: 800; }
h1 { margin: 5px 0 0; font-size: 28px; }
.subhead { margin: 9px 0 24px; color: #6c7782; font-size: 13px; }
form { display: grid; gap: 9px; }
label { color: #4d5964; font-size: 12px; font-weight: 800; }
input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #c8d0d7; border-radius: 5px; outline: 0; font: inherit; }
input:focus { border-color: #1769c2; box-shadow: 0 0 0 3px rgba(23, 105, 194, .12); }
button { min-height: 42px; margin-top: 8px; border: 1px solid #1769c2; border-radius: 5px; background: #1769c2; color: #fff; cursor: pointer; font: inherit; font-weight: 800; }
button:hover { background: #125aa7; }
#login-status { min-height: 18px; margin: 3px 0 0; color: #6c7782; font-size: 12px; }
#login-status.error { color: #b42318; }