<div id="tab-activity" class="profile-tab-panel<%= activeTab !== 'activity' ? ' hidden' : '' %>">
  <div class="profile-card">
    <p class="profile-section-title">Recent Activity</p>
    <div class="space-y-2">
      <% if (!activity.length) { %>
      <p class="text-sm py-8 text-center" style="color:rgba(255,255,255,.35)">No recent activity yet.</p>
      <% } %>
      <% activity.forEach(function(a) {
        const bg = a.color === 'teal' ? 'rgba(19,179,180,.15)' : a.color === 'blue' ? 'rgba(68,144,211,.15)' : 'rgba(128,101,248,.15)';
        const fg = a.color === 'teal' ? '#13b3b4' : a.color === 'blue' ? '#4490d3' : '#a78bfa';
      %>
      <div class="profile-activity-row">
        <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0" style="background:<%= bg %>">
          <span class="text-xs font-bold" style="color:<%= fg %>"><%= a.type === 'post' ? 'P' : a.type === 'campaign' ? 'N' : 'L' %></span>
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-sm font-semibold text-white truncate"><%= a.title %></p>
          <p class="text-xs mt-0.5 truncate" style="color:rgba(255,255,255,.35)"><%= a.meta %></p>
        </div>
        <span class="text-xs flex-shrink-0" style="color:rgba(255,255,255,.3)"><%= a.timeLabel %></span>
      </div>
      <% }); %>
    </div>
  </div>
</div>
