:root { color-scheme:light; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; color:#172339; background:#f3f6fb; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center; padding:32px 20px; background:radial-gradient(ellipse at 20% 0%,#e6efff,transparent 55%); }
.login-card { width:100%; max-width:420px; padding:32px; border:1px solid #e1e8f3; border-radius:22px; background:#fff; box-shadow:0 12px 48px #233c6510; }
header { margin-bottom:26px; }.brand-mark { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#2563eb; color:#fff; font-size:23px; font-weight:700; }
.eyebrow { display:inline; margin-left:12px; font-size:14px; color:#53647d; }h1 { margin:20px 0 8px; font-size:28px; letter-spacing:-.6px; }.intro { margin:0; font-size:14px; color:#718096; }
label { display:block; margin:18px 0 8px; font-size:14px; font-weight:500; }
input:not([type=checkbox]):not([type=hidden]) { width:100%; min-width:0; height:46px; padding:10px 12px; border:1px solid #d5deec; border-radius:10px; background:#fafbfe; color:#172339; font:inherit; font-size:16px; outline:none; }
input:not([type=checkbox]):focus { border-color:#3978ed; box-shadow:0 0 0 3px #3978ed16; background:#fff; }
button { font:inherit; cursor:pointer; }button:focus-visible { outline:3px solid #99bdff; outline-offset:2px; }
.password-field { position:relative; }.password-field input { padding-right:64px !important; }.password-field button { position:absolute; right:6px; top:6px; height:34px; padding:0 10px; border:0; border-radius:7px; background:transparent; color:#52657d; font-size:13px; }
.captcha-field { display:flex; gap:10px; }.captcha-field input { flex:1; }.captcha-field button { flex:0 0 150px; padding:2px 0; height:46px; border:1px solid #d5deec; border-radius:10px; overflow:hidden; background:#fff; }.captcha-field img { display:block; width:150px; height:40px; }
.remember { display:flex; align-items:center; gap:8px; color:#53647d; font-weight:400; }.remember input { width:16px; height:16px; margin:0; accent-color:#2563eb; }
#login-message { min-height:20px; margin:14px 0; font-size:13px; line-height:1.6; color:#c13c32; overflow-wrap:anywhere; }#login-message[data-kind=success] { color:#147557; }
.submit { width:100%; min-height:46px; border:0; border-radius:10px; background:#2563eb; color:#fff; font-weight:600; }.submit:hover { background:#1d55d2; }.submit:disabled { opacity:.6; cursor:wait; }
footer { margin-top:22px; text-align:center; font-size:12px; color:#8996a9; }
@media(max-width:480px) { body { align-items:flex-start; padding:24px 14px; }.login-card { padding:26px 22px; border-radius:18px; }h1 { font-size:26px; } }
@media(max-width:350px) { .login-card { padding:22px 16px; }.captcha-field { gap:6px; }.captcha-field button { flex-basis:128px; }.captcha-field img { width:128px; object-fit:contain; } }