:root { color-scheme: light; --ink:#252630; --muted:#7d7f89; --line:#e8e8ee; --purple:#6956e8; --purple-soft:#f1efff; --blue:#3370ff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:#f5f5f8; font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
button,a { font:inherit; }
.login-shell { display:grid; grid-template-columns:minmax(420px,.9fr) minmax(480px,1.1fr); min-height:100vh; }
.brand-panel { display:flex; flex-direction:column; justify-content:center; padding:9vw; color:#fff; background:radial-gradient(circle at 20% 20%,#8b7bf0 0,transparent 36%),linear-gradient(145deg,#282248,#463b86 58%,#5e4bd0); }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:#fff; color:var(--purple); font-size:23px; font-weight:700; box-shadow:0 15px 35px rgba(0,0,0,.18); }
.eyebrow { margin:28px 0 12px; color:#c7c0ff; font-size:12px; letter-spacing:.18em; }
.brand-panel h1 { margin:0; font-size:34px; line-height:1.45; font-weight:600; }
.brand-copy { max-width:430px; margin:20px 0 38px; color:#d9d5f4; font-size:14px; line-height:1.8; }
.security-note { display:flex; align-items:center; gap:12px; max-width:390px; padding:14px 16px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.08); }
.security-note > span { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:rgba(255,255,255,.16); }
.security-note strong,.security-note small { display:block; }.security-note strong { font-size:12px; }.security-note small { margin-top:5px; color:#d8d4ef; font-size:11px; }
.login-panel { display:grid; place-items:center; padding:40px; }
.login-card { width:min(420px,100%); padding:38px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 24px 70px rgba(46,44,70,.08); }
.mobile-brand { display:none; align-items:center; gap:8px; margin-bottom:28px; }.mobile-brand span { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--purple); color:#fff; }
.login-card h2 { margin:0 0 10px; font-size:23px; }.login-card > p { margin:0 0 28px; color:var(--muted); font-size:13px; line-height:1.7; }
.login-alert { margin-bottom:14px; padding:10px 12px; border-radius:8px; background:#fff2f0; color:#c84f42; font-size:12px; }
.feishu-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:48px; border-radius:9px; background:var(--blue); color:#fff; text-decoration:none; font-size:14px; font-weight:500; }
.feishu-button.disabled { pointer-events:none; opacity:.45; }.feishu-logo { display:grid; place-items:center; width:24px; height:24px; border-radius:6px; background:#fff; color:var(--blue); font-size:12px; }
.divider { display:flex; align-items:center; gap:10px; margin:24px 0 13px; color:#a0a2aa; font-size:11px; }.divider::before,.divider::after { content:""; flex:1; height:1px; background:var(--line); }
.dev-login > p { margin:0 0 10px; color:var(--muted); font-size:11px; }.dev-users { display:grid; gap:7px; }
.dev-users button { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); text-align:left; cursor:pointer; }.dev-users button:hover { border-color:#bdb5f4; background:#fbfaff; }.dev-users button > span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--purple-soft); color:var(--purple); }.dev-users strong,.dev-users small { display:block; }.dev-users strong { font-size:12px; }.dev-users small { margin-top:3px; color:var(--muted); font-size:10px; }
.legal { display:block; margin-top:22px; color:#a0a2aa; font-size:10px; text-align:center; }
@media (max-width:850px) { .login-shell { grid-template-columns:1fr; }.brand-panel { display:none; }.login-panel { padding:24px; }.mobile-brand { display:flex; } }