/* Global box-sizing for consistent layout */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }

 :root {
    --main-color-darkest: #6A6DBD;
    --main-color-dark: #6A6DBD;
    --main-color-medium: #6A6DBD;
    --main-color-light: #6A6DBD;
    --main-color-lighter: #6A6DBD;

    --gradient-start: var(--main-color-darkest);
    --gradient-end: var(--main-color-medium);
 }


 body {
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     font-family: 'Inter', sans-serif;

        /* Fondo animado con tonos azul elegantes */
        background: linear-gradient(270deg,
            var(--main-color-darkest),
            var(--main-color-dark),
            var(--main-color-medium),
            var(--main-color-light),
            var(--main-color-lighter));

     background-size: 800% 800%;
     animation: gradientBackground 25s ease infinite alternate;
     color: #fff;
     overflow: hidden;
 }


 @keyframes gradientBackground {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }

 .login-container {
     background-color: rgba(255, 255, 255, 0.1);
     /* Slightly transparent white */
     padding: 40px;
     border-radius: 1.5rem;
     /* More rounded corners */
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
     text-align: center;
     max-width: 450px;
     width: 90%;
     backdrop-filter: blur(10px);
     /* Frosted glass effect */
     -webkit-backdrop-filter: blur(10px);
     /* For Safari */
     border: 1px solid rgba(255, 255, 255, 0.2);
     /* Subtle border */
     opacity: 0;
     /* Initial state for Anime.js animation */
     transform: translateY(50px);
     /* Initial state for Anime.js animation */
     position: relative;
     /* Needed for pseudo-elements positioning */
     overflow: hidden;
     /* Hide particles outside the container */
 }

 /* Particle animation within the login-container */
 .login-container::before,
 .login-container::after {
     content: '';
     position: absolute;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     /* Transparent white bubbles */
     pointer-events: none;
     animation: floatBubbles 15s infinite ease-in-out;
 }

 .login-container::before {
     width: 100px;
     height: 100px;
     top: -20px;
     left: -30px;
     animation-delay: 0s;
 }

 .login-container::after {
     width: 70px;
     height: 70px;
     bottom: -20px;
     right: -30px;
     animation-delay: 7.5s;
     /* Stagger animation */
 }

 @keyframes floatBubbles {
     0% {
         transform: translateY(0) translateX(0) scale(1);
         opacity: 0.1;
     }

     25% {
         transform: translateY(-20px) translateX(10px) scale(1.05);
         opacity: 0.2;
     }

     50% {
         transform: translateY(0) translateX(0) scale(1);
         opacity: 0.1;
     }

     75% {
         transform: translateY(20px) translateX(-10px) scale(0.95);
         opacity: 0.05;
     }

     100% {
         transform: translateY(0) translateX(0) scale(1);
         opacity: 0.1;
     }
 }

 .login-container h2 {
     color: #fff;
     margin-bottom: 30px;
     font-weight: 700;
     font-size: 2.2rem;
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
 }

 .form-floating label {
     color: rgba(255, 255, 255, 0.7);
 }

 .form-control {
     background-color: rgba(255, 255, 255, 0.15);
     /* Transparent input background */
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 0.75rem;
     /* Rounded inputs */
     color: #fff;
     /* Input text color */
     padding: 1rem 1rem;
     /* Adjust padding for better look */
     transition: all 0.3s ease;
 }

 .form-control:focus {
     background-color: rgba(255, 255, 255, 0.25);
    border-color: #6A6DBD;
    box-shadow: 0 0 0 0.25rem rgba(106, 109, 189, 0.5), 0 0 15px rgba(106, 109, 189, 0.7);
     /* Added stronger glow */
     color: #fff;
     transform: scale(1.01);
     /* Slight scale on focus */
 }

 .form-control::placeholder {
     color: rgba(255, 255, 255, 0.6);
 }

 /* Uiverse Button */
 .uiverse-button {
    --color: #6A6DBD;
    --color2: #6A6DBD;
    padding: 12px 30px;
    background-image: linear-gradient(180deg, var(--color) 0%, var(--color2) 100%);
     color: #fff;
     border: none;
     border-radius: 0.75rem;
     font-size: 1.1rem;
     font-weight: 600;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     margin-top: 20px;
 }

 .uiverse-button span {
     position: relative;
     z-index: 1;
 }

 .uiverse-button::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background-color: rgba(255, 255, 255, 0.2);
     transition: all 0.3s ease;
     transform: skewX(-20deg);
     z-index: 0;
 }

 .uiverse-button:hover::before {
     left: 0;
 }

 .uiverse-button:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
 }

 .uiverse-button:active {
     transform: translateY(0);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 .forgot-password {
     margin-top: 15px;
     font-size: 0.95rem;
 }

 .forgot-password a {
     color: var(--white);
     text-decoration: none;
     transition: color 0.3s ease;
 }

 .forgot-password a:hover {
     color: #fff;
     text-decoration: underline;
 }

 /* Shake animation for errors (CSS only, needs JS to apply/remove class) */
 .login-container.shake {
     animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
     transform: translate3d(0, 0, 0);
     backface-visibility: hidden;
     perspective: 1000px;
 }

 @keyframes shake {

     10%,
     90% {
         transform: translate3d(-1px, 0, 0);
     }

     20%,
     80% {
         transform: translate3d(2px, 0, 0);
     }

     30%,
     50%,
     70% {
         transform: translate3d(-4px, 0, 0);
     }

     40%,
     60% {
         transform: translate3d(4px, 0, 0);
     }
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {
     .login-container {
         padding: 30px 20px;
         border-radius: 1rem;
     }

     .login-container h2 {
         font-size: 1.8rem;
         margin-bottom: 20px;
     }

     .uiverse-button {
         padding: 10px 20px;
         font-size: 1rem;
     }
 }