* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,"Microsoft YaHei","PingFang SC","Helvetica Neue",sans-serif; background:linear-gradient(135deg,#1e3a5f 0%,#0f2744 40%,#1a365d 100%); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; position:relative; overflow:hidden; }
body::before { content:''; position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 20%,rgba(59,130,246,.08) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgba(124,58,237,.06) 0%,transparent 50%); pointer-events:none; }
.login-box { background:#fff; border-radius:16px; box-shadow:0 24px 64px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.15); width:100%; max-width:400px; padding:40px 36px; position:relative; z-index:1; border:1px solid rgba(255,255,255,.1); }
.logo { text-align:center; margin-bottom:4px; }
.logo .name { font-size:26px; font-weight:800; color:#1e3a5f; letter-spacing:2px; }
.logo .sub { font-size:13px; color:#64748b; margin-top:6px; font-weight:500; letter-spacing:.5px; }
h2 { text-align:center; font-size:18px; color:#334155; margin:22px 0 18px; font-weight:700; letter-spacing:1px; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:13px; color:#475569; margin-bottom:6px; font-weight:600; }
.field input { width:100%; padding:12px 14px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:15px; box-sizing:border-box; transition:all .2s; background:#f8fafc; color:#1e293b; }
.field input:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.12); background:#fff; }
.captcha-row { display:flex; gap:10px; align-items:flex-end; }
.captcha-row .q { background:#f1f5f9; border:1.5px solid #e2e8f0; border-radius:10px; padding:12px 16px; font-size:16px; color:#1e293b; white-space:nowrap; font-weight:600; min-width:80px; text-align:center; }
.captcha-row a { font-size:12.5px; color:#3b82f6; text-decoration:none; white-space:nowrap; font-weight:600; }
.captcha-row a:hover { text-decoration:underline; }
.remember-row { display:flex; align-items:center; gap:8px; margin-bottom:18px; padding:0 4px; }
.remember-row input[type=checkbox] { width:17px; height:17px; accent-color:#3b82f6; cursor:pointer; flex-shrink:0; }
.remember-row label { font-size:13px; color:#64748b; cursor:pointer; user-select:none; font-weight:500; }
.btn-login { width:100%; padding:13px; background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; border:none; border-radius:10px; font-size:16.5px; font-weight:700; cursor:pointer; margin-top:4px; transition:all .25s; letter-spacing:2px; box-shadow:0 4px 14px rgba(37,99,235,.35); }
.btn-login:hover { background:linear-gradient(135deg,#1d4ed8,#1e40af); transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,99,235,.45); }
.btn-login:active { transform:translateY(0); }
.error { background:#fef2f2; border:1.5px solid #fecaca; color:#dc2626; font-size:13px; padding:11px 14px; border-radius:10px; margin-bottom:16px; font-weight:500; }
.foot { text-align:center; font-size:12px; color:#94a3b8; margin-top:20px; font-weight:500; }

/* 手机端 */