* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-box {
    background: #fff;
    width: 400px;
    max-width: 90%;
    border-radius: 12px;
    padding: 40px 36px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.login-header { text-align: center; margin-bottom: 30px; }
.login-header h1 { color: #2c3e50; font-size: 22px; margin-bottom: 8px; }
.login-header p { color: #95a5a6; font-size: 13px; }
.login-form .form-group { margin-bottom: 18px; }
.login-form label { display: block; color: #34495e; font-size: 13px; margin-bottom: 6px; }
.login-form input[type=text],
.login-form input[type=password] {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    font-size: 14px;
    transition: all .2s;
    outline: none;
}
.login-form input:focus { border-color: #409eff; box-shadow: 0 0 0 3px rgba(64,158,255,0.1); }
.captcha-row { display: flex; gap: 10px; align-items: center; }
.captcha-row input { flex: 1; }
.captcha-row img { height: 40px; border-radius: 4px; cursor: pointer; border: 1px solid #dcdfe6; }
.btn-login {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    margin-top: 8px;
}
.btn-login:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(102,126,234,0.3); }
.btn-login:active { transform: translateY(0); }
.login-tip { text-align: center; color: #95a5a6; font-size: 12px; margin-top: 16px; }