*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;width:100%;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;overflow:hidden;}
.login-container{display:flex;height:100vh;width:100%;}
.login-banner{flex:1;background:url('/img/banner_.jpg') center center no-repeat;background-size:cover;position:relative;}
.login-banner::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(0,82,147,0.3) 0,rgba(0,50,90,0.5) 100%);}
.login-panel{width:420px;min-width:380px;background:#171515;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px;box-shadow:-5px 0 30px rgba(0,0,0,0.3);}
.login-box{width:100%;max-width:320px;}
.login-logo{text-align:center;margin-bottom:25px;display:flex;justify-content:center;align-items:center;}
.login-logo a{display:flex;justify-content:center;align-items:center;}
.login-logo img{width:200px;height:auto;}
.login-header{text-align:center;margin-bottom:30px;}
.login-welcome{font-size:13px;color:#0d9488;text-transform:uppercase;letter-spacing:2px;margin-bottom:8px;font-weight:500;}
.login-title{font-size:20px;color:#fff;font-weight:600;margin:0;}
.login-form{width:100%;}
.form-group{margin-bottom:20px;position:relative;}
.form-group .input-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#95a5a6;font-size:16px;}
.form-group input[type="text"],.form-group input[type="password"]{width:100%;padding:14px 15px 14px 45px;border:1px solid #e0e0e0;border-radius:8px;font-size:14px;color:#333;transition:all .3s ease;background:#fafafa;}
.form-group input[type="text"]:focus,.form-group input[type="password"]:focus{border-color:#0d7377;background:#fff;outline:none;box-shadow:0 0 0 3px rgba(13,115,119,0.1);}
.form-group input::placeholder{color:#aaa;}
.remember-group{display:flex;align-items:center;margin-bottom:25px;}
.remember-group input[type="checkbox"]{width:18px;height:18px;margin-right:10px;accent-color:#0d9488;cursor:pointer;}
.remember-group label{font-size:13px;color:#0d9488;cursor:pointer;}
.login-button{width:100%;padding:14px;background:linear-gradient(135deg,#1a3a4a 0,#2c3e50 100%);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:10px;}
.login-button:hover{background:linear-gradient(135deg,#2c3e50 0,#1a3a4a 100%);box-shadow:0 5px 20px rgba(44,62,80,0.3);transform:translateY(-2px);}
.login-button:active{transform:translateY(0);}
.login-button svg{width:18px;height:18px;}
.error-message{background:#fee;border:1px solid #fcc;color:#c00;padding:12px 15px;border-radius:8px;margin-bottom:20px;font-size:13px;text-align:center;}
.forgot-password{text-align:center;margin-top:20px;}
.forgot-password a{color:#0d9488;font-size:13px;text-decoration:none;transition:color .3s ease;}
.forgot-password a:hover{color:#14b8a6;text-decoration:underline;}
.login-footer{margin-top:40px;text-align:center;font-size:11px;color:#666;}
@media screen and(max-width:900px){.login-container{flex-direction:column;}
.login-banner{height:30vh;min-height:200px;}
.login-panel{width:100%;min-width:auto;flex:1;padding:30px 20px;}
}
@media screen and(max-width:480px){.login-panel{padding:20px 15px;}
.login-box{max-width:100%;}
.login-logo img{width:100px;}
.login-title{font-size:18px;}
}
.password-toggle{position:absolute;right:15px;top:50%;transform:translateY(-50%);background:none;border:none;color:#95a5a6;cursor:pointer;font-size:12px;padding:5px;}
.password-toggle:hover{color:#0d7377;}
.icon-user::before{content:"\01F464";}
.icon-lock::before{content:"\01F512";}