* {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
       font-family: "Segoe UI", Roboto, Arial, sans-serif;
   }

   body {
       font-family: "Segoe UI", Roboto, Arial, sans-serif;
       background: linear-gradient(135deg, #f5f7fa, #e4ecf5);
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 20px;
   }


   /* INPUT */
   input[type="email"],
   input[type="password"] {

       width: 100%;
       height: 42px;
       border: 1px solid #d8d6cd;
       border-radius: 10px;
       padding: 0 12px;
       font-size: 14px;
       outline: none;
       transition: .3s;
       margin-bottom: 14px;
   }


   input:focus {
       outline: none;
       border-color: #2563eb;
       background: #fff;
       box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
   }


   /* REMEMBER */

   .remember {

       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 18px;
       font-size: 13px;
       color: #6b6b6b;
   }


   .remember input {
       margin-right: 6px;
   }


   /* CARD */
   .card {
       width: 100%;
       max-width: 430px;
       background: rgba(255, 255, 255, 0.25);
       backdrop-filter: blur(18px);
       -webkit-backdrop-filter: blur(18px);
       border-radius: 18px;
       padding: 2rem;
       box-shadow: 0 10px 30px #de2f782f;
       border: 1px solid rgba(255, 255, 255, 0.4);
       animation: fadeIn .6s ease;
   }

   /* button */

   .btn-primary {
       width: 100%;
       height: 50px;
       border: none;
       border-radius: 14px;
       background: linear-gradient(135deg, #e7349f, #db4f87, #ecd888b5);
       color: #fff;
       font-size: 15px;
       font-weight: 600;
       cursor: pointer;
       transition: .3s;
       margin-top: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
   }


   .button-group {
       display: flex;
       flex-direction: column;
       gap: 10px;

   }




   .btn-primary:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(37, 99, 235, .25);
   }



   /* LINKS */

   .login-link {
       background: linear-gradient(135deg, #e7349f, #db4f87, #ebc015);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       text-decoration: none;
       font-weight: 600;
   }


   .login-link:hover {
       text-decoration: underline;

   }

   /* social button */

   .social-btn {
       width: 100%;
       height: 45px;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       background: #ffffff;
       border: 1px solid #d8d6cd;
       border-radius: 12px;
       color: #333;
       font-size: 14px;
       font-weight: 600;
       cursor: pointer;
       transition: all .3s ease;
   }


   .social-btn svg {
       flex-shrink: 0;
   }


   .social-btn span {
       line-height: 1;
   }


   .social-btn:hover {

       background: #f7f7f7;

       transform: translateY(-2px);

       box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);

   }

   .subtitle {
       font-size: 13px;
       color: #6b6b6b;
       margin-bottom: 20px;
   }

   /* LABEL */

   label {
       display: block;
       margin-bottom: 7px;
       font-size: 14px;
       font-weight: 500;
       color: #374151;
   }

   h2 {

       font-size: 22px;
       font-weight: 600;
       color: #1a1a1a;
       margin-bottom: 6px;
   }

   .logo {
       width: 100px;
       height: 100px;
       background-image: url('../images/ChatGPT_Image_Jan_7__2026__07_53_03_AM-removebg-preview.png');
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center;
       margin: auto;
       margin-bottom: 20px;
   }

   /* FOOTER */
   .bottom-text {
       text-align: center;
       margin-top: 20px;
       color: #6b7280;
       font-size: 14px;
   }


   /* DIVIDER */

   .divider {
       display: flex;
       align-items: center;
       gap: 10px;
       margin: 20px 0;
   }

   .divider div {
       flex: 1;
       height: 1px;
       background: #e5e7eb;
   }

   .divider span {
       color: #9ca3af;
       font-size: 13px;
   }

   /* ANIMATION */

   @keyframes fadeIn {

       from {

           opacity: 0;
           transform: translateY(10px);

       }

       to {

           opacity: 1;
           transform: translateY(0);

       }

   }

   .boxcontainer {
       transform: translateX(120%) scale(.96);
       filter: blur(8px);
       animation: premiumSlide 1s cubic-bezier(.22, 1, .36, 1) forwards;
   }

   @keyframes premiumSlide {
       0% {
           transform: translateX(120%) scale(.96);
           filter: blur(8px);
       }

       70% {
           transform: translateX(-8px) scale(1.01);
           filter: blur(2px);
       }

       100% {
           transform: translateX(0) scale(1);
           filter: blur(0);
       }
   }

   .icon {

       width: 55px;

       height: 55px;

       border-radius: 50%;

       display: flex;

       align-items: center;

       justify-content: center;

       margin-bottom: 15px;

       background: rgba(37, 99, 235, .12);

       font-size: 26px;

   }


   /* OTP BOX */

/* OTP BOX */

.otp-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 20px;
}

.otp-container input {
    width: 42px;
    height: 42px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid #d8d6cd;
    outline: none;
    transition: .3s;
    flex: 0 1 42px;
}


.otp-container input:focus {
    border-color: #378ade;
    box-shadow: 0 0 0 3px rgba(55, 138, 222, .15);
}


/* Responsive */

@media(max-width:480px) {

    .card {
        padding: 1.2rem;
    }

    .otp-container {
        gap: 6px;
    }

    .otp-container input {
        width: calc((100vw - 120px) / 6);
        height: calc((100vw - 120px) / 6);
        max-width: 42px;
        max-height: 42px;
        min-width: 30px;
        min-height: 30px;
        font-size: 16px;
    }

}

   .password-note {
       font-size: 12px;
       color: #9ca3af;
       margin-top: -10px;
       margin-bottom: 16px;
   }

   .terms {
       display: flex;
       align-items: center;
       gap: 8px;
       margin: 12px 0;
       cursor: pointer;
   }

   .terms input {
       width: 14px;
       height: 14px;
       margin: 0;
       flex-shrink: 0;
   }

   .terms span {
       font-size: 12px;
       color: #6b7280;
       line-height: 1.4;
   }