:root{color-scheme:light;--bg:#f4f6fa;--surface:#fff;--text:#18243b;--muted:#526174;--line:#8390a3;--primary:#255be3;--primary-hover:#1b46b5;--error:#b42318;--error-bg:#fff3f1;font-family:Inter,"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:16px;line-height:1.6}
*{box-sizing:border-box}body{margin:0;color:var(--text);background:var(--bg)}main{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:32px 20px}.login-card{width:100%;max-width:400px;padding:36px;border:1px solid #e0e6ef;border-radius:18px;background:var(--surface);box-shadow:0 16px 48px -24px #243d6830}.brand{display:flex;align-items:center;gap:12px;margin-bottom:32px}.brand-mark{display:grid;place-items:center;background:var(--primary);color:#fff;width:44px;height:44px;border-radius:12px;font-size:24px;font-weight:650}h1{font-size:21px;line-height:1.4;letter-spacing:.03em;font-weight:650;margin:0}h1 span{display:block;font-size:12px;color:var(--muted);font-weight:450;letter-spacing:.04em;margin-top:2px}
.field{margin-bottom:20px}label{display:block;font-size:14px;font-weight:550;margin-bottom:8px}input,button{font:inherit}input{width:100%;min-width:0;height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);font-size:15px;transition:border-color .16s,box-shadow .16s}input:focus-visible{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px #255be31a}input[aria-invalid=true]{border-color:var(--error)}.password-field{position:relative}.password-field input{padding-right:68px}.visibility-button{position:absolute;right:3px;top:2px;min-width:56px;min-height:44px;padding:8px;border:0;border-radius:7px;color:var(--muted);background:transparent;font-size:13px;font-weight:550;cursor:pointer}.visibility-button:hover{color:var(--primary);background:#f0f4fd}.field-error{margin:6px 0 0;font-size:13px;color:var(--error)}.field-error:empty{display:none}.caps-lock{margin:6px 0 0;font-size:12px;color:#855416}.login-error{border:1px solid #efc6c2;background:var(--error-bg);color:var(--error);padding:10px 12px;font-size:13px;border-radius:8px;margin:0 0 16px}
.submit-button{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;margin-top:28px;border:0;border-radius:8px;background:var(--primary);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background .16s}.submit-button:hover:not(:disabled){background:var(--primary-hover)}.submit-button:active:not(:disabled){background:#163c9d}.submit-button svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.submit-button:disabled{cursor:wait;opacity:.7}button:focus-visible{outline:3px solid #8eafff;outline-offset:3px}.spinner{width:17px;height:17px;border:2px solid #ffffff66;border-top-color:white;border-radius:50%;animation:spin .8s linear infinite}[hidden]{display:none!important}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:420px){main{padding:24px 20px}.login-card{padding:28px 24px;border-radius:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}