Interactive Channel Legend

<div class="bg-transparent">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');</style>
  <div class="grid grid-cols-2 md:grid-cols-5 gap-6" id="channelLegend">
    <div class="flex items-center gap-3 p-3 rounded-lg bg-gradient-to-br from-emerald-500/20 to-transparent ring-1 ring-white/5 hover:ring-white/10 transition-all duration-200 cursor-pointer group">
      <div class="h-3 w-3 rounded-full bg-gradient-to-r from-emerald-400 to-emerald-500"></div>
      <div class="flex-1 min-w-0">
        <div class="text-sm font-medium text-white group-hover:text-white transition-colors">Google Ads</div>
        <div class="text-xs text-white/50">43K users • 25.3%</div>
      </div>
    </div>
    <div class="flex items-center gap-3 p-3 rounded-lg bg-gradient-to-br from-amber-500/20 to-transparent ring-1 ring-white/5 hover:ring-white/10 transition-all duration-200 cursor-pointer group">
      <div class="h-3 w-3 rounded-full bg-gradient-to-r from-amber-400 to-amber-500"></div>
      <div class="flex-1 min-w-0">
        <div class="text-sm font-medium text-white group-hover:text-white transition-colors">Organic Search</div>
        <div class="text-xs text-white/50">32K users • 18.8%</div>
      </div>
    </div>
    <div class="flex items-center gap-3 p-3 rounded-lg bg-gradient-to-br from-rose-500/20 to-transparent ring-1 ring-white/5 hover:ring-white/10 transition-all duration-200 cursor-pointer group">
      <div class="h-3 w-3 rounded-full bg-gradient-to-r from-rose-400 to-rose-500"></div>
      <div class="flex-1 min-w-0">
        <div class="text-sm font-medium text-white group-hover:text-white transition-colors">Meta Ads</div>
        <div class="text-xs text-white/50">24K users • 14.1%</div>
      </div>
    </div>
    <div class="flex items-center gap-3 p-3 rounded-lg bg-gradient-to-br from-blue-500/20 to-transparent ring-1 ring-white/5 hover:ring-white/10 transition-all duration-200 cursor-pointer group">
      <div class="h-3 w-3 rounded-full bg-gradient-to-r from-blue-400 to-blue-500"></div>
      <div class="flex-1 min-w-0">
        <div class="text-sm font-medium text-white group-hover:text-white transition-colors">LinkedIn Ads</div>
        <div class="text-xs text-white/50">19K users • 11.2%</div>
      </div>
    </div>
    <div class="flex items-center gap-3 p-3 rounded-lg bg-gradient-to-br from-violet-500/20 to-transparent ring-1 ring-white/5 hover:ring-white/10 transition-all duration-200 cursor-pointer group">
      <div class="h-3 w-3 rounded-full bg-gradient-to-r from-violet-400 to-violet-500"></div>
      <div class="flex-1 min-w-0">
        <div class="text-sm font-medium text-white group-hover:text-white transition-colors">Direct/Email</div>
        <div class="text-xs text-white/50">25K users • 14.7%</div>
      </div>
    </div>
  </div>
</div>