:root { font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif; color: #243c32; background: #f3f6f4; color-scheme: light; }
* { box-sizing: border-box; }
body { min-height: 100dvh; margin: 0; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 410px); background: #fff; padding: 32px; border: 1px solid #dce6e0; border-radius: 16px; box-shadow: 0 12px 45px #294d3610; }
h1 { margin: 18px 0 8px; font-size: 25px; }
.intro, .footer { color: #75847c; font-size: 13px; line-height: 1.6; }
form { margin-top: 24px; display: grid; gap: 16px; }
label { display: grid; gap: 8px; font-size: 13px; }
input { width: 100%; border: 1px solid #cedbd3; border-radius: 7px; padding: 12px; font: inherit; outline: none; }
input:focus { border-color: #287153; box-shadow: 0 0 0 3px #28715316; }
button { background: #286b50; color: #fff; border: 0; border-radius: 7px; padding: 12px; font: inherit; font-weight: 600; cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
#login-status { margin: 0; color: #697e71; font-size: 12px; line-height: 1.6; min-height: 19px; }
#login-status.error { color: #a43c30; }
.footer { margin: 24px 0 0; text-align: center; font-size: 11px; }
@media (max-width: 420px) { body { padding: 16px; } .login-card { padding: 24px 16px; } }