:root{--primary-color:#00BCD4;--primary-dark:#0097A7;--primary-light:#E0F7FA;--secondary-color:#26C6DA;--text-dark:#333;--text-light:#555;--white:#fff;--border-color:#e5e7eb;--bg-light:#f8f9fa;}
body{margin:0;padding:0;height:100vh;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background-color:#f5f7fa;overflow-x:hidden;}
.login-container{display:flex;width:100%;height:100vh;box-shadow:0 10px 40px rgba(0,0,0,0.1);}
.brand-panel{width:50%;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;padding:40px;position:relative;overflow:hidden;}
.brand-panel::before{content:"";position:absolute;width:300%;height:300%;top:-100%;left:-100%;background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(255,255,255,0.1)' fill-rule='evenodd'/%3E%3C/svg%3E");animation:rotate 240s linear infinite;opacity:.5;}
@keyframes rotate{0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
.brand-content{position:relative;z-index:1;text-align:center;}
.brand-panel img{width:120px;margin-bottom:30px;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.15));}
.brand-title{font-size:32px;font-weight:600;margin-bottom:15px;text-shadow:0 2px 4px rgba(0,0,0,0.1);}
.brand-subtitle{font-size:20px;opacity:.9;margin-bottom:30px;}
.brand-description{font-size:16px;opacity:.75;max-width:400px;line-height:1.6;margin:0 auto;}
.form-panel{width:50%;background-color:var(--white);padding:40px;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;}
.login-form-container{max-width:400px;margin:0 auto;width:100%;}
.form-header{margin-bottom:30px;text-align:center;}
.form-header h2{font-size:28px;color:var(--text-dark);margin-bottom:10px;font-weight:600;}
.form-header p{color:var(--text-light);font-size:16px;margin-bottom:0;}
.form-group{margin-bottom:24px;position:relative;}
.form-group label{display:block;margin-bottom:8px;color:var(--text-light);font-size:14px;font-weight:500;}
.input-with-icon{position:relative;}
.input-with-domain{position:relative;display:flex;align-items:center;background-color:var(--bg-light);border:1px solid var(--border-color);border-radius:8px;transition:all .3s;}
.input-with-domain:focus-within{border-color:var(--primary-color);background-color:var(--white);box-shadow:0 0 0 3px rgba(0,188,212,0.1);}
.input-with-domain .input-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#adb5bd;z-index:1;}
.username-with-domain{flex:1;border:none!important;border-radius:8px 0 0 8px!important;padding-right:10px!important;background-color:transparent!important;box-shadow:none!important;}
.username-with-domain:focus{box-shadow:none!important;background-color:transparent!important;border:none!important;}
.domain-suffix{padding:12px 15px;background-color:rgba(0,188,212,0.1);color:var(--primary-dark);border-radius:0 8px 8px 0;font-size:16px;font-weight:500;white-space:nowrap;}
.input-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#adb5bd;z-index:1;}
.form-control{width:100%;padding:12px 15px 12px 45px;border:1px solid var(--border-color);border-radius:8px;background-color:var(--bg-light);color:var(--text-dark);font-size:16px;transition:all .3s;}
.form-control:focus{border-color:var(--primary-color);background-color:var(--white);box-shadow:0 0 0 3px rgba(0,188,212,0.1);outline:none;transform:translateY(-1px);}
select.form-control{padding-left:15px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.login-btn{width:100%;padding:14px;background-color:var(--primary-color);color:white;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;display:flex;justify-content:center;align-items:center;gap:10px;margin-top:10px;}
.login-btn:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,188,212,0.2);}
.login-btn:active{transform:translateY(0);}
.form-options{display:flex;justify-content:space-between;align-items:center;margin:20px 0;}
.form-check{display:flex;align-items:center;}
.form-check input{margin-right:8px;accent-color:var(--primary-color);}
.form-check label{font-size:14px;color:var(--text-light);margin-bottom:0;}
.forgot-password{color:var(--primary-color);text-decoration:none;font-size:14px;font-weight:500;transition:color .3s;}
.forgot-password:hover{color:var(--primary-dark);text-decoration:underline;}
.version-select{margin-top:30px;padding-top:20px;border-top:1px solid #eee;}
.version-select label{display:block;margin-bottom:8px;color:var(--text-light);font-size:14px;}
.info-section{margin-top:40px;display:flex;justify-content:space-evenly;gap:30px;}
.info-item{text-align:center;flex:1;max-width:150px;transition:transform .3s;text-decoration:none;}
.info-item:hover{transform:translateY(-5px);}
.info-icon{width:50px;height:50px;border-radius:50%;background-color:var(--primary-light);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--primary-color);font-size:20px;transition:all .3s;}
.info-item:hover .info-icon{background-color:var(--primary-color);color:white;}
.info-title{font-size:14px;font-weight:600;color:var(--text-dark);margin-bottom:5px;}
.info-text{font-size:12px;color:var(--text-light);}
.info-item.info-link{cursor:pointer;}
.error-message{background-color:#fff2f2;border-left:4px solid #ff3b3b;color:#d32f2f;padding:12px 15px;border-radius:4px;margin-bottom:20px;display:flex;align-items:center;gap:10px;font-size:14px;}
.whats-this-info,.unsupported-info{background-color:#fff;border:1px solid #ddd;border-radius:4px;padding:15px;margin-top:10px;font-size:14px;color:var(--text-light);box-shadow:0 4px 12px rgba(0,0,0,0.1);}
@media(max-width:992px){.login-container{flex-direction:column;height:auto;}
.brand-panel{width:100%;height:300px;padding:30px;}
.form-panel{width:100%;min-height:calc(100vh - 300px);}
}
@media(max-width:576px){.brand-panel{height:250px;padding:20px;}
.brand-panel img{width:80px;margin-bottom:15px;}
.brand-title{font-size:24px;}
.brand-subtitle{font-size:16px;margin-bottom:15px;}
.brand-description{display:none;}
.form-panel{padding:30px 20px;}
.form-header h2{font-size:24px;}
.info-section{flex-wrap:wrap;gap:20px;}
.info-item{flex:0 0 40%;max-width:40%;}
}
.mt-3{margin-top:1rem;}
:focus{outline:none;}
input[type="checkbox"]{width:16px;height:16px;border-radius:3px;cursor:pointer;}
.form-panel{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300BCD4' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
::placeholder{color:#adb5bd;opacity:.7;}
.form-group,.login-btn,.info-item{transition:all .3s ease;}
.form-control:focus{transform:translateY(-1px);}
.form-control.is-invalid{border-color:#dc3545;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:20px;}
.info-section{transition:all .3s ease;}
.info-item:hover .info-title{color:var(--primary-color);}
.modal-content{border:none;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,0.1);}
.modal-header{background-color:var(--primary-color);color:white;border-bottom:none;border-radius:12px 12px 0 0;padding:15px 20px;}
.modal-title{font-weight:600;font-size:18px;}
.modal-body{padding:25px 20px;}
.modal-body p{color:var(--text-dark);font-size:15px;line-height:1.5;margin-bottom:10px;}
.modal-footer{border-top:none;padding:15px 20px 20px;}
.modal-footer .btn{padding:10px 20px;font-weight:500;border-radius:8px;font-size:15px;transition:all .3s;}
.modal-footer .btn-secondary{background-color:#f1f3f5;color:var(--text-dark);border:none;}
.modal-footer .btn-secondary:hover{background-color:#e9ecef;}
.modal-footer .btn-primary{background-color:var(--primary-color);border:none;}
.modal-footer .btn-primary:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,188,212,0.2);}
.text-warning{color:#FFC107!important;}