:root { color-scheme: dark; --bg:#06101d; --panel:#0c1a2b; --line:#203a56; --text:#edf6ff; --muted:#91a8bf; --blue:#49a2ff; --danger:#ff7587; }
* { box-sizing: border-box; }
body { min-height:100vh; margin:0; display:grid; place-items:center; font-family:"Microsoft YaHei",system-ui,sans-serif; color:var(--text); background:radial-gradient(circle at 18% 18%,rgba(73,162,255,.2),transparent 32%),linear-gradient(135deg,#040b14,#0a1726); }
.login-shell { width:min(920px,92vw); display:grid; grid-template-columns:1fr minmax(330px,420px); gap:24px; align-items:stretch; }
.login-brand,.login-card { border:1px solid var(--line); border-radius:22px; background:rgba(9,22,37,.9); box-shadow:0 30px 80px rgba(0,0,0,.42); }
.login-brand { min-height:480px; padding:54px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; text-align:center; }
.brand-mark { width:min(100%,360px); min-height:112px; height:auto; padding:10px 0; flex:0 0 auto; display:grid; place-items:center; background:transparent; text-align:center; }
.brand-mark span { display:inline-grid; place-items:center; padding:18px 28px; border-radius:16px; background:linear-gradient(135deg,#1676e8,#5bb6ff); font-size:3.25rem; font-weight:800; line-height:1.08; white-space:nowrap; }
.brand-slogan { width:min(100%,360px); padding:18px 24px; border:1px solid rgba(73,162,255,.32); border-radius:14px; background:rgba(73,162,255,.08); color:var(--text); font-size:1.15rem; font-weight:760; letter-spacing:.05em; }
.eyebrow { color:var(--blue); font-size:.76rem; font-weight:750; letter-spacing:.08em; }
.login-brand p,.login-card p { margin:0; color:var(--muted); line-height:1.7; }
.login-card { padding:34px; display:grid; align-content:center; }
.status { color:var(--muted); text-align:center; }
form { display:grid; gap:18px; }
form h2 { margin:6px 0 0; font-size:1.42rem; }
label { display:grid; gap:7px; color:var(--muted); font-size:.8rem; }
input { width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; outline:none; background:#06111e; color:var(--text); font-size:.95rem; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(73,162,255,.14); }
button { min-height:46px; border:0; border-radius:10px; background:linear-gradient(135deg,#2388f2,#55adff); color:white; font-size:.94rem; font-weight:760; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
.error { min-height:24px; margin-top:14px!important; color:var(--danger)!important; font-size:.8rem; text-align:center; }
[hidden] { display:none!important; }
@media (max-width:760px) { .login-shell{grid-template-columns:1fr}.login-brand{display:none}.login-card{padding:26px} }