body {
     margin: 0;
     font-family: 'Segoe UI', sans-serif;
     background: linear-gradient(135deg, #ff9a9e, #fad0c4, #a1c4fd, #c2e9fb, #fbc2eb, #a6c1ee);
     background-size: 400% 400%;
     animation: gradientBG 10s ease infinite;
     position: relative;
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
}
 @keyframes gradientBG {
     0% {
        background-position: 0% 50%;
    }
     50% {
        background-position: 100% 50%;
    }
     100% {
        background-position: 0% 50%;
    }
}
 body::before {
     content: "";
     position: absolute;
     inset: 0;
     background-image: linear-gradient(135deg, #e6ccff, #f3e6ff, #f9f0ff);
     background-repeat: repeat;
     background-size: 150px;
     opacity: 0.08;
     z-index: 0;
     animation: moveLogos 45s linear infinite;
}
 @keyframes moveLogos {
     0% {
         background-position: -300px 0;
    }
     100% {
         background-position: 300px 0;
    }
}
 header {
     position: absolute;
     top: 0;
     width: 100%;
     background-color: #003366;
     color: white;
     padding: 12px;
     text-align: center;
     font-size: 20px;
     font-weight: bold;
     letter-spacing: 1px;
     z-index: 2;
     box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
 .login-box {
     background-color: rgba(255, 255, 255, 0.95);
     padding: 45px 45px;
     border-radius: 80px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     text-align: center;
     width: 90%;
     max-width: 380px;
     z-index: 2;
}
 .login-box h2 {
     margin-bottom: 25px;
     color: #0057b3;
     font-size: 36px;
}
 input {
     width: 90%;
     padding: 15px;
     margin: 10px 0;
     font-size: 16px;
     border-radius: 55px;
     border: 1px solid #ccc;
     outline: none;
     transition: border 0.3s;
}
 input:focus {
     border-color: #007bff;
}
 button {
     background-color: #007bff;
     color: white;
     padding: 12px;
     width: 100%;
     border: none;
     border-radius: 25px;
     font-size: 16px;
     cursor: pointer;
     margin-top: 10px;
     transition: background 0.3s;
}
 button:hover {
     background-color: #0056b3;
}
 button:disabled {
     background-color: #ccc;
     cursor: not-allowed;
     opacity: 0.6;
}
 .error {
     color: red;
     font-size: 14px;
     margin-top: 8px;
}
 @media (max-width: 420px) {
     header {
         font-size: 16px;
         padding: 10px;
    }
     .login-box {
         padding: 25px 20px;
    }
     .login-box h2 {
         font-size: 22px;
    }
}
 @keyframes gravityFall {
     0% {
         transform: translateY(0px) rotate(0deg);
    }
     50% {
         transform: translateY(300px) rotate(10deg);
    }
     70% {
         transform: translateY(-20px) rotate(-5deg);
    }
     85% {
         transform: translateY(10px) rotate(2deg);
    }
     100% {
         transform: translateY(0px) rotate(0deg);
    }
}