.modern-login-container{font-family:var(--main-font, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);min-height:100vh;background:linear-gradient(135deg,var(--main-color2,#667eea) 0,var(--main-color) 100%);background-size:400% 400%;animation:gradient-shift 6s ease infinite;display:flex;align-items:center;justify-content:center;padding:20px}@keyframes gradient-shift{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}.modern-login-card{background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.15);overflow:hidden;max-width:450px;width:100%;transition:all .3s ease;animation:card-entrance .8s ease-out}@keyframes card-entrance{from{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modern-login-card:hover{transform:translateY(-5px);box-shadow:0 25px 70px rgba(0,0,0,.2)}.modern-login-header{background:linear-gradient(135deg,var(--main-color) 0,var(--main-color2,#667eea) 100%);padding:40px 30px;text-align:center;color:#fff;position:relative;overflow:hidden}.modern-login-header::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0,transparent 70%);animation:shimmer 4s ease-in-out infinite}@keyframes shimmer{0%,100%{transform:rotate(0)}50%{transform:rotate(180deg)}}.modern-login-logo{width:80px;height:80px;border-radius:50%;border:3px solid rgba(255,255,255,.3);margin:0 auto 20px;display:flex;align-items:center;justify-content:center;background:#fff;backdrop-filter:blur(10px)}.modern-login-logo img{max-width:60px;max-height:60px;border-radius:50%}.modern-login-title{font-size:28px;font-weight:600;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.2)}.modern-login-subtitle{font-size:16px;margin:8px 0 0 0;opacity:.9;font-weight:300}.modern-login-body{padding:40px 30px}.modern-form-group{margin-bottom:25px;position:relative}.modern-form-label{display:block;font-weight:600;color:#333;margin-bottom:8px;font-size:14px;text-transform:uppercase;letter-spacing:.5px}.modern-form-input{width:100%;padding:15px 20px;border:2px solid #e0e6ed;border-radius:12px;font-size:16px;transition:all .3s ease;background:#f8f9fa;box-sizing:border-box}.modern-form-input:focus{outline:0;border-color:var(--main-color);background:#fff;box-shadow:0 0 0 3px rgba(var(--main-color),.1);transform:translateY(-2px)}.modern-form-input:hover{border-color:#c0c7d0;background:#fff}.modern-form-input:required:invalid{border-color:#e74c3c}.modern-form-input:required:valid{border-color:#27ae60}.modern-login-button{width:100%;padding:16px;background:linear-gradient(135deg,var(--main-color) 0,var(--main-color2,#667eea) 100%);border:none;border-radius:12px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;text-transform:uppercase;letter-spacing:1px}.modern-login-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.3);background:linear-gradient(135deg,var(--main-color2,#667eea) 0,var(--main-color) 100%)}.modern-login-button:active{transform:translateY(0)}.modern-login-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.modern-login-button::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.modern-login-button:hover::before{left:100%}.modern-loading-spinner{display:inline-block;width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite;margin-right:10px}@keyframes spin{to{transform:rotate(360deg)}}.modern-recaptcha-container{margin:25px 0;display:flex;justify-content:center}.modern-recaptcha-container .g-recaptcha{border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.1)}.modern-login-footer{text-align:center;padding:20px 30px;background:#f8f9fa;border-top:1px solid #e9ecef}.modern-forgot-link{color:var(--main-color);text-decoration:none;font-weight:500;transition:all .3s ease;display:inline-flex;align-items:center;gap:5px}.modern-forgot-link:hover{color:var(--main-color,#667eea);text-decoration:underline;transform:translateY(-1px)}.modern-alert{padding:15px 20px;border-radius:8px;margin-bottom:20px;font-weight:500;animation:alert-slide-in .3s ease}@keyframes alert-slide-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.modern-alert.error{background:linear-gradient(135deg,#fee 0,#fdd 100%);color:#c53030;border-left:4px solid #e53e3e}.modern-alert.success{background:linear-gradient(135deg,#f0fff4 0,#e6ffed 100%);color:#276749;border-left:4px solid #38a169}.modern-alert.info{background:linear-gradient(135deg,#ebf8ff 0,#bee3f8 100%);color:#2c5282;border-left:4px solid #3182ce}.security-indicators{display:flex;justify-content:space-around;padding:20px 0;margin-top:20px;border-top:1px solid #e9ecef}.security-indicator{text-align:center;color:#6c757d;font-size:12px}.security-indicator i{font-size:20px;color:var(--main-color);margin-bottom:5px;display:block}@media (max-width:768px){.modern-login-container{padding:10px}.modern-login-card{margin:0;border-radius:15px}.modern-login-header{padding:30px 20px}.modern-login-body{padding:30px 20px}.modern-login-title{font-size:24px}.modern-recaptcha-container .g-recaptcha{transform:scale(.85);transform-origin:center}}@media (max-width:480px){.modern-login-header{padding:25px 15px}.modern-login-body{padding:25px 15px}.modern-login-title{font-size:22px}.modern-recaptcha-container .g-recaptcha{transform:scale(.75)}}.modern-form-input.error{border-color:#e53e3e;background:#fed7d7}.modern-form-input.success{border-color:#38a169;background:#f0fff4}.modern-form-group{animation:form-element-enter .5s ease-out forwards;opacity:0}.modern-form-group:nth-child(1){animation-delay:.1s}.modern-form-group:nth-child(2){animation-delay:.2s}.modern-form-group:nth-child(3){animation-delay:.3s}.modern-form-group:nth-child(4){animation-delay:.4s}@keyframes form-element-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modern-form-input:focus{outline:2px solid var(--main-color);outline-offset:2px}.modern-login-button:focus{outline:2px solid var(--main-color,#667eea);outline-offset:2px}.password-field{position:relative}.password-input-wrapper{position:relative;display:flex;align-items:center}.password-input{padding-right:50px!important}.password-toggle{position:absolute;right:15px;top:50%;transform:translateY(-50%);background:0 0;border:none;color:var(--main-color,#667eea);font-size:18px;cursor:pointer;transition:all .3s ease;z-index:10;padding:5px;border-radius:4px}.password-toggle:hover{color:var(--main-color2,#764ba2);transform:translateY(-50%) scale(1.1);background:rgba(var(--main-color-rgb,102,126,234),.1)}.password-toggle:focus{outline:2px solid var(--main-color,#667eea);outline-offset:2px}.password-toggle i{transition:all .3s ease}.password-toggle.active i:before{content:"\f070"}.password-toggle:not(.active) i:before{content:"\f06e"}