.animated-empty-state {
        --animated-empty-accent: var(--accent-primary-green);
        --animated-empty-soft: var(--additional-dull-green);
        border-color: var(--grayscale-gray-xlight);
        overflow: hidden;
        position: relative;
      }

      .animated-empty-state--red {
        --animated-empty-accent: var(--accent-bright-red);
        --animated-empty-soft: var(--additional-dull-red);
      }

      .animated-empty-state--default {
        min-height: 184px;
        padding: 24px 18px;
      }

      .animated-empty-state--compact {
        min-height: 116px;
        padding: 20px 18px;
      }

      .animated-empty-state::before {
        animation: animated-empty-state-glow 4.5s ease-in-out infinite;
        background: radial-gradient(
          circle at center,
          color-mix(in srgb, var(--animated-empty-soft) 16%, transparent),
          color-mix(in srgb, var(--animated-empty-soft) 0%, transparent)
        );
        content: '';
        height: 128px;
        inset: -44% -18% auto;
        position: absolute;
      }

      .animated-empty-state__icon-wrap {
        align-items: center;
        background: color-mix(in srgb, var(--animated-empty-soft) 12%, transparent);
        border-radius: 9999px;
        color: var(--animated-empty-accent);
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        position: relative;
        z-index: 1;
      }

      .animated-empty-state--default .animated-empty-state__icon-wrap {
        height: 48px;
        width: 48px;
      }

      .animated-empty-state--compact .animated-empty-state__icon-wrap {
        height: 44px;
        width: 44px;
      }

      .animated-empty-state__pulse {
        animation: animated-empty-state-pulse 1.8s ease-in-out infinite;
        border-color: color-mix(in srgb, var(--animated-empty-soft) 36%, transparent);
        border-radius: 9999px;
        border-width: 1px;
        inset: 5px;
        position: absolute;
      }

      .animated-empty-state__icon {
        animation: animated-empty-state-float 3.2s ease-in-out infinite;
        position: relative;
      }

      .animated-empty-state--default .animated-empty-state__icon {
        height: 25px;
        width: 25px;
      }

      .animated-empty-state--compact .animated-empty-state__icon {
        height: 24px;
        width: 24px;
      }

      .animated-empty-state__title,
      .animated-empty-state__description,
      .animated-empty-state__dots {
        position: relative;
        z-index: 1;
      }

      .animated-empty-state__title {
        color: #494E53;
        font-weight: 700;
        line-height: 1.25;
      }

      .animated-empty-state--default .animated-empty-state__title {
        font-size: 15px;
      }

      .animated-empty-state--compact .animated-empty-state__title {
        font-size: 15px;
      }

      .animated-empty-state__description {
        color: #6A7284;
        font-weight: 600;
        margin-top: 5px;
      }

      .animated-empty-state--default .animated-empty-state__description {
        font-size: 12px;
        line-height: 1.45;
        max-width: 235px;
      }

      .animated-empty-state--compact .animated-empty-state__description {
        font-size: 11px;
        line-height: 1.35;
        max-width: 230px;
      }

      .animated-empty-state__dots {
        align-items: center;
        display: flex;
        gap: 5px;
        justify-content: center;
        margin-top: 10px;
        min-height: 8px;
      }

      .animated-empty-state__dot {
        animation: animated-empty-state-dot 1.4s ease-in-out infinite;
        background-color: var(--animated-empty-accent);
        border-radius: 9999px;
        display: block;
        height: 5px;
        width: 5px;
      }

      .animated-empty-state__dot:nth-child(2) {
        animation-delay: 0.18s;
      }

      .animated-empty-state__dot:nth-child(3) {
        animation-delay: 0.36s;
      }

      @keyframes animated-empty-state-glow {
        0%, 100% {
          opacity: 0.55;
          transform: translateY(0) scale(0.92);
        }

        50% {
          opacity: 1;
          transform: translateY(18px) scale(1.08);
        }
      }

      @keyframes animated-empty-state-float {
        0%, 100% {
          transform: translateY(0);
        }

        50% {
          transform: translateY(-5px);
        }
      }

      @keyframes animated-empty-state-pulse {
        0%, 100% {
          opacity: 0.72;
          transform: scale(1);
        }

        50% {
          opacity: 1;
          transform: scale(1.12);
        }
      }

      @keyframes animated-empty-state-dot {
        0%, 100% {
          opacity: 0.45;
          transform: scale(1);
        }

        50% {
          opacity: 1;
          transform: scale(1.22);
        }
      }