*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft Yahei",sans-serif}
body{background:linear-gradient(135deg,#e8f5e9 0,#c8e6c9 100%);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}
.login-card{background:#fff;width:100%;max-width:420px;border-radius:12px;box-shadow:0 8px 24px rgba(76,175,80,.15);padding:40px 30px;position:relative;overflow:hidden}
.login-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:6px;background:linear-gradient(90deg,#4caf50,#81c784)}
.login-title{text-align:center;margin-bottom:30px;color:#2e7d32}
.login-title h2{font-size:24px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:10px}
.login-title h2::before{content:"♻️";font-size:28px}
.login-title p{color:#666;font-size:14px}
.login-form{margin-bottom:20px}
.form-group{margin-bottom:20px;position:relative}
.form-group label{display:block;margin-bottom:8px;color:#333;font-weight:500}
.form-group input{width:100%;height:45px;padding:0 15px;border:1px solid #ddd;border-radius:6px;font-size:16px;transition:border-color .3s}
.form-group input:focus{outline:0;border-color:#4caf50;box-shadow:0 0 0 2px rgba(76,175,80,.1)}
.captcha-group{display:flex;gap:10px}
.captcha-input{flex:1}
.captcha-img{width:120px;cursor:pointer;}
.remember-group{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.remember-group input{width:18px;height:18px;cursor:pointer}
.remember-group label{color:#666;font-size:14px;cursor:pointer}
.error-tip{position:absolute;bottom:-20px;left:0;color:#f44336;font-size:12px;display:none}
.login-btn{width:100%;height:48px;background:linear-gradient(90deg,#4caf50,#66bb6a);color:#fff;border:none;border-radius:6px;font-size:18px;font-weight:500;cursor:pointer;transition:opacity .3s}
.login-btn:hover{opacity:.9}
.login-btn:active{opacity:1;background:linear-gradient(90deg,#388e3c,#4caf50)}
.login-footer{text-align:center;margin-top:20px;font-size:14px;color:#666}
.login-footer a{color:#2e7d32;text-decoration:none}
.login-footer a:hover{text-decoration:underline}
@media (max-width:480px){.login-card{padding:30px 20px}
    .captcha-group{flex-direction:column}
    .captcha-img{width:100%}
}