.login{.login-container{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:100vh;.brand-div{background:-webkit-linear-gradient(315deg,#3b82f6 0%,#1e40af 100%);background:linear-gradient(135deg,#3b82f6 0%,#1e40af 100%);padding:3.75rem 2.5rem;position:relative;overflow:hidden;&::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)" /></svg>');opacity:0.3;}.brand-content{position:relative;z-index:2;text-align:center;max-width:25rem;#brand-logo-img{width:7.5rem;height:7.5rem;margin:0 auto 2rem;background:#ffffff26;-webkit-backdrop-filter:blur(0.625rem);backdrop-filter:blur(0.625rem);border-radius:1.5rem;border:0.125rem solid #ffffff33;-o-object-fit:contain;object-fit:contain;-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1);}.brand-title{font-size:2rem;font-weight:800;color:white;margin-bottom:1rem;letter-spacing:-0.03125rem;}.brand-subtitle{font-size:1.125rem;color:#ffffffe6;margin-bottom:3rem;font-weight:500;line-height:1.5;}.brand-features{gap:1rem;.feature-item{gap:0.75rem;color:#ffffffe6;font-size:1rem;font-weight:500;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease,-webkit-transform 0.3s ease;cursor:pointer;&:hover{-webkit-transform:translateX(0.625rem);transform:translateX(0.625rem);}i{width:1.25rem;height:1.25rem;color:#ffffffcc;}}}}}.login-div{background:white;padding:3.75rem 2.5rem;.login-form-container{width:100%;max-width:25rem;.login-header{text-align:center;margin-bottom:2.5rem;.login-title{font-size:1.75rem;font-weight:700;color:#1a1a1a;margin-bottom:0.5rem;letter-spacing:-0.03125rem;}.login-subtitle{font-size:1rem;color:#6b7280;font-weight:500;}}.login-form{gap:1rem;.form-group{gap:0.5rem;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease,-webkit-transform 0.3s ease;&.input-focused{-webkit-transform:translateY(-0.125rem);transform:translateY(-0.125rem);}.form-label{font-size:0.875rem;font-weight:600;color:#374151;}.form-input{padding:0.75rem 1rem;border:0.125rem solid #e5e7eb;border-radius:0.75rem;font-size:1rem;background:white;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;outline:none;&:focus{border-color:#3b82f6;box-shadow:0 0 0 0.25rem #3b82f61a;}&::-webkit-input-placeholder{color:#9ca3af;}&::-moz-placeholder{color:#9ca3af;}&:-ms-input-placeholder{color:#9ca3af;}&::placeholder{color:#9ca3af;}}.captcha-group{gap:0.75rem;.captcha-input{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}.captcha-image{width:7.5rem;height:3rem;background:#f3f4f6;border:0.125rem solid #e5e7eb;border-radius:0.5rem;font-size:1.125rem;font-weight:600;color:#3b82f6;letter-spacing:0.125rem;cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;&:hover{border-color:#3b82f6;background:#f0f9ff;}}}.captcha-refresh{font-size:0.75rem;color:#6b7280;text-align:center;margin-top:0.25rem;}}.login-btn{padding:1rem 1.5rem;background:-webkit-linear-gradient(315deg,#3b82f6 0%,#1e40af 100%);background:linear-gradient(135deg,#3b82f6 0%,#1e40af 100%);color:white;border:none;border-radius:0.75rem;font-size:1rem;font-weight:600;cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;box-shadow:0 0.25rem 0.75rem #3b82f64d;position:relative;&:hover{background:-webkit-linear-gradient(315deg,#2563eb 0%,#1d4ed8 100%);background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);-webkit-transform:translateY(-0.125rem);transform:translateY(-0.125rem);box-shadow:0 0.375rem 1.25rem #3b82f666;}&:active{-webkit-transform:translateY(0);transform:translateY(0);}&.loading{opacity:0.7;pointer-events:none;&::after{content:'';position:absolute;top:50%;left:50%;width:1.25rem;height:1.25rem;margin:-0.625rem 0 0 -0.625rem;border:0.125rem solid transparent;border-top-color:currentColor;border-radius:50%;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;}}&.login-success{background:-webkit-linear-gradient(315deg,#10b981 0%,#059669 100%);background:linear-gradient(135deg,#10b981 0%,#059669 100%);}}}.action-buttons{gap:0.75rem;margin-top:2rem;.action-btn{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding:0.25rem 1rem;border:0.125rem solid #3b82f6;border-radius:0.625rem;font-size:0.875rem;font-weight:600;cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;text-align:center;text-decoration:none;gap:0.5rem;&.btn-clicked{-webkit-transform:translateY(0.125rem);transform:translateY(0.125rem);}&.primary{background:#3b82f6;color:white;&:hover{background:#2563eb;border-color:#2563eb;-webkit-transform:translateY(-0.0625rem);transform:translateY(-0.0625rem);}}&.secondary{background:white;color:#3b82f6;&:hover{background:#f0f9ff;-webkit-transform:translateY(-0.0625rem);transform:translateY(-0.0625rem);}}i{width:1rem;height:1rem;}}}.login-options{margin-top:1.5rem;padding-top:1.5rem;border-top:0.0625rem solid #f3f4f6;.option-link{color:#3b82f6;text-decoration:none;font-size:0.875rem;font-weight:500;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;padding:0.5rem 1rem;border-radius:0.5rem;cursor:pointer;&:hover{color:#1e40af;background:#3b82f61a;}}}}}}}@media (max-width:64rem){.login{.login-container{grid-template-columns:1fr;.brand-div{min-height:40vh;padding:2.5rem 1.25rem;.brand-content{#brand-logo-img{width:6.25rem;height:6.25rem;margin-bottom:1.5rem;}.brand-title{font-size:1.75rem;}.brand-subtitle{font-size:1rem;margin-bottom:2rem;}}}.login-div{padding:2.5rem 1.25rem;.login-form-container{.login-header{.login-title{font-size:1.5rem;}}}}}}}@media (max-width:48rem){.login{.login-container{.brand-div{min-height:30vh;padding:1.875rem 1rem;}.login-div{padding:1.875rem 1rem;.login-form-container{.action-buttons{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.login-form{.form-group{.captcha-group{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;.captcha-image{width:100%;height:2.75rem;}}}}}}}}}@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translateY(1.875rem);transform:translateY(1.875rem);}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}}@keyframes fadeInUp{from{opacity:0;-webkit-transform:translateY(1.875rem);transform:translateY(1.875rem);}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}}.fade-in-up{-webkit-animation:fadeInUp 0.6s ease-out;animation:fadeInUp 0.6s ease-out;}@-webkit-keyframes slideInLeft{from{opacity:0;-webkit-transform:translateX(-1.875rem);transform:translateX(-1.875rem);}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}}@keyframes slideInLeft{from{opacity:0;-webkit-transform:translateX(-1.875rem);transform:translateX(-1.875rem);}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}}.slide-in-left{-webkit-animation:slideInLeft 0.6s ease-out;animation:slideInLeft 0.6s ease-out;}@-webkit-keyframes slideInRight{from{opacity:0;-webkit-transform:translateX(1.875rem);transform:translateX(1.875rem);}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}}@keyframes slideInRight{from{opacity:0;-webkit-transform:translateX(1.875rem);transform:translateX(1.875rem);}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}}.slide-in-right{-webkit-animation:slideInRight 0.6s ease-out;animation:slideInRight 0.6s ease-out;}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}.visible{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}