:root { color-scheme: light; font-family: Inter, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body { background: #031a3b; }
button, input { font: inherit; }
.login-page { position: relative; min-height: 100vh; overflow: hidden; color: #eaf3ff; background: radial-gradient(circle at 50% 35%, rgba(8, 58, 119, .34), transparent 32%), linear-gradient(135deg, #061d3d, #001838 58%, #041d40); }
.login-brand { position: absolute; z-index: 3; top: 44px; left: 48px; display: flex; align-items: center; gap: 16px; }
.login-brand strong { font-size: 26px; line-height: 1; letter-spacing: .02em; color: #fff; }
.login-brand-mark { display: flex; gap: 6px; transform: skew(-24deg); }
.login-brand-mark i { display: block; width: 12px; height: 36px; border-radius: 2px; background: linear-gradient(180deg, #258dff, #0668f4); box-shadow: 0 0 18px rgba(20, 122, 255, .2); }
.login-card { position: absolute; z-index: 4; top: 50%; left: 50%; width: min(420px, calc(100vw - 40px)); padding: 45px 50px 48px; transform: translate(-50%, -50%); color: #10203a; border: 1px solid rgba(200, 210, 224, .92); border-radius: 7px; background: #fff; box-shadow: 0 18px 50px rgba(0, 8, 26, .28); }
.login-card h1 { margin: 0 0 32px; text-align: center; font-size: 28px; letter-spacing: .05em; }
.login-card form { display: grid; }
.login-card label:not(.remember) { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.login-card input[type="text"], .login-card input[type="password"] { width: 100%; height: 48px; padding: 0 14px; color: #17243a; outline: none; border: 1px solid #cad3e0; border-radius: 6px; background-color: #fff; color-scheme: light; -webkit-text-fill-color: #17243a; caret-color: #17243a; transition: border-color .18s, box-shadow .18s; }
.login-card input[type="text"]:-webkit-autofill, .login-card input[type="password"]:-webkit-autofill, .login-card input[type="text"]:-webkit-autofill:hover, .login-card input[type="password"]:-webkit-autofill:hover, .login-card input[type="text"]:-webkit-autofill:focus, .login-card input[type="password"]:-webkit-autofill:focus { -webkit-text-fill-color: #17243a; -webkit-box-shadow: 0 0 0 1000px #fff inset; box-shadow: 0 0 0 1000px #fff inset; caret-color: #17243a; }
.login-card input::placeholder { color: #aab4c3; }
.login-card input:focus { border-color: #1687f8; box-shadow: 0 0 0 3px rgba(22, 135, 248, .12); }
.login-card #username { margin-bottom: 24px; }
.password-field { position: relative; }
.password-field input { padding-right: 48px !important; }
.password-field button { position: absolute; top: 0; right: 0; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; color: #9aa7b9; border: 0; background: transparent; cursor: pointer; }
.password-field svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.remember { width: fit-content; margin: 28px 0 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: #3e4b5e; cursor: pointer; }
.remember input { width: 17px; height: 17px; margin: 0; accent-color: #0878f9; }
.login-error { min-height: 20px; margin: 10px 0 4px; color: #d83232; font-size: 13px; }
.login-submit { height: 50px; color: #fff; font-size: 17px; font-weight: 700; border: 0; border-radius: 6px; background: linear-gradient(180deg, #1687f8, #056af1); box-shadow: 0 8px 18px rgba(6, 106, 241, .2); cursor: pointer; }
.login-submit:hover { filter: brightness(1.05); }
.login-submit:disabled { cursor: wait; opacity: .7; }
.circuit { position: absolute; z-index: 1; top: 25%; width: 30%; height: 52%; color: rgba(25, 126, 255, .58); }
.circuit-left { left: 0; }.circuit-right { right: 0; transform: scaleX(-1); }
.circuit .line { position: absolute; left: 0; height: 1px; background: currentColor; transform-origin: left; }
.circuit .line::after { content: ""; position: absolute; top: 0; right: -86px; width: 92px; height: 1px; background: currentColor; transform: rotate(38deg); transform-origin: left; }
.circuit .one { top: 8%; width: 38%; }.circuit .two { top: 48%; width: 62%; }.circuit .three { top: 79%; width: 44%; }
.circuit .node { position: absolute; width: 12px; height: 12px; border: 1px solid #1687f8; border-radius: 50%; background: #05204a; }
.circuit .n1 { top: calc(8% - 6px); left: 38%; }.circuit .n2 { top: calc(48% - 6px); left: 62%; }.circuit .n3 { top: calc(79% - 6px); left: 44%; }
.circuit b { position: absolute; font-size: 15px; font-weight: 500; color: rgba(27, 132, 255, .82); }
.circuit .api { top: 0; left: 21%; }.circuit .get { top: 85%; left: 23%; }.circuit .code { top: 52%; left: 23%; transform: scaleX(-1); }
.circuit .status { position: absolute; top: 41%; left: 63%; width: 11px; height: 11px; border-radius: 50%; background: #56e2a2; box-shadow: 0 0 14px rgba(86, 226, 162, .45); }
@media (max-width: 760px) {
  .login-brand { top: 28px; left: 28px; }.login-brand strong { font-size: 21px; }.login-brand-mark i { height: 30px; width: 10px; }
  .login-card { padding: 38px 30px 40px; }.circuit { opacity: .45; width: 48%; }
}