:root{
  --login-primary:#2563eb;
  --login-primary-hover:#1d4ed8;
  --login-bg:#f5f7fa;
  --login-surface:#fff;
  --login-border:#dce2e8;
  --login-text:#18212b;
  --login-muted:#647180;
  --login-danger:#c2414b;
  --login-radius:8px;
}
*{box-sizing:border-box}
html,body{min-width:320px;min-height:100%;margin:0;background:var(--login-bg);color:var(--login-text);font-family:"Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif}
button,input{font:inherit}
button:focus-visible,input:focus-visible{outline:3px solid rgba(37,99,235,.24);outline-offset:2px}
.login-page{display:grid;min-height:100svh;place-items:center;padding:24px}
.login-card{width:min(100%,400px);padding:32px;border:1px solid var(--login-border);border-radius:var(--login-radius);background:var(--login-surface);box-shadow:0 12px 28px rgba(24,33,43,.08)}
.login-brand{margin-bottom:28px;color:var(--login-primary);font-size:16px;font-weight:700;line-height:1.4}
.login-card h1{margin:0;color:var(--login-text);font-size:24px;line-height:1.35}
.login-lead{margin:8px 0 24px;color:var(--login-muted);font-size:14px;line-height:1.6}
.field{display:grid;gap:7px;margin-top:16px;color:var(--login-text);font-size:13px;font-weight:650}
.field input{width:100%;height:44px;border:1px solid var(--login-border);border-radius:var(--login-radius);background:var(--login-surface);padding:0 12px;color:var(--login-text);font-size:14px}
.field input::placeholder{color:#8a96a5}
.field input:hover{border-color:#b9c5d2}
.field input:focus{border-color:var(--login-primary);box-shadow:0 0 0 3px rgba(37,99,235,.14);outline:0}
.password-wrap{position:relative;display:block}
.password-wrap input{padding-right:64px}
.password-wrap button{position:absolute;top:4px;right:4px;height:36px;border:0;border-radius:6px;background:transparent;color:var(--login-primary);padding:0 10px;font-size:12px;font-weight:650;cursor:pointer}
.password-wrap button:hover{background:#eff5ff;color:var(--login-primary-hover)}
.login-error{min-height:20px;margin:10px 0 0;color:var(--login-danger);font-size:13px;line-height:1.5}
.submit-button{width:100%;height:44px;margin-top:8px;border:1px solid var(--login-primary);border-radius:var(--login-radius);background:var(--login-primary);color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.submit-button:hover:not(:disabled){background:var(--login-primary-hover);border-color:var(--login-primary-hover)}
.submit-button:disabled{cursor:not-allowed;opacity:.65}
.login-divider{position:relative;margin:18px 0 12px;color:var(--login-muted);font-size:12px;text-align:center}
.login-divider::before{content:"";position:absolute;top:50%;right:0;left:0;height:1px;background:var(--login-border)}
.login-divider span{position:relative;padding:0 10px;background:var(--login-surface)}
.dingtalk-login-btn{width:100%;height:44px;border:1px solid var(--login-border);border-radius:var(--login-radius);background:var(--login-surface);color:var(--login-text);font-size:14px;font-weight:650;cursor:pointer}
.dingtalk-login-btn:hover{border-color:#9fb8df;background:#f3f7ff;color:var(--login-primary)}
.login-foot{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--login-border);color:var(--login-muted);font-size:12px;line-height:1.6}
@media(max-width:480px){.login-page{padding:16px}.login-card{padding:24px 20px}}