<?php

/**
 * Structure Viewer — Admin Page Template
 *
 * Variables available from AdminPage::render() scope:
 *   $type, $item, $settings, $sv_patterns, $dash_stats
 *
 * phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
 * -- Template file included via include inside AdminPage::render(). Variables
 *    are local to that method's scope, not globals. PHPCS cannot detect this
 *    for included files, so we suppress the sniff for the whole template.
 */
if ( !defined( 'ABSPATH' ) ) {
    exit;
}
?>

    <div class="sv-app<?php 
echo ( !($settings['dark_mode'] ?? true) ? ' sv-light-mode' : '' );
?>">

        <!-- ── TOP NAVIGATION ───────────────────────────────────── -->
        <header class="sv-header">
            <div class="sv-header-inner">

                <!-- Logo -->
                <div class="sv-logo">
                    <div class="sv-logo-icon">
                        <!-- Dark mode icon shown by default; swapped by JS / server-side class -->
                        <img
                            src="<?php 
echo esc_url( STRUCTUREVIEWER_PLUGIN_URL . 'assets/images/sv-logo-dark.png' );
?>"
                            alt="<?php 
esc_attr_e( 'Structure Viewer', 'structure-viewer' );
?>"
                            width="36" height="36"
                            class="sv-logo-mark sv-logo-mark-dark"
                        />
                        <img
                            src="<?php 
echo esc_url( STRUCTUREVIEWER_PLUGIN_URL . 'assets/images/sv-logo-light.png' );
?>"
                            alt="<?php 
esc_attr_e( 'Structure Viewer', 'structure-viewer' );
?>"
                            width="36" height="36"
                            class="sv-logo-mark sv-logo-mark-light"
                        />
                    </div>
                    <div class="sv-logo-text">
                        <span class="sv-logo-name"><?php 
esc_html_e( 'Structure Viewer', 'structure-viewer' );
?></span>
                        <span class="sv-logo-sub"><?php 
echo esc_html( 'v' . STRUCTUREVIEWER_VERSION );
?></span>
                    </div>
                </div>

                <!-- Nav tabs -->
                <nav class="sv-nav">
                    <!-- Dashboard tab -->
                    <button class="sv-nav-item" data-sv-tab="dashboard" type="button">
                        <svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.8"/><rect x="14" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.8"/><rect x="3" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.8"/><rect x="14" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.8"/></svg>
                        <span><?php 
esc_html_e( 'Dashboard', 'structure-viewer' );
?></span>
                    </button>

                    <!-- Explorer tab -->
                    <button class="sv-nav-item" data-sv-tab="structure-viewer" type="button">
                        <svg viewBox="0 0 24 24" fill="none"><path d="M3 3h18v18H3z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M3 9h18M9 3v18" stroke="currentColor" stroke-width="1.8"/></svg>
                        <span><?php 
esc_html_e( 'Explorer', 'structure-viewer' );
?></span>
                    </button>

                    <!-- Comparator (PRO placeholder) -->
                    <button class="sv-nav-item sv-nav-pro" data-sv-tab="comparator" type="button">
                        <svg viewBox="0 0 24 24" fill="none"><path d="M8 3v18M16 3v18M3 12h18" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                        <span><?php 
esc_html_e( 'Comparator', 'structure-viewer' );
?></span>
                        <span class="sv-pro-badge">PRO</span>
                    </button>

                    <!-- FlatPack (PRO) -->
                    <button class="sv-nav-item sv-nav-pro" data-sv-tab="flatpack" type="button">
                        <svg viewBox="0 0 24 24" fill="none"><path d="M21 8H3M21 8v12a1 1 0 01-1 1H4a1 1 0 01-1-1V8M21 8l-2-5H5L3 8" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M10 13h4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                        <span><?php 
esc_html_e( 'FlatPack', 'structure-viewer' );
?></span>
                        <span class="sv-pro-badge">PRO</span>
                    </button>

                    <!-- Settings -->
                    <button class="sv-nav-item" data-sv-tab="settings" type="button">
                        <svg viewBox="0 0 24 24" fill="none"><path d="M12 15a3 3 0 100-6 3 3 0 000 6z" stroke="currentColor" stroke-width="1.8"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z" stroke="currentColor" stroke-width="1.8"/></svg>
                        <span><?php 
esc_html_e( 'Settings', 'structure-viewer' );
?></span>
                    </button>
                </nav>

            </div><!-- /.sv-header-inner -->
        </header><!-- /.sv-header -->


        <!-- ══════════════════════════════════════════════════════
             TAB: DASHBOARD
        ═══════════════════════════════════════════════════════ -->
        <div class="sv-tab-pane" id="sv-tab-dashboard">

            <!-- Welcome Card -->
            <div class="sv-welcome-card">
                <div>
                    <h2><?php 
esc_html_e( 'Welcome to Structure Viewer', 'structure-viewer' );
?></h2>
                    <p><?php 
esc_html_e( 'A powerful developer tool to browse, analyze, and export WordPress plugin and theme file structures. Perfect for debugging, auditing, and AI-assisted development.', 'structure-viewer' );
?></p>
                </div>
                <div class="sv-version-badge">
                    <span class="sv-version-dot"></span>
                    <?php 
echo esc_html( 'Version ' . STRUCTUREVIEWER_VERSION );
?>
                </div>
            </div>

            <!-- ── Quick Actions (4 cards) ────────────────────── -->
            <p class="sv-section-header"><?php 
esc_html_e( 'Quick Actions', 'structure-viewer' );
?></p>
            <div class="sv-quick-actions sv-quick-actions-4col">

                <!-- Browse Plugin Structure -->
                <a href="javascript:void(0)" class="sv-action-card sv-dash-stat-clickable"
                   data-sv-tab-link="structure-viewer"
                   data-sv-preset-type="plugin"
                   data-sv-preset-name="<?php 
echo esc_attr__( 'All Plugins', 'structure-viewer' );
?>">
                    <div class="sv-action-card-icon sv-action-icon-violet">
                        <svg viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <h4><?php 
esc_html_e( 'Browse Plugin Structure', 'structure-viewer' );
?></h4>
                    <p><?php 
esc_html_e( 'Explore file and folder structures of all installed plugins.', 'structure-viewer' );
?></p>
                    <div class="sv-action-card-arrow">
                        <?php 
esc_html_e( 'Open', 'structure-viewer' );
?>
                        <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                </a>

                <!-- Browse Theme Structure -->
                <a href="javascript:void(0)" class="sv-action-card sv-dash-stat-clickable"
                   data-sv-tab-link="structure-viewer"
                   data-sv-preset-type="theme"
                   data-sv-preset-name="<?php 
echo esc_attr__( 'All Themes', 'structure-viewer' );
?>">
                    <div class="sv-action-card-icon sv-action-icon-emerald">
                        <svg viewBox="0 0 24 24" fill="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></svg>
                    </div>
                    <h4><?php 
esc_html_e( 'Browse Theme Structure', 'structure-viewer' );
?></h4>
                    <p><?php 
esc_html_e( 'Explore file and folder structures of all installed themes.', 'structure-viewer' );
?></p>
                    <div class="sv-action-card-arrow">
                        <?php 
esc_html_e( 'Open', 'structure-viewer' );
?>
                        <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                </a>

                <!-- Compare Plugins PRO -->
                <?php 
$comp_is_free = function_exists( 'structureviewer_fs' ) && !structureviewer_fs()->is_premium();
$comp_href = ( $comp_is_free ? admin_url( 'tools.php?page=structure-viewer-pricing' ) : 'javascript:void(0)' );
?>
                <a href="<?php 
echo esc_url( $comp_href );
?>" class="sv-action-card"<?php 
if ( !$comp_is_free ) {
    ?> data-sv-tab-link="comparator"<?php 
}
?>>
                    <div class="sv-action-card-icon sv-action-icon-amber">
                        <svg viewBox="0 0 24 24" fill="none"><path d="M8 3v18M16 3v18M3 12h18" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>
                    </div>
                    <span class="sv-action-pro-badge">PRO</span>
                    <h4><?php 
esc_html_e( 'Compare Plugins', 'structure-viewer' );
?></h4>
                    <p><?php 
esc_html_e( 'Side-by-side diff comparison of two plugins with change highlighting.', 'structure-viewer' );
?></p>
                    <div class="sv-action-card-arrow">
                        <?php 
if ( $comp_is_free ) {
    esc_html_e( 'Upgrade', 'structure-viewer' );
} else {
    esc_html_e( 'Open', 'structure-viewer' );
}
?>
                        <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                </a>

                <!-- FlatPack PRO -->
                <?php 
$fp_is_free = function_exists( 'structureviewer_fs' ) && !structureviewer_fs()->is_premium();
$fp_href = ( $fp_is_free ? admin_url( 'tools.php?page=structure-viewer-pricing' ) : 'javascript:void(0)' );
?>
                <a href="<?php 
echo esc_url( $fp_href );
?>" class="sv-action-card"<?php 
if ( !$fp_is_free ) {
    ?> data-sv-tab-link="flatpack"<?php 
}
?>>
                    <div class="sv-action-card-icon sv-action-icon-blue">
                        <svg viewBox="0 0 24 24" fill="none"><path d="M21 8H3M21 8v12a1 1 0 01-1 1H4a1 1 0 01-1-1V8M21 8l-2-5H5L3 8" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/><path d="M10 13h4" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>
                    </div>
                    <span class="sv-action-pro-badge">PRO</span>
                    <h4><?php 
esc_html_e( 'FlatPack Files', 'structure-viewer' );
?></h4>
                    <p><?php 
esc_html_e( 'Extract and flatten all files from a plugin or theme ZIP into a single download.', 'structure-viewer' );
?></p>
                    <div class="sv-action-card-arrow">
                        <?php 
if ( $fp_is_free ) {
    esc_html_e( 'Upgrade', 'structure-viewer' );
} else {
    esc_html_e( 'Open', 'structure-viewer' );
}
?>
                        <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                </a>

            </div><!-- /.sv-quick-actions -->

            <!-- ── Stats ─────────────────────────────────────── -->
            <div class="sv-dash-stats">

                <!-- Plugins -->
                <div class="sv-dash-stat">
                    <div class="sv-dash-stat-icon sv-dsi-violet">
                        <svg viewBox="0 0 24 24" fill="none" width="20" height="20"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <div class="sv-dash-stat-body">
                        <div class="sv-dash-stat-label"><?php 
esc_html_e( 'Plugins', 'structure-viewer' );
?></div>
                        <div class="sv-dash-stat-sub">
                            <span class="sv-dash-active"><?php 
echo esc_html( $dash_stats['active'] );
?> <?php 
esc_html_e( 'active', 'structure-viewer' );
?></span>
                            <?php 
if ( $dash_stats['inactive'] > 0 ) {
    ?>
                            &nbsp;·&nbsp;
                            <span class="sv-dash-inactive"><?php 
    echo esc_html( $dash_stats['inactive'] );
    ?> <?php 
    esc_html_e( 'inactive', 'structure-viewer' );
    ?></span>
                            <?php 
}
?>
                        </div>
                    </div>
                    <div class="sv-dash-stat-value"><?php 
echo esc_html( $dash_stats['plugins'] );
?></div>
                </div>

                <!-- Themes -->
                <div class="sv-dash-stat">
                    <div class="sv-dash-stat-icon sv-dsi-emerald">
                        <svg viewBox="0 0 24 24" fill="none" width="20" height="20"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
                    </div>
                    <div class="sv-dash-stat-body">
                        <div class="sv-dash-stat-label"><?php 
esc_html_e( 'Themes', 'structure-viewer' );
?></div>
                        <div class="sv-dash-stat-sub"><?php 
esc_html_e( 'installed', 'structure-viewer' );
?></div>
                    </div>
                    <div class="sv-dash-stat-value"><?php 
echo esc_html( $dash_stats['themes'] );
?></div>
                </div>

                <!-- Files -->
                <div class="sv-dash-stat">
                    <div class="sv-dash-stat-icon sv-dsi-blue">
                        <svg viewBox="0 0 24 24" fill="none" width="20" height="20"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                    </div>
                    <div class="sv-dash-stat-body">
                        <div class="sv-dash-stat-label"><?php 
esc_html_e( 'Files Indexed', 'structure-viewer' );
?></div>
                        <div class="sv-dash-stat-sub"><?php 
esc_html_e( 'across plugins &amp; themes', 'structure-viewer' );
?></div>
                    </div>
                    <div class="sv-dash-stat-value"><?php 
echo esc_html( $dash_stats['files'] );
?></div>
                </div>

            </div><!-- /.sv-dash-stats -->

            <!-- ── Largest Plugins + Recently Viewed ────────────── -->
            <div class="sv-dash-section-split">

                <!-- Left: Largest Plugins -->
                <div>
                    <p class="sv-section-header"><?php 
esc_html_e( 'Largest Plugins by File Count', 'structure-viewer' );
?></p>
                    <div class="sv-largest-table" id="sv-largest-table">
                        <?php 
if ( !empty( $dash_stats['top_plugins'] ) ) {
    ?>
                        <?php 
    $max_files = max( array_column( $dash_stats['top_plugins'], 'files' ) );
    $max_files = max( $max_files, 1 );
    foreach ( $dash_stats['top_plugins'] as $p ) {
        $pct = round( $p['files'] / $max_files * 100 );
        ?>
                        <div class="sv-largest-row sv-dash-stat-clickable"
                             data-sv-tab-link="structure-viewer"
                             data-sv-preset-type="plugin"
                             data-sv-preset-item="<?php 
        echo esc_attr( $p['folder'] );
        ?>"
                             data-sv-preset-name="<?php 
        echo esc_attr( $p['name'] );
        ?>">
                            <div class="sv-largest-name"><?php 
        echo esc_html( $p['name'] );
        ?></div>
                            <div class="sv-largest-bar-wrap">
                                <div class="sv-largest-bar" style="width:<?php 
        echo esc_attr( $pct );
        ?>%"></div>
                            </div>
                            <div class="sv-largest-meta">
                                <span><?php 
        echo number_format( $p['files'] );
        ?> <?php 
        esc_html_e( 'files', 'structure-viewer' );
        ?></span>
                                <span class="sv-largest-size"><?php 
        echo esc_html( size_format( $p['size'], 1 ) );
        ?></span>
                            </div>
                            <svg class="sv-dash-stat-arrow" viewBox="0 0 24 24" fill="none" width="13" height="13"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </div>
                        <?php 
    }
    ?>
                        <?php 
}
?>
                        <!-- JS will populate this on cold cache -->
                    </div>
                </div>

                <!-- Right: Recently Viewed -->
                <div style="display:flex;flex-direction:column;">
                    <p class="sv-section-header">
                        <svg viewBox="0 0 24 24" fill="none" width="14" height="14" style="vertical-align:-2px;margin-right:5px;opacity:0.6;"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.9"/><path d="M12 6v6l4 2" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>
                        <?php 
esc_html_e( 'Recently Viewed', 'structure-viewer' );
?>
                    </p>
                    <div class="sv-recent-panel">
                        <div id="sv-recently-viewed" class="sv-recent-list-inline">
                            <div class="sv-recent-empty" id="sv-recent-empty">
                                <span><?php 
esc_html_e( 'No recent items yet.', 'structure-viewer' );
?></span>
                            </div>
                        </div>
                    </div>
                </div>

            </div><!-- /.sv-dash-section-split -->

            <!-- ── WordPress Environment ─────────────────────── -->
            <div class="sv-dash-section">
                <p class="sv-section-header"><?php 
esc_html_e( 'WordPress Environment', 'structure-viewer' );
?></p>
                <div class="sv-env-strip">
                    <div class="sv-env-item">
                        <span class="sv-env-icon sv-env-icon-wp">
                            <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.7"/><path d="M2 12h20M12 2a15.3 15.3 0 010 20M12 2a15.3 15.3 0 000 20" stroke="currentColor" stroke-width="1.7"/></svg>
                        </span>
                        <div>
                            <div class="sv-env-label"><?php 
esc_html_e( 'WordPress', 'structure-viewer' );
?></div>
                            <div class="sv-env-value"><?php 
echo esc_html( $dash_stats['env']['wp_version'] );
?></div>
                        </div>
                    </div>
                    <div class="sv-env-item">
                        <span class="sv-env-icon sv-env-icon-php">
                            <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </span>
                        <div>
                            <div class="sv-env-label">PHP</div>
                            <div class="sv-env-value"><?php 
echo esc_html( $dash_stats['env']['php_version'] );
?></div>
                        </div>
                    </div>
                    <div class="sv-env-item">
                        <span class="sv-env-icon sv-env-icon-theme">
                            <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg>
                        </span>
                        <div>
                            <div class="sv-env-label"><?php 
esc_html_e( 'Active Theme', 'structure-viewer' );
?></div>
                            <div class="sv-env-value"><?php 
echo esc_html( $dash_stats['env']['active_theme'] );
?></div>
                        </div>
                    </div>
                    <div class="sv-env-item">
                        <span class="sv-env-icon sv-env-icon-site">
                            <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </span>
                        <div>
                            <div class="sv-env-label"><?php 
esc_html_e( 'Site', 'structure-viewer' );
?></div>
                            <div class="sv-env-value"><?php 
echo esc_html( $dash_stats['env']['site_url'] );
?></div>
                        </div>
                    </div>
                </div>
            </div>

        </div><!-- /#sv-tab-dashboard -->


        <!-- ══════════════════════════════════════════════════════
             TAB: STRUCTURE VIEWER
        ═══════════════════════════════════════════════════════ -->
        <div class="sv-tab-pane" id="sv-tab-structure-viewer">

            <!-- ── Top toolbar ──────────────────────────────── -->
            <div class="sv-viewer-toolbar">

                <!-- Left: Plugin/Theme switcher (radio pills) -->
                <div class="sv-type-pills">
                    <button type="button" class="sv-type-pill <?php 
echo ( $type === 'plugin' ? 'active' : '' );
?>"
                            data-type="plugin">
                        <svg viewBox="0 0 24 24" fill="none" width="14" height="14"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <?php 
esc_html_e( 'Plugins', 'structure-viewer' );
?>
                    </button>
                    <button type="button" class="sv-type-pill <?php 
echo ( $type === 'theme' ? 'active' : '' );
?>"
                            data-type="theme">
                        <svg viewBox="0 0 24 24" fill="none" width="14" height="14"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></svg>
                        <?php 
esc_html_e( 'Themes', 'structure-viewer' );
?>
                    </button>
                </div>

                <!-- Centre: Item picker (custom dropdown) -->
                <div class="sv-item-picker" id="sv-item-picker">
                    <button type="button" class="sv-item-picker-btn" id="sv-item-picker-btn">
                        <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M3 3h18v18H3z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M3 9h18M9 3v18" stroke="currentColor" stroke-width="1.8"/></svg>
                        <span id="sv-item-picker-label">
                            <?php 
if ( $item ) {
    $items_dir = ( $type === 'plugin' ? WP_PLUGIN_DIR : get_theme_root() );
    $ip = realpath( $items_dir . '/' . $item );
    $idata = ( $ip ? ( $type === 'plugin' ? SV_ItemData::get_plugin_list( [$ip] ) : SV_ItemData::get_theme_list( [$ip] ) ) : [] );
    echo esc_html( ( isset( $idata[$item]['Name'] ) ? $idata[$item]['Name'] : $item ) );
} else {
    echo esc_html( ( $type === 'plugin' ? __( 'All Plugins', 'structure-viewer' ) : __( 'All Themes', 'structure-viewer' ) ) );
}
?>
                        </span>
                        <svg class="sv-picker-caret" viewBox="0 0 24 24" fill="none" width="14" height="14"><path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                    </button>
                    <div class="sv-item-picker-dropdown" id="sv-item-picker-dropdown">
                        <div class="sv-picker-search-wrap">
                            <svg viewBox="0 0 24 24" fill="none" width="14" height="14"><circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="1.9"/><path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>
                            <input type="text" id="sv-picker-search" placeholder="<?php 
esc_attr_e( 'Filter…', 'structure-viewer' );
?>">
                        </div>
                        <div class="sv-picker-list" id="sv-picker-list">
                            <!-- populated by JS -->
                        </div>
                    </div>
                </div>

                <!-- Right: Live search -->
                <div class="sv-viewer-search">
                    <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="1.9"/><path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>
                    <input type="text" id="sv-live-search"
                           placeholder="<?php 
esc_attr_e( 'Search files…', 'structure-viewer' );
?>"
                           autocomplete="off" spellcheck="false">
                    <button type="button" id="sv-live-search-clear" class="sv-search-clear" style="display:none;" title="Clear">×</button>
                </div>

                <!-- Refresh explorer -->
                <button type="button" id="sv-explorer-refresh" class="sv-refresh-btn" title="<?php 
esc_attr_e( 'Refresh Explorer', 'structure-viewer' );
?>">
                    <svg viewBox="0 0 24 24" fill="none" width="14" height="14"><path d="M1 4v6h6M23 20v-6h-6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.49 9A9 9 0 005.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 013.51 15" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    <?php 
esc_html_e( 'Refresh', 'structure-viewer' );
?>
                </button>

                <!-- Form hidden for page-reload submission -->
                <form method="get" id="sv-form" style="display:none;">
                    <input type="hidden" name="page"     value="structure-viewer">
                    <input type="hidden" name="psv_type" id="sv-type" value="<?php 
echo esc_attr( $type );
?>">
                    <input type="hidden" name="psv_item" id="sv-item" value="<?php 
echo esc_attr( $item );
?>">
                    <?php 
wp_nonce_field( 'sv_form_action', 'sv_nonce' );
?>
                </form>
            </div><!-- /.sv-viewer-toolbar -->

            <!-- ── File-type tag filter ──────────────────────── -->
            <div class="sv-filetype-tags" id="sv-filetype-tags">
                <span class="sv-ft-tag active" data-ext="">All</span>
                <?php 
// All possible tags are rendered hidden; JS will reveal only present ones
$tag_types = [
    'php'    => ['PHP', '#7c3aed'],
    'js'     => ['JS', '#f59e0b'],
    'css'    => ['CSS', '#3b82f6'],
    'html'   => ['HTML', '#f97316'],
    'json'   => ['JSON', '#f59e0b'],
    'xml'    => ['XML', '#10b981'],
    'md'     => ['MD', '#6366f1'],
    'txt'    => ['TXT', '#64748b'],
    'images' => ['Images', '#10b981'],
];
foreach ( $tag_types as $ext => $info ) {
    echo '<span class="sv-ft-tag" data-ext="' . esc_attr( $ext ) . '" style="--tag-color:' . esc_attr( $info[1] ) . ';display:none;">' . esc_html( $info[0] ) . '</span>';
}
?>
            </div>

            <!-- ── Two-panel layout ─────────────────────────── -->
            <div class="sv-viewer-body" id="sv-viewer-body">

                <!-- Left panel: file tree -->
                <div class="sv-tree-panel" id="sv-tree-panel">

                    <!-- Tree action bar (hidden in All-plugins/themes mode) -->
                    <div class="sv-tree-actions sv-controls <?php 
echo ( empty( $item ) ? 'sv-hidden' : '' );
?>" data-tree-class="sv-tree-<?php 
echo esc_attr( sanitize_html_class( ( $item ?: 'all' ) ) );
?>">
                        <div class="sv-tree-action-group">
                            <button type="button" class="sv-tree-btn sv-expand-all" title="Expand All">
                                <svg viewBox="0 0 24 24" fill="none" width="13" height="13"><path d="M7 14l5 5 5-5M7 10l5-5 5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                <?php 
esc_html_e( 'Expand', 'structure-viewer' );
?>
                            </button>
                            <button type="button" class="sv-tree-btn sv-collapse-all" title="Collapse All">
                                <svg viewBox="0 0 24 24" fill="none" width="13" height="13"><path d="M17 10l-5 5-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                <?php 
esc_html_e( 'Collapse', 'structure-viewer' );
?>
                            </button>
                        </div>
                        <div class="sv-tree-action-group">
                            <button type="button" class="sv-tree-btn sv-copy-clipboard"
                                    data-item="<?php 
echo esc_attr( $item );
?>"
                                    data-type="<?php 
echo esc_attr( $type );
?>">
                                <svg viewBox="0 0 24 24" fill="none" width="13" height="13"><rect x="9" y="9" width="13" height="13" rx="2" stroke="currentColor" stroke-width="1.8"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke="currentColor" stroke-width="1.8"/></svg>
                                <?php 
esc_html_e( 'Copy', 'structure-viewer' );
?>
                            </button>
                            <button type="button" class="sv-tree-btn sv-tree-btn-accent sv-export"
                                    data-item="<?php 
echo esc_attr( $item );
?>"
                                    data-type="<?php 
echo esc_attr( $type );
?>">
                                <svg viewBox="0 0 24 24" fill="none" width="13" height="13"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                <?php 
esc_html_e( 'Export', 'structure-viewer' );
?>
                            </button>
                        </div>
                    </div>

                    <!-- Live search match counter -->
                    <div class="sv-search-status" id="sv-search-status" style="display:none;">
                        <span id="sv-match-count"></span>
                        <button type="button" id="sv-search-nav-prev" class="sv-nav-btn" title="Previous">‹</button>
                        <button type="button" id="sv-search-nav-next" class="sv-nav-btn" title="Next">›</button>
                    </div>

                    <!-- The tree itself -->
                    <div class="sv-tree-scroll" id="sv-tree-scroll">
                        <div id="sv-structure-display">
                            <?php 
SV_Scanner::display_structures( $type, $item );
?>
                        </div>
                        <!-- Empty state for search -->
                        <div id="sv-no-results" class="sv-no-results" style="display:none;">
                            <svg viewBox="0 0 24 24" fill="none" width="32" height="32"><circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="1.6"/><path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
                            <p><?php 
esc_html_e( 'No files match your search.', 'structure-viewer' );
?></p>
                        </div>
                    </div>

                </div><!-- /.sv-tree-panel -->

                <!-- Right panel: info sidebar -->
                <div class="sv-info-panel" id="sv-info-panel">
                    <?php 
if ( $item ) {
    $items_dir_info = ( $type === 'plugin' ? WP_PLUGIN_DIR : get_theme_root() );
    $info_path = realpath( $items_dir_info . '/' . $item );
    if ( $info_path && is_dir( $info_path ) ) {
        // Gather stats
        $total_files = 0;
        $total_size = 0;
        $ext_counts = [];
        $exclusion_patterns = SV_Filters::exclusion_patterns();
        try {
            $it = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($info_path, RecursiveDirectoryIterator::SKIP_DOTS));
            foreach ( $it as $f ) {
                if ( !$f->isFile() ) {
                    continue;
                }
                $bn = $f->getFilename();
                $skip = false;
                foreach ( $exclusion_patterns as $pat ) {
                    if ( fnmatch( $pat, $bn ) ) {
                        $skip = true;
                        break;
                    }
                }
                if ( $skip ) {
                    continue;
                }
                $total_files++;
                $total_size += $f->getSize();
                $ext = ( strtolower( pathinfo( $bn, PATHINFO_EXTENSION ) ) ?: 'other' );
                $ext_counts[$ext] = ($ext_counts[$ext] ?? 0) + 1;
            }
        } catch ( Exception $e ) {
        }
        arsort( $ext_counts );
        $top_exts = array_slice(
            $ext_counts,
            0,
            8,
            true
        );
        // Plugin/theme metadata
        if ( $type === 'plugin' ) {
            $mf = SV_ItemData::find_main_plugin_file( $info_path );
            $meta = ( $mf ? get_plugin_data( $mf, false, false ) : [
                'Name' => $item,
            ] );
        } else {
            $th = wp_get_theme( $item );
            $meta = [
                'Name'        => $th->get( 'Name' ),
                'Version'     => $th->get( 'Version' ),
                'Author'      => $th->get( 'Author' ),
                'Description' => $th->get( 'Description' ),
            ];
        }
        $ext_colors = [
            'php'  => '#7c3aed',
            'js'   => '#f59e0b',
            'css'  => '#3b82f6',
            'html' => '#f97316',
            'json' => '#f59e0b',
            'xml'  => '#10b981',
            'md'   => '#6366f1',
            'txt'  => '#64748b',
            'jpg'  => '#10b981',
            'jpeg' => '#10b981',
            'png'  => '#10b981',
            'svg'  => '#10b981',
            'gif'  => '#10b981',
            'ts'   => '#3b82f6',
            'jsx'  => '#7c3aed',
            'tsx'  => '#7c3aed',
            'vue'  => '#10b981',
        ];
        ?>
                            <!-- Info card -->
                            <div class="sv-info-card">
                                <div class="sv-info-header">
                                    <div class="sv-info-icon">
                                        <?php 
        if ( $type === 'plugin' ) {
            ?>
                                        <svg viewBox="0 0 24 24" fill="none" width="20" height="20"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                        <?php 
        } else {
            ?>
                                        <svg viewBox="0 0 24 24" fill="none" width="20" height="20"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></svg>
                                        <?php 
        }
        ?>
                                    </div>
                                    <div>
                                        <div class="sv-info-name"><?php 
        echo esc_html( $meta['Name'] ?? $item );
        ?></div>
                                        <div class="sv-info-type"><?php 
        echo ( $type === 'plugin' ? esc_html__( 'Plugin', 'structure-viewer' ) : esc_html__( 'Theme', 'structure-viewer' ) );
        ?></div>
                                    </div>
                                </div>
                                <?php 
        if ( !empty( $meta['Version'] ) ) {
            ?>
                                <div class="sv-info-meta-row">
                                    <span class="sv-info-meta-key"><?php 
            esc_html_e( 'Version', 'structure-viewer' );
            ?></span>
                                    <span class="sv-info-meta-val"><?php 
            echo esc_html( $meta['Version'] );
            ?></span>
                                </div>
                                <?php 
        }
        ?>
                                <?php 
        if ( !empty( $meta['Author'] ) ) {
            ?>
                                <div class="sv-info-meta-row">
                                    <span class="sv-info-meta-key"><?php 
            esc_html_e( 'Author', 'structure-viewer' );
            ?></span>
                                    <span class="sv-info-meta-val"><?php 
            echo esc_html( wp_strip_all_tags( $meta['Author'] ) );
            ?></span>
                                </div>
                                <?php 
        }
        ?>
                                <?php 
        if ( !empty( $meta['Description'] ) ) {
            ?>
                                <div class="sv-info-desc"><?php 
            echo esc_html( wp_strip_all_tags( $meta['Description'] ) );
            ?></div>
                                <?php 
        }
        ?>
                            </div>

                            <!-- Stats card -->
                            <div class="sv-info-card">
                                <div class="sv-info-card-title"><?php 
        esc_html_e( 'Statistics', 'structure-viewer' );
        ?></div>
                                <div class="sv-stat-row">
                                    <span class="sv-stat-row-label"><?php 
        esc_html_e( 'Total files', 'structure-viewer' );
        ?></span>
                                    <span class="sv-stat-row-val"><?php 
        echo number_format( $total_files );
        ?></span>
                                </div>
                                <div class="sv-stat-row">
                                    <span class="sv-stat-row-label"><?php 
        esc_html_e( 'Total size', 'structure-viewer' );
        ?></span>
                                    <span class="sv-stat-row-val"><?php 
        echo esc_html( size_format( $total_size, 2 ) );
        ?></span>
                                </div>
                                <div class="sv-stat-row">
                                    <span class="sv-stat-row-label"><?php 
        esc_html_e( 'File types', 'structure-viewer' );
        ?></span>
                                    <span class="sv-stat-row-val"><?php 
        echo count( $ext_counts );
        ?></span>
                                </div>
                            </div>

                            <!-- File type breakdown -->
                            <?php 
        if ( !empty( $top_exts ) ) {
            ?>
                            <div class="sv-info-card">
                                <div class="sv-info-card-title"><?php 
            esc_html_e( 'File Breakdown', 'structure-viewer' );
            ?></div>
                                <?php 
            foreach ( $top_exts as $ext => $count ) {
                ?>
                                <?php 
                $pct = ( $total_files > 0 ? round( $count / $total_files * 100 ) : 0 );
                $color = $ext_colors[$ext] ?? '#64748b';
                ?>
                                <div class="sv-breakdown-row">
                                    <div class="sv-breakdown-label">
                                        <span class="sv-breakdown-dot" style="background:<?php 
                echo esc_attr( $color );
                ?>"></span>
                                        <span class="sv-breakdown-ext">.<?php 
                echo esc_html( $ext );
                ?></span>
                                        <span class="sv-breakdown-count"><?php 
                echo number_format( $count );
                ?></span>
                                    </div>
                                    <div class="sv-breakdown-bar-wrap">
                                        <div class="sv-breakdown-bar" style="width:<?php 
                echo esc_attr( $pct );
                ?>%;background:<?php 
                echo esc_attr( $color );
                ?>"></div>
                                    </div>
                                </div>
                                <?php 
            }
            ?>
                            </div>
                            <?php 
        }
        ?>

                        <?php 
    }
    // end if info_path
    ?>
                    <?php 
} else {
    ?>
                        <!-- No item selected: show helper prompt -->
                        <div class="sv-info-card sv-info-placeholder">
                            <svg viewBox="0 0 24 24" fill="none" width="32" height="32"><path d="M3 3h18v18H3z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M3 9h18M9 3v18" stroke="currentColor" stroke-width="1.6"/></svg>
                            <p><?php 
    esc_html_e( 'Select a plugin or theme to see its details, stats, and file breakdown.', 'structure-viewer' );
    ?></p>
                        </div>
                    <?php 
}
?>
                </div><!-- /.sv-info-panel -->

            </div><!-- /.sv-viewer-body -->

        </div><!-- /#sv-tab-structure-viewer -->


        <!-- ══════════════════════════════════════════════════════
             TAB: COMPARATOR (PRO placeholder)
        ═══════════════════════════════════════════════════════ -->
        <div class="sv-tab-pane" id="sv-tab-comparator">
            <?php 
// Comparator Pro UI — rendered only when pro classes are loaded
if ( class_exists( 'SV_Pro_Comparator_Ajax' ) ) {
    $svc_plugins = SV_Pro_Comparator_Ajax::get_installed_plugins();
    $svc_themes = SV_Pro_Comparator_Ajax::get_installed_themes();
    ?>

            <!-- ── Mode Selection ───────────────────────── -->
            <div class="pc-card pc-mode-card">
                <h2>
                    <svg viewBox="0 0 24 24" fill="none" width="18" height="18"><path d="M8 3v18M16 3v18M3 8l5 4-5 4M21 8l-5 4 5 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    <?php 
    esc_html_e( 'Select Comparison Mode', 'structure-viewer' );
    ?>
                </h2>
                <div class="pc-mode-grid">
                    <div class="pc-mode-item active" data-mode="zip">
                        <div class="pc-mode-icon">
                            <svg viewBox="0 0 24 24" fill="none" width="22" height="22"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </div>
                        <h3><?php 
    esc_html_e( 'ZIP vs ZIP', 'structure-viewer' );
    ?></h3>
                        <p><?php 
    esc_html_e( 'Compare two ZIP archives', 'structure-viewer' );
    ?></p>
                    </div>
                    <div class="pc-mode-item" data-mode="plugin">
                        <div class="pc-mode-icon">
                            <svg viewBox="0 0 24 24" fill="none" width="22" height="22"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </div>
                        <h3><?php 
    esc_html_e( 'Installed Plugin', 'structure-viewer' );
    ?></h3>
                        <p><?php 
    esc_html_e( 'Compare with a ZIP file', 'structure-viewer' );
    ?></p>
                    </div>
                    <div class="pc-mode-item" data-mode="theme">
                        <div class="pc-mode-icon">
                            <svg viewBox="0 0 24 24" fill="none" width="22" height="22"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
                        </div>
                        <h3><?php 
    esc_html_e( 'Installed Theme', 'structure-viewer' );
    ?></h3>
                        <p><?php 
    esc_html_e( 'Compare with a ZIP file', 'structure-viewer' );
    ?></p>
                    </div>
                    <div class="pc-mode-item" data-mode="file">
                        <div class="pc-mode-icon">
                            <svg viewBox="0 0 24 24" fill="none" width="22" height="22"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                        </div>
                        <h3><?php 
    esc_html_e( 'File vs File', 'structure-viewer' );
    ?></h3>
                        <p><?php 
    esc_html_e( 'Compare two single files', 'structure-viewer' );
    ?></p>
                    </div>
                </div>
            </div>

            <!-- ── ZIP vs ZIP ────────────────────────────── -->
            <div class="pc-card pc-upload-card" id="mode-zip">
                <h2>
                    <svg viewBox="0 0 24 24" fill="none" width="18" height="18"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    <?php 
    esc_html_e( 'Compare Two ZIP Files', 'structure-viewer' );
    ?>
                </h2>
                <p class="pc-description"><?php 
    esc_html_e( 'Upload the old and new versions as ZIP archives.', 'structure-viewer' );
    ?></p>
                <div class="pc-upload-grid">
                    <div class="pc-upload-box" id="zip-box-1">
                        <div class="pc-upload-icon">
                            <svg viewBox="0 0 24 24" fill="none" width="22" height="22"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </div>
                        <h3><?php 
    esc_html_e( 'Old Version', 'structure-viewer' );
    ?></h3>
                        <p><?php 
    esc_html_e( 'Upload the original ZIP', 'structure-viewer' );
    ?></p>
                        <input type="file" id="zip-file-1" accept=".zip" class="pc-file-input">
                        <label for="zip-file-1" class="pc-upload-btn"><?php 
    esc_html_e( 'Choose File', 'structure-viewer' );
    ?></label>
                        <div class="pc-upload-status" id="zip-status-1"></div>
                        <div class="pc-progress" id="zip-progress-1"><div class="pc-progress-bar"></div></div>
                    </div>
                    <div class="pc-upload-arrow">
                        <svg viewBox="0 0 24 24" fill="none" width="24" height="24"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <div class="pc-upload-box" id="zip-box-2">
                        <div class="pc-upload-icon">
                            <svg viewBox="0 0 24 24" fill="none" width="22" height="22"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </div>
                        <h3><?php 
    esc_html_e( 'New Version', 'structure-viewer' );
    ?></h3>
                        <p><?php 
    esc_html_e( 'Upload the updated ZIP', 'structure-viewer' );
    ?></p>
                        <input type="file" id="zip-file-2" accept=".zip" class="pc-file-input">
                        <label for="zip-file-2" class="pc-upload-btn"><?php 
    esc_html_e( 'Choose File', 'structure-viewer' );
    ?></label>
                        <div class="pc-upload-status" id="zip-status-2"></div>
                        <div class="pc-progress" id="zip-progress-2"><div class="pc-progress-bar"></div></div>
                    </div>
                </div>
                <div class="pc-actions">
                    <button type="button" id="btn-compare-zip" class="pc-btn pc-btn-primary" disabled>
                        <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M8 3v18M16 3v18M3 8l5 4-5 4M21 8l-5 4 5 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <?php 
    esc_html_e( 'Compare Now', 'structure-viewer' );
    ?>
                    </button>
                </div>
            </div>

            <!-- ── Installed Plugin vs ZIP ────────────── -->
            <div class="pc-card pc-upload-card" id="mode-plugin" style="display:none;">
                <h2>
                    <svg viewBox="0 0 24 24" fill="none" width="18" height="18"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    <?php 
    esc_html_e( 'Compare with Installed Plugin', 'structure-viewer' );
    ?>
                </h2>
                <p class="pc-description"><?php 
    esc_html_e( 'Select an installed plugin and upload a ZIP to compare against it.', 'structure-viewer' );
    ?></p>
                <div class="pc-compare-layout">
                    <div class="pc-installed-section">
                        <h3>
                            <svg viewBox="0 0 24 24" fill="none" width="16" height="16"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            <?php 
    esc_html_e( 'Installed Plugin', 'structure-viewer' );
    ?>
                        </h3>
                        <select id="installed-plugin" class="pc-select">
                            <option value=""><?php 
    esc_html_e( '— Select a plugin —', 'structure-viewer' );
    ?></option>
                            <?php 
    foreach ( $svc_plugins as $p ) {
        ?>
                            <option value="<?php 
        echo esc_attr( $p['slug'] );
        ?>">
                                <?php 
        echo esc_html( $p['name'] ) . ' (v' . esc_html( $p['version'] ) . ')';
        ?>
                            </option>
                            <?php 
    }
    ?>
                        </select>
                        <div class="pc-compare-as">
                            <label><?php 
    esc_html_e( 'Treat installed plugin as:', 'structure-viewer' );
    ?></label>
                            <div class="pc-radio-group">
                                <label class="pc-radio"><input type="radio" name="plugin-compare-as" value="old" checked> <?php 
    esc_html_e( 'Old Version', 'structure-viewer' );
    ?></label>
                                <label class="pc-radio"><input type="radio" name="plugin-compare-as" value="new"> <?php 
    esc_html_e( 'New Version', 'structure-viewer' );
    ?></label>
                            </div>
                        </div>
                    </div>
                    <div class="pc-vs-divider"><span>VS</span></div>
                    <div class="pc-upload-section">
                        <h3>
                            <svg viewBox="0 0 24 24" fill="none" width="16" height="16"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            <?php 
    esc_html_e( 'Upload ZIP', 'structure-viewer' );
    ?>
                        </h3>
                        <div class="pc-upload-box pc-upload-box-single" id="plugin-zip-box">
                            <input type="file" id="plugin-zip-file" accept=".zip" class="pc-file-input">
                            <label for="plugin-zip-file" class="pc-upload-btn-large">
                                <svg viewBox="0 0 24 24" fill="none" width="24" height="24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                <?php 
    esc_html_e( 'Drop ZIP here or click to upload', 'structure-viewer' );
    ?>
                            </label>
                            <div class="pc-upload-status" id="plugin-zip-status"></div>
                            <div class="pc-progress" id="plugin-zip-progress"><div class="pc-progress-bar"></div></div>
                        </div>
                    </div>
                </div>
                <div class="pc-actions">
                    <button type="button" id="btn-compare-plugin" class="pc-btn pc-btn-primary" disabled>
                        <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M8 3v18M16 3v18M3 8l5 4-5 4M21 8l-5 4 5 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <?php 
    esc_html_e( 'Compare Now', 'structure-viewer' );
    ?>
                    </button>
                </div>
            </div>

            <!-- ── Installed Theme vs ZIP ─────────────── -->
            <div class="pc-card pc-upload-card" id="mode-theme" style="display:none;">
                <h2>
                    <svg viewBox="0 0 24 24" fill="none" width="18" height="18"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
                    <?php 
    esc_html_e( 'Compare with Installed Theme', 'structure-viewer' );
    ?>
                </h2>
                <p class="pc-description"><?php 
    esc_html_e( 'Select an installed theme and upload a ZIP to compare against it.', 'structure-viewer' );
    ?></p>
                <div class="pc-compare-layout">
                    <div class="pc-installed-section">
                        <h3>
                            <svg viewBox="0 0 24 24" fill="none" width="16" height="16"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
                            <?php 
    esc_html_e( 'Installed Theme', 'structure-viewer' );
    ?>
                        </h3>
                        <select id="installed-theme" class="pc-select">
                            <option value=""><?php 
    esc_html_e( '— Select a theme —', 'structure-viewer' );
    ?></option>
                            <?php 
    foreach ( $svc_themes as $t ) {
        ?>
                            <option value="<?php 
        echo esc_attr( $t['slug'] );
        ?>">
                                <?php 
        echo esc_html( $t['name'] ) . ' (v' . esc_html( $t['version'] ) . ')';
        ?>
                            </option>
                            <?php 
    }
    ?>
                        </select>
                        <div class="pc-compare-as">
                            <label><?php 
    esc_html_e( 'Treat installed theme as:', 'structure-viewer' );
    ?></label>
                            <div class="pc-radio-group">
                                <label class="pc-radio"><input type="radio" name="theme-compare-as" value="old" checked> <?php 
    esc_html_e( 'Old Version', 'structure-viewer' );
    ?></label>
                                <label class="pc-radio"><input type="radio" name="theme-compare-as" value="new"> <?php 
    esc_html_e( 'New Version', 'structure-viewer' );
    ?></label>
                            </div>
                        </div>
                    </div>
                    <div class="pc-vs-divider"><span>VS</span></div>
                    <div class="pc-upload-section">
                        <h3>
                            <svg viewBox="0 0 24 24" fill="none" width="16" height="16"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            <?php 
    esc_html_e( 'Upload ZIP', 'structure-viewer' );
    ?>
                        </h3>
                        <div class="pc-upload-box pc-upload-box-single" id="theme-zip-box">
                            <input type="file" id="theme-zip-file" accept=".zip" class="pc-file-input">
                            <label for="theme-zip-file" class="pc-upload-btn-large">
                                <svg viewBox="0 0 24 24" fill="none" width="24" height="24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                <?php 
    esc_html_e( 'Drop ZIP here or click to upload', 'structure-viewer' );
    ?>
                            </label>
                            <div class="pc-upload-status" id="theme-zip-status"></div>
                            <div class="pc-progress" id="theme-zip-progress"><div class="pc-progress-bar"></div></div>
                        </div>
                    </div>
                </div>
                <div class="pc-actions">
                    <button type="button" id="btn-compare-theme" class="pc-btn pc-btn-primary" disabled>
                        <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M8 3v18M16 3v18M3 8l5 4-5 4M21 8l-5 4 5 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <?php 
    esc_html_e( 'Compare Now', 'structure-viewer' );
    ?>
                    </button>
                </div>
            </div>

            <!-- ── File vs File ───────────────────────── -->
            <div class="pc-card pc-upload-card" id="mode-file" style="display:none;">
                <h2>
                    <svg viewBox="0 0 24 24" fill="none" width="18" height="18"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                    <?php 
    esc_html_e( 'Compare Two Files', 'structure-viewer' );
    ?>
                </h2>
                <p class="pc-description"><?php 
    esc_html_e( 'Upload any two text files (PHP, JS, CSS…) for a line-by-line diff.', 'structure-viewer' );
    ?></p>
                <div class="pc-upload-grid">
                    <div class="pc-upload-box" id="file-box-1">
                        <div class="pc-upload-icon">
                            <svg viewBox="0 0 24 24" fill="none" width="22" height="22"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M14 2v6h6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                        </div>
                        <h3><?php 
    esc_html_e( 'Old File', 'structure-viewer' );
    ?></h3>
                        <p><?php 
    esc_html_e( 'Upload the original file', 'structure-viewer' );
    ?></p>
                        <input type="file" id="single-file-1" class="pc-file-input">
                        <label for="single-file-1" class="pc-upload-btn"><?php 
    esc_html_e( 'Choose File', 'structure-viewer' );
    ?></label>
                        <div class="pc-upload-status" id="file-status-1"></div>
                        <div class="pc-progress" id="file-progress-1"><div class="pc-progress-bar"></div></div>
                    </div>
                    <div class="pc-upload-arrow">
                        <svg viewBox="0 0 24 24" fill="none" width="24" height="24"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <div class="pc-upload-box" id="file-box-2">
                        <div class="pc-upload-icon">
                            <svg viewBox="0 0 24 24" fill="none" width="22" height="22"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M14 2v6h6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                        </div>
                        <h3><?php 
    esc_html_e( 'New File', 'structure-viewer' );
    ?></h3>
                        <p><?php 
    esc_html_e( 'Upload the updated file', 'structure-viewer' );
    ?></p>
                        <input type="file" id="single-file-2" class="pc-file-input">
                        <label for="single-file-2" class="pc-upload-btn"><?php 
    esc_html_e( 'Choose File', 'structure-viewer' );
    ?></label>
                        <div class="pc-upload-status" id="file-status-2"></div>
                        <div class="pc-progress" id="file-progress-2"><div class="pc-progress-bar"></div></div>
                    </div>
                </div>
                <div class="pc-actions">
                    <button type="button" id="btn-compare-files" class="pc-btn pc-btn-primary" disabled>
                        <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M8 3v18M16 3v18M3 8l5 4-5 4M21 8l-5 4 5 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <?php 
    esc_html_e( 'Compare Now', 'structure-viewer' );
    ?>
                    </button>
                </div>
            </div>

            <!-- ── Reset ──────────────────────────────── -->
            <div class="pc-reset-section">
                <button type="button" id="btn-reset" class="pc-btn pc-btn-secondary">
                    <svg viewBox="0 0 24 24" fill="none" width="14" height="14"><path d="M1 4v6h6M23 20v-6h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.49 9A9 9 0 005.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 013.51 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    <?php 
    esc_html_e( 'Reset All', 'structure-viewer' );
    ?>
                </button>
            </div>

            <!-- ── Loading ────────────────────────────── -->
            <div class="pc-card pc-loading" id="pc-loading" style="display:none;">
                <div class="pc-spinner-wrapper">
                    <div class="pc-spinner"></div>
                    <div class="pc-spinner-inner"></div>
                </div>
                <p><?php 
    esc_html_e( 'Processing comparison…', 'structure-viewer' );
    ?></p>
                <span class="pc-loading-sub"><?php 
    esc_html_e( 'This may take a moment for large plugins', 'structure-viewer' );
    ?></span>
            </div>

            <!-- ── Results ────────────────────────────── -->
            <div class="pc-card" id="pc-results" style="display:none;"></div>

            <?php 
} else {
    ?>
            <!-- Free version upsell — shown when Pro classes are not loaded -->
            <div class="sv-pro-placeholder">
                <span class="sv-pro-badge-lg">PRO</span>
                <div class="sv-pro-placeholder-icon">
                    <svg viewBox="0 0 24 24" fill="none"><path d="M8 3v18M16 3v18M3 8l5 4-5 4M21 8l-5 4 5 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </div>
                <h2><?php 
    esc_html_e( 'Comparator', 'structure-viewer' );
    ?></h2>
                <p><?php 
    esc_html_e( 'Ever updated a plugin and wondered exactly what changed? Comparator shows you a clear, line-by-line view of every addition, removal, and modification — so you always know what you\'re installing.', 'structure-viewer' );
    ?></p>
                <ul class="sv-upsell-features">
                    <li>
                        <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <?php 
    esc_html_e( 'Compare two plugin ZIP files side by side', 'structure-viewer' );
    ?>
                    </li>
                    <li>
                        <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <?php 
    esc_html_e( 'Compare an installed plugin or theme against any ZIP', 'structure-viewer' );
    ?>
                    </li>
                    <li>
                        <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <?php 
    esc_html_e( 'See added, removed, and changed lines highlighted in colour', 'structure-viewer' );
    ?>
                    </li>
                    <li>
                        <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <?php 
    esc_html_e( 'Compare two individual files for a quick spot-check', 'structure-viewer' );
    ?>
                    </li>
                    <li>
                        <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <?php 
    esc_html_e( 'Works with large plugins and minified CSS/JS files', 'structure-viewer' );
    ?>
                    </li>
                </ul>
                <div class="sv-upsell-actions">
                    <a href="<?php 
    echo esc_url( admin_url( 'tools.php?page=structure-viewer-pricing' ) );
    ?>" class="sv-upsell-btn">
                        <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></svg>
                        <?php 
    esc_html_e( 'Upgrade to Pro', 'structure-viewer' );
    ?>
                    </a>
                </div>
            </div>
            <?php 
}
?>

        </div><!-- /#sv-tab-comparator -->


        <!-- ══════════════════════════════════════════════════════
             TAB: FLATPACK (PRO)
        ═══════════════════════════════════════════════════════ -->
        <div class="sv-tab-pane" id="sv-tab-flatpack">
            <?php 
if ( class_exists( 'SV_Pro_FlatPack_Ajax' ) ) {
    include __DIR__ . '/../../../pro/FlatPack/view.php';
} else {
    ?>
            <!-- Free version upsell — shown when Pro classes are not loaded -->
            <div class="sv-pro-placeholder">
                <span class="sv-pro-badge-lg">PRO</span>
                <div class="sv-pro-placeholder-icon">
                    <svg viewBox="0 0 24 24" fill="none"><path d="M21 8H3M21 8v12a1 1 0 01-1 1H4a1 1 0 01-1-1V8M21 8l-2-5H5L3 8" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M10 13h4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                </div>
                <h2><?php 
    esc_html_e( 'FlatPack', 'structure-viewer' );
    ?></h2>
                <p><?php 
    esc_html_e( 'Need just the CSS files from a plugin? Or only the PHP? FlatPack unpacks any plugin or theme ZIP and puts every file you need into a single, tidy download — no sub-folders, no hunting around.', 'structure-viewer' );
    ?></p>
                <ul class="sv-upsell-features">
                    <li>
                        <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <?php 
    esc_html_e( 'Upload any plugin or theme ZIP and preview all its files instantly', 'structure-viewer' );
    ?>
                    </li>
                    <li>
                        <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <?php 
    esc_html_e( 'Filter by PHP, CSS & JS, images, or your own custom extensions', 'structure-viewer' );
    ?>
                    </li>
                    <li>
                        <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <?php 
    esc_html_e( 'All files flattened into one folder — no nested directories', 'structure-viewer' );
    ?>
                    </li>
                    <li>
                        <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <?php 
    esc_html_e( 'Smart naming prevents filename clashes automatically', 'structure-viewer' );
    ?>
                    </li>
                    <li>
                        <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <?php 
    esc_html_e( 'Download the result as a ready-to-use ZIP in seconds', 'structure-viewer' );
    ?>
                    </li>
                </ul>
                <div class="sv-upsell-actions">
                    <a href="<?php 
    echo esc_url( admin_url( 'tools.php?page=structure-viewer-pricing' ) );
    ?>" class="sv-upsell-btn">
                        <svg viewBox="0 0 24 24" fill="none" width="15" height="15"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></svg>
                        <?php 
    esc_html_e( 'Upgrade to Pro', 'structure-viewer' );
    ?>
                    </a>
                </div>
            </div>
            <?php 
}
?>
        </div><!-- /#sv-tab-flatpack -->


        <!-- ══════════════════════════════════════════════════════
             TAB: SETTINGS
        ═══════════════════════════════════════════════════════ -->
        <div class="sv-tab-pane" id="sv-tab-settings">

            <div class="sv-settings-page-header">
                <h1 class="sv-page-title"><?php 
esc_html_e( 'Settings', 'structure-viewer' );
?></h1>
                <p class="sv-page-subtitle"><?php 
esc_html_e( 'Configure Structure Viewer preferences', 'structure-viewer' );
?></p>
            </div>

            <div class="sv-settings-all">

                <!-- ── GENERAL ──────────────────────────────────── -->
                <div class="sv-settings-group">
                    <div class="sv-settings-group-header">
                        <div class="sv-settings-group-icon sv-sgi-violet">
                            <svg viewBox="0 0 24 24" fill="none"><path d="M12 15a3 3 0 100-6 3 3 0 000 6z" stroke="currentColor" stroke-width="1.8"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z" stroke="currentColor" stroke-width="1.8"/></svg>
                        </div>
                        <span><?php 
esc_html_e( 'General Settings', 'structure-viewer' );
?></span>
                    </div>

                    <!-- Max File Size -->
                    <div class="sv-settings-row">
                        <div class="sv-settings-row-icon">
                            <svg viewBox="0 0 24 24" fill="none"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M14 2v6h6" stroke="currentColor" stroke-width="1.8"/></svg>
                        </div>
                        <div class="sv-settings-row-info">
                            <span class="sv-settings-row-label"><?php 
esc_html_e( 'Maximum File Size', 'structure-viewer' );
?></span>
                            <span class="sv-settings-row-desc"><?php 
esc_html_e( 'Maximum file size to display in viewer (MB)', 'structure-viewer' );
?></span>
                        </div>
                        <input type="number" class="sv-number-input" id="sv-setting-max-file-size"
                               value="<?php 
echo esc_attr( $settings['max_file_size'] );
?>"
                               min="1" max="10" />
                    </div>

                    <!-- Keyboard Navigation -->
                    <div class="sv-settings-row">
                        <div class="sv-settings-row-icon">
                            <svg viewBox="0 0 24 24" fill="none"><rect x="2" y="6" width="20" height="13" rx="2" stroke="currentColor" stroke-width="1.8"/><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M6 14h.01M8 14h.01M10 14h8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                        </div>
                        <div class="sv-settings-row-info">
                            <span class="sv-settings-row-label"><?php 
esc_html_e( 'Enable Keyboard Navigation', 'structure-viewer' );
?></span>
                            <span class="sv-settings-row-desc"><?php 
esc_html_e( 'Use arrow keys to navigate file tree', 'structure-viewer' );
?></span>
                        </div>
                        <label class="sv-toggle-switch">
                            <input type="checkbox" id="sv-setting-keyboard-nav"
                                   <?php 
checked( $settings['keyboard_navigation'] );
?> />
                            <span class="sv-toggle-track"></span>
                        </label>
                    </div>

                    <!-- Show File Info -->
                    <div class="sv-settings-row">
                        <div class="sv-settings-row-icon">
                            <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.8"/><path d="M12 16v-4M12 8h.01" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                        </div>
                        <div class="sv-settings-row-info">
                            <span class="sv-settings-row-label"><?php 
esc_html_e( 'Show File Info', 'structure-viewer' );
?></span>
                            <span class="sv-settings-row-desc"><?php 
esc_html_e( 'Display file size and modification date next to each file in the tree', 'structure-viewer' );
?></span>
                        </div>
                        <label class="sv-toggle-switch">
                            <input type="checkbox" id="sv-show-file-info"
                                   <?php 
checked( $settings['show_file_info'] ?? true );
?> />
                            <span class="sv-toggle-track"></span>
                        </label>
                    </div>

                    <!-- Copy Structure Format -->
                    <div class="sv-settings-row">
                        <div class="sv-settings-row-icon">
                            <svg viewBox="0 0 24 24" fill="none"><rect x="9" y="9" width="13" height="13" rx="2" stroke="currentColor" stroke-width="1.8"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke="currentColor" stroke-width="1.8"/></svg>
                        </div>
                        <div class="sv-settings-row-info">
                            <span class="sv-settings-row-label"><?php 
esc_html_e( 'Copy Structure Format', 'structure-viewer' );
?></span>
                            <span class="sv-settings-row-desc"><?php 
esc_html_e( 'Format used when copying a plugin or theme structure to the clipboard', 'structure-viewer' );
?></span>
                        </div>
                        <div class="sv-copy-format-pills">
                            <?php 
$copy_format = $settings['copy_format'] ?? 'json';
foreach ( [
    'json' => 'JSON',
    'text' => 'Text',
    'xml'  => 'XML',
] as $val => $label ) {
    ?>
                            <label class="sv-copy-format-pill <?php 
    echo ( $copy_format === $val ? 'active' : '' );
    ?>">
                                <input type="radio" name="sv_copy_format" id="sv-copy-format-<?php 
    echo esc_attr( $val );
    ?>"
                                       value="<?php 
    echo esc_attr( $val );
    ?>"
                                       <?php 
    checked( $copy_format, $val );
    ?>>
                                <?php 
    echo esc_html( $label );
    ?>
                            </label>
                            <?php 
}
?>
                        </div>
                    </div>

                    <!-- Exclude Patterns -->
                    <div class="sv-settings-row" style="align-items:flex-start;flex-direction:column;gap:12px;">
                        <div style="display:flex;align-items:center;gap:16px;width:100%;">
                            <div class="sv-settings-row-icon" style="flex-shrink:0;">
                                <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.8"/><path d="M4.93 4.93l14.14 14.14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                            </div>
                            <div class="sv-settings-row-info">
                                <span class="sv-settings-row-label"><?php 
esc_html_e( 'Exclude Patterns', 'structure-viewer' );
?></span>
                                <span class="sv-settings-row-desc"><?php 
esc_html_e( 'Files and folders matching these patterns will be hidden', 'structure-viewer' );
?></span>
                            </div>
                        </div>
                        <div class="sv-patterns-container" id="sv-exclude-patterns" style="width:100%;box-sizing:border-box;">
                            <?php 
foreach ( $sv_patterns as $pattern ) {
    ?>
                            <span class="sv-pattern-tag" data-pattern="<?php 
    echo esc_attr( $pattern );
    ?>">
                                <?php 
    echo esc_html( $pattern );
    ?>
                                <button type="button" class="sv-pattern-remove" aria-label="Remove">×</button>
                            </span>
                            <?php 
}
?>
                            <button type="button" class="sv-add-pattern" id="sv-add-pattern-btn">+ <?php 
esc_html_e( 'Add Pattern', 'structure-viewer' );
?></button>
                        </div>
                    </div>

                </div><!-- /.sv-settings-group General -->

                <!-- ── SECURITY ──────────────────────────────────── -->
                <div class="sv-settings-group">
                    <div class="sv-settings-group-header">
                        <div class="sv-settings-group-icon sv-sgi-violet">
                            <svg viewBox="0 0 24 24" fill="none"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
                        </div>
                        <span><?php 
esc_html_e( 'Security Settings', 'structure-viewer' );
?></span>
                    </div>

                    <!-- Show Hidden Files -->
                    <div class="sv-settings-row">
                        <div class="sv-settings-row-icon">
                            <svg viewBox="0 0 24 24" fill="none"><path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24M1 1l22 22" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </div>
                        <div class="sv-settings-row-info">
                            <span class="sv-settings-row-label"><?php 
esc_html_e( 'Exclude hidden files', 'structure-viewer' );
?></span>
                            <span class="sv-settings-row-desc"><?php 
esc_html_e( 'Hide files starting with dot (.)', 'structure-viewer' );
?></span>
                        </div>
                        <label class="sv-toggle-switch">
                            <input type="checkbox" id="sv-setting-show-hidden"
                                   <?php 
checked( !$settings['show_hidden_files'] );
?> />
                            <span class="sv-toggle-track"></span>
                        </label>
                    </div>

                    <!-- Exclude system directories -->
                    <div class="sv-settings-row">
                        <div class="sv-settings-row-icon">
                            <svg viewBox="0 0 24 24" fill="none"><path d="M3 3h18v18H3z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M3 9h18M9 3v18" stroke="currentColor" stroke-width="1.8"/></svg>
                        </div>
                        <div class="sv-settings-row-info">
                            <span class="sv-settings-row-label"><?php 
esc_html_e( 'Exclude system directories', 'structure-viewer' );
?></span>
                            <span class="sv-settings-row-desc"><?php 
esc_html_e( 'Hide node_modules, .git, .svn, etc.', 'structure-viewer' );
?></span>
                        </div>
                        <label class="sv-toggle-switch">
                            <input type="checkbox" id="sv-setting-exclude-system"
                                   <?php 
checked( $settings['exclude_system_dirs'] ?? true );
?> />
                            <span class="sv-toggle-track"></span>
                        </label>
                    </div>
                </div><!-- /.sv-settings-group Security -->

                <!-- ── DISPLAY / EXPORT ───────────────────────────── -->
                <div class="sv-settings-group">
                    <div class="sv-settings-group-header">
                        <div class="sv-settings-group-icon sv-sgi-violet">
                            <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.8"/><path d="M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                        </div>
                        <span><?php 
esc_html_e( 'Display Settings', 'structure-viewer' );
?></span>
                    </div>

                    <!-- Dark mode -->
                    <div class="sv-settings-row">
                        <div class="sv-settings-row-icon">
                            <svg viewBox="0 0 24 24" fill="none"><path d="M21 12.79A9 9 0 1111.21 3a7 7 0 009.79 9.79z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </div>
                        <div class="sv-settings-row-info">
                            <span class="sv-settings-row-label"><?php 
esc_html_e( 'Dark Mode', 'structure-viewer' );
?></span>
                            <span class="sv-settings-row-desc"><?php 
esc_html_e( 'Toggle between dark and light colour schemes', 'structure-viewer' );
?></span>
                        </div>
                        <label class="sv-toggle-switch">
                            <input type="checkbox" id="sv-setting-dark-mode" <?php 
checked( $settings['dark_mode'] ?? true );
?> />
                            <span class="sv-toggle-track"></span>
                        </label>
                    </div>

                    <!-- Accent colour -->
                    <div class="sv-settings-row" style="align-items:flex-start;flex-direction:column;gap:12px;">
                        <div style="display:flex;align-items:center;gap:16px;width:100%;">
                            <div class="sv-settings-row-icon" style="flex-shrink:0;">
                                <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.8"/><path d="M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                            </div>
                            <div class="sv-settings-row-info">
                                <span class="sv-settings-row-label"><?php 
esc_html_e( 'Accent color', 'structure-viewer' );
?></span>
                                <span class="sv-settings-row-desc"><?php 
esc_html_e( 'Changes the highlight colour throughout the interface', 'structure-viewer' );
?></span>
                            </div>
                        </div>
                        <div class="sv-accent-colors" style="padding-left:52px;">
                            <?php 
$accents = [
    'violet'  => 'sv-swatch-violet',
    'blue'    => 'sv-swatch-blue',
    'emerald' => 'sv-swatch-emerald',
    'amber'   => 'sv-swatch-amber',
    'rose'    => 'sv-swatch-rose',
];
foreach ( $accents as $key => $cls ) {
    $active = ( $settings['accent_color'] === $key ? ' active' : '' );
    ?>
                            <button type="button" class="sv-accent-swatch <?php 
    echo esc_attr( $cls . $active );
    ?>"
                                    data-accent="<?php 
    echo esc_attr( $key );
    ?>"
                                    title="<?php 
    echo esc_attr( ucfirst( $key ) );
    ?>">
                                <svg viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </button>
                            <?php 
}
?>
                        </div>
                        <input type="hidden" id="sv-setting-accent-color" value="<?php 
echo esc_attr( $settings['accent_color'] );
?>">
                    </div>

                </div><!-- /.sv-settings-group Display -->

                <!-- ── LICENCE ───────────────────────────────────── -->
                <?php 
if ( function_exists( 'structureviewer_fs' ) ) {
    ?>
                <div class="sv-settings-group">
                    <div class="sv-settings-group-header">
                        <div class="sv-settings-group-icon sv-sgi-violet">
                            <svg viewBox="0 0 24 24" fill="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
                        </div>
                        <span><?php 
    esc_html_e( 'Licence', 'structure-viewer' );
    ?></span>
                    </div>

                    <?php 
    if ( structureviewer_fs()->is_premium() ) {
        ?>
                    <!-- ══ State: Pro installed — licence not active ══ -->
                    <div class="sv-settings-row sv-licence-row">
                        <div class="sv-settings-row-icon">
                            <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.8"/><path d="M12 8v4M12 16h.01" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                        </div>
                        <div class="sv-settings-row-info">
                            <span class="sv-settings-row-label"><?php 
        esc_html_e( 'Structure Viewer Pro', 'structure-viewer' );
        ?></span>
                            <span class="sv-settings-row-desc sv-licence-inactive">
                                <?php 
        esc_html_e( 'Pro installed — licence not active. Pro features are disabled.', 'structure-viewer' );
        ?>
                            </span>
                        </div>
                        <div class="sv-licence-actions">
                            <a href="#"
                               class="sv-licence-btn sv-licence-btn--primary activate-license-trigger <?php 
        echo esc_attr( structureviewer_fs()->get_unique_affix() );
        ?>">
                                <svg viewBox="0 0 24 24" fill="none" width="13" height="13"><path d="M22 11.08V12a10 10 0 11-5.93-9.14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M22 4L12 14.01l-3-3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                <?php 
        esc_html_e( 'Activate Licence', 'structure-viewer' );
        ?>
                            </a>
                        </div>
                    </div>

                    <?php 
    } else {
        ?>
                    <!-- ══ State: Free version ══ -->
                    <div class="sv-settings-row sv-licence-row">
                        <div class="sv-settings-row-icon">
                            <svg viewBox="0 0 24 24" fill="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
                        </div>
                        <div class="sv-settings-row-info">
                            <span class="sv-settings-row-label"><?php 
        esc_html_e( 'Structure Viewer', 'structure-viewer' );
        ?></span>
                            <span class="sv-settings-row-desc">
                                <?php 
        esc_html_e( 'Free version. Upgrade to Pro to unlock Comparator and FlatPack.', 'structure-viewer' );
        ?>
                            </span>
                        </div>
                        <div class="sv-licence-actions">
                            <a href="<?php 
        echo esc_url( admin_url( 'tools.php?page=structure-viewer-pricing' ) );
        ?>"
                               class="sv-licence-btn sv-licence-btn--primary">
                                <svg viewBox="0 0 24 24" fill="none" width="13" height="13"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></svg>
                                <?php 
        esc_html_e( 'Upgrade to Pro', 'structure-viewer' );
        ?>
                            </a>
                            <?php 
        /* Activate Licence button intentionally omitted in free mode.
           Users who already hold a licence can activate via the
           Plugins row link Freemius adds automatically, or via
           Tools → Structure Viewer → Account. */
        ?>
                        </div>
                    </div>
                    <?php 
    }
    ?>

                </div><!-- /.sv-settings-group Licence -->
                <?php 
}
?>

            </div><!-- /.sv-settings-all -->

        </div><!-- /#sv-tab-settings -->


        <!-- ══════════════════════════════════════════════════════
             LOADING INDICATOR
        ═══════════════════════════════════════════════════════ -->
        <div id="sv-loading" class="sv-loading" style="display:none;">
            <div class="sv-spinner"></div>
            <span><?php 
esc_html_e( 'Loading...', 'structure-viewer' );
?></span>
        </div>


        <!-- ══════════════════════════════════════════════════════
             FILE VIEWER MODAL  (Image 3 design)
        ═══════════════════════════════════════════════════════ -->
        <div id="sv-file-viewer-modal" class="sv-modal" style="display:none;">
            <div class="sv-modal-overlay"></div>
            <div class="sv-modal-content">

                <!-- Header: file icon + name/path + action icons -->
                <div class="sv-modal-header">
                    <div class="sv-modal-file-icon" id="sv-modal-file-icon">
                        <svg viewBox="0 0 24 24" fill="none">
                            <path d="M16 18l6-6-6-6M8 6l-6 6 6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <div class="sv-modal-file-info">
                        <h3 id="sv-file-viewer-title"></h3>
                        <div class="sv-modal-file-path" id="sv-file-viewer-path"></div>
                    </div>
                    <div class="sv-modal-actions">
                        <!-- Download -->
                        <button type="button" class="sv-modal-action-btn" id="sv-download-file" title="<?php 
esc_attr_e( 'Download', 'structure-viewer' );
?>">
                            <svg viewBox="0 0 24 24" fill="none"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </button>
                        <!-- Copy -->
                        <button type="button" class="sv-modal-action-btn" id="sv-copy-file-content" title="<?php 
esc_attr_e( 'Copy to clipboard', 'structure-viewer' );
?>">
                            <svg viewBox="0 0 24 24" fill="none"><rect x="9" y="9" width="13" height="13" rx="2" stroke="currentColor" stroke-width="1.9"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke="currentColor" stroke-width="1.9"/></svg>
                        </button>
                        <!-- Fullscreen -->
                        <button type="button" class="sv-modal-action-btn" id="sv-fullscreen-modal" title="<?php 
esc_attr_e( 'Fullscreen', 'structure-viewer' );
?>">
                            <svg viewBox="0 0 24 24" fill="none"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>
                        </button>
                        <!-- Close -->
                        <button type="button" class="sv-modal-action-btn sv-modal-close" title="<?php 
esc_attr_e( 'Close', 'structure-viewer' );
?>">
                            <svg viewBox="0 0 24 24" fill="none"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                        </button>
                    </div>
                </div><!-- /.sv-modal-header -->

                <!-- Metadata bar -->
                <div class="sv-modal-meta">
                    <div class="sv-modal-meta-item">
                        <span class="sv-modal-meta-label"><?php 
esc_html_e( 'Size:', 'structure-viewer' );
?></span>
                        <span class="sv-modal-meta-value" id="sv-file-meta-size">—</span>
                    </div>
                    <div class="sv-modal-meta-item">
                        <span class="sv-modal-meta-label"><?php 
esc_html_e( 'Modified:', 'structure-viewer' );
?></span>
                        <span class="sv-modal-meta-value" id="sv-file-meta-modified">—</span>
                    </div>
                    <div class="sv-modal-meta-item">
                        <span class="sv-modal-meta-label"><?php 
esc_html_e( 'Lines:', 'structure-viewer' );
?></span>
                        <span class="sv-modal-meta-value" id="sv-file-meta-lines">—</span>
                    </div>
                </div><!-- /.sv-modal-meta -->

                <!-- Code content -->
                <div class="sv-modal-body">
                    <pre id="sv-file-content"></pre>
                </div>

            </div><!-- /.sv-modal-content -->
        </div><!-- /#sv-file-viewer-modal -->


        <!-- ══════════════════════════════════════════════════════
             EXPORT MODAL  (Image 1 design)
        ═══════════════════════════════════════════════════════ -->
        <!-- ── POST-PURCHASE WELCOME MODAL ──────────────────────────── -->
        <!-- Triggered automatically after licence activation via JS.     -->
        <!-- Also opened by the "What's Next?" button in the licence card. -->
        <div id="sv-welcome-modal" style="display:none;" class="sv-export-modal-overlay">
            <div class="sv-export-modal-dialog sv-welcome-modal-dialog">

                <!-- Header -->
                <div class="sv-export-modal-header">
                    <div class="sv-welcome-modal-title">
                        <div class="sv-welcome-modal-icon">
                            <svg viewBox="0 0 24 24" fill="none" width="20" height="20"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></svg>
                        </div>
                        <h3><?php 
esc_html_e( 'Structure Viewer Pro is Active!', 'structure-viewer' );
?></h3>
                    </div>
                    <button type="button" class="sv-export-modal-close sv-welcome-modal-close">
                        <svg viewBox="0 0 24 24" fill="none" width="14" height="14"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
                    </button>
                </div>

                <!-- Subtitle -->
                <p class="sv-welcome-modal-subtitle">
                    <?php 
esc_html_e( 'Comparator and FlatPack are now unlocked. Here\'s how to get started:', 'structure-viewer' );
?>
                </p>

                <!-- Steps -->
                <div class="sv-welcome-steps">

                    <div class="sv-welcome-step">
                        <div class="sv-welcome-step-num">1</div>
                        <div class="sv-welcome-step-body">
                            <span class="sv-welcome-step-title"><?php 
esc_html_e( 'Download Structure Viewer Pro', 'structure-viewer' );
?></span>
                            <span class="sv-welcome-step-desc"><?php 
esc_html_e( 'Download the premium version from your account. It contains Comparator, FlatPack, and all future Pro features.', 'structure-viewer' );
?></span>
                            <?php 
if ( function_exists( 'structureviewer_fs' ) ) {
    ?>
                            <a href="<?php 
    echo esc_url( structureviewer_fs()->_get_latest_download_local_url() );
    ?>"
                               class="sv-welcome-download-btn">
                                <svg viewBox="0 0 24 24" fill="none" width="14" height="14"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                <?php 
    esc_html_e( 'Download Pro Version', 'structure-viewer' );
    ?>
                            </a>
                            <?php 
}
?>
                        </div>
                    </div>

                    <div class="sv-welcome-step">
                        <div class="sv-welcome-step-num">2</div>
                        <div class="sv-welcome-step-body">
                            <span class="sv-welcome-step-title"><?php 
esc_html_e( 'Upload &amp; Activate', 'structure-viewer' );
?></span>
                            <span class="sv-welcome-step-desc">
                                <?php 
esc_html_e( 'Go to ', 'structure-viewer' );
?>
                                <strong><?php 
esc_html_e( 'Plugins → Add New → Upload Plugin', 'structure-viewer' );
?></strong>
                                <?php 
esc_html_e( ', upload the downloaded ZIP, and activate it. The free version will deactivate automatically.', 'structure-viewer' );
?>
                            </span>
                        </div>
                    </div>

                    <div class="sv-welcome-step">
                        <div class="sv-welcome-step-num">3</div>
                        <div class="sv-welcome-step-body">
                            <span class="sv-welcome-step-title"><?php 
esc_html_e( 'You\'re all set!', 'structure-viewer' );
?></span>
                            <span class="sv-welcome-step-desc"><?php 
esc_html_e( 'Comparator and FlatPack tabs will appear in Structure Viewer automatically. Your licence key is in your purchase email.', 'structure-viewer' );
?></span>
                        </div>
                    </div>

                </div><!-- /.sv-welcome-steps -->

                <!-- Footer note -->
                <p class="sv-welcome-modal-note">
                    <?php 
esc_html_e( 'Need this later? Open ', 'structure-viewer' );
?>
                    <strong><?php 
esc_html_e( 'Settings → Licence → What\'s Next?', 'structure-viewer' );
?></strong>
                </p>

            </div><!-- /.sv-welcome-modal-dialog -->
        </div><!-- /#sv-welcome-modal -->

        <!-- ── EXPORT MODAL ───────────────────────────────────────── -->
        <div id="sv-export-modal" style="display:none;" class="sv-export-modal-overlay">
            <div class="sv-export-modal-dialog">
                <div class="sv-export-modal-header">
                    <h3><?php 
esc_html_e( 'Export Structure', 'structure-viewer' );
?></h3>
                    <button type="button" class="sv-export-modal-close">
                        <svg viewBox="0 0 24 24" fill="none" width="14" height="14"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
                    </button>
                </div>
                <div class="sv-export-modal-grid">

                    <button type="button" class="sv-export-card" data-format="txt">
                        <div class="sv-export-card-icon">
                            <svg viewBox="0 0 24 24" fill="none"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>
                        </div>
                        <div class="sv-export-card-text">
                            <span class="sv-export-card-title">TXT</span>
                            <span class="sv-export-card-sub"><?php 
esc_html_e( 'Export as TXT', 'structure-viewer' );
?></span>
                        </div>
                    </button>

                    <button type="button" class="sv-export-card" data-format="json">
                        <div class="sv-export-card-icon">
                            <svg viewBox="0 0 24 24" fill="none"><path d="M7 8l-4 4 4 4M17 8l4 4-4 4" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 4l-4 16" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>
                        </div>
                        <div class="sv-export-card-text">
                            <span class="sv-export-card-title">JSON</span>
                            <span class="sv-export-card-sub"><?php 
esc_html_e( 'Export as JSON', 'structure-viewer' );
?></span>
                        </div>
                    </button>

                    <button type="button" class="sv-export-card" data-format="xml">
                        <div class="sv-export-card-icon">
                            <svg viewBox="0 0 24 24" fill="none"><path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/><path d="M13 2v7h7" stroke="currentColor" stroke-width="1.9"/><path d="M9 14l1.5 2L9 18M15 14l-1.5 2 1.5 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </div>
                        <div class="sv-export-card-text">
                            <span class="sv-export-card-title">XML</span>
                            <span class="sv-export-card-sub"><?php 
esc_html_e( 'Export as XML', 'structure-viewer' );
?></span>
                        </div>
                    </button>

                    <button type="button" class="sv-export-card" data-format="pdf">
                        <div class="sv-export-card-icon">
                            <svg viewBox="0 0 24 24" fill="none"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/><path d="M14 2v6h6" stroke="currentColor" stroke-width="1.9"/><path d="M8 13h3a1.5 1.5 0 010 3H8v-3zM8 16v2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
                        </div>
                        <div class="sv-export-card-text">
                            <span class="sv-export-card-title">PDF</span>
                            <span class="sv-export-card-sub"><?php 
esc_html_e( 'Export as PDF', 'structure-viewer' );
?></span>
                        </div>
                    </button>

                </div><!-- /.sv-export-modal-grid -->
            </div><!-- /.sv-export-modal-dialog -->
        </div><!-- /#sv-export-modal -->

        <!-- ── SETTINGS SAVED TOAST ──────────────────────────────── -->
        <div id="sv-settings-toast" class="sv-toast" aria-live="polite">
            <svg viewBox="0 0 24 24" fill="none" width="16" height="16"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <?php 
esc_html_e( 'Settings saved', 'structure-viewer' );
?>
        </div>

    </div><!-- /.sv-app -->