:root {
       --primary: #3080ED;
       --primary-hover: #0058D1;
       --text-main: #171717;
       --text-secondary: #989898;
       --error: #E5484D;
       --radius-md: 12px;
   }

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: 'Inter', sans-serif;
   }

   body {
       background-color: #fff;
       min-height: 100vh;
       display: flex;
       overflow-x: hidden;
   }

   /* --- Left Side (Hero) --- */
   .hero-side {
       width: 50%;
       background: linear-gradient(135deg, #E6F0FF 0%, #F0F6FF 100%);
       position: relative;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       padding: 4rem;
       overflow: hidden;
   }

   .logo-container {
       position: absolute;
       top: 3rem;
       left: 3rem;
       display: flex;
       align-items: center;
       gap: 0.75rem;
   }

   .logo-icon {
       width: 40px;
       height: 40px;
       background: var(--primary);
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .logo-text {
       font-size: 1.5rem;
       font-weight: 700;
       color: var(--text-main);
   }

   .hero-title {
       font-size: 3rem;
       font-weight: 700;
       text-align: center;
       line-height: 1.2;
       margin-bottom: 4rem;
       z-index: 2;
   }

   .phone-mockup-wrapper {
       position: relative;
       width: 100%;
       max-width: 400px;
       display: flex;
       justify-content: center;
   }

   .phone-img {
       width: 100%;
       height: auto;
       filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
   }

   .notification-bubble {
       position: absolute;
       top: 15%;
       left: -10%;
       background: #fff;
       padding: 1rem 1.25rem;
       border-radius: 12px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
       display: flex;
       align-items: center;
       gap: 0.75rem;
       animation: float 3s ease-in-out infinite;
       z-index: 3;
   }

   .tg-icon {
       width: 24px;
       height: 24px;
       fill: #229ED9;
   }

   .notif-content {
       display: flex;
       flex-direction: column;
   }

   .notif-header {
       font-size: 0.75rem;
       color: var(--text-secondary);
       margin-bottom: 0.25rem;
   }

   .notif-text {
       font-size: 0.875rem;
       font-weight: 600;
       color: var(--text-main);
   }

   @keyframes float {

       0%,
       100% {
           transform: translateY(0);
       }

       50% {
           transform: translateY(-10px);
       }
   }

   /* --- Right Side (Form) --- */
   .form-side {
       width: 50%;
       display: flex;
       flex-direction: column;
       padding: 4rem 6rem;
       position: relative;
   }

   .back-btn {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       background: none;
       border: none;
       cursor: pointer;
       font-size: 1rem;
       color: var(--text-main);
       margin-bottom: 3rem;
       transition: opacity 0.2s;
   }

   .back-btn:hover {
       opacity: 0.7;
   }

   .form-container {
       max-width: 400px;
       margin: 0 auto;
       width: 100%;
   }

   .form-title {
       font-size: 2rem;
       font-weight: 700;
       margin-bottom: 2rem;
       text-align: center;
   }

   .input-group {
       margin-bottom: 1.5rem;
       position: relative;
   }

   .input-field {
       width: 100%;
       padding: 1rem 1.25rem;
       border: 1px solid #E0E0E0;
       border-radius: var(--radius-md);
       font-size: 1rem;
       outline: none;
       transition: all 0.2s;
       background: #fff;
   }

   .input-field::placeholder {
       color: var(--text-secondary);
   }

   .input-field:focus {
       border-color: var(--primary);
       box-shadow: 0 0 0 3px rgba(48, 128, 237, 0.1);
   }

   .password-wrapper {
       position: relative;
   }

   .eye-icon {
       position: absolute;
       right: 1.25rem;
       top: 50%;
       transform: translateY(-50%);
       cursor: pointer;
       fill: var(--text-secondary);
       transition: fill 0.2s;
   }

   .eye-icon:hover {
       fill: var(--text-main);
   }

   .submit-btn {
       width: 100%;
       padding: 1rem;
       background: var(--primary);
       color: #fff;
       border: none;
       border-radius: var(--radius-md);
       font-size: 1rem;
       font-weight: 600;
       cursor: pointer;
       transition: background 0.2s;
       margin-top: 1rem;
   }

   .submit-btn:hover {
       background: var(--primary-hover);
   }

   .signup-link {
       text-align: center;
       margin-top: 1.5rem;
       font-size: 0.875rem;
       color: var(--text-secondary);
   }

   .signup-link a {
       color: var(--primary);
       text-decoration: none;
       font-weight: 500;
   }

   .forgot-password {
       display: block;
       text-align: right;
       font-size: 0.875rem;
       color: var(--primary);
       text-decoration: none;
       margin-top: -0.5rem;
       margin-bottom: 1.5rem;
   }

   /* Responsive */
   @media (max-width: 1024px) {
       .hero-side {
           display: none;
       }

       .form-side {
           width: 100%;
           padding: 2rem;
       }

       .back-btn {
           margin-bottom: 2rem;
       }
   }

          :root {
              --primary: #3080ED;
              --text-main: #171717;
              --text-secondary: #989898;
              --error: #E5484D;
              --bg-input: #F5F5F7;
              --border-radius: 12px;
          }
    
          * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
              font-family: 'Inter', sans-serif;
          }
    
          body {
              background-color: #fff;
              min-height: 100vh;
              display: flex;
              overflow-x: hidden;
          }
    
          /* --- Left Side (Hero) --- */
          .hero-side {
              width: 50%;
              background: linear-gradient(135deg, #E6F0FF 0%, #F0F6FF 100%);
              position: relative;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              padding: 4rem;
              overflow: hidden;
          }
    
          .logo-container {
              position: absolute;
              top: 3rem;
              left: 3rem;
              display: flex;
              align-items: center;
              gap: 0.75rem;
          }
    
          .logo-icon {
              width: 40px;
              height: 40px;
              background: var(--primary);
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
          }
    
          .logo-text {
              font-size: 1.5rem;
              font-weight: 700;
              color: var(--text-main);
          }
    
          .hero-title {
              font-size: 3rem;
              font-weight: 700;
              text-align: center;
              line-height: 1.2;
              margin-bottom: 4rem;
              z-index: 2;
          }
    
          .phone-mockup-wrapper {
              position: relative;
              width: 100%;
              max-width: 400px;
              display: flex;
              justify-content: center;
          }
    
          .phone-img {
              width: 100%;
              height: auto;
              filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
          }
    
          /* Notification Bubble */
          .notification-bubble {
              position: absolute;
              top: 15%;
              left: -10%;
              background: #fff;
              padding: 1rem 1.25rem;
              border-radius: 12px;
              box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
              display: flex;
              align-items: center;
              gap: 0.75rem;
              animation: float 3s ease-in-out infinite;
              z-index: 3;
          }
    
          .tg-icon {
              width: 24px;
              height: 24px;
              fill: #229ED9;
          }
    
          .notif-content {
              display: flex;
              flex-direction: column;
          }
    
          .notif-header {
              font-size: 0.75rem;
              color: var(--text-secondary);
              margin-bottom: 0.25rem;
          }
    
          .notif-text {
              font-size: 0.875rem;
              font-weight: 600;
              color: var(--text-main);
          }
    
          @keyframes float {
    
              0%,
              100% {
                  transform: translateY(0);
              }
    
              50% {
                  transform: translateY(-10px);
              }
          }
    
          /* --- Right Side (Form) --- */
          .form-side {
              width: 50%;
              display: flex;
              flex-direction: column;
              padding: 4rem 6rem;
              position: relative;
          }
    
          .back-btn {
              display: flex;
              align-items: center;
              gap: 0.5rem;
              background: none;
              border: none;
              cursor: pointer;
              font-size: 1rem;
              color: var(--text-main);
              margin-bottom: 3rem;
              transition: opacity 0.2s;
          }
    
          .back-btn:hover {
              opacity: 0.7;
          }
    
          .form-container {
              max-width: 400px;
              margin: 0 auto;
              width: 100%;
          }
    
          .form-title {
              font-size: 2rem;
              font-weight: 700;
              margin-bottom: 2rem;
              text-align: center;
          }
    
          .input-group {
              margin-bottom: 1.5rem;
              position: relative;
          }
    
          .input-field {
              width: 100%;
              padding: 1rem 1.25rem;
              border: 1px solid #E0E0E0;
              border-radius: var(--border-radius);
              font-size: 1rem;
              outline: none;
              transition: all 0.2s;
              background: #fff;
          }
    
          .input-field::placeholder {
              color: var(--text-secondary);
          }
    
          .input-field:focus {
              border-color: var(--primary);
              box-shadow: 0 0 0 3px rgba(48, 128, 237, 0.1);
          }
    
          .input-field.error {
              border-color: var(--error);
          }
    
          .error-msg {
              color: var(--error);
              font-size: 0.75rem;
              margin-top: 0.5rem;
              display: block;
          }
    
          .password-wrapper {
              position: relative;
          }
    
          .eye-icon {
              position: absolute;
              right: 1.25rem;
              top: 50%;
              transform: translateY(-50%);
              cursor: pointer;
              fill: var(--text-secondary);
              transition: fill 0.2s;
          }
    
          .eye-icon:hover {
              fill: var(--text-main);
          }
    
          .submit-btn {
              width: 100%;
              padding: 1rem;
              background: var(--primary);
              color: #fff;
              border: none;
              border-radius: var(--border-radius);
              font-size: 1rem;
              font-weight: 600;
              cursor: pointer;
              transition: background 0.2s;
              margin-top: 1rem;
          }
    
          .submit-btn:hover {
              background: #256BD6;
          }
    
          .login-link {
              text-align: center;
              margin-top: 1.5rem;
              font-size: 0.875rem;
              color: var(--text-secondary);
          }
    
          .login-link a {
              color: var(--primary);
              text-decoration: none;
              font-weight: 500;
          }
    
          .terms {
              margin-top: 3rem;
              font-size: 0.75rem;
              color: var(--text-secondary);
              text-align: center;
              line-height: 1.5;
          }
    
          .terms a {
              color: var(--primary);
              text-decoration: none;
          }
    
          /* Responsive */
          @media (max-width: 1024px) {
              .hero-side {
                  display: none;
              }
    
              .form-side {
                  width: 100%;
                  padding: 2rem;
              }
    
              .back-btn {
                  margin-bottom: 2rem;
              }
          }