:root { --navy:#0a2947; --blue:#2563eb; --green:#0b9565; --text:#172235; --muted:#738095; --line:#dfe6ef; --bg:#f3f6fa; }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:var(--bg); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
button,input { font:inherit; }
.login-page { min-height:100vh; display:grid; grid-template-columns:minmax(380px,.9fr) minmax(520px,1.1fr); }
.login-brand { display:grid; align-content:center; justify-items:start; padding:70px clamp(44px,7vw,120px); background:linear-gradient(145deg,#123c67 0%,#071d32 72%); color:white; }
.brand-mark { width:54px; height:54px; display:grid; place-items:center; margin-bottom:30px; border-radius:14px; background:rgba(255,255,255,.13); color:#dbeaff; font-size:17px; font-weight:900; }
.login-brand p { margin:0 0 10px; color:#8fbfff; font-size:13px; font-weight:900; letter-spacing:.05em; }
.login-brand h1 { margin:0; font-size:42px; letter-spacing:0; }
.login-brand>span { max-width:520px; margin-top:18px; color:#bed0e1; font-size:14px; line-height:1.8; font-weight:650; }
.workflow { width:100%; max-width:520px; display:flex; align-items:center; gap:8px; margin-top:42px; }
.workflow i { flex:none; color:#d8e8f7; font-size:10px; font-style:normal; font-weight:850; }.workflow b { height:1px; flex:1; background:rgba(255,255,255,.2); }
.login-panel { display:grid; place-items:center; padding:32px; }
.login-card { width:min(430px,100%); padding:36px; border:1px solid var(--line); border-radius:12px; background:white; box-shadow:0 22px 60px rgba(20,43,70,.1); }
.login-title>span { color:var(--blue); font-size:11px; font-weight:900; }.login-title h2 { margin:7px 0 8px; font-size:24px; }.login-title p { margin:0; color:var(--muted); font-size:12px; }
.entry-switch { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:26px 0 22px; padding:4px; border-radius:9px; background:#eef2f7; }
.entry-switch button { height:36px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-size:11px; font-weight:900; }.entry-switch button.active { background:white; color:var(--blue); box-shadow:0 3px 10px rgba(20,43,70,.08); }
form { display:grid; gap:16px; } label { display:grid; gap:7px; } label>span { color:#526075; font-size:11px; font-weight:850; }
input { width:100%; height:46px; border:1px solid #d4deea; border-radius:8px; padding:0 12px; outline:0; color:var(--text); background:white; } input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.09); }
.password-field { position:relative; }.password-field input { padding-right:58px; }.password-field button { position:absolute; top:0; right:0; height:46px; border:0; padding:0 12px; background:transparent; color:var(--blue); font-size:10px; font-weight:900; }
.login-error { min-height:16px; margin:-5px 0; color:#d33a32; font-size:11px; font-weight:800; }
.login-button { height:48px; border:0; border-radius:8px; background:linear-gradient(135deg,#2f77ff,#155bd6); color:white; font-size:13px; font-weight:900; box-shadow:0 12px 22px rgba(37,99,235,.2); }
.security-note { display:block; margin-top:16px; color:#94a0b0; font-size:9px; line-height:1.6; }
@media (max-width:800px) { .login-page { grid-template-columns:1fr; }.login-brand { min-height:250px; padding:38px 26px; }.brand-mark { width:42px; height:42px; margin-bottom:18px; }.login-brand h1 { font-size:31px; }.login-brand>span { margin-top:11px; font-size:12px; }.workflow { margin-top:24px; }.login-panel { padding:22px 16px; }.login-card { padding:26px 22px; } }