/*tag*/
    
       .btn-gradient-border {
      padding: 1.5px;
      border-radius: 9999px;
      background: linear-gradient(to right, rgb(217, 87, 237, 0.6), rgb(153, 102, 240, 0.6));
      /* lighter gradient */
      display: inline-block;
      transition: background 0.4s ease;
    }

    .btn-gradient-border:hover {
      background: linear-gradient(to right, rgb(217, 87, 237, 0.76), rgb(153, 102, 240, 0.76));
      /* subtle hover */
    }

    .btn-gradient-border.selected {
      background: linear-gradient(to right, rgb(244, 114, 182), rgb(167, 139, 250));
      /* vibrant active state */
    }

    .filter-btn.selected {
      background-color: rgba(255, 255, 255, 0.5);
      /* darkened background with transparency for active filter */
    }

    @media (min-width: 768px) {
      .btn-gradient-border {
        padding: 2px;
      }
    }

    @media (prefers-color-scheme: dark) {
      .btn-gradient-border {
        background: linear-gradient(to right, rgba(129, 98, 221, 0.7), rgba(79, 88, 217, 0.7));
        /* purple to deeper pink */
      }

      .btn-gradient-border:hover {
        background: linear-gradient(to right, rgba(129, 98, 221, 0.95), rgba(79, 88, 217, 0.95));
        /* darker pink on hover */
      }

      .btn-gradient-border.selected {
        background: linear-gradient(to right, rgba(129, 98, 221, 0.95), rgba(79, 88, 217, 0.95));
        /* deeper pink for active state */
      }

      .filter-btn.selected {
        background-color: rgba(0, 0, 0, 0.1);
        /* soft dark purple with transparency for focus */
      }
    }