{# Top-tab nav shared by /skills, /skills/installed, /skills/playground.
   Caller passes `active` = 'marketplace' | 'installed' | 'playground'. #}
{% set _t_active = active|default('marketplace') %}
<div class="sticky top-14 z-20 bg-surface/95 backdrop-blur border-b border-border">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 flex items-center gap-1 h-12 overflow-x-auto">
    <a href="/skills"
      class="px-3 py-1.5 text-sm font-medium rounded-md transition-colors whitespace-nowrap"
      :class="''"
      {% if _t_active == 'marketplace' %}
        style="color: rgb(var(--color-accent)); background-color: rgb(var(--color-accent) / 0.12);"
      {% else %}
        style="color: #94a3b8;"
        onmouseover="this.style.color='#e2e8f0';"
        onmouseout="this.style.color='#94a3b8';"
      {% endif %}
    >Marketplace</a>
    <a href="/skills/installed"
      class="px-3 py-1.5 text-sm font-medium rounded-md transition-colors whitespace-nowrap"
      {% if _t_active == 'installed' %}
        style="color: rgb(var(--color-accent)); background-color: rgb(var(--color-accent) / 0.12);"
      {% else %}
        style="color: #94a3b8;"
        onmouseover="this.style.color='#e2e8f0';"
        onmouseout="this.style.color='#94a3b8';"
      {% endif %}
    >Installed</a>
    <a href="/skills/playground"
      class="px-3 py-1.5 text-sm font-medium rounded-md transition-colors whitespace-nowrap"
      {% if _t_active == 'playground' %}
        style="color: rgb(var(--color-accent)); background-color: rgb(var(--color-accent) / 0.12);"
      {% else %}
        style="color: #94a3b8;"
        onmouseover="this.style.color='#e2e8f0';"
        onmouseout="this.style.color='#94a3b8';"
      {% endif %}
    >Playground</a>
  </div>
</div>