:root {
    --primary: #a747eb !important;
    --background-light: #fafafa !important;
    --background-dark: #1a1121 !important;
    --card-light: #f7f6f8 !important;
    --input-light: #f0eef3 !important;
    --text-light: #1c1c1e !important;
    --text-secondary-light: #6b6b6b !important;
  }

  body {
    font-family: 'Manrope', sans-serif !important;
    background-color: var(--background-light) !important;
    color: var(--text-light) !important;
    min-height: 100vh !important;
  }
.full {
  padding: 3rem 2rem 0.5rem 2rem !important;
  background-color: #f7f6f8 !important;
  box-shadow: 0 6px 20px rgba(203, 23, 23, 0.7) !important; /* Thicker, deeper shadow */
}

  .form-control {
    background-color: var(--input-light) !important;
    border: none !important;
    color: var(--text-light) !important;
    padding: 0.8rem 1rem !important;
    border-radius: 0.75rem !important;
  }

  .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(82, 13, 132, 0.25) !important;
    border-color: var(--primary) !important;
    background-color: var(--input-light) !important;
    color: var(--text-light) !important;
  }

  .btn-primary-custom {
    background-color: var(--primary) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
  }

  .btn-primary-custom:hover {
    background-color: #922fd6 !important;
  }

  .btn-outline-custom {
    background-color: var(--card-light) !important;
    border: 1px solid #e5e5e5 !important;
    color: var(--text-light) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    font-size: 14px;
  }

  .btn-outline-custom:hover {
    background-color: #f2f2f2 !important;
  }

  .divider {
    position: relative !important;
    text-align: center !important;
    margin: 2rem 0 !important;
  }

  .divider::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background-color: #ddd !important;
    transform: translateY(-50%) !important;
  }

  .divider span {
    position: relative !important;
    background-color: var(--card-light) !important;
    padding: 0 0.75rem !important;
    color: var(--text-secondary-light) !important;
    font-size: 0.9rem !important;
  }

  .shadow-card {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05) !important;
  }


    html, body {
        height: 100%;
        overflow: hidden !important; /* disable scroll */
    }

    .login-wrapper {
        height: 100vh;
        background-color: #f8f9fa; /* optional background */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
    }

    main {
        margin-top: 0 !important;
    }