:root { color-scheme: dark; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; color: #eef1ed; background: #111414; }
* { box-sizing: border-box; }
body { margin: 0; letter-spacing: 0; }
button, input { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.auth-page { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.auth-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 36px; }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #eef1ed; flex: none; }
.auth-mark { display: grid; place-items: center; width: 31px; height: 35px; border-radius: 5px; background: #ceef81; color: #1b250f; font-size: 23px; font-weight: 800; }
.auth-brand strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; }
.auth-brand small { display: block; margin-top: 3px; color: #9ba69f; font-size: 10px; }
.auth-area { color: #89978e; font-size: 11px; padding-left: 13px; border-left: 1px solid #39413b; }
.auth-stage { display: grid; place-items: center; padding: 24px 24px 64px; }
.auth-shell { width: min(360px,100%); }
.auth-heading { margin-bottom: 32px; }
.auth-lock { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #3e4837; border-radius: 8px; color: #ceef81; background: #1c241a; margin-bottom: 20px; }
.auth-lock .icon { width: 20px; height: 20px; }
.auth-heading h1 { margin: 0; font-size: 28px; line-height: 1.4; font-weight: 550; }
.auth-field + .auth-field { margin-top: 22px; }
.auth-field label { display: block; font-size: 13px; font-weight: 500; color: #c7d0c8; margin-bottom: 10px; }
.auth-input { display: flex; align-items: center; gap: 10px; min-width: 0; height: 48px; padding: 0 13px; border: 1px solid #414a43; border-radius: 6px; background: #1b201d; color: #8c9b8c; transition: border-color .16s, background .16s; }
.auth-input:focus-within { border-color: #b7d777; background: #20271e; box-shadow: 0 0 0 3px #b7d7770a; color: #c4dfa0; }
.auth-input input { min-width: 0; flex: 1; width: 100%; height: 100%; border: 0; outline: 0; color: #f0f3ed; background: transparent; font-size: 14px; padding: 0; }
.auth-input input::placeholder { color: #778579; opacity: 1; }
.auth-input input::-ms-reveal { display: none; }
.auth-input input:autofill { box-shadow: 0 0 0 100px #1b201d inset; -webkit-text-fill-color: #f0f3ed; caret-color: #f0f3ed; }
.password-toggle { flex: none; display: grid; place-items: center; width: 32px; height: 36px; margin-right: -6px; padding: 0; border: 0; border-radius: 4px; color: #9dab9b; background: transparent; }
.password-toggle:hover { background: #303b2c; color: #d9eabf; }
.field-note { min-height: 29px; padding: 7px 0 5px; font-size: 11px; line-height: 17px; color: #e2bb78; }
.auth-error { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; margin: 0 0 15px; border-left: 2px solid #e39b9d; background: #2b2222; color: #efb6b5; font-size: 12px; line-height: 1.6; }
.auth-error .icon { width: 16px; height: 16px; margin-top: 2px; }
.auth-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 17px; border: 1px solid #ceef81; border-radius: 6px; background: #ceef81; color: #1d290d; font-size: 14px; font-weight: 650; transition: background .15s, border-color .15s; }
.auth-submit:hover { background: #ddf5a5; border-color: #ddf5a5; }
.auth-submit:disabled { cursor: wait; background: #aac76b; border-color: #aac76b; }
.auth-spinner { width: 17px; height: 17px; border: 2px solid #516b30; border-right-color: transparent; border-radius: 50%; animation: auth-spin .7s linear infinite; }
.auth-footer { display: flex; justify-content: space-between; gap: 16px; padding: 20px 36px 26px; color: #78847b; font-size: 11px; overflow-wrap: anywhere; }
button:focus-visible, a:focus-visible { outline: 2px solid #ceef81; outline-offset: 4px; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media(max-width:480px) { .auth-topbar { padding: 24px; } .auth-stage { padding: 24px 28px 44px; } .auth-heading h1 { font-size: 26px; } .auth-footer { padding: 18px 24px 22px; } }
@media(max-height:560px) { .auth-stage { padding-block: 20px 32px; } .auth-heading { margin-bottom: 24px; } .auth-lock { display: none; } }
@media(prefers-reduced-motion:reduce) { * { transition: none !important; } .auth-spinner { animation: none; } }