<div style="font-family:'Satoshi',sans-serif;">
<div style="display:flex;align-items:flex-end;border-bottom:2px solid var(--primary-light);gap:0;overflow-x:auto;">
<button style="padding:10px 18px;border:none;background:none;cursor:pointer;font-family:'Satoshi',sans-serif;font-size:0.875rem;font-weight:500;color:var(--paragraph);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;display:flex;align-items:center;gap:6px;transition:color 0.15s;">
Overview
</button>
<button style="padding:10px 18px;border:none;background:none;cursor:pointer;font-family:'Satoshi',sans-serif;font-size:0.875rem;font-weight:700;color:var(--primary-color);border-bottom:2px solid var(--primary-color);margin-bottom:-2px;white-space:nowrap;display:flex;align-items:center;gap:6px;transition:color 0.15s;">
Ideas
</button>
<button style="padding:10px 18px;border:none;background:none;cursor:pointer;font-family:'Satoshi',sans-serif;font-size:0.875rem;font-weight:500;color:var(--paragraph);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;display:flex;align-items:center;gap:6px;transition:color 0.15s;">
Discovery
</button>
<button style="padding:10px 18px;border:none;background:none;cursor:pointer;font-family:'Satoshi',sans-serif;font-size:0.875rem;font-weight:500;color:var(--paragraph);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;display:flex;align-items:center;gap:6px;transition:color 0.15s;">
Planning
</button>
<button style="padding:10px 18px;border:none;background:none;cursor:pointer;font-family:'Satoshi',sans-serif;font-size:0.875rem;font-weight:500;color:var(--paragraph);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;display:flex;align-items:center;gap:6px;transition:color 0.15s;">
Projects
</button>
<button style="padding:10px 18px;border:none;background:none;cursor:pointer;font-family:'Satoshi',sans-serif;font-size:0.875rem;font-weight:500;color:var(--paragraph);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;display:flex;align-items:center;gap:6px;transition:color 0.15s;">
Growth
</button>
</div>
<div style="padding:20px 0;color:var(--paragraph);font-size:0.875rem;">
Tab panel content appears here.
</div>
</div>
<div style="font-family:'Satoshi',sans-serif;">
{{! Tab bar }}
<div style="display:flex;align-items:flex-end;border-bottom:2px solid var(--primary-light);gap:0;overflow-x:auto;">
{{#each tabs}}
<button style="padding:10px 18px;border:none;background:none;cursor:pointer;font-family:'Satoshi',sans-serif;font-size:0.875rem;font-weight:{{#if this.active}}700{{else}}500{{/if}};color:{{#if this.active}}var(--primary-color){{else}}var(--paragraph){{/if}};border-bottom:2px solid {{#if this.active}}var(--primary-color){{else}}transparent{{/if}};margin-bottom:-2px;white-space:nowrap;display:flex;align-items:center;gap:6px;transition:color 0.15s;">
{{this.label}}
{{#if this.count}}<span style="display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:{{#if this.active}}var(--primary-color){{else}}#e5e7eb{{/if}};color:{{#if this.active}}#fff{{else}}var(--paragraph){{/if}};font-size:0.65rem;font-weight:700;">{{this.count}}</span>{{/if}}
</button>
{{/each}}
</div>
{{! Tab content placeholder }}
<div style="padding:20px 0;color:var(--paragraph);font-size:0.875rem;">
{{activeContent}}
</div>
</div>
{
"tabs": [
{
"label": "Overview",
"active": false
},
{
"label": "Ideas",
"active": true
},
{
"label": "Discovery",
"active": false
},
{
"label": "Planning",
"active": false
},
{
"label": "Projects",
"active": false
},
{
"label": "Growth",
"active": false
}
],
"activeContent": "Tab panel content appears here."
}
Horizontal tab navigation used within tool pages. Appears in: Script Generator (Script / Research / Notes tabs), Homerun Analysis, Channel Audit, Competitor Analysis, Video Report.