:root{--border-radius:13px;--box-shadow: rgba(149, 157, 165, .2) 0px 8px 24px;--box-shadow-variant:rgba(0, 0, 0, .16) 0px 1px 4px}.login{min-height:100vh;display:flex;position:relative;overflow:hidden;background:#fff}@media only screen and (min-width: 768px){.login{flex-direction:row}}.login .login__left{display:none;position:relative;width:50%;min-height:100vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 30%,#f093fb 60%,#4facfe 100%);background-size:400% 400%;animation:gradientShift 18s ease infinite;overflow:hidden}.login .login__left:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(139,92,246,.2) 0%,transparent 50%);animation:radialShift 15s ease infinite}@keyframes radialShift{0%,to{opacity:1}50%{opacity:.7}}@media only screen and (min-width: 768px){.login .login__left{display:flex}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.login .login__left .login__left-content{display:flex;flex-direction:column;justify-content:space-between;width:100%;padding:60px 50px;position:relative;z-index:1}.login .login__left .login__logo-area{color:#fff}.login .login__left .login__logo-icon{width:80px;height:80px;background:rgba(255,255,255,.08);backdrop-filter:blur(20px);border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:30px;font-size:36px;box-shadow:0 12px 40px #00000040,0 0 0 1px #ffffff26,inset 0 1px #fff3;position:relative;animation:logoFloat 6s ease-in-out infinite;transition:all .4s cubic-bezier(.4,0,.2,1);overflow:hidden}.login .login__left .login__logo-icon:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 16px 50px #0000004d,0 0 0 1px #fff3,inset 0 1px #ffffff4d}.login .login__left .login__logo-icon:hover .login__microsoft-logo{transform:scale(1.1)}@keyframes logoFloat{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(1deg)}50%{transform:translateY(-12px) rotate(0)}75%{transform:translateY(-8px) rotate(-1deg)}}.login .login__left .login__logo-icon .login__microsoft-logo{width:100%;height:100%;object-fit:contain;padding:8px;animation:logoPulse 3s ease-in-out infinite,logoShimmer 4s ease-in-out infinite;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)) brightness(1) saturate(1.1);transition:all .4s cubic-bezier(.4,0,.2,1);will-change:transform,filter,opacity}@keyframes logoPulse{0%,to{opacity:1;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)) brightness(1) saturate(1.1);transform:scale(1)}50%{opacity:.98;filter:drop-shadow(0 6px 18px rgba(255,255,255,.4)) brightness(1.2) saturate(1.2);transform:scale(1.03)}}@keyframes logoShimmer{0%{background-position:-200% center}50%{background-position:200% center}to{background-position:-200% center}}.login .login__left .login__logo-icon .login__microsoft-logo:hover{animation-play-state:paused;filter:drop-shadow(0 8px 24px rgba(255,255,255,.5)) brightness(1.3) saturate(1.3);transform:scale(1.08)}.login .login__left .login__logo-glow{position:absolute;width:100%;height:100%;border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.4),rgba(255,255,255,0));opacity:0;animation:logoGlow 3s ease-in-out infinite;pointer-events:none}@keyframes logoGlow{0%,to{opacity:0}50%{opacity:.6}}.login .login__left .login__title{font-size:48px;font-weight:800;margin:0 0 15px;line-height:1.2;background:linear-gradient(135deg,rgb(255,255,255) 0%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.7) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 30px rgba(255,255,255,.3);position:relative}.login .login__left .login__title .login__title-line{display:inline-block;animation:titleSlide 1s ease-out}@keyframes titleSlide{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.login .login__left .login__subtitle{font-size:18px;opacity:.95;margin:0 0 30px;font-weight:400;letter-spacing:.3px}.login .login__left .login__feature-list{display:flex;gap:20px;margin-top:30px}.login .login__left .login__feature-item{display:flex;align-items:center;gap:8px;padding:10px 18px;background:rgba(255,255,255,.15);backdrop-filter:blur(10px);border-radius:12px;font-size:14px;font-weight:500;border:1px solid rgba(255,255,255,.2);transition:all .3s ease}.login .login__left .login__feature-item:hover{background:rgba(255,255,255,.25);transform:translateY(-2px);box-shadow:0 8px 20px #00000026}.login .login__left .login__feature-item .login__feature-icon{font-size:18px}.login .login__left .login__animation-area{position:relative;width:100%;height:400px;display:flex;align-items:center;justify-content:center}.login .login__left .login__grid-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:50px 50px;opacity:.3;animation:gridMove 20s linear infinite;pointer-events:none}@keyframes gridMove{0%{transform:translate(0)}to{transform:translate(50px,50px)}}.login .login__left .login__floating-shapes{position:absolute;width:100%;height:100%}.login .login__left .login__shape{position:absolute;border-radius:12px;background:rgba(255,255,255,.15);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0000001a,inset 0 1px #ffffff4d;animation:shapeFloat 8s ease-in-out infinite;transition:all .3s ease}.login .login__left .login__shape:hover{background:rgba(255,255,255,.25);transform:scale(1.1)}.login .login__left .login__shape--0{width:80px;height:80px;border-radius:12px}.login .login__left .login__shape--1{width:60px;height:60px;border-radius:50%}.login .login__left .login__shape--2{width:100px;height:100px;border-radius:30% 70% 70% 30%/30% 30% 70% 70%}.login .login__left .login__shape--3{width:70px;height:70px;border-radius:12px;transform:rotate(45deg)}@keyframes shapeFloat{0%,to{transform:translateY(0) rotate(0);opacity:.6}50%{transform:translateY(-30px) rotate(180deg);opacity:1}}.login .login__left .login__neural-network{position:relative;width:320px;height:320px;z-index:2;filter:drop-shadow(0 0 20px rgba(255,255,255,.3));display:flex;flex-direction:column;align-items:center;justify-content:center}.login .login__left .login__animated-text{margin-top:40px;font-size:64px;font-weight:800;font-family:Courier New,Monaco,monospace;letter-spacing:4px;text-transform:uppercase;position:relative;display:inline-block}.login .login__left .login__typing-text{display:inline-block;background:linear-gradient(135deg,rgb(255,255,255) 0%,rgba(255,255,255,.9) 30%,rgba(139,92,246,.8) 60%,rgba(99,102,241,.9) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 40px rgba(255,255,255,.5),0 0 80px rgba(139,92,246,.4);position:relative;overflow:hidden;border-right:3px solid rgba(139,92,246,.9);white-space:nowrap;animation:typing 3.5s steps(11,end) infinite,blinkCursor .8s step-end infinite,textGlow 2s ease-in-out infinite;padding-right:8px}.login .login__left .login__typing-text:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmerText 2s ease-in-out infinite}@keyframes typing{0%{width:0}50%{width:100%}to{width:100%}}@keyframes blinkCursor{0%,to{border-color:transparent}50%{border-color:#8b5cf6e6}}@keyframes textGlow{0%,to{filter:drop-shadow(0 0 10px rgba(139,92,246,.5))}50%{filter:drop-shadow(0 0 20px rgba(139,92,246,.8)) drop-shadow(0 0 30px rgba(99,102,241,.6))}}@keyframes shimmerText{0%{transform:translate(-100%)}to{transform:translate(100%)}}.login .login__left .login__neural-svg{width:100%;height:100%}.login .login__left .login__neural-node{animation:neuralPulse 2.5s ease-in-out infinite;cursor:pointer;transition:r .3s ease}.login .login__left .login__neural-node:hover{r:14;opacity:1}.login .login__left .login__neural-connection{stroke-dasharray:200;stroke-dashoffset:200;animation:neuralDraw 3s ease-in-out infinite;opacity:.3;transition:opacity .3s ease}.login .login__left .login__neural-connection:hover{opacity:.7}@keyframes neuralPulse{0%,to{r:10;opacity:.7}50%{r:13;opacity:1}}@keyframes neuralDraw{0%{stroke-dashoffset:200;opacity:.2}50%{opacity:.5}to{stroke-dashoffset:0;opacity:.3}}.login .login__left .login__particles{position:absolute;top:0;left:0;width:100%;height:100%}.login .login__left .login__particle{position:absolute;width:5px;height:5px;background:rgba(255,255,255,.7);border-radius:50%;box-shadow:0 0 12px #fffc,0 0 20px #8b5cf666;animation:particleFloat infinite ease-in-out}@keyframes particleFloat{0%,to{transform:translateY(0) translate(0);opacity:.3}50%{transform:translateY(-40px) translate(20px);opacity:.8}}.login .login__right{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f8f9fa;padding:40px 20px}@media only screen and (min-width: 768px){.login .login__right{width:50%;padding:40px 60px}}.login .login__container{width:100%;max-width:450px}.login .login__container .login__form{background:#fff;border-radius:16px;padding:52px 44px;box-shadow:0 20px 60px #0000001f,0 0 0 1px #0000000a;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.login .login__container .login__form:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2,#4facfe);background-size:200% 100%;animation:shimmer 3s ease infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.login .login__container .login__form:hover{transform:translateY(-2px);box-shadow:0 24px 70px #00000026,0 0 0 1px #0000000a}.login .login__container .login__form-header{margin-bottom:32px;text-align:center}.login .login__container .login__form-title{font-size:36px;font-weight:800;margin:0 0 10px;color:#1a1a1a;letter-spacing:-.5px;background:linear-gradient(135deg,#1a1a1a 0%,#4b5563 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login .login__container .login__form-description{font-size:15px;color:#6b7280;margin:0;font-weight:400}.login .login__container .login__from-input{width:100%;margin-bottom:28px;position:relative}.login .login__container button{width:100%;transition:all .3s ease;position:relative;overflow:hidden}.login .login__container button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.login .login__container button:hover:before{left:100%}.login .login__container button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.login .login__loading{animation:login-loading infinite .5s ease}@keyframes login-loading{0%{transform:rotate(0)}25%{transform:rotate(10deg)}50%{transform:rotate(20deg)}75%{transform:rotate(-10deg)}to{transform:rotate(-20deg)}}