:root {
    --bs-primary: #2191ec !important;
    --bs-primary-rgb: 37, 150, 190 !important;

    --bs-secondary: #a5a5a5 !important;
    --bs-secondary-rgb: 165, 165, 165 !important;

    --bs-success: #5fba72 !important;
    --bs-success-rgb: 95, 186, 114 !important;

    --bs-info: #06b8a7 !important;
    --bs-info-rgb: 235, 148, 0 !important;

    --bs-warning: #fcc749 !important;
    --bs-warning-rgb: 236, 173, 0 !important;

    --bs-danger: #d33d41 !important;
    --bs-danger-rgb: 211, 61, 65 !important;

    --custom-font-color: #4d6996;
    --custom-heading-color: #1e2f5a;
    --input-border: #e2edf2;
    --input-bg: #fafdfe;
  }

  .bg-primary { background-color: var(--bs-primary) !important; }
  .btn-primary { background-color: var(--bs-primary); border-color: var(--bs-primary); }
  .text-primary { color: var(--bs-primary) !important; }
  .border-primary { border-color: var(--bs-primary) !important; }
  .btn-primary-outline { border-color: var(--bs-primary) !important; }
  .bg-primary-subtle { background-color: rgba(var(--bs-primary-rgb), 0.15) !important; }

  .bg-success { background-color: var(--bs-success) !important; }
  .btn-success { background-color: var(--bs-success); border-color: var(--bs-success); }
  .text-success { color: var(--bs-success) !important; }
  .border-success { border-color: var(--bs-success) !important; }
  .btn-success-outline { border-color: var(--bs-success) !important; }
  .bg-success-subtle { background-color: rgba(var(--bs-success-rgb), 0.15) !important; }

  .bg-info { background-color: var(--bs-info) !important; }
  .btn-info { background-color: var(--bs-info); border-color: var(--bs-info); }
  .text-info { color: var(--bs-info) !important; }
  .border-info { border-color: var(--bs-info) !important; }
  .btn-info-outline { border-color: var(--bs-info) !important; }
  .bg-info-subtle { background-color: rgba(var(--bs-info-rgb), 0.15) !important; }

  .bg-warning { background-color: var(--bs-warning) !important; }
  .btn-warning { background-color: var(--bs-warning); border-color: var(--bs-warning); }
  .text-warning { color: var(--bs-warning) !important; }
  .border-warning { border-color: var(--bs-warning) !important; }
  .btn-warning-outline { border-color: var(--bs-warning) !important; }
  .bg-warning-subtle { background-color: rgba(var(--bs-warning-rgb), 0.15) !important; }

  .bg-danger { background-color: var(--bs-danger) !important; }
  .btn-danger { background-color: var(--bs-danger); border-color: var(--bs-danger); }
  .text-danger { color: var(--bs-danger) !important; }
  .border-danger { border-color: var(--bs-danger) !important; }
  .btn-danger-outline { border-color: var(--bs-danger) !important; }
  .bg-danger-subtle { background-color: rgba(var(--bs-danger-rgb), 0.15) !important; }

  .bg-secondary { background-color: var(--bs-secondary) !important; }
  .btn-secondary { background-color: var(--bs-secondary); border-color: var(--bs-secondary); }
  .text-secondary { color: var(--bs-secondary) !important; }
  .border-secondary { border-color: var(--bs-secondary) !important; }
  .btn-secondary-outline { border-color: var(--bs-secondary) !important; }
  .bg-secondary-subtle { background-color: rgba(var(--bs-secondary-rgb), 0.15) !important; }
    body {
      background-color: #d1ddeb;
      font-family: 'Funnel Sans', -apple-system, sans-serif;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .login-wrapper {
      width: 100%;
      max-width: 1200px;
      padding: 1rem;
    }

    .login-row {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      /*box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075), 0 0.5rem 1rem rgba(37, 150, 190, 0.05);*/
    }

    .left-panel {
      min-height: 600px;
      border-right: 1px solid lightgray;
    }

    .left-panel img {
      width: 100%;
      height: auto;
      max-width: 500px;
      object-fit: contain;
      /*filter: brightness(0) invert(1);*/
    }

    .right-panel {
      background: white;
      padding: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .login-card {
      max-width: 420px;
      width: 100%;
    }

    .logo-circle {
      width: 68px;
      height: 68px;
      font-size: 2.2rem;
    }

    .form-control:focus {
      box-shadow: none !important;
      border-color: #446df5 !important;
      background-color: #fff;
    }

    .form-control {
      border-radius: 14px;
      border: 1.5px solid #e2edf2;
      padding: 0.65rem 1rem;
      font-size: 0.98rem;
      background-color: #fafdfe;
    }
    .form-control:hover {
      border-color: #b8d9e6;
    }

    .form-label {
      font-weight: 500;
      color: #2a4053;
      margin-bottom: 0.25rem;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .password-wrapper {
      position: relative;
    }
    .password-toggle {
      position: absolute;
      top: 50%;
      right: 14px;
      transform: translateY(-50%);
      border: none;
      background: transparent;
      color: #6c8b9c;
      font-size: 1.2rem;
      cursor: pointer;
    }
    .password-toggle:hover {
      color: #446df5 !important;
    }
    .password-toggle:focus {
      outline: none;
    }

    .btn-login {
      padding: 0.7rem 1rem;
      font-weight: 600;
      font-size: 1.05rem;
      letter-spacing: 0.01em;
      margin-top: 0.5rem;
    }
    .btn-login:active {
      transform: scale(0.98);
    }

    .forgot-link {
      font-weight: 500;
      text-decoration: none;
      font-size: 0.92rem;
      border-bottom: 1px dashed transparent;
    }
    .forgot-link:hover {
      color: #b08c2a !important;
      border-bottom: 1px dashed #446df5 !important;
    }

    .demo-hint {
      color: #6a8fa0;
      font-size: 0.875rem;
      margin-top: 1rem;
      text-align: center;
    }

    .swal2-popup {
      font-family: 'Funnel Sans', sans-serif;
    }

    @media (max-width: 767px) {
      .left-panel {
        display: none !important;
      }
      .right-panel {
        min-height: 100vh;
        padding: 1.5rem;
      }
      .login-row {
        border-radius: 0;
      }
      body {
        padding: 0;
      }
      .login-wrapper {
        padding: 0;
      }
    }