.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#0a0a0f}.login-background{position:absolute;inset:0;z-index:0}.bg-gradient{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 20%,rgba(0,210,255,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(123,67,151,.15) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(58,123,213,.1) 0%,transparent 70%);animation:gradientShift 15s ease infinite}@keyframes gradientShift{0%,to{opacity:1}50%{opacity:.7}}.bg-shapes{position:absolute;inset:0;overflow:hidden}.shape{position:absolute;border-radius:50%;filter:blur(60px);opacity:.4;animation:float 20s ease-in-out infinite}.shape-1{width:400px;height:400px;background:linear-gradient(135deg,#00d2ff,#3a7bd5);top:-100px;left:-100px;animation-delay:0s}.shape-2{width:300px;height:300px;background:linear-gradient(135deg,#7b4397,#dc2430);bottom:-50px;right:-50px;animation-delay:-5s}.shape-3{width:200px;height:200px;background:linear-gradient(135deg,#f093fb,#f5576c);top:50%;left:50%;animation-delay:-10s}.shape-4{width:150px;height:150px;background:linear-gradient(135deg,#4facfe,#00f2fe);top:20%;right:20%;animation-delay:-7s}.shape-5{width:250px;height:250px;background:linear-gradient(135deg,#43e97b,#38f9d7);bottom:20%;left:20%;animation-delay:-12s}@keyframes float{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(30px,-30px) rotate(5deg)}50%{transform:translate(-20px,20px) rotate(-5deg)}75%{transform:translate(20px,30px) rotate(3deg)}}.bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:50px 50px;animation:gridMove 20s linear infinite}@keyframes gridMove{0%{transform:translate(0)}to{transform:translate(50px,50px)}}.login-card-wrapper{position:relative;z-index:10;width:100%;max-width:420px;padding:20px}.login-card{position:relative;background:#ffffff0d;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:48px 40px;overflow:hidden;animation:cardAppear .8s ease-out}@keyframes cardAppear{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.card-glow{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(0,210,255,.3),transparent,rgba(123,67,151,.3),transparent);animation:glowRotate 10s linear infinite;opacity:.5}@keyframes glowRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.card-content{position:relative;z-index:1}.logo-section{text-align:center;margin-bottom:36px}.logo-icon{width:80px;height:80px;margin:0 auto 16px;animation:iconFloat 3s ease-in-out infinite}@keyframes iconFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.logo-svg{width:100%;height:100%}.check-path{stroke-dasharray:100;stroke-dashoffset:100;animation:drawCheck 1s ease forwards .5s}@keyframes drawCheck{to{stroke-dashoffset:0}}.title{font-size:28px;font-weight:700;background:linear-gradient(135deg,#fff,#a0a0a0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 8px;letter-spacing:2px}.subtitle{font-size:14px;color:#ffffff80;margin:0;letter-spacing:1px}.login-form{display:flex;flex-direction:column;gap:20px}.form-group,.input-wrapper{position:relative}.input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#ffffff80;width:20px;height:20px;z-index:1;transition:color .3s}.input-wrapper:focus-within .input-icon{color:#00d2ff}.animated-input{width:100%;padding:16px 50px 16px 52px!important;font-size:16px!important;color:#fff!important;background:#ffffff0d!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:12px!important;outline:none;height:auto!important;line-height:1.5;transition:all .3s}.animated-input:focus{background:#ffffff1a!important;border-color:#00d2ff80!important;box-shadow:0 0 20px #00d2ff33!important}.animated-label{position:absolute;left:52px;top:50%;transform:translateY(-50%);color:#ffffff80;font-size:16px;pointer-events:none;transition:all .3s}.animated-input:not(:-moz-placeholder)+.animated-label{top:0;font-size:12px;color:#00d2ff;background:#1a1a2e;padding:0 8px}.animated-input:focus+.animated-label,.animated-input:not(:placeholder-shown)+.animated-label{top:0;font-size:12px;color:#00d2ff;background:#1a1a2e;padding:0 8px}.input-line{position:absolute;bottom:0;left:50%;width:0;height:2px;background:linear-gradient(90deg,#00d2ff,#7b4397);transition:all .3s;border-radius:2px}.input-wrapper:focus-within .input-line{left:0;width:100%}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#ffffff80;transition:color .3s}.password-toggle:hover{color:#00d2ff}.password-toggle svg{width:20px;height:20px}.login-button{height:52px;font-size:16px;font-weight:600;border-radius:12px;background:linear-gradient(135deg,#00d2ff,#3a7bd5,#7b4397);background-size:200% 200%;border:none;color:#fff;cursor:pointer;transition:all .3s;animation:gradientMove 3s ease infinite;margin-top:8px}@keyframes gradientMove{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.login-button:hover{transform:translateY(-2px);box-shadow:0 10px 30px #00d2ff66}.login-button:active{transform:translateY(0)}.footer-links{text-align:center;margin-top:24px}.version{font-size:12px;color:#ffffff4d;letter-spacing:2px}.particles{position:absolute;inset:0;pointer-events:none;z-index:1}.particle{position:absolute;width:4px;height:4px;background:#fff9;border-radius:50%;animation:particleFloat 15s infinite}.particle:nth-child(1){left:10%;top:20%;animation-delay:0s}.particle:nth-child(2){left:20%;top:80%;animation-delay:-3s}.particle:nth-child(3){left:60%;top:10%;animation-delay:-6s}.particle:nth-child(4){left:80%;top:60%;animation-delay:-9s}.particle:nth-child(5){left:90%;top:30%;animation-delay:-12s}@keyframes particleFloat{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(-100vh) scale(.5);opacity:0}}.character-container{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:10px 0;transition:transform .3s ease}.character-svg{width:120px;height:120px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.2))}.character-tilt{transform:rotate(-15deg) translate(-10px)}.character-hands-up{animation:handsUp .5s ease forwards}@keyframes handsUp{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-5deg)}to{transform:translateY(-5px) rotate(-3deg)}}.left-hand{animation:leftHandCover .4s ease forwards;transform-origin:center}.right-hand{animation:rightHandCover .4s ease forwards;transform-origin:center;animation-delay:.05s}@keyframes leftHandCover{0%{transform:translate(-60px) rotate(-30deg);opacity:0}to{transform:translate(0) rotate(0);opacity:1}}@keyframes rightHandCover{0%{transform:translate(60px) rotate(30deg);opacity:0}to{transform:translate(0) rotate(0);opacity:1}}.eyes-peeking{animation:nervousShake .3s ease infinite}@keyframes nervousShake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.eyes .pupil{transition:cx .1s ease-out,cy .1s ease-out}.eyes.blinking{animation:blink .15s ease-in-out}@keyframes blink{0%,to{transform:scaleY(1)}50%{transform:scaleY(.1)}}.speech-bubble{position:absolute;top:-30px;right:-80px;background:#fffffff2;color:#333;padding:8px 16px;border-radius:20px;font-size:12px;white-space:nowrap;animation:bounceIn .5s ease;box-shadow:0 4px 12px #00000026}.speech-bubble:before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);border:8px solid transparent;border-right-color:#fffffff2}.speech-bubble.hands-up{background:linear-gradient(135deg,#ffe5d9,#ffcdb2);color:#d4806e;font-weight:600;right:-55px;top:-5px;animation:bounceIn .5s ease,bubbleShake .5s ease infinite;border:2px solid #FFB6C1;padding:6px 12px;font-size:11px}.speech-bubble.hands-up:before{border-right-color:#ffe5d9}@keyframes bubbleShake{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3) translateY(20px)}50%{transform:scale(1.05) translateY(-5px)}to{opacity:1;transform:scale(1) translateY(0)}}@media(max-width:480px){.login-card{padding:32px 24px;margin:16px}.title{font-size:24px}.logo-icon{width:64px;height:64px}.character-svg{width:100px;height:100px}.speech-bubble{right:-60px;font-size:10px;padding:6px 12px}}