
  :root {
      --main-color: #6eb5b3;
      --main-color-dark: #5aa3a1;
      --main-color-light: #e0f4f3;
      --text-muted-color: #6a6a6a;
  }

  /* Buttons */
  .btn-main {
      background-color: var(--main-color);
      border: none;
      color: white;
      font-weight: 500;
      transition: all 0.3s ease;
  }
  .btn-main:hover {
      background-color: var(--main-color-dark);
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(110, 181, 179, 0.3);
  }

  .btn-outline-main {
      border: 2px solid var(--main-color);
      color: var(--main-color);
      font-weight: 500;
      transition: all 0.3s ease;
  }
  .btn-outline-main:hover {
      background-color: var(--main-color);
      color: white;
  }

  /* Cards */
  .card {
      border-radius: 1rem;
      transition: all 0.3s ease-in-out;
      box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  }
  .card:hover {
      box-shadow: 0 10px 25px rgba(110, 181, 179, 0.2);
  }
  .card-header {
      font-weight: 500;
      font-size: 1.1rem;
  }

  /* Tables */
  .table-hover tbody tr:hover {
      background-color: var(--main-color-light);
  }
  .table thead {
      background-color: var(--main-color);
      color: white;
  }

  /* Form focus */
  .form-control:focus {
      border-color: var(--main-color);
      box-shadow: 0 0 0 0.2rem rgba(110, 181, 179, 0.25);
  }

  /* Headings & icons */
  h2, h3, h4, h5 {
      color: var(--main-color);
  }

  .fw-semibold {
      color: var(--text-muted-color);
  }

  /* Badges */
  .badge-paid { background-color: #28a745; }
  .badge-pending { background-color: #ffc107; color: #212529; }
  .badge-other { background-color: #dc3545; }

  /* Utility spacing for sections */
  .section {
      margin-bottom: 2rem;
  }
