:root{--primary:#E2E8F0;--secondary:#0F172A;--accent:#581C87;--purple:#CA8A04;--primary-transparent:rgba(226, 232, 240, 0.1);--secondary-transparent:rgba(30, 41, 59, 0.9);--accent-transparent:rgba(88, 28, 135, 0.2);--purple-transparent:rgba(202, 138, 4, 0.15)}body{background-color:var(--secondary);color:var(--primary);font-family:Inter,sans-serif;overflow-x:hidden;min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative}.hero{position:relative;display:flex;align-items:center;justify-content:center;width:100%;padding:2rem;min-height:100vh;background:radial-gradient(circle at 20% 20%,var(--primary-transparent) 0,transparent 50%),radial-gradient(circle at 80% 80%,var(--accent-transparent) 0,transparent 50%),radial-gradient(circle at 60% 30%,var(--purple-transparent) 0,transparent 30%);overflow:hidden}.hero::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1.5" fill="%23581C87" opacity="0.2"/></svg>');z-index:-1;opacity:.5;animation:15s ease-in-out infinite alternate backgroundPulse}@keyframes backgroundPulse{0%,100%{opacity:.5}50%{opacity:.7}}.grid-pattern{position:fixed;top:0;left:0;width:100%;height:100%;background-size:20px 20px;background-image:linear-gradient(to right,rgba(226,232,240,.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(226,232,240,.03) 1px,transparent 1px);z-index:-1;opacity:.4}.gradient-text{background:linear-gradient(135deg,var(--accent),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;transition:.3s}.login-container{width:100%;max-width:450px;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4);margin:1rem;animation:.8s ease-out fadeIn;position:relative;transition:transform .3s,box-shadow .3s;backdrop-filter:blur(10px);z-index:2;border:1px solid rgba(226,232,240,.15);background:rgba(30,41,59,.85)}.login-container:hover{transform:translateY(-8px);box-shadow:0 25px 70px rgba(0,0,0,.5)}.login-header{background:linear-gradient(135deg,var(--accent-transparent),var(--purple-transparent));padding:1.5rem 2rem;text-align:center;border-bottom:1px solid rgba(226,232,240,.1)}.login-header h1{font-size:2.2rem;font-weight:700;margin:.5rem 0;background:linear-gradient(135deg,var(--accent),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}.login-header p{color:rgba(226,232,240,.7);margin:.5rem 0 0;font-size:1rem}.login-body{padding:2.5rem;position:relative;z-index:1}.login-body::before{content:'';position:absolute;top:0;left:0;width:5px;height:100%;background:linear-gradient(135deg,var(--accent),var(--purple));border-radius:20px 0 0 20px;animation:3s ease-in-out infinite gradientPulse;z-index:-1}@keyframes gradientPulse{0%,100%{opacity:.7}50%{opacity:1}}@keyframes fadeIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.form-control{background-color:rgba(0,0,0,.3);color:var(--primary);border:1px solid var(--primary-transparent);border-radius:10px;height:50px;margin-bottom:1.5rem;transition:.3s;font-size:1rem;box-shadow:none;padding-left:1.2rem}.form-control:focus{background-color:rgba(0,0,0,.4);border-color:var(--accent);box-shadow:0 0 0 .25rem rgba(88,28,135,.25);color:var(--primary)}.form-control::placeholder{color:rgba(226,232,240,.5)}.btn-primary{background:linear-gradient(135deg,var(--accent),var(--purple));border:none;color:#fff;padding:.85rem 2rem;border-radius:10px;position:relative;overflow:hidden;transition:.4s cubic-bezier(.16, 1, .3, 1);font-weight:600;width:100%;box-shadow:0 4px 15px rgba(88,28,135,.3);height:50px;font-size:1.1rem}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(88,28,135,.4)}.btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:.6s}.btn-primary:hover::after{left:100%}.input-group{position:relative;display:flex;flex-wrap:nowrap;align-items:stretch;width:100%;margin-bottom:1.5rem}.input-group-text{background-color:rgba(0,0,0,.3);color:var(--primary);border:1px solid var(--primary-transparent);border-right:none;display:flex;align-items:center;justify-content:center;height:50px;width:50px;padding:0;border-radius:10px 0 0 10px}.input-group .form-control{border-left:none;border-radius:0 10px 10px 0;margin-bottom:0}.input-group i{font-size:1.1rem;transition:.3s}.input-group:focus-within i{color:var(--accent)}.academy-logo{width:180px;height:auto;opacity:1;filter:brightness(1.5) drop-shadow(0 0 15px rgba(226, 232, 240, .5));margin-bottom:1rem}.particles{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:-1}.particle{position:absolute;display:block;pointer-events:none;opacity:.4;animation:20s linear infinite floatParticle}.particle:first-child{width:6px;height:6px;background:var(--accent);border-radius:50%;top:20%;left:5%;animation-duration:45s;filter:blur(1px)}.particle:nth-child(2){width:8px;height:8px;background:var(--accent);border-radius:50%;top:50%;left:15%;animation-duration:55s;animation-delay:2s;filter:blur(1px)}.particle:nth-child(3){width:7px;height:7px;background:var(--purple);border-radius:50%;top:70%;left:30%;animation-duration:60s;animation-delay:5s;filter:blur(1px)}.particle:nth-child(4){width:10px;height:10px;background:var(--accent);border-radius:50%;top:35%;left:85%;animation-duration:70s;animation-delay:7s;filter:blur(1px)}.particle:nth-child(5){width:5px;height:5px;background:var(--purple);border-radius:50%;top:60%;left:75%;animation-duration:80s;animation-delay:1s;filter:blur(1px)}.particle:nth-child(6){width:6px;height:6px;background:var(--primary);border-radius:50%;top:80%;left:60%;animation-duration:90s;animation-delay:6s;filter:blur(1px)}@keyframes floatParticle{0%{transform:translateY(0) translateX(0) rotate(0)}25%{transform:translateY(-50px) translateX(50px) rotate(90deg)}50%{transform:translateY(-100px) translateX(-50px) rotate(180deg)}75%{transform:translateY(-50px) translateX(-100px) rotate(270deg)}100%{transform:translateY(0) translateX(0) rotate(360deg)}}