<div class="ionrift-app-container avatar-manifest-container" style="display:flex; flex-direction:column; height:100%; min-height:0;">

    <!-- Top Navigation Bar & Global KPI -->
    <div class="dashboard-header" style="display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid rgba(140,110,240,0.2); background:rgba(12,10,24,0.6); flex-shrink:0;">
        <div style="display:flex; align-items:center; gap:16px;">
            <div class="dashboard-stat" style="display:flex; align-items:center; gap:10px;">
                <div class="dashboard-gauge" style="--pct: {{coverage.overallCoveragePct}}%; --gauge-color: {{#if (gte coverage.overallCoveragePct 70)}}#4ade80{{else if (gte coverage.overallCoveragePct 35)}}#facc15{{else}}#f87171{{/if}};">
                    <span>{{coverage.overallCoveragePct}}%</span>
                </div>
                <div class="dashboard-text" style="display:flex; flex-direction:column;">
                    <span class="label" style="font-size:0.7em; text-transform:uppercase; letter-spacing:0.5px; color:rgba(180,165,220,0.7);">Coverage Health</span>
                    <span class="value" style="font-size:0.95em; font-weight:700; color:#fff;">
                        {{coverage.totalTokens}} Tokens
                        {{#if coverage.reservoirTokens}}
                        <span style="font-size:0.75em; font-weight:500; color:rgba(180,165,220,0.65);">({{coverage.reservoirTokens}} Reservoir)</span>
                        {{/if}}
                    </span>
                </div>
            </div>

            <!-- Tab Switcher -->
            <nav class="manifest-nav-tabs sheet-tabs tabs" style="display:flex; gap:6px; margin-left:12px; border:none !important; border-top:none !important; border-bottom:none !important;">
                <a class="nav-tab item {{#if isTabCoverage}}active{{/if}}" data-tab="coverage" style="padding:6px 14px; border-radius:6px; font-weight:600; font-size:0.85em; cursor:pointer; background:{{#if isTabCoverage}}rgba(140,110,240,0.3){{else}}rgba(255,255,255,0.05){{/if}}; color:{{#if isTabCoverage}}#fff{{else}}rgba(200,190,230,0.7){{/if}};">
                    <i class="fas fa-chart-pie"></i> Coverage Intelligence
                </a>
                <a class="nav-tab item {{#if isTabCuration}}active{{/if}}" data-tab="curation" style="padding:6px 14px; border-radius:6px; font-weight:600; font-size:0.85em; cursor:pointer; background:{{#if isTabCuration}}rgba(140,110,240,0.3){{else}}rgba(255,255,255,0.05){{/if}}; color:{{#if isTabCuration}}#fff{{else}}rgba(200,190,230,0.7){{/if}};">
                    <i class="fas fa-tags"></i> Token Curation
                </a>
                <a class="nav-tab item {{#if isTabFolders}}active{{/if}}" data-tab="folders" style="padding:6px 14px; border-radius:6px; font-weight:600; font-size:0.85em; cursor:pointer; background:{{#if isTabFolders}}rgba(140,110,240,0.3){{else}}rgba(255,255,255,0.05){{/if}}; color:{{#if isTabFolders}}#fff{{else}}rgba(200,190,230,0.7){{/if}};">
                    <i class="fas fa-folder-tree"></i> Watch Folders ({{watchFolders.length}})
                </a>
            </nav>
        </div>

        <div style="display:flex; align-items:center; gap:8px; flex-shrink:0;">
            <button type="button" id="add-species-btn" class="ionrift-btn" style="height:28px; line-height:26px; padding:0 12px; font-size:0.82em; display:inline-flex; align-items:center; gap:6px; background:rgba(168,85,247,0.25); border:1px solid rgba(168,85,247,0.45); border-radius:4px; color:#d8b4fe; cursor:pointer; white-space:nowrap; flex:0 0 auto; box-sizing:border-box;" title="Add a custom or homebrew species to the manifest and coverage matrix">
                <i class="fas fa-plus"></i> Add Species
            </button>
            <button type="button" id="rescan-assets-btn" class="ionrift-btn" style="height:28px; line-height:26px; padding:0 12px; font-size:0.82em; display:inline-flex; align-items:center; gap:6px; background:rgba(120,90,200,0.25); border:1px solid rgba(140,110,240,0.4); border-radius:4px; color:#fff; cursor:pointer; white-space:nowrap; flex:0 0 auto; box-sizing:border-box;" title="Re-scan all watch folders for new images">
                <i class="fas fa-sync-alt"></i> Re-scan Folders
            </button>
        </div>
    </div>

    <!-- MAIN BODY CONTENT -->
    <div style="flex:1 1 0; min-height:0; overflow:hidden; display:flex; flex-direction:column;">

        <!-- TAB 1: COVERAGE & GAPS DASHBOARD -->
        {{#if isTabCoverage}}
        <div style="flex:1 1 0; min-height:0; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:16px;">
            
            <!-- Legend / Guidance Banner with Protected Nowrap Badges -->
            <div style="display:flex; align-items:center; justify-content:space-between; gap:16px; background:rgba(20,16,36,0.7); border:1px solid rgba(140,110,240,0.25); border-radius:8px; padding:10px 16px;">
                <div style="font-size:0.85em; color:rgba(210,200,240,0.9); flex:1; min-width:180px;">
                    <i class="fas fa-info-circle" style="color:#a78bfa; margin-right:6px;"></i>
                    Click any cell to jump directly to curation. Target depth: 10 tokens per archetype for 100% species coverage.
                </div>
                <div style="display:flex; gap:10px; font-size:0.76em; text-transform:uppercase; font-weight:700; flex-shrink:0; align-items:center; flex-wrap:wrap;">
                    <span class="manifest-legend-badge" style="color:#34d399;" title="Target met: 10 or more tokens for this role">
                        <span style="width:10px; height:10px; border-radius:2px; background:#10b981; box-shadow:0 0 6px rgba(52,211,153,0.6);"></span> Target Met (10+)
                    </span>
                    <span class="manifest-legend-badge" style="color:#86efac;" title="Healthy variety: 5 to 9 tokens">
                        <span style="width:10px; height:10px; border-radius:2px; background:#22c55e;"></span> Healthy (5-9)
                    </span>
                    <span class="manifest-legend-badge" style="color:#facc15;" title="Thin variety warning: 1 to 4 tokens">
                        <span style="width:10px; height:10px; border-radius:2px; background:#eab308;"></span> Thin (1-4)
                    </span>
                    <span class="manifest-legend-badge" style="color:#fda4af;" title="No specific role art: falls back to species commoner art">
                        <span style="width:10px; height:10px; border-radius:2px; background:rgba(244,63,94,0.3); border:1px dashed #f43f5e;"></span> Fallback (0)
                    </span>
                    <span class="manifest-legend-badge" style="color:#fca5a5;" title="No art: falls back to SVG vector glyph">
                        <span style="width:10px; height:10px; border-radius:2px; background:#ef4444;"></span> Missing (0)
                    </span>
                    {{#if coverage.reservoirTokens}}
                    <span class="manifest-legend-badge" style="color:rgba(192,132,252,0.85); border-left:1px solid rgba(140,110,240,0.3); padding-left:12px;" title="{{coverage.reservoirTokens}} unassigned art tokens available in reservoir">
                        <i class="fas fa-boxes-stacked" style="color:#c084fc;"></i> {{coverage.reservoirTokens}} Reservoir
                    </span>
                    {{/if}}
                </div>
            </div>

            <!-- Heatmap Matrix Table -->
            <div style="overflow-x:auto; background:rgba(15,12,28,0.8); border:1px solid rgba(140,110,240,0.2); border-radius:8px; padding:8px;">
                <table class="manifest-matrix-table" style="width:100%; border-collapse:collapse; text-align:center; font-size:0.82em;">
                    <thead>
                        <tr style="border-bottom:1px solid rgba(140,110,240,0.3); color:rgba(200,190,240,0.7); text-transform:uppercase; font-size:0.75em; letter-spacing:0.5px;">
                            <th style="text-align:left; padding:8px 12px; width:130px;">Species / Culture</th>
                            <th style="padding:8px 6px; width:75px;" title="Target Depth Coverage: Credited tokens / 110 depth points (10 per role)">Coverage</th>
                            {{#each coverage.archetypes as |arch|}}
                            <th style="padding:8px 4px;">{{arch}}</th>
                            {{/each}}
                        </tr>
                    </thead>
                    <tbody>
                        {{#each coverage.primarySpecies as |species|}}
                        {{#with (lookup ../coverage.speciesStats species) as |stats|}}
                        <tr style="border-bottom:1px solid rgba(140,110,240,0.1); transition:background 0.15s ease;">
                            <td style="text-align:left; padding:8px 12px; font-weight:700; color:#fff; text-transform:capitalize;">
                                <div style="display:flex; align-items:center; justify-content:space-between; gap:4px;">
                                    <span>{{species}}</span>
                                    <div style="display:flex; align-items:center; gap:4px;">
                                        {{#if stats.isCustom}}
                                        <span style="font-size:0.68em; font-weight:700; text-transform:uppercase; background:rgba(168,85,247,0.2); color:#c084fc; border:1px solid rgba(168,85,247,0.4); border-radius:3px; padding:1px 5px; vertical-align:middle;">Homebrew</span>
                                        <button type="button" class="ionrift-btn demote-species-btn" data-species="{{species}}" title="Demote to Exotic / Minor species bucket" style="height:20px; line-height:18px; padding:0 6px; font-size:0.7em; background:rgba(234,179,8,0.2); border:1px solid rgba(234,179,8,0.4); color:#fde047; border-radius:3px; cursor:pointer;">
                                            <i class="fas fa-arrow-down"></i> Demote
                                        </button>
                                        {{/if}}
                                        {{#if stats.hasCastes}}
                                        <span style="font-size:0.68em; font-weight:700; text-transform:uppercase; background:rgba(59,130,246,0.2); color:#60a5fa; border:1px solid rgba(59,130,246,0.4); border-radius:3px; padding:1px 5px; vertical-align:middle;">Castes</span>
                                        {{/if}}
                                    </div>
                                </div>
                                <span style="font-size:0.8em; font-weight:400; color:rgba(160,140,210,0.6); display:block;">
                                    {{stats.totalTokens}} tokens
                                </span>
                            </td>
                            <td style="padding:6px 6px; text-align:center;">
                                {{#if stats.hasCastes}}
                                <div style="font-weight:700; font-size:1.05em; color:{{#if (gte stats.castePercentage 70)}}#4ade80{{else if (gte stats.castePercentage 35)}}#facc15{{else}}#f87171{{/if}};"
                                    title="Caste Coverage: {{stats.castePercentage}}% (Adaptive functional castes)">
                                    {{stats.castePercentage}}%
                                </div>
                                <div style="font-size:0.73em; color:#60a5fa;" title="Adaptive Caste System active">
                                    Caste Model
                                </div>
                                {{else}}
                                <div style="font-weight:700; font-size:1.05em; color:{{#if (gte stats.percentage 70)}}#4ade80{{else if (gte stats.percentage 35)}}#facc15{{else}}#f87171{{/if}};"
                                    title="{{stats.credited}} / {{stats.maxPoints}} depth points (Target: {{stats.targetPerArchetype}} per role)">
                                    {{stats.percentage}}%
                                </div>
                                <div style="font-size:0.73em; color:rgba(180,165,220,0.6);"
                                    title="{{stats.filled}}/{{stats.total}} roles filled with at least 1 token · {{stats.credited}}/{{stats.maxPoints}} depth">
                                    {{stats.filled}}/{{stats.total}} roles
                                </div>
                                {{/if}}
                            </td>
                            {{#each ../../coverage.archetypes as |arch|}}
                            {{#with (lookup (lookup ../../../coverage.matrix species) arch) as |cell|}}
                            <td style="padding:4px;">
                                <div class="matrix-cell status-{{cell.status}}" data-species="{{species}}" data-archetype="{{arch}}"
                                    title="{{species}} {{arch}}: {{cell.count}} token(s) ({{cell.credited}}/{{cell.target}} credited towards 10-token target)">
                                    {{cell.count}}
                                </div>
                            </td>
                            {{/with}}
                            {{/each}}
                        </tr>
                        {{/with}}
                        {{/each}}

                        <!-- Unified Other & Exotic Species Collective Row -->
                        <tr class="other-species-row {{#if isOtherSpeciesExpanded}}is-expanded{{/if}}" style="background:rgba(88,28,135,0.18); border-top:2px solid rgba(168,85,247,0.35); border-bottom:1px solid rgba(168,85,247,0.25); cursor:pointer; transition:background 0.15s ease;">
                            <td style="text-align:left; padding:8px 12px; font-weight:700; color:#fff;">
                                <div style="display:flex; align-items:center; justify-content:space-between; gap:6px;">
                                    <div style="display:flex; align-items:center; gap:8px;">
                                        <button type="button" class="other-species-toggle-btn" style="background:none; border:none; color:#c084fc; cursor:pointer; padding:0; font-size:0.9em; display:flex; align-items:center;" title="Expand / collapse exotic species and reservoir drawer">
                                            <i class="fas {{#if isOtherSpeciesExpanded}}fa-chevron-down{{else}}fa-chevron-right{{/if}}"></i>
                                        </button>
                                        <span style="color:#e9d5ff;">Other / Exotic Species</span>
                                    </div>
                                    <span style="font-size:0.68em; font-weight:700; text-transform:uppercase; background:rgba(192,132,252,0.25); color:#d8b4fe; border:1px solid rgba(192,132,252,0.45); border-radius:3px; padding:1px 5px;">Pool</span>
                                </div>
                                <span style="font-size:0.78em; font-weight:400; color:rgba(216,180,254,0.7); display:block; padding-left:18px;">
                                    {{coverage.otherRow.stats.totalTokens}} tokens{{#if coverage.exoticSpecies.length}} ({{coverage.exoticSpecies.length}} exotic species){{/if}}
                                </span>
                            </td>
                            <td style="padding:6px 6px; text-align:center;">
                                <div style="font-weight:700; font-size:1.05em; color:{{#if (gte coverage.otherRow.stats.percentage 70)}}#4ade80{{else if (gte coverage.otherRow.stats.percentage 35)}}#facc15{{else}}#f87171{{/if}};"
                                    title="General Variety Pool Health: {{coverage.otherRow.stats.percentage}}%">
                                    {{coverage.otherRow.stats.percentage}}%
                                </div>
                                <div style="font-size:0.73em; color:rgba(216,180,254,0.7);"
                                    title="Exotic species evaluated against 10-token general target">
                                    {{#if (gte coverage.otherRow.stats.percentage 70)}}Optimal Pool{{else if (gte coverage.otherRow.stats.percentage 35)}}Good Pool{{else}}Thin Pool{{/if}}
                                </div>
                            </td>
                            <td colspan="{{coverage.archetypes.length}}" style="padding:8px 14px; text-align:left; vertical-align:middle;">
                                <div style="display:flex; align-items:center; justify-content:space-between; gap:16px;">
                                    <div style="display:flex; align-items:center; gap:10px;">
                                        <span style="display:inline-flex; align-items:center; gap:6px; color:#d8b4fe; font-weight:700; font-size:0.88em; letter-spacing:0.3px;">
                                            <i class="fas fa-layer-group" style="color:#c084fc;"></i>
                                            General Variety Pool
                                        </span>
                                        <span style="font-size:0.78em; color:rgba(200,190,240,0.7);">
                                            Exotic & minor cultures resolve directly to species tokens without feudal trade divisions.
                                        </span>
                                    </div>
                                    <div style="display:flex; align-items:center; gap:12px; flex-shrink:0;">
                                        <span class="manifest-legend-badge" style="color:#34d399; font-size:0.8em; font-weight:600;" title="{{coverage.exoticSpecies.length}} exotic species registered with {{coverage.otherRow.stats.exoticTokenCount}} total tokens">
                                            <span style="width:8px; height:8px; border-radius:50%; background:#10b981; box-shadow:0 0 6px rgba(52,211,153,0.5);"></span>
                                            {{coverage.exoticSpecies.length}} Exotic Species ({{coverage.otherRow.stats.exoticTokenCount}} tokens)
                                        </span>
                                        <span class="manifest-legend-badge" style="color:#c084fc; font-size:0.8em; font-weight:600; border-left:1px solid rgba(140,110,240,0.3); padding-left:12px;" title="{{coverage.reservoirTokens}} unassigned tokens available as global fallback">
                                            <i class="fas fa-boxes-stacked" style="color:#c084fc;"></i> {{coverage.reservoirTokens}} Reservoir
                                        </span>
                                        <span style="color:#c084fc; font-size:0.78em; font-weight:600; margin-left:4px; display:inline-flex; align-items:center; gap:4px;">
                                            <i class="fas {{#if isOtherSpeciesExpanded}}fa-chevron-up{{else}}fa-chevron-down{{/if}}"></i>
                                            {{#if isOtherSpeciesExpanded}}Collapse{{else}}View Roster{{/if}}
                                        </span>
                                    </div>
                                </div>
                            </td>
                        </tr>

                        <!-- Expandable Exotic Species & Reservoir Drawer -->
                        {{#if isOtherSpeciesExpanded}}
                        <tr class="exotic-species-drawer-row">
                            <td colspan="13" style="padding:0; background:rgba(12,9,24,0.92); border-bottom:1px solid rgba(168,85,247,0.3);">
                                <div class="exotic-species-drawer" style="padding:14px 16px; display:flex; flex-direction:column; gap:12px;">
                                    <div style="display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(140,110,240,0.18); padding-bottom:8px;">
                                        <div>
                                            <div style="font-size:0.88em; font-weight:700; color:#fff; display:flex; align-items:center; gap:8px;">
                                                <i class="fas fa-layer-group" style="color:#c084fc;"></i>
                                                <span>Exotic & Minor Species Roster</span>
                                                <span style="font-size:0.75em; font-weight:600; color:rgba(180,165,220,0.7);">(Target: 10 tokens per species for 100% General Variety)</span>
                                            </div>
                                            <div style="font-size:0.78em; color:rgba(200,190,240,0.75); margin-top:2px;">
                                                Minor cultures blur into the demographic pool. Promote any species to grant it a dedicated 11-role campaign matrix.
                                            </div>
                                        </div>
                                        <div style="font-size:0.8em; color:rgba(192,132,252,0.9); background:rgba(168,85,247,0.15); border:1px solid rgba(168,85,247,0.3); border-radius:4px; padding:4px 10px;">
                                            <i class="fas fa-boxes-stacked"></i> <strong>{{coverage.reservoirTokens}}</strong> Unassigned Reservoir Tokens
                                        </div>
                                    </div>

                                    {{#if coverage.otherRow.exoticSpecies.length}}
                                    <div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px;">
                                        {{#each coverage.otherRow.exoticSpecies as |exo|}}
                                        <div class="exotic-species-card" style="background:rgba(24,18,44,0.85); border:1px solid rgba(140,110,240,0.25); border-radius:6px; padding:10px 12px; display:flex; flex-direction:column; gap:8px;">
                                            <div style="display:flex; justify-content:space-between; align-items:center;">
                                                <div style="display:flex; align-items:center; gap:6px;">
                                                    <span style="font-weight:700; color:#fff; font-size:0.92em;">{{exo.label}}</span>
                                                    <span class="manifest-legend-badge status-badge-{{exo.status}}" style="font-size:0.68em; padding:1px 5px; border-radius:3px; text-transform:uppercase; font-weight:700;">
                                                        {{exo.status}}
                                                    </span>
                                                </div>
                                                <div style="font-size:0.82em; font-weight:700; color:{{#if (gte exo.percentage 70)}}#4ade80{{else if (gte exo.percentage 35)}}#facc15{{else}}#f87171{{/if}};">
                                                    {{exo.percentage}}%
                                                </div>
                                            </div>

                                            <div style="display:flex; align-items:center; gap:8px;">
                                                <div style="flex:1; height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden;">
                                                    <div style="height:100%; width:{{exo.percentage}}%; background:{{#if (gte exo.percentage 70)}}#4ade80{{else if (gte exo.percentage 35)}}#facc15{{else}}#f87171{{/if}}; border-radius:3px;"></div>
                                                </div>
                                                <span style="font-size:0.75em; color:rgba(200,190,240,0.8); white-space:nowrap;">{{exo.tokens}} / {{exo.target}} tokens</span>
                                            </div>

                                            <div style="display:flex; justify-content:space-between; align-items:center; margin-top:2px; padding-top:6px; border-top:1px solid rgba(140,110,240,0.15);">
                                                <span style="font-size:0.73em; color:rgba(180,165,220,0.6);">Exotic Variety</span>
                                                <button type="button" class="ionrift-btn promote-species-btn" data-species="{{exo.id}}" title="Promote to Primary Culture (adds full 11-role row to main matrix)" style="height:22px; line-height:20px; padding:0 8px; font-size:0.74em; display:inline-flex; align-items:center; gap:4px; background:rgba(168,85,247,0.25); border:1px solid rgba(168,85,247,0.45); border-radius:3px; color:#d8b4fe; cursor:pointer;">
                                                    <i class="fas fa-arrow-up"></i> Promote to Primary
                                                </button>
                                            </div>
                                        </div>
                                        {{/each}}
                                    </div>
                                    {{else}}
                                    <div style="text-align:center; padding:16px 12px; color:rgba(180,165,220,0.65); font-size:0.84em; background:rgba(0,0,0,0.2); border-radius:6px; border:1px dashed rgba(140,110,240,0.2);">
                                        <i class="fas fa-feather" style="margin-right:6px; color:#a78bfa;"></i>
                                        No exotic species registered yet. Use <strong>[+ Add Species]</strong> above to catalog minor species (e.g. Aarakocra, Goliath, Kobold), or classify tokens in Curation.
                                    </div>
                                    {{/if}}
                                </div>
                            </td>
                        </tr>
                        {{/if}}
                    </tbody>
                </table>
            </div>

            <!-- Adaptive Caste Coverage Matrices (for species with defined functional castes) -->
            {{#if coverage.casteStats}}
            {{#each coverage.casteStats as |cStats cSpecies|}}
            <div class="caste-matrix-block" style="background:rgba(15,12,28,0.85); border:1px solid rgba(168,85,247,0.3); border-radius:8px; padding:12px; margin-top:4px;">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
                    <div style="display:flex; align-items:center; gap:8px;">
                        <span style="font-weight:700; color:#fff; text-transform:capitalize; font-size:0.95em;">{{cSpecies}} Caste Ontology</span>
                        <span style="font-size:0.7em; font-weight:700; text-transform:uppercase; background:rgba(168,85,247,0.25); color:#c084fc; border:1px solid rgba(168,85,247,0.4); border-radius:3px; padding:1px 6px;">Adaptive Castes</span>
                        <span style="font-size:0.8em; color:rgba(180,165,220,0.7);">{{cStats.totalTokens}} total tokens</span>
                    </div>
                    <div style="display:flex; align-items:center; gap:10px;">
                        <span style="font-size:0.8em; color:rgba(200,190,240,0.8);">Caste Coverage:</span>
                        <span style="font-weight:700; font-size:1.1em; color:{{#if (gte cStats.percentage 70)}}#4ade80{{else if (gte cStats.percentage 35)}}#facc15{{else}}#f87171{{/if}};">
                            {{cStats.percentage}}%
                        </span>
                        <span style="font-size:0.75em; color:rgba(180,165,220,0.6);">({{cStats.filled}}/{{cStats.total}} castes active)</span>
                    </div>
                </div>

                <div style="overflow-x:auto;">
                    <table class="manifest-matrix-table" style="width:100%; border-collapse:collapse; text-align:center; font-size:0.82em;">
                        <thead>
                            <tr style="border-bottom:1px solid rgba(140,110,240,0.3); color:rgba(200,190,240,0.7); text-transform:uppercase; font-size:0.75em; letter-spacing:0.5px;">
                                <th style="text-align:left; padding:6px 10px; width:150px;">Caste Title</th>
                                <th style="padding:6px 4px; width:90px;">Pillar</th>
                                <th style="padding:6px 4px; width:60px;">Tier</th>
                                <th style="padding:6px 4px; width:110px;">Art Bridge</th>
                                <th style="padding:6px 6px; width:100px;">Status</th>
                                <th style="padding:6px 6px; width:70px;">Tokens</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{#each (lookup ../coverage.casteMatrix cSpecies) as |cell casteId|}}
                            <tr style="border-bottom:1px solid rgba(140,110,240,0.1);">
                                <td style="text-align:left; padding:6px 10px; font-weight:600; color:#fff;">
                                    {{cell.label}}
                                </td>
                                <td style="padding:4px; text-transform:capitalize; color:rgba(200,190,240,0.8);">
                                    {{cell.pillar}}
                                </td>
                                <td style="padding:4px; color:rgba(200,190,240,0.8);">
                                    T{{cell.tier}}
                                </td>
                                <td style="padding:4px; font-style:italic; color:{{#if cell.bridgeTo}}#a78bfa{{else}}rgba(160,150,190,0.5){{/if}};">
                                    {{#if cell.bridgeTo}}{{cell.bridgeTo}}{{else}}Direct{{/if}}
                                </td>
                                <td style="padding:4px;">
                                    <span class="manifest-legend-badge status-badge-{{cell.status}}" style="font-size:0.72em; padding:2px 6px; border-radius:3px; text-transform:uppercase; font-weight:700;">
                                        {{cell.status}}
                                        {{#if cell.isBridged}}<span style="opacity:0.75; font-size:0.85em;">(bridged)</span>{{/if}}
                                    </span>
                                </td>
                                <td style="padding:4px;">
                                    <div class="matrix-cell status-{{cell.status}}" data-species="{{cSpecies}}" data-caste="{{cell.id}}" data-archetype="{{#if cell.bridgeTo}}{{cell.bridgeTo}}{{else}}{{cell.id}}{{/if}}"
                                        title="{{cSpecies}} {{cell.label}}: {{cell.count}} token(s) (Target: {{cell.target}})">
                                        {{cell.count}}
                                    </div>
                                </td>
                            </tr>
                            {{/each}}
                        </tbody>
                    </table>
                </div>
            </div>
            {{/each}}
            {{/if}}

        </div>
        {{/if}}

        <!-- TAB 2: TOKEN CURATION & BATCH TAGGING -->
        {{#if isTabCuration}}
        <div class="curation-layout-container" style="flex:1 1 0; min-height:0; display:flex; flex-direction:row;">

            <!-- Left Folder Stratification Sidebar (Collapsible) -->
            <div class="curation-folder-sidebar {{#if isFolderSidebarCollapsed}}is-collapsed{{/if}}" style="flex-shrink:0; background:rgba(10,8,20,0.88); border-right:1px solid rgba(140,110,240,0.2); display:flex; flex-direction:column; padding:{{#if isFolderSidebarCollapsed}}8px 4px{{else}}10px 8px{{/if}}; width:{{#if isFolderSidebarCollapsed}}38px{{else}}{{sidebarWidth}}px{{/if}};">
                
                {{#if isFolderSidebarCollapsed}}
                <!-- Collapsed Sidebar Rail -->
                <div style="display:flex; flex-direction:column; align-items:center; gap:12px;">
                    <button type="button" class="curation-sidebar-toggle-btn" title="Expand Folder Filter">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                    <i class="fas fa-folder-tree" style="color:rgba(180,165,220,0.5); font-size:1.1em;" title="Folder Tree Collapsed"></i>
                </div>
                {{else}}
                <!-- Expanded Sidebar Header -->
                <div style="font-size:0.75em; text-transform:uppercase; font-weight:700; color:rgba(180,165,220,0.6); margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; padding:0 4px;">
                    <div style="display:flex; align-items:center; gap:6px;">
                        <i class="fas fa-folder-tree" style="color:#a78bfa;"></i>
                        <span>Folder Tree</span>
                    </div>
                    <div style="display:flex; align-items:center; gap:8px;">
                        {{#if selectedFolder}}
                        <a class="clear-folder-filter-btn" style="cursor:pointer; font-size:0.75em; text-transform:none; padding:1px 5px;" title="Clear folder filter">Clear</a>
                        {{/if}}
                        <button type="button" class="curation-sidebar-toggle-btn" title="Collapse Folder Sidebar">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                    </div>
                </div>

                {{#if scopedFolder}}
                <!-- Tree Scope Breadcrumbs Header -->
                <div class="tree-scope-bar">
                    <button type="button" class="tree-scope-up-btn" title="Go up one folder level">
                        <i class="fas fa-arrow-up"></i>
                    </button>
                    <div class="tree-scope-crumbs">
                        {{#each breadcrumbs as |crumb|}}
                        {{#if crumb.isCurrent}}
                        <span class="tree-crumb-current" title="{{crumb.path}}">{{crumb.name}}</span>
                        {{else}}
                        <a class="tree-crumb-item" data-folder="{{crumb.path}}" title="Jump to {{crumb.name}}">{{crumb.name}}</a>
                        <span class="tree-crumb-sep">/</span>
                        {{/if}}
                        {{/each}}
                    </div>
                    <button type="button" class="tree-scope-clear-btn" title="Clear folder focus (show all watch folders)">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                {{/if}}

                <!-- Hierarchical Folder Tree -->
                <div class="curation-folder-tree-scroll" style="flex:1 1 0; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:2px; padding-right:2px;">
                    <!-- All Watched Tokens Root Node -->
                    <div class="folder-tree-node all-tokens-node {{#if isAllTokensActive}}is-active{{/if}}" data-folder="" title="View all scanned tokens across all watch folders">
                        <i class="fas fa-layer-group folder-icon" style="color:#a78bfa;"></i>
                        <span class="folder-name" style="font-weight:600;">All Watched Tokens</span>
                        <span class="folder-badge {{#if filters.hasActiveFilters}}is-filtered-match{{/if}}" title="{{#if filters.hasActiveFilters}}{{pagination.totalItems}} tokens match active filters out of {{coverage.totalTokens}} total{{else}}{{coverage.totalTokens}} total tokens{{/if}}">{{#if filters.hasActiveFilters}}{{pagination.totalItems}} / {{coverage.totalTokens}}{{else}}{{coverage.totalTokens}}{{/if}}</span>
                    </div>

                    <!-- Blacklisted Tokens Quick-Filter Node -->
                    <div class="folder-tree-node is-blacklisted-node quick-status-node {{#if isBlacklistedFilter}}is-active{{/if}}" data-status="blacklisted" title="View all blacklisted tokens (excluded from resident generation)">
                        <i class="fas fa-ban folder-icon" style="color:#ef4444;"></i>
                        <span class="folder-name" style="font-weight:600; color:#fca5a5;">Blacklisted</span>
                        <span class="folder-badge" style="background:rgba(239,68,68,0.25); color:#fca5a5; border-color:rgba(239,68,68,0.4);">{{blacklistedCount}}</span>
                    </div>

                    {{#each folderTree as |f|}}
                    <div class="folder-tree-node {{#if f.isSelected}}is-active{{/if}} {{#if f.isBanned}}is-banned-folder{{/if}} {{#if f.isFilteredOut}}is-filtered-out{{/if}}" data-folder="{{f.path}}" style="padding-left:{{f.indentPx}}px;" title="{{f.path}} ({{#if f.hasFilterContext}}{{f.matchCount}} of {{f.count}} tokens match active filters{{else}}{{f.count}} tokens{{/if}}){{#if f.isBanned}} [BANNED - Excluded from generation]{{/if}}">
                        {{#if f.hasChildren}}
                        <span class="folder-tree-caret" title="{{#if f.isExpanded}}Collapse{{else}}Expand{{/if}}">
                            <i class="fas {{#if f.isExpanded}}fa-chevron-down{{else}}fa-chevron-right{{/if}}"></i>
                        </span>
                        {{else}}
                        <span style="width:14px; display:inline-block; flex-shrink:0;"></span>
                        {{/if}}

                        <i class="fas {{#if f.isExpanded}}fa-folder-open{{else}}fa-folder{{/if}} folder-icon"></i>
                        <span class="folder-name">{{f.name}}</span>
                        <div class="folder-actions-wrapper">
                            {{#if f.hasChildren}}
                            <button type="button" class="folder-action-btn folder-scope-btn" data-folder="{{f.path}}" title="Focus into folder '{{f.name}}' (or double-click row)">
                                <i class="fas fa-crosshairs"></i>
                            </button>
                            {{/if}}
                            <button type="button" class="folder-action-btn folder-tag-btn" data-folder="{{f.path}}" title="Batch tag folder '{{f.name}}'">
                                <i class="fas fa-tags"></i>
                            </button>
                            <button type="button" class="folder-action-btn folder-ban-btn {{#if f.isBanned}}is-active{{/if}}" data-folder="{{f.path}}" title="{{#if f.isBanned}}Unban folder '{{f.name}}' (restore for generation){{else}}Ban entire folder '{{f.name}}' (exclude all tokens from generation){{/if}}">
                                <i class="fas fa-ban"></i>
                            </button>
                        </div>
                        <span class="folder-badge {{#if f.isFilteredOut}}is-filtered-empty{{else if f.isFilteredMatched}}is-filtered-match{{/if}}" title="{{#if f.hasFilterContext}}{{f.matchCount}} of {{f.count}} tokens match active filters{{else}}{{f.count}} tokens{{/if}}">
                            {{#if f.hasFilterContext}}
                                {{#if f.isFilteredOut}}
                                0 / {{f.count}}
                                {{else}}
                                {{f.matchCount}}
                                {{/if}}
                            {{else}}
                                {{f.count}}
                            {{/if}}
                        </span>
                    </div>
                    {{else}}
                    <div style="font-size:0.8em; color:#666; font-style:italic; padding:8px 4px;">No folders scanned yet.</div>
                    {{/each}}
                </div>
                {{/if}}
            </div>

            <!-- Draggable Splitter Resizer Handle -->
            {{#unless isFolderSidebarCollapsed}}
            <div class="curation-sidebar-resizer" title="Drag to resize folder sidebar"></div>
            {{/unless}}

            <!-- Right Curation Workspace -->
            <div class="curation-workspace-inner" style="flex:1 1 0; min-height:0; min-width:0; display:flex; flex-direction:column; padding:12px; gap:8px; overflow:hidden;">

                <!-- Filter Bar (Elastic Single-Row Resilience) -->
                <div class="curation-filter-bar {{#if filters.hasActiveFilters}}has-active-filters{{/if}}" style="display:flex; align-items:center; gap:8px; flex-wrap:nowrap; overflow-x:auto; background:rgba(18,14,32,0.65); padding:6px 10px; border-radius:6px; border:1px solid {{#if filters.hasActiveFilters}}rgba(245,158,11,0.35){{else}}rgba(140,110,240,0.18){{/if}}; flex-shrink:0;">
                    <div style="display:flex; align-items:center; gap:6px; flex:2 1 140px; min-width:120px;">
                        <i class="fas fa-search" style="color:{{#if filters.hasQuery}}#f59e0b{{else}}rgba(180,165,220,0.5){{/if}};"></i>
                        <input type="text" id="manifest-search" placeholder="Search tokens or tags..." value="{{filters.query}}" class="{{#if filters.hasQuery}}is-filtering{{/if}}" style="background:rgba(0,0,0,0.3); border:1px solid rgba(140,110,240,0.3); border-radius:4px; color:#fff; padding:4px 8px; font-size:0.82rem; width:100%; height:28px;">
                    </div>

                    <select id="species-filter" class="manifest-glass-select {{#if filters.hasSpecies}}is-filtering{{/if}}" style="flex:1 1 105px; min-width:95px; height:28px;">
                        <option value="all">All Species</option>
                        <option value="generic" {{#if (eq filters.species 'generic')}}selected{{/if}}>Unassigned Reservoir ({{coverage.reservoirTokens}})</option>
                        {{#each speciesOptions as |sp|}}
                        <option value="{{sp}}" {{#if (eq ../filters.species sp)}}selected{{/if}}>{{sp}}</option>
                        {{/each}}
                        <option value="__add_new__" style="color:#c084fc; font-weight:700;">+ Add New Species...</option>
                    </select>

                    <select id="archetype-filter" class="manifest-glass-select {{#if filters.hasArchetype}}is-filtering{{/if}}" style="flex:1 1 105px; min-width:95px; height:28px;">
                        <option value="all">All Archetypes</option>
                        {{#each archetypeOptions as |arch|}}
                        <option value="{{arch}}" {{#if (eq ../filters.archetype arch)}}selected{{/if}}>{{arch}}</option>
                        {{/each}}
                    </select>

                    <select id="status-filter" class="manifest-glass-select {{#if filters.hasStatus}}is-filtering{{/if}}" style="flex:1 1 105px; min-width:95px; height:28px;">
                        <option value="all">All Statuses</option>
                        <option value="thin" {{#if (eq filters.status 'thin')}}selected{{/if}}>Thin Variety (1-4)</option>
                        <option value="manual" {{#if (eq filters.status 'manual')}}selected{{/if}}>Curated by GM</option>
                        <option value="auto" {{#if (eq filters.status 'auto')}}selected{{/if}}>Auto-detected</option>
                        <option value="blacklisted" {{#if (eq filters.status 'blacklisted')}}selected{{/if}}>Blacklisted</option>
                    </select>

                    {{#if filters.hasActiveFilters}}
                    <button type="button" class="reset-curation-filters-btn manifest-clear-filters-btn" title="Reset all active search and dropdown filters ({{filters.activeFilterCount}} active)" style="width:auto !important; max-width:max-content !important; min-width:auto !important; flex:0 0 auto !important; height:28px !important; padding:0 8px !important; margin:0 !important;">
                        <i class="fas fa-rotate-left"></i> Reset
                    </button>
                    {{/if}}
                </div>

                <!-- Multi-select Batch Actions Bar -->
                <div style="display:flex; align-items:center; justify-content:space-between; font-size:0.82em; padding:2px 4px; flex-shrink:0;">
                    <div style="display:flex; align-items:center; gap:8px; flex:0 0 auto;">
                        <label style="display:flex; align-items:center; gap:6px; cursor:pointer;">
                            <input type="checkbox" id="select-all-visible" class="ionrift-checkbox" />
                            <span>Select Visible</span>
                        </label>
                        <span style="color:rgba(180,165,220,0.6);">Selected: <strong class="selected-count-badge" style="color:#a78bfa;">{{selectedCount}}</strong></span>
                        {{#if selectedCount}}
                        <a id="clear-selected-btn" style="color:#f87171; cursor:pointer; font-size:0.85em; text-decoration:underline; margin-left:4px;" title="Deselect all tokens across all pages">Clear Selection</a>
                        {{/if}}
                        {{#if isFilteredSubset}}
                        <span class="active-filter-subset-tag" title="{{pagination.totalItems}} matching tokens displayed out of {{rawFolderCount}} in this view">
                            <i class="fas fa-filter" style="color:#f59e0b;"></i> Filtered: {{pagination.totalItems}} of {{rawFolderCount}}
                        </span>
                        {{/if}}
                    </div>

                    <div style="display:flex; align-items:center; gap:6px;">
                        <button type="button" id="manage-tags-btn" class="ionrift-btn" style="width:auto !important; max-width:max-content !important; flex:0 0 auto !important; padding:4px 10px; font-size:0.82em; min-height:28px; height:28px; line-height:26px; background:rgba(168,85,247,0.2); border:1px solid rgba(168,85,247,0.4); border-radius:4px; color:#d8b4fe; cursor:pointer; white-space:nowrap;" title="Inspect all tags, purge redundant folder tags, and manage ignored tags">
                            <i class="fas fa-tags"></i> Manage Tags
                        </button>
                        <button type="button" id="batch-reset-auto-btn" class="batch-actions-btn ionrift-btn" {{#unless selectedCount}}disabled{{/unless}} style="width:auto !important; max-width:max-content !important; flex:0 0 auto !important; padding:4px 10px; font-size:0.82em; min-height:28px; background:rgba(59,130,246,0.25); border:1px solid rgba(59,130,246,0.45); border-radius:4px; color:#93c5fd; cursor:pointer; white-space:nowrap;" title="Reset selected tokens to Auto-detected status and re-parse taxonomy">
                            <i class="fas fa-wand-magic-sparkles"></i> Reset to Auto ({{selectedCount}})
                        </button>
                        <button type="button" id="batch-tag-selected-btn" class="batch-actions-btn ionrift-btn" {{#unless selectedCount}}disabled{{/unless}} style="width:auto !important; max-width:max-content !important; flex:0 0 auto !important; padding:4px 12px; font-size:0.82em; min-height:28px; background:rgba(140,110,240,0.3); border:1px solid rgba(140,110,240,0.5); border-radius:4px; color:#fff; cursor:pointer; white-space:nowrap;">
                            <i class="fas fa-check-double"></i> Tag Selected ({{selectedCount}})
                        </button>
                    </div>
                </div>

                <!-- Tokens List (Scrollable) -->
                <div class="curation-token-list-scroll" style="flex:1 1 0; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:6px;">
                    {{#each tokens as |t|}}
                    <div class="curation-token-item {{#if t.isBlacklisted}}is-blacklisted{{else if t.isManual}}is-manual{{/if}} {{#if t.isSelected}}is-selected{{/if}}">
                        
                        <input type="checkbox" class="ionrift-checkbox token-select-chk" data-path="{{t.path}}" {{#if t.isSelected}}checked{{/if}} />

                        <img src="{{#if t.imgUrl}}{{t.imgUrl}}{{else}}{{t.path}}{{/if}}" class="curation-token-thumb" onerror="this.src='icons/svg/mystery-man.svg'" />

                        <div style="flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;">
                            <!-- Row 1: Token Clean Name + Provenance Pill -->
                            <div style="display:flex; align-items:center; gap:6px; overflow:hidden; white-space:nowrap;">
                                <span style="font-size:0.85em; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="{{t.filename}} ({{t.path}})">
                                    {{#if t.cleanName}}{{t.cleanName}}{{else}}{{t.filename}}{{/if}}
                                </span>
                                {{#if t.isBlacklisted}}
                                <span class="provenance-pill is-blacklisted" title="Blacklisted: Excluded from resident & token generation"><i class="fas fa-ban"></i> Blacklisted</span>
                                {{else if t.isManual}}
                                <span class="provenance-pill is-curated" title="Manually Curated by GM"><i class="fas fa-lock"></i> Curated</span>
                                {{else}}
                                <span class="provenance-pill is-auto" title="Auto-detected from file path & folders"><i class="fas fa-wand-magic-sparkles"></i> Auto</span>
                                {{/if}}
                            </div>

                            <!-- Row 2: Inline Taxonomy & Tag Pills -->
                            <div class="token-metadata-strip">
                                <div class="token-tags-row">
                                    <!-- Structural Taxonomy: Species & Archetype -->
                                    <span class="taxonomy-pill is-species" title="Species: {{t.species}}">
                                        <i class="fas fa-user"></i> {{t.species}}
                                    </span>
                                    <span class="taxonomy-pill is-archetype" title="Archetype: {{t.archetype}}">
                                        <i class="fas fa-shield-halved"></i> {{t.archetype}}
                                    </span>
                                    {{#if t.displayRole}}
                                    <span class="taxonomy-pill is-role" title="Specific Role: {{t.displayRole}}">
                                        <i class="fas fa-briefcase"></i> {{t.displayRole}}
                                    </span>
                                    {{/if}}

                                    <!-- Freeform Descriptors -->
                                    {{#each t.displayTags as |tag|}}
                                    <span class="token-tag-pill clickable" data-tag="{{tag}}" title="Tag: #{{tag}} (Click to filter, right-click to manage)">#{{tag}}</span>
                                    {{/each}}
                                </div>
                            </div>
                        </div>

                        <!-- Clickable Actions -->
                        <div style="display:flex; align-items:center; gap:6px; flex-shrink:0;">
                            <button type="button" class="token-action-icon-btn token-edit-badge-btn" data-path="{{t.path}}" title="Curate Species, Archetype, Role & Tags">
                                <i class="fas fa-wrench"></i>
                            </button>

                            <button type="button" class="token-action-icon-btn toggle-blacklist-btn {{#if t.isBlacklisted}}is-active{{/if}}" data-path="{{t.path}}" title="{{#if t.isBlacklisted}}Un-blacklist (allow use){{else}}Blacklist (exclude from generation){{/if}}">
                                <i class="fas fa-ban"></i>
                            </button>
                        </div>
                    </div>
                    {{else}}
                    {{#if isFilteredEmpty}}
                    <!-- Alert Card: All Tokens Filtered Out -->
                    <div class="curation-filter-alert-card">
                        <div class="curation-filter-alert-icon">
                            <i class="fas fa-filter-circle-xmark"></i>
                        </div>
                        <div class="curation-filter-alert-body">
                            <h3 class="curation-filter-alert-title">
                                {{#if selectedFolder}}
                                All Tokens in Selected Folder Filtered Out
                                {{else}}
                                No Tokens Match Active Filters
                                {{/if}}
                            </h3>
                            <p class="curation-filter-alert-desc">
                                {{#if selectedFolder}}
                                Folder <span class="folder-path-highlight">{{selectedFolder}}</span> contains <strong>{{rawFolderCount}}</strong> token(s), but none match your active filters:
                                {{else}}
                                Your library contains <strong>{{rawFolderCount}}</strong> token(s), but none match your active filters:
                                {{/if}}
                            </p>

                            <div class="curation-filter-pills-row">
                                {{#if filters.hasQuery}}
                                <span class="active-filter-badge" title="Search query filter">
                                    <i class="fas fa-magnifying-glass"></i> "{{filters.query}}"
                                    <a class="clear-single-filter-btn" data-filter="query" title="Remove search filter">&times;</a>
                                </span>
                                {{/if}}
                                {{#if filters.hasSpecies}}
                                <span class="active-filter-badge" title="Species filter">
                                    <i class="fas fa-user"></i> Species: {{filters.species}}
                                    <a class="clear-single-filter-btn" data-filter="species" title="Remove species filter">&times;</a>
                                </span>
                                {{/if}}
                                {{#if filters.hasArchetype}}
                                <span class="active-filter-badge" title="Archetype filter">
                                    <i class="fas fa-shield-halved"></i> Archetype: {{filters.archetype}}
                                    <a class="clear-single-filter-btn" data-filter="archetype" title="Remove archetype filter">&times;</a>
                                </span>
                                {{/if}}
                                {{#if filters.hasStatus}}
                                <span class="active-filter-badge" title="Status filter">
                                    <i class="fas fa-tag"></i> Status: {{filters.statusLabel}}
                                    <a class="clear-single-filter-btn" data-filter="status" title="Remove status filter">&times;</a>
                                </span>
                                {{/if}}
                            </div>

                            <div class="curation-filter-alert-actions">
                                <button type="button" class="reset-curation-filters-btn ionrift-btn is-primary">
                                    <i class="fas fa-filter-circle-xmark"></i> Clear Filters to Show {{rawFolderCount}} Token(s)
                                </button>
                                {{#if selectedFolder}}
                                <button type="button" class="clear-folder-filter-btn ionrift-btn">
                                    <i class="fas fa-layer-group"></i> View All Watched Folders
                                </button>
                                {{/if}}
                            </div>
                        </div>
                    </div>
                    {{else}}
                    <div style="text-align:center; padding:32px 16px; color:#888;">
                        <i class="fas fa-images" style="font-size:2em; margin-bottom:10px; opacity:0.4;"></i>
                        <p>{{#if selectedFolder}}This folder contains no image assets.{{else}}No tokens found matching criteria.{{/if}}</p>
                    </div>
                    {{/if}}
                    {{/each}}
                </div>

                <!-- Pagination Footer -->
                <div class="curation-pagination-footer">
                    <div class="pagination-summary" title="Showing tokens {{pagination.startItem}} through {{pagination.endItem}} of {{pagination.totalItems}}">
                        Showing {{pagination.startItem}} - {{pagination.endItem}} of {{pagination.totalItems}}
                    </div>
                    <div class="pagination-controls-group">
                        <button type="button" class="page-first ionrift-btn manifest-page-btn" {{#unless pagination.hasPrev}}disabled{{/unless}} title="First Page">
                            <i class="fas fa-angles-left"></i>
                        </button>
                        <button type="button" class="page-prev ionrift-btn manifest-page-btn" {{#unless pagination.hasPrev}}disabled{{/unless}} title="Previous Page">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <span class="pagination-page-indicator">
                            Page <input type="number" class="pagination-page-input" value="{{pagination.current}}" min="1" max="{{pagination.total}}" title="Type page number and press Enter" /> of {{pagination.total}}
                        </span>
                        <button type="button" class="page-next ionrift-btn manifest-page-btn" {{#unless pagination.hasNext}}disabled{{/unless}} title="Next Page">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                        <button type="button" class="page-last ionrift-btn manifest-page-btn" {{#unless pagination.hasNext}}disabled{{/unless}} title="Last Page">
                            <i class="fas fa-angles-right"></i>
                        </button>
                    </div>
                </div>

            </div>
        </div>
        {{/if}}

        <!-- TAB 3: WATCH FOLDERS -->
        {{#if isTabFolders}}
        <div class="watch-folders-panel">
            
            <div class="watch-folders-card">
                <h3>
                    <i class="fas fa-folder-open" style="color:#a78bfa;"></i> Watched Asset Folders
                </h3>
                <p class="section-description">
                    Declare directories in your Foundry User Data folder where token assets live. The scanner recursively catalogues images within these locations.
                </p>

                <!-- Add / Browse Folder Row -->
                <div class="watch-folder-input-group">
                    <input type="text" id="new-watch-folder-input" placeholder="Paste path and press Enter, or browse server..." autocomplete="off" spellcheck="false">
                    <button type="button" id="browse-watch-folder-btn" class="ionrift-btn" title="Browse Server Folders">
                        <i class="fas fa-folder-open"></i> Browse Folders...
                    </button>
                </div>

                <!-- Folders List -->
                <div class="watch-folder-list">
                    {{#each watchFolderEntries as |entry|}}
                    <div class="watch-folder-item">
                        <div class="folder-info">
                            <i class="fas fa-folder folder-icon"></i>
                            <span class="folder-path" title="{{entry.folder}}">{{entry.folder}}</span>
                        </div>
                        <div class="folder-actions">
                            <span class="folder-token-count" title="{{entry.tokenCount}} cataloged tokens in this directory">
                                {{entry.tokenCount}} Tokens
                            </span>
                            <button type="button" class="remove-watch-folder-btn" data-folder="{{entry.folder}}" title="Remove this watch folder">
                                <i class="fas fa-trash-alt"></i> Remove
                            </button>
                        </div>
                    </div>
                    {{else}}
                        {{#each watchFolders as |folder|}}
                        <div class="watch-folder-item">
                            <div class="folder-info">
                                <i class="fas fa-folder folder-icon"></i>
                                <span class="folder-path" title="{{folder}}">{{folder}}</span>
                            </div>
                            <div class="folder-actions">
                                <button type="button" class="remove-watch-folder-btn" data-folder="{{folder}}" title="Remove this watch folder">
                                    <i class="fas fa-trash-alt"></i> Remove
                                </button>
                            </div>
                        </div>
                        {{else}}
                        <div style="padding:16px; text-align:center; color:rgba(200,190,230,0.5); font-style:italic;">
                            No watch folders configured. Click "Browse..." or enter a directory above.
                        </div>
                        {{/each}}
                    {{/each}}
                </div>
            </div>

            <!-- Starter Scaffolding Section -->
            <div class="watch-scaffold-card">
                <div>
                    <h4>Scaffold Starter Art Tokens</h4>
                    <p>
                        Seeds the clean dark-fantasy vector archetype tokens into <code>tokens/ionrift/</code> so your world is immediately populated.
                    </p>
                </div>
                <button type="button" id="scaffold-seed-btn" class="ionrift-btn">
                    <i class="fas fa-seedling"></i> Seed Starter Art
                </button>
            </div>

        </div>
        {{/if}}

    </div>
</div>
