:root{--pri:#2f6fed;--bg:#f4f6f9;--border:#dde3ea;--dark:#1f2937;}
*{box-sizing:border-box;}
body{margin:0;font-family:"Microsoft YaHei",Arial,sans-serif;background:linear-gradient(135deg,#1f2937 0%,#111827 60%,#1e3a5f 100%);color:#333;min-height:100vh;display:flex;align-items:center;justify-content:center;}
.login-card{background:#fff;width:360px;max-width:92vw;border-radius:12px;padding:32px 28px;box-shadow:0 18px 50px rgba(0,0,0,.45);}
.login-card h1{font-size:19px;margin:0 0 4px;text-align:center;color:var(--dark);}
.login-card .sub{font-size:12px;color:#888;text-align:center;margin:0 0 20px;}
.tabs{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:18px;}
.tabs button{flex:1;padding:9px 0;border:none;background:#fff;font-size:14px;cursor:pointer;color:#555;}
.tabs button.active{background:var(--pri);color:#fff;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:13px;color:#555;margin-bottom:5px;}
.field input{width:100%;padding:10px 12px;font-size:14px;border:1px solid var(--border);border-radius:8px;outline:none;}
.field input:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(47,111,237,.12);}
.err-msg{display:none;background:#fef2f2;border:1px solid #fecaca;color:#dc2626;font-size:12px;border-radius:6px;padding:8px 10px;margin-bottom:14px;}
.submit-btn{width:100%;padding:11px 0;border:none;border-radius:8px;background:var(--pri);color:#fff;font-size:15px;cursor:pointer;}
.submit-btn:hover{background:#4a80f5;}
.hint{font-size:11px;color:#aaa;text-align:center;margin:16px 0 0;line-height:1.7;}
@media (max-width:480px){
  .login-card{padding:24px 18px;}
}