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