:root { color-scheme: light; font-family: "Segoe UI", "Microsoft YaHei UI", "PingFang SC", sans-serif; --text-caption: 12px; --text-ui: 14px; --text-page: 24px; --weight-regular: 400; --weight-emphasis: 600; --leading-control: 22px; font-size: var(--text-ui); line-height: 1.5; --ink: #303631; --muted: #667069; --paper: #fff; --bg: #f5f6f5; --line: #dce1dc; --field-border: #c7cec8; --accent: #315748; --red: #a64237; color: var(--ink); background: var(--bg); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 400px; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.eyebrow { color: var(--muted); letter-spacing: .16em; font-size: var(--text-caption); font-weight: var(--weight-regular); }
h1 { margin: 12px 0; font-size: var(--text-page); font-weight: var(--weight-emphasis); line-height: 1.4; }
#description { color: var(--muted); line-height: 1.7; margin-bottom: 24px; }
label { display: block; font-size: var(--text-ui); font-weight: var(--weight-regular); line-height: var(--leading-control); color: var(--muted); margin: 16px 0 6px; }
input:not([type="checkbox"]) { width: 100%; min-height: 36px; border: 1px solid var(--field-border); border-radius: 8px; padding: 6px 10px; font-family: inherit; font-size: var(--text-ui); font-weight: var(--weight-regular); line-height: var(--leading-control); color: var(--ink); background: var(--paper); }
.remember { display: flex; align-items: center; gap: 8px; }
.remember input { width: 16px; height: 16px; accent-color: var(--accent); }
button { width: 100%; min-height: 36px; padding: 6px 12px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: white; font-family: inherit; font-size: var(--text-ui); font-weight: var(--weight-emphasis); line-height: var(--leading-control); cursor: pointer; }
button:disabled { opacity: .65; cursor: wait; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#message { min-height: 1.5em; font-size: var(--text-ui); line-height: 1.7; color: var(--red); overflow-wrap: anywhere; }
.home-link { display: block; text-align: center; margin-top: 24px; color: var(--muted); font-size: var(--text-caption); line-height: 1.5; text-underline-offset: 3px; }
[hidden] { display: none !important; }
@media (max-width: 820px) { button { min-height: 40px; } }
@media (max-width: 420px) { body { padding: 16px; } .login-card { padding: 24px; } }