/* APPLE STYLE SMOOTH TRANSITION */
   body {
       transition: background 0.8s ease, color 0.6s ease;
   }

   /* THEME TOGGLE */
   .theme-toggle {
       position: fixed;
       top: 20px;
       right: 20px;
       width: 46px;
       height: 46px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 22px;
       cursor: pointer;
       z-index: 9999;
       backdrop-filter: blur(10px);
       background: rgba(255, 255, 255, 0.7);
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
       transition: all .4s;
   }

   [data-theme="dark"] .theme-toggle {
       background: rgba(20, 20, 30, 0.7);
       color: white;
   }

   /* SKY CONTAINER */
   #skyContainer {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       pointer-events: none;
       overflow: hidden;
       z-index: 0;
   }

   /* keep login content above sky */
   .auth {
       min-height: 100vh;
       position: relative;
       z-index: 10;
       background: transparent !important;
   }

   .auth-left {
       background: transparent !important;
   }

   .auth-right {
       background: transparent !important;
   }

   /* LIGHT SKY */
   [data-theme="light"] body {
       background: linear-gradient(#5fb6ff, #dff4ff);
   }

   /* DARK SKY */
   [data-theme="dark"] body {
       background: radial-gradient(circle at 30% 30%, #0a0f2b, #020412);
   }

   #stars {
       position: absolute;
       width: 100%;
       height: 100%;
   }

   /* STARS */
   .star {
       position: absolute;
       width: 2px;
       height: 2px;
       background: white;
       border-radius: 50%;
       animation: twinkle 2s infinite alternate;
   }

   @keyframes twinkle {
       from {
           opacity: 0.3
       }

       to {
           opacity: 1
       }
   }

   /* GALAXY */
   #galaxy {
       position: absolute;
       width: 100%;
       height: 100%;
       background:
           radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .08), transparent 40%),
           radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .06), transparent 40%),
           radial-gradient(circle at center, rgba(255, 255, 255, .04), transparent 60%);
       animation: galaxyRotate 180s linear infinite;
   }

   @keyframes galaxyRotate {
       from {
           transform: rotate(0deg)
       }

       to {
           transform: rotate(360deg)
       }
   }

   /* SHOOTING STARS */
   .shootingStar {
       position: absolute;
       width: 2px;
       height: 120px;
       background: linear-gradient(white, transparent);
       transform: rotate(45deg);
       animation: shoot 1.2s linear;
   }

   @keyframes shoot {
       from {
           transform: translateX(0) translateY(0) rotate(45deg);
           opacity: 1;
       }

       to {
           transform: translateX(600px) translateY(600px) rotate(45deg);
           opacity: 0;
       }
   }

   /* CLOUDS */
   .cloud {
       position: absolute;
       width: 180px;
       height: 90px;
       background: white;
       border-radius: 100px;
       opacity: .7;
       filter: blur(2px);
       animation: cloudMove linear infinite;
   }

   @keyframes cloudMove {
       from {
           transform: translateX(-200px)
       }

       to {
           transform: translateX(120vw)
       }
   }

   /* SUN GLOW */
   #sunGlow {
       position: absolute;
       top: 80px;
       right: 120px;
       width: 120px;
       height: 120px;
       border-radius: 50%;
       background: radial-gradient(circle, #ffd54f 0%, #ff9800 70%, transparent 80%);
       filter: blur(20px);
       animation: sunPulse 6s infinite alternate;
   }

   @keyframes sunPulse {
       from {
           transform: scale(1)
       }

       to {
           transform: scale(1.15)
       }
   }

   /* DARK MODE HIDES SUN */
   [data-theme="dark"] #sunGlow {
       display: none;
   }

   /* AURORA */
   #aurora {
       position: absolute;
       top: -20%;
       left: -20%;
       width: 140%;
       height: 140%;
       background:
           radial-gradient(circle at 30% 60%, rgba(0, 255, 170, .25), transparent 60%),
           radial-gradient(circle at 70% 40%, rgba(120, 0, 255, .25), transparent 60%),
           radial-gradient(circle at 50% 80%, rgba(0, 180, 255, .25), transparent 60%);
       filter: blur(90px);
       animation: auroraMove 25s ease-in-out infinite alternate;
       opacity: .8;
   }

   @keyframes auroraMove {
       0% {
           transform: translateX(-5%) translateY(0)
       }

       50% {
           transform: translateX(5%) translateY(-5%)
       }

       100% {
           transform: translateX(-3%) translateY(4%)
       }
   }

   /* hide aurora in light mode */
   [data-theme="light"] #aurora {
       display: none;
   }

   /* .auth-right {

            background: rgba(15, 25, 45, 0.55);
            backdrop-filter: blur(14px);
            border-left: 1px solid rgba(255, 255, 255, .08);
            box-shadow: 0 10px 50px rgba(0, 0, 0, .5);

        }

        .auth-right input {
            background: rgba(255, 255, 255, .05) !important;
            border: 1px solid rgba(255, 255, 255, .15);
            color: white;
        } */

   /* body {
            transition:
                background 1s ease,
                color 0.6s ease,
                filter .8s ease;
        } */

   /* subtle brightness morph */
   [data-theme="dark"] body {
       filter: brightness(.95);
   }

   [data-theme="light"] body {
       filter: brightness(1);
   }


   #btnlogin {

       background: linear-gradient(270deg, #3b82f6, #9333ea, #ec4899, #3b82f6);
       background-size: 400% 400%;
       animation: gradientMove 8s ease infinite;
       border: none;

   }

   @keyframes gradientMove {
       0% {
           background-position: 0% 50%
       }

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

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

   #btnlogin:hover {
       transform: scale(1.03);
       box-shadow: 0 10px 30px rgba(80, 120, 255, .5);
   }

   .meteor {
       position: absolute;
       width: 2px;
       height: 150px;
       background: linear-gradient(white, transparent);
       transform: rotate(45deg);
       opacity: .9;
       animation: meteorFall 1.2s linear forwards;
   }

   @keyframes meteorFall {
       0% {
           transform: translateX(0) translateY(0) rotate(45deg);
           opacity: 1;
       }

       100% {
           transform: translateX(800px) translateY(800px) rotate(45deg);
           opacity: 0;
       }
   }

   .particle {
       position: absolute;
       width: 6px;
       height: 6px;
       background: rgba(255, 255, 255, .6);
       border-radius: 50%;
       backdrop-filter: blur(3px);
       animation: floatParticle linear infinite;
   }

   @keyframes floatParticle {

       0% {
           transform: translateY(100vh);
           opacity: 0;
       }

       10% {
           opacity: .8;
       }

       90% {
           opacity: .8;
       }

       100% {
           transform: translateY(-10vh);
           opacity: 0;
       }

   }

   .divider-text {
       position: relative;
       padding: 0 16px;
       font-weight: 500;
       color: rgba(255, 255, 255, .85);
   }

   /* divider line */
   .center-border-horizontal {
       position: relative;
   }

   .center-border-horizontal:before {
       content: "";
       position: absolute;
       top: 50%;
       left: 0;
       width: 100%;
       height: 1px;
       background: rgba(255, 255, 255, .15);
       z-index: 0;
   }

   .divider-text {
       background: transparent;
       position: relative;
       z-index: 2;
   }

   [data-theme="light"] .divider-text {
       color: #2c3e50;
   }

   /* [data-theme="light"] .center-border-horizontal:before {
            background: rgba(0, 0, 0, .15);
        } */

   /* Divider Container */
   .center-border-horizontal {
       position: relative;
       margin-top: 30px;
       margin-bottom: 30px;
   }

   /* Base line */
   .center-border-horizontal:before {
       content: "";
       position: absolute;
       top: 50%;
       left: 0;
       width: 100%;
       height: 1px;
       background: rgba(255, 255, 255, .15);
   }

   /* Glow sweep animation */
   .center-border-horizontal:after {
       content: "";
       position: absolute;
       top: 50%;
       left: -30%;
       width: 30%;
       height: 2px;
       background: linear-gradient(90deg,
               transparent,
               rgba(255, 255, 255, .8),
               transparent);
       animation: dividerGlow 6s linear infinite;
   }

   /* Divider text */
   .divider-text {
       position: relative;
       padding: 0 16px;
       font-weight: 500;
       letter-spacing: .3px;
       color: rgba(255, 255, 255, .9);
       z-index: 2;
       background: transparent;
   }

   /* Animation */
   @keyframes dividerGlow {
       0% {
           left: -30%;
       }

       100% {
           left: 130%;
       }
   }