:root { --brand:#302c6c; --accent:#e99a0d; --ink:#28293f; --muted:#626780; --line:#dce0eb; --bg:#f2f4fa; --error:#a3424c; }
* { box-sizing:border-box; }
body.login-page { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.login-main { min-height:100svh; display:grid; place-items:center; padding:40px 24px; }
.login-shell { width:min(960px,100%); display:grid; grid-template-columns:44% 56%; background:#fff; border:1px solid #e4e7f0; border-radius:18px; overflow:hidden; box-shadow:0 16px 60px rgb(40 41 63 / 4%); }
.brand-panel { background:var(--brand); color:#fff; padding:56px 40px 36px; display:flex; flex-direction:column; min-height:540px; }
.brand-center { margin:auto 0; }
.logo-box { padding:24px 20px; background:#fff; border-radius:10px; }
.logo-box img { width:100%; height:auto; display:block; }
.brand-label { margin:30px 0 0; font-size:22px; font-weight:500; letter-spacing:2px; }
.accent-line { width:32px; height:4px; background:var(--accent); border-radius:2px; margin-top:16px; }
.brand-foot { font-size:12px; color:#dad8ec; margin-top:64px; }
.form-panel { padding:64px 64px 32px; display:flex; flex-direction:column; justify-content:center; }
.eyebrow { color:var(--muted); font-size:13px; margin:0 0 8px; }
.form-panel h1 { font-size:28px; line-height:1.3; margin:0 0 32px; font-weight:650; }
.field { margin-bottom:22px; }
.field label { display:block; font-size:14px; font-weight:500; margin-bottom:9px; }
.field input { width:100%; min-height:48px; padding:11px 14px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); }
.field input::placeholder { color:#858aa1; font-size:14px; }
.field input[aria-invalid="true"] { border-color:var(--error); }
.password-control { position:relative; }
.password-control input { padding-right:56px; }
.password-toggle { position:absolute; right:3px; top:3px; width:44px; height:42px; display:grid; place-items:center; color:var(--muted); border:0; background:transparent; border-radius:5px; }
.password-toggle:hover { color:var(--brand); background:#f2f1f9; }
.password-toggle svg { width:20px; height:20px; }
.error { margin:7px 0 0; color:var(--error); font-size:13px; }
.error:empty { display:none; }
.server-error { margin:0 0 14px; }
.submit { width:100%; min-height:48px; color:#fff; background:var(--brand); border:1px solid var(--brand); border-radius:7px; font-weight:600; margin-top:4px; }
.submit:hover { background:#252151; }
@media (max-width:680px) {
  .login-main { padding:24px 16px; }
  .login-shell { max-width:420px; grid-template-columns:1fr; border-radius:14px; }
  .brand-panel { min-height:0; padding:26px 30px; }
  .brand-center { margin:0; }
  .logo-box { max-width:248px; margin:0 auto; padding:14px 16px; border-radius:7px; }
  .brand-label { font-size:14px; letter-spacing:2px; margin:16px 0 0; text-align:center; }
  .accent-line,.brand-foot { display:none; }
  .form-panel { padding:30px 26px 26px; }
  .eyebrow { display:none; }
  .form-panel h1 { font-size:24px; margin-bottom:26px; }
}