<%
  // Premium KPI tile (merge-plan §3.2 / §6).
  // Locals: { item: { name, icon, color, count, url? }, idx (optional), i18n }
  const _color  = item.color || 'primary';
  const _count  = Number(item.count) || 0;
  const _label  = i18n.__(item.name);
  const _stagger = (typeof idx === 'number' ? idx : 0);
%>
<% if (item.url) { %>
<a href="<%= item.url %>"
   class="hk-kpi hk-kpi-animate hk-kpi--<%= _color %>"
   style="--hk-s: <%= _stagger %>"
   aria-label="<%= _label %>">
<% } else { %>
<div class="hk-kpi hk-kpi-animate hk-kpi--<%= _color %>"
     style="--hk-s: <%= _stagger %>"
     aria-label="<%= _label %>">
<% } %>
  <div class="hk-kpi-icon c-<%= _color %>">
    <i class="<%= item.icon %>" aria-hidden="true"></i>
  </div>
  <div class="hk-kpi-meta">
    <span class="hk-kpi-label"><%= _label %></span>
    <span class="hk-kpi-value" data-count-target="<%= _count %>">0</span>
  </div>
<% if (item.url) { %>
</a>
<% } else { %>
</div>
<% } %>
