:root { color-scheme: light; --navy:#1e2b43; --ink:#26354b; --muted:#647184; --gold:#d3bd89; --line:#dce2e9; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f8f9fb; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button,input { font:inherit; }
.login-layout { display:grid; grid-template-columns:52% 48%; min-height:100svh; }
.login-story { display:flex; flex-direction:column; padding:48px clamp(36px,5.2vw,88px) 32px; background:var(--navy); color:#f4f6fa; overflow:hidden; }
.login-brand { display:flex; align-items:center; gap:13px; text-decoration:none; width:fit-content; font-size:24px; font-weight:650; letter-spacing:-.6px; }
.login-brand-mark { display:grid; place-items:center; width:45px; height:48px; border:1px solid #899ab1; border-radius:10px; font:29px Georgia,serif; font-weight:400; }
.login-brand small { display:block; margin-top:5px; font-size:11px; font-weight:400; color:#c1cede; letter-spacing:1px; }
.login-story-copy { margin-top:clamp(60px,10vh,118px); }
.login-story-rule { display:block; width:36px; height:2px; background:var(--gold); margin-bottom:26px; }
.login-story h1 { font-family:"Songti SC","STSong","Noto Serif CJK SC",serif; font-size:clamp(34px,3.8vw,56px); line-height:1.5; letter-spacing:1px; font-weight:500; margin:0 0 22px; }
.login-story-copy p { color:#bac7d9; font-size:15px; line-height:1.95; margin:0; }
.login-map { width:100%; max-width:540px; min-height:140px; margin:34px 0 16px; overflow:visible; }
.login-story-footer { margin:auto 0 0; padding-top:26px; font-size:11px; color:#a9b9cd; letter-spacing:.8px; }
.login-story-footer span { color:#6d809c; padding:0 10px; }
.login-entry { display:flex; flex-direction:column; position:relative; padding:60px 48px 24px; background:#fafbfc; }
.login-form-wrap { width:100%; max-width:370px; margin:auto; padding:30px 0 70px; }
.login-entry-label { color:#917647; font-size:12px; margin:0 0 18px; }
.login-entry h2 { font-size:32px; line-height:1.5; font-weight:600; letter-spacing:1px; margin:0 0 10px; }
.login-entry-heading > p:last-child { font-size:13px; color:var(--muted); line-height:1.8; margin:0 0 38px; }
.login-field { margin-bottom:23px; }
.login-field label { display:block; font-size:13px; font-weight:550; margin-bottom:10px; }
.login-field input { appearance:none; width:100%; height:52px; padding:0 15px; background:#fff; border:1px solid #cfd7e2; border-radius:7px; color:var(--ink); font-size:15px; transition:border-color .15s,box-shadow .15s; }
.login-field input::placeholder { color:#667487; font-size:13px; }
.login-field input:focus { outline:none; border-color:#526e9a; box-shadow:0 0 0 3px #e4ebf5; }
.login-field input[aria-invalid=true] { border-color:#a74b40; }
.login-password { position:relative; }
.login-password input { padding-right:54px; }
.login-password button { display:grid; place-items:center; position:absolute; inset:4px 4px 4px auto; width:44px; color:#6a798e; background:none; border:0; border-radius:4px; cursor:pointer; }
.login-password svg { width:21px; height:21px; stroke:currentColor; stroke-width:1.5; }
.login-password button[aria-pressed=true] { color:#223a5d; background:#edf1f6; }
.login-error { color:#9a392f; font-size:13px; line-height:1.75; margin:0 0 18px; padding:10px 12px; background:#fbefed; border-radius:5px; }
.login-error[hidden] { display:none; }
.login-submit { display:flex; align-items:center; justify-content:center; gap:20px; width:100%; min-height:52px; border:0; border-radius:7px; background:var(--navy); color:#fff; font-size:14px; font-weight:550; letter-spacing:.5px; cursor:pointer; transition:background .15s,transform .15s; margin-top:30px; }
.login-submit svg { width:18px; height:18px; stroke:#dfcda4; stroke-width:1.6; }
.login-submit:hover { background:#2c405e; }
.login-submit:active { transform:translateY(1px); }
.login-submit:disabled { cursor:wait; background:#66758b; }
.login-private { display:flex; align-items:center; justify-content:center; gap:6px; font-size:11px; color:#667487; margin:22px 0 0; }
.login-private svg { height:15px; width:15px; stroke:currentColor; stroke-width:1.3; }
.login-entry-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; max-width:430px; margin:0 auto; color:#667487; font-size:11px; }
.login-entry-footer span { color:#667487; }
button:focus-visible,a:focus-visible { outline:2px solid #8c7446; outline-offset:4px; }
@media(max-width:1000px) { .login-story { padding-inline:36px; }.login-entry { padding-inline:32px; }.login-story h1 { font-size:38px; } }
@media(max-width:700px) {
  .login-layout { display:flex; flex-direction:column; }
  .login-story { padding:26px 28px 30px; }
  .login-brand { font-size:21px; gap:11px; }.login-brand-mark { width:38px; height:40px; font-size:25px; }.login-brand small { font-size:10px; }
  .login-story-copy { margin-top:25px; }.login-story-rule { display:none; }
  .login-story h1 { font-size:28px; line-height:1.55; margin-bottom:0; letter-spacing:.4px; }
  .login-story h1 br { display:block; }
  .login-story-copy p,.login-map,.login-story-footer { display:none; }
  .login-entry { flex:1; min-height:0; padding:30px 28px 20px; }
  .login-form-wrap { padding:12px 0 40px; margin:0 auto; }
  .login-entry-label { margin-bottom:8px; font-size:11px; }.login-entry h2 { font-size:27px; margin-bottom:7px; }
  .login-entry-heading > p:last-child { margin-bottom:28px; }
  .login-entry-footer { margin-top:auto; font-size:10px; gap:8px; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none !important; } }