:root { font-family:Inter,"PingFang SC","Microsoft YaHei",Arial,sans-serif; color:#303133; background:#f4f7fb; }
* { box-sizing:border-box; } body { margin:0; }.login-page { display:grid; grid-template-columns:minmax(420px,1.05fr) minmax(480px,.95fr); min-height:100vh; }
.login-visual { position:relative; display:flex; flex-direction:column; overflow:hidden; padding:42px 58px; color:#fff; background:linear-gradient(145deg,#14263b 0%,#203c5e 52%,#24649b 100%); }
.login-visual::before { position:absolute; right:-150px; bottom:-210px; width:580px; height:580px; border:1px solid rgb(255 255 255 / .13); border-radius:50%; box-shadow:0 0 0 80px rgb(255 255 255 / .025),0 0 0 160px rgb(255 255 255 / .02); content:""; }
.visual-brand { position:relative; z-index:2; display:flex; align-items:center; gap:18px; }.visual-brand img { width:128px; filter:brightness(0) invert(1); }.visual-brand span { border-left:1px solid rgb(255 255 255 / .35); padding-left:18px; font-size:18px; font-weight:600; letter-spacing:1px; }
.visual-copy { position:relative; z-index:2; margin:auto 0; max-width:570px; }.visual-copy h1 { margin:0; font-size:48px; line-height:1.3; letter-spacing:2px; }
.visual-grid { position:absolute; right:52px; bottom:44px; display:grid; grid-template-columns:repeat(3,7px); gap:12px; opacity:.5; }.visual-grid i { width:7px; height:7px; border-radius:50%; background:#8cc8ff; }
.login-panel { display:grid; place-items:center; padding:44px; background:#f7f9fc; }.login-card { width:min(420px,100%); border:1px solid #e4e7ed; border-radius:10px; padding:38px 40px 34px; background:#fff; box-shadow:0 16px 44px rgb(31 45 61 / .09); }.login-card header > span { color:#409eff; font-size:13px; font-weight:600; }.login-card h2 { margin:10px 0 30px; font-size:25px; font-weight:600; }.mobile-logo { display:none; }
.login-card form { display:grid; gap:20px; }.login-card label { display:grid; gap:8px; color:#606266; font-size:13px; }.login-input { position:relative; display:flex; align-items:center; height:44px; border:1px solid #dcdfe6; border-radius:5px; background:#fff; transition:.16s; }.login-input:focus-within { border-color:#409eff; box-shadow:0 0 0 2px rgb(64 158 255 / .12); }.login-input input { flex:1; min-width:0; height:100%; border:0; outline:0; padding:0 13px; color:#303133; background:transparent; }.login-input input::placeholder { color:#c0c4cc; }.login-input button { height:100%; border:0; padding:0 12px; color:#409eff; background:transparent; font-size:12px; cursor:pointer; }
.login-error { display:flex; align-items:center; gap:8px; margin-top:-7px; border:1px solid #fab6b6; border-radius:5px; padding:9px 11px; color:#c45656; background:#fef0f0; font-size:12px; }.login-error b { display:grid; place-items:center; width:16px; height:16px; border-radius:50%; color:#fff; background:#f56c6c; }
.login-submit { height:44px; border:1px solid #409eff; border-radius:5px; color:#fff; background:#409eff; box-shadow:0 5px 12px rgb(64 158 255 / .2); cursor:pointer; font-weight:600; letter-spacing:4px; }.login-submit:hover { border-color:#337ecc; background:#337ecc; }
@media(max-width:900px){.login-page{grid-template-columns:1fr}.login-visual{display:none}.login-panel{padding:24px}.mobile-logo{display:block;margin-bottom:28px}.mobile-logo img{width:130px}.login-card{padding:32px 28px 36px}.login-card h2{font-size:22px}}