:root{--primary:#0A4DA2;--primary-light:#166FE5;--primary-dark:#083A7A;--secondary:#36BFFA;--accent:#36BFFA;--gray-50:#F9FAFB;--gray-100:#F3F4F6;--gray-200:#E5E7EB;--gray-300:#D1D5DB;--gray-600:#4B5563;--gray-800:#1F2937;--white:#FFFFFF;--shadow-sm:0 2px 8px rgba(0,0,0,0.05);--shadow:0 10px 30px rgba(0,0,0,0.08);--shadow-lg:0 15px 40px rgba(0,0,0,0.12);--radius:20px;--radius-sm:12px;--transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}*{margin:0;padding:0;box-sizing:border-box}body{line-height:1.42857143;font-family:'Inter',sans-serif;background-color:var(--gray-50);background-image:radial-gradient(circle at 10% 20%,rgba(10,77,162,0.04) 0%,transparent 20%),radial-gradient(circle at 90% 80%,rgba(54,191,250,0.04) 0%,transparent 20%);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:15px;overflow-x:hidden}.login-container{width:100%;max-width:1300px;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-wrap:wrap;position:relative;transition:transform 0.5s ease,box-shadow 0.5s ease;min-height:600px}.login-banner{flex:1 1 500px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:var(--white);padding:40px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;min-height:600px}.banner-bg{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0.1}.banner-pattern{position:absolute;top:0;left:0;width:100%;height:100%;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='%23ffffff' fill-opacity='0.05'%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");animation:patternMove 15s linear infinite}@keyframes patternMove{0%{background-position:0 0}100%{background-position:60px 60px}}.banner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(10,77,162,0.92) 0%,rgba(8,58,122,0.96) 100%);z-index:1}.banner-content{position:relative;z-index:2;max-height:calc(100% - 60px)}.banner-logo{display:flex;align-items:center;margin-bottom:30px}.custom-logo{width:60px;height:60px;background-color:var(--white);border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,0.2);margin-right:18px;transition:transform 0.3s ease,box-shadow 0.3s ease}.banner-logo:hover .custom-logo{transform:rotate(5deg) scale(1.05);box-shadow:0 10px 28px rgba(0,0,0,0.25)}.logo-icon{width:32px;height:32px;position:relative}.banner-logo h1{font-size:32px;font-weight:700;margin:0;letter-spacing:-0.8px;text-shadow:0 2px 4px rgba(0,0,0,0.1)}.banner-intro h2{font-size:34px;font-weight:700;margin-bottom:18px;line-height:1.25;position:relative;display:inline-block}.banner-intro h2::after{content:'';position:absolute;left:0;bottom:-10px;width:70px;height:4px;background-color:var(--accent);border-radius:2px;animation:growLine 1s ease-out forwards}@keyframes growLine{from{width:0}to{width:70px}}.banner-intro p{font-size:15px;opacity:0.92;margin-bottom:35px;line-height:1.6;max-width:100%}.feature-list{list-style:none;margin-bottom:20px;width:100%}.feature-item{background:rgba(255,255,255,0.08);border-radius:12px;padding:16px 20px;margin-bottom:14px;display:flex;align-items:flex-start;transition:all 0.4s ease;border:1px solid transparent;width:100%;box-sizing:border-box}.feature-item:hover{background:rgba(255,255,255,0.12);transform:translateY(-3px);border-color:rgba(255,255,255,0.15);box-shadow:0 6px 18px rgba(0,0,0,0.1)}.feature-item i{width:32px;height:32px;background:rgba(255,255,255,0.2);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-right:14px;flex-shrink:0;transition:all 0.3s ease;font-size:16px}.feature-item:hover i{background:var(--accent);transform:scale(1.05)}.feature-content{flex:1;width:calc(100% - 46px)}.feature-title{font-weight:600;margin-bottom:4px;font-size:15px}.feature-desc{font-size:12px;opacity:0.85;line-height:1.4;word-wrap:break-word}.banner-footer{position:relative;z-index:2;font-size:12px;opacity:0.7;padding-top:15px;border-top:1px solid rgba(255,255,255,0.1)}.login-form-wrapper{flex:1 1 400px;padding:40px;display:flex;flex-direction:column;justify-content:center;position:relative;min-height:600px}.decor-element{position:absolute;border-radius:50%;filter:blur(60px);z-index:0}.decor-1{top:-80px;right:-80px;width:220px;height:220px;background:rgba(10,77,162,0.08)}.decor-2{bottom:-60px;left:-60px;width:180px;height:180px;background:rgba(54,191,250,0.08)}.form-card{background:var(--white);border-radius:var(--radius);padding:35px;box-shadow:var(--shadow);position:relative;z-index:1;border:1px solid rgba(0,0,0,0.03);width:100%;max-width:450px;margin:0 auto}.form-header{margin-bottom:35px;text-align:center;position:relative}.form-header h3{font-size:26px;font-weight:600;color:var(--gray-800);margin-bottom:10px;position:relative;display:inline-block}.form-header h3::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:40px;height:3px;background-color:var(--primary);border-radius:3px}.form-header p{font-size:14px;color:var(--gray-600);max-width:360px;margin:0 auto;line-height:1.5}.form-group{position:relative;margin-bottom:22px}.form-group label{position:absolute;left:55px;top:50%;transform:translateY(-50%);color:var(--gray-600);font-size:15px;pointer-events:none;transition:all 0.3s ease;padding:0 5px;background:var(--white);z-index:1}.form-group input:focus + label,.form-group input:not(:placeholder-shown) + label{top:0;font-size:12px;color:var(--primary)}.form-group i{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--gray-600);font-size:18px;transition:color 0.3s ease;z-index:2}.form-control:focus + i{color:var(--primary)}.form-control{height:54px;padding:0 20px 0 55px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-size:15px;transition:all 0.3s ease;background-color:var(--white);box-shadow:var(--shadow-sm);color:var(--gray-800)}.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(10,77,162,0.1);outline:none}.form-control::placeholder{color:transparent}.remember-me{display:flex;align-items:center;margin-bottom:25px;padding-left:2px}.form-check-input{width:18px;height:18px;margin-right:10px;border:2px solid var(--gray-300);transition:all 0.2s ease;border-radius:6px;cursor:pointer;appearance:none;position:relative;background-color:var(--white)}.form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}.form-check-input:checked::after{content:'\f00c';font-family:'FontAwesome'!important;font-weight:900;color:white;font-size:12px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-check-input:not(:checked):hover{border-color:var(--gray-400);box-shadow:0 0 0 3px rgba(10,77,162,0.05)}.form-check-label{font-size:14px;color:var(--gray-600);cursor:pointer;transition:color 0.3s ease}.form-check-label:hover{color:var(--primary)}.btn-login{width:100%;height:54px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:var(--white);border:none;border-radius:var(--radius-sm);font-size:16px;font-weight:600;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(10,77,162,0.2);position:relative;overflow:hidden;cursor:pointer}.btn-login::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:all 0.8s ease}.btn-login:hover::before{left:100%}.btn-login:hover{background:linear-gradient(135deg,var(--primary-light) 0%,var(--primary) 100%);color:var(--white);transform:translateY(-3px);box-shadow:0 10px 22px rgba(10,77,162,0.25)}.form-footer{display:none}.label.error{position:absolute;bottom:-22px;left:0;font-size:12px;color:#F56C6C;margin-left:55px;display:flex;align-items:center;animation:fadeIn 0.3s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media (max-width:1024px){.login-banner{flex:1 1 450px}.banner-intro h2{font-size:30px}}@media (max-width:900px){.login-container{flex-direction:column;min-height:auto}.login-banner,.login-form-wrapper{min-height:auto}}@media (max-width:576px){body{padding:0}.login-container{border-radius:0;box-shadow:none}.login-banner{display:none}.login-form-wrapper{padding:30px 15px;min-height:100vh}.form-card{padding:25px 15px}}input[type=checkbox],input[type=radio]{margin:0px 5px 0px 0px}.form-check-label{margin:0px}.fa{font-family:'FontAwesome'!important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.form-control.error{border-color:#F56C6C!important;box-shadow:0 0 0 4px rgba(245,108,108,0.1)!important}.error-message{display:none!important}