/*Box*/
      .badge {
      background: linear-gradient(135deg, rgba(169, 176, 228, 0.747), #d6b4e6c0);
      border-radius: 3px 3px 0 3px;
      color: #555555;
      display: inline-block;
      font-size: 12px;
      padding: 0 5px;
      position: absolute;
      right: -4px;
      top: -5px;
      text-align: center;
      transition: background-color 0.2s, color 0.2s;
      z-index: 1;
    }

    .badge-wrapper {
      position: absolute;
      right: -4px;
      top: -4px;
    }

    .svg-icon {
      color: #d1d5db;
      height: 8px;
      position: absolute;
      right: -4px;
      stroke: currentColor;
      top: 13px;
      transform: rotate(90deg);
      width: 8px;
      z-index: 0;
    }

    @media (prefers-color-scheme: dark) {
      .badge {
        background: linear-gradient(135deg, rgba(116, 123, 179, 0.623), #865f9890);
        color: #e5e7eb;
      }

      .svg-icon {
        color: #4e454f95;
      }
    }

    /* Two-line Clamp */
    .clamp-two-lines {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    /* Gradient Border */
    .grad-border {
      position: relative;
      z-index: 0;
      overflow: hidden;
      /* clip the pseudo-element */
    }

    .grad-border::before {
      content: "";
      position: absolute;
      inset: 0;
      /* cover full box */
      padding: 1.8px;
      /* border thickness */
      background: linear-gradient(to right, rgba(237, 47, 142, 0.692), rgba(169, 85, 247, 0.679), rgba(32, 112, 242, 0.647));
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: destination-out;
      mask-composite: exclude;
      z-index: -1;
      border-radius: inherit;
    }

.grad-border_all {
      position: relative;
      z-index: 0;
      overflow: hidden;
      /* clip the pseudo-element */
    }

    .grad-border_all::before {
      content: "";
      position: absolute;
      inset: 0;
      /* cover full box */
      padding: 1.6px;
      /* border thickness */
      background: linear-gradient(to right, rgba(237, 47, 142, 0.692), rgba(169, 85, 247, 0.679), rgba(32, 112, 242, 0.647));
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: destination-out;
      mask-composite: exclude;
      z-index: -1;
      border-radius: inherit;
    }


    @media (prefers-color-scheme: dark) {
      .grad-border {
        --bg-color: rgba(35, 35, 35, 1);
      }
      .grad-border_all {
        --bg-color: rgba(35, 35, 35, 1);
      }
    }

    .hover-card {
      transition: transform 0.3s ease;
    }

    .hover-card-shadow {
      transition: box-shadow 0.2s ease;
    }

    .hover-card:hover {
      transform: translateY(-1.5px) scale(1);

    }

    .hover-card-shadow:hover {
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    }