:root { font-family: Inter, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif; color: #20211f; background: #f4f5f3; --surface:#fff; --line:#e2e5df; --muted:#747772; --dark:#1e1f1c; --orange:#f3a526; --red:#bd4d45; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body { background: #f4f5f3; }
button, input { font: inherit; letter-spacing: 0; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid #3974bd; outline-offset: 2px; }
.login-page { display: grid; min-height: 100vh; padding: 24px; place-items: center; }
.login-card { width: min(430px, 100%); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 20px 58px rgba(34,39,32,.12); }
.brand { display: flex; align-items: center; gap: 11px; padding: 21px 24px; border-bottom: 1px solid var(--line); }
.brand img { width: 39px; height: 39px; border-radius: 8px; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 14px; }
.brand span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.login-heading { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 15px; padding: 30px 24px 24px; }
.login-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 8px; background: var(--dark); color: #fff; }
.login-icon svg { width: 23px; }
.login-heading p { margin: 1px 0 5px; color: #996411; font-size: 9px; font-weight: 750; }
.login-heading h1 { margin: 0; font-size: 22px; }
.login-heading div > span { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }
.login-error { display: flex; align-items: center; gap: 8px; margin: 0 24px 17px; padding: 10px 11px; border: 1px solid #eccbc7; border-radius: 6px; background: #fff1ef; color: var(--red); font-size: 10px; }
.login-error svg { width: 15px; }
form { display: grid; gap: 16px; padding: 0 24px 27px; }
label { display: grid; gap: 7px; color: #4b4e49; font-size: 10px; }
.input-shell { display: grid; grid-template-columns: 18px minmax(0,1fr) 34px; align-items: center; min-height: 43px; padding-left: 12px; border: 1px solid var(--line); border-radius: 6px; }
.input-shell:focus-within { border-color: #9ca69a; box-shadow: 0 0 0 3px rgba(57,116,189,.08); }
.input-shell > svg { width: 16px; color: var(--muted); }
.input-shell input { min-width: 0; height: 41px; padding: 0 9px; border: 0; outline: 0; background: transparent; }
.input-shell button { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.input-shell button svg { width: 16px; }
.login-button { display: grid; grid-template-columns: 1fr 18px; align-items: center; min-height: 44px; margin-top: 2px; padding: 0 14px; border: 1px solid var(--dark); border-radius: 6px; background: var(--dark); color: #fff; cursor: pointer; }
.login-button span { justify-self: center; padding-left: 18px; font-size: 12px; font-weight: 700; }
.login-button svg { width: 16px; }
.login-button:hover { background: #343531; }
.login-card > footer { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 47px; border-top: 1px solid var(--line); background: #f8f9f7; color: var(--muted); font-size: 10px; }
.login-card > footer svg { width: 14px; color: #21835a; }
@media (max-width: 480px) { .login-page { align-items: start; padding: 16px 12px; } .login-heading, .brand { padding-inline: 18px; } form { padding-inline: 18px; } .login-error { margin-inline: 18px; } }