body {
      background-color: #f6f6f6;
    }
    .left-panel {
      background-color: #3c3f9a;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 0 30px 30px 0;
      color: white;
      padding: 30px;
      text-align: center;
    }
    .illustration img {
      max-width: 80%;
    }
    .fw-bold{
        color:#3c3f9a;
    }
    .welcome-text {
      font-size: 28px;
      font-weight: 600;
      margin-bottom: 20px;
    }
    .login-box {
      zoom:120%;
      background: #fff;
      border-radius: 15px;
      padding: 40px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }
    .logo-holder img {
      width: 140px;
      margin-bottom: 20px;
    }

    /* Fix eye button size inside input-group */
#togglePassword.btn {
  padding: 6px 10px !important;   /* smaller button */
  border-radius: 0 6px 6px 0;      /* match input shape */
  display: flex;
  align-items: center;
  justify-content: center;
}



@media(max-width: 768px) {

  .left-panel {
    order: 2;
    width: 100%;
    height: auto;
    padding: 20px;
    border-radius: 0;
    text-align: center;
  }

  /* MAIN FIX: Make login box wide & keep everything inside */
  .login-box {
    order: 1;
    width: 95% !important;
    max-width: none !important;
    margin: 20px auto;
    padding: 30px;
    box-sizing: border-box;
    zoom: 100% !important;     /* prevent distortion */
  }

  /* FIX: Keep icon + input attached */

  #togglePassword.btn {
    padding: 4px 8px !important;   /* even smaller on mobile */
    min-width: 40px;               /* prevents stretching */
    max-width: 40px;
  }

  /* Keep input + span + button in one line always */
  .input-group {
    flex-wrap: nowrap !important;
  }

  .input-group-text {
    padding: 6px 10px;
  }


  /* Input should never break out */
  .input-group input {
    flex: 1 1 auto;
    width: 1%;
  }

  /* Button full width */
  .login-box button {
    width: 100%;
  }

  /* Keep logo inside the box */
  .logo-holder {
    display: block !important;
    text-align: center;
    margin-bottom: 15px;
  }

  .logo-holder img {
    width: 120px;
    margin: 0 auto 15px auto;
    display: block;
  }
}