<?php
/**
 * CacheLoop – Admin Settings Page View
 *
 * Renders the settings UI with a modern vertical tab layout.
 *
 * Variables available from CACHELOOP_Admin::cl_render_settings_page():
 *
 *   @var array  $settings  Current saved settings.
 *   @var bool   $is_pro    True when a valid Pro license is active.
 *
 * @package CacheLoop
 */

// Security: Prevent direct file access.
defined( 'ABSPATH' ) || exit;

// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals -- Local scope variables inside template view are allowed.
?>
<div class="wrap cl-wrap" style="clear:both; position:relative;">
	
	<?php
    // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Read-only check for UI state
	if ( isset( $_GET['settings-updated'] ) ) :
		?>
		<div id="setting-error-settings_updated" class="updated settings-error notice is-dismissible"> 
			<p><strong><?php esc_html_e( 'Settings saved.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></strong></p>
		</div>
	<?php endif; ?>

	<div class="cl-admin-layout">
		<!-- ======================================================
			Sidebar Navigation
		====================================================== -->
		<aside class="cl-admin-sidebar">
			<div class="cl-sidebar-brand">
				<?php
				printf(
					/* translators: %s: plugin version number, e.g. "1.0.12" */
					esc_html__( 'CacheLoop %s', 'cacheloop-simple-page-cache-speed-optimization' ),
					esc_html( CACHELOOP_VERSION )
				);
				echo $is_pro ? ' Pro' : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static string, no user input.
				?>
			</div>
			<ul class="cl-sidebar-menu">
				<li><a href="#tab-dashboard" class="cl-nav-tab active" data-tab="tab-dashboard"><span class="dashicons dashicons-dashboard"></span> <?php esc_html_e( 'Dashboard', 'cacheloop-simple-page-cache-speed-optimization' ); ?></a></li>
				<li><a href="#tab-core" class="cl-nav-tab" data-tab="tab-core"><span class="dashicons dashicons-database"></span> <?php esc_html_e( 'Core Cache', 'cacheloop-simple-page-cache-speed-optimization' ); ?></a></li>
				<li><a href="#tab-optimization" class="cl-nav-tab" data-tab="tab-optimization"><span class="dashicons dashicons-performance"></span> <?php esc_html_e( 'Optimization', 'cacheloop-simple-page-cache-speed-optimization' ); ?></a></li>
				<?php if ( $is_pro ) : ?>
				<li><a href="#tab-assets" class="cl-nav-tab" data-tab="tab-assets"><span class="dashicons dashicons-media-code"></span> <?php esc_html_e( 'Gestione Asset', 'cacheloop-simple-page-cache-speed-optimization' ); ?></a></li>
				<li><a href="#tab-media" class="cl-nav-tab" data-tab="tab-media"><span class="dashicons dashicons-format-image"></span> <?php esc_html_e( 'Media & Database', 'cacheloop-simple-page-cache-speed-optimization' ); ?></a></li>
				<li><a href="#tab-object-cache" class="cl-nav-tab" data-tab="tab-object-cache"><span class="dashicons dashicons-superhero"></span> <?php esc_html_e( 'Object Cache', 'cacheloop-simple-page-cache-speed-optimization' ); ?></a></li>
				<?php endif; ?>
				<li><a href="#tab-tools" class="cl-nav-tab" data-tab="tab-tools"><span class="dashicons dashicons-admin-tools"></span> <?php esc_html_e( 'Tools', 'cacheloop-simple-page-cache-speed-optimization' ); ?></a></li>
			</ul>
		</aside>

		<!-- ======================================================
			Main Content
		====================================================== -->
		<main class="cl-admin-main">
			<div class="cl-tab-content">

				<!-- Form Wrapper for Settings Tabs -->
				<form method="post" action="options.php" id="cl-settings-form">
					<?php
					settings_fields( 'cacheloop_settings_group' );
					?>

					<?php if ( ! $is_pro ) : ?>
					<!-- Slim Pro reminder — visible above every tab, links down to the full Pro box in Advanced -->
					<div class="cl-pro-strip">
						<span class="cl-pro-strip__icon" aria-hidden="true">★</span>
						<span class="cl-pro-strip__text"><?php esc_html_e( 'Unlock the full potential of CacheLoop.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span>
						<a href="#tab-optimization" class="cl-pro-strip__link" data-tab="tab-optimization"><?php esc_html_e( 'See Pro features', 'cacheloop-simple-page-cache-speed-optimization' ); ?></a>
					</div>
					<?php endif; ?>

					<!-- TAB: DASHBOARD -->
					<div id="tab-dashboard" class="cl-tab-pane" style="display: block;">
						
						<!-- Cache Status Bar -->
						<div class="cl-status-bar" style="margin-bottom: 24px;">
							<p class="cl-status-bar__message">
								<span class="dashicons dashicons-yes-alt" aria-hidden="true"></span>
								<?php esc_html_e( 'CacheLoop is active and protecting your site.', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
							</p>
							<button id="cl-clear-cache-btn" class="button cl-btn cl-btn--secondary" type="button" aria-label="<?php esc_attr_e( 'Clear all cached pages', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
								<span class="dashicons dashicons-update" aria-hidden="true"></span>
								<?php esc_html_e( 'Clear Cache', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
							</button>
						</div>

						<div class="cl-dashboard-grid">
							<!-- Cache Statistics Widget -->
							<?php $cache_stats = $this->get_cache_stats(); ?>
							<div class="cl-widget cl-widget--stats">
								<h3 class="cl-widget__title"><span class="dashicons dashicons-chart-pie"></span> <?php esc_html_e( 'Cache Statistics', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
								<div class="cl-widget__content">
									<div class="cl-stat-box">
										<span class="cl-stat-label"><?php esc_html_e( 'Cached Files', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span>
										<span class="cl-stat-value" id="cl-stat-files"><?php echo esc_html( $cache_stats['count'] ); ?></span>
									</div>
									<div class="cl-stat-box">
										<span class="cl-stat-label"><?php esc_html_e( 'Cache Size', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span>
										<span class="cl-stat-value" id="cl-stat-size"><?php echo esc_html( $cache_stats['size'] ); ?></span>
									</div>
									<div class="cl-stat-box">
										<span class="cl-stat-label"><?php esc_html_e( 'Last Purge', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span>
										<span class="cl-stat-value" id="cl-stat-last-purge"><?php echo esc_html( $cache_stats['last_purge'] ); ?></span>
									</div>
									<div class="cl-stat-box">
										<span class="cl-stat-label"><?php esc_html_e( 'Cache Directory', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span>
										<span class="cl-stat-value" id="cl-stat-cache-dir" style="max-width:200px;overflow:hidden;text-overflow:ellipsis;display:block;" title="<?php echo esc_attr( CACHELOOP_CACHE_DIR ); ?>"><?php echo esc_html( CACHELOOP_CACHE_DIR ); ?></span>
									</div>
									
									<?php if ( $is_pro ) : ?>
									<div style="margin-top: 15px; border-top: 1px solid var(--cl-border); padding-top: 15px;">
										<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
											<span style="font-size: 13px; font-weight: 600; color: var(--cl-text);"><?php esc_html_e( 'Sitemap Preload', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span>
											<button type="button" class="button cl-btn cl-btn--small cl-btn--secondary" id="cl-start-preload-btn">
												<span class="dashicons dashicons-update" id="cl-preload-spinner" style="display:none; animation: cl-spin 1s linear infinite;"></span>
												<?php esc_html_e( 'Start Scan', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
											</button>
										</div>
										
										<div id="cl-preload-progress-container" style="display: none;">
											<div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
												<span id="cl-preload-progress-text" style="font-size: 11px; color: var(--cl-text-muted); font-weight: 500;">0 / 0</span>
												<span id="cl-preload-progress-percent" style="font-size: 11px; font-weight: 600; color: var(--cl-accent);">0%</span>
											</div>
											<div style="width: 100%; background: var(--cl-surface-2); border: 1px solid var(--cl-border); border-radius: 99px; height: 6px; overflow: hidden;">
												<div id="cl-preload-progress-bar" style="height: 100%; width: 0%; background: var(--cl-accent); transition: width 0.3s ease;"></div>
											</div>
										</div>
									</div>
									<?php endif; ?>
								</div>
							</div>

							<?php
							$ps_stats = $this->get_pagespeed_stats();
							$mob      = $ps_stats['mobile'];
							$dsk      = $ps_stats['desktop'];
							// Score color helper inline
							$score_color = function ( $score ) {
								if ( $score >= 90 ) {
									return '#0cce6b';
								}
								if ( $score >= 50 ) {
									return '#ffa400';
								}
								return '#ff4e42';
							};
							?>
							<div class="cl-widget cl-widget--speed" style="margin-bottom: 24px;">
								<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
									<h3 class="cl-widget__title" style="margin: 0;"><span class="dashicons dashicons-performance"></span> <?php esc_html_e( 'PageSpeed Insights', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
									<button type="button" class="button cl-btn cl-btn--small" id="cl-run-pagespeed" style="display: flex; align-items: center; gap: 5px;">
										<span class="dashicons dashicons-update" id="cl-pagespeed-spinner" style="display:none; animation: cl-spin 1s linear infinite;"></span>
										<?php esc_html_e( 'Run Speedtest', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
									</button>
								</div>

								<!-- Speedtest Progress Bar -->
								<div id="cl-pagespeed-progress-container" style="display: none; margin-bottom: 15px;">
									<div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
										<span id="cl-pagespeed-progress-label" style="font-size: 12px; color: var(--cl-text-muted); font-weight: 500;"><?php esc_html_e( 'Analyzing mobile performance...', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span>
										<span id="cl-pagespeed-progress-text" style="font-size: 12px; font-weight: 600; color: var(--cl-accent);">0%</span>
									</div>
									<div style="width: 100%; background: var(--cl-surface-2); border: 1px solid var(--cl-border); border-radius: 99px; height: 8px; overflow: hidden;">
										<div id="cl-pagespeed-progress-bar" style="height: 100%; width: 0%; background: var(--cl-accent); transition: width 0.3s ease;"></div>
									</div>
								</div>

								<!-- Tab switcher: Mobile / Desktop -->
								<div style="display: flex; gap: 6px; margin-bottom: 12px;">
									<button type="button" class="button cl-btn cl-btn--small cl-ps-tab active" data-tab="mobile"><?php esc_html_e( '📱 Mobile', 'cacheloop-simple-page-cache-speed-optimization' ); ?></button>
									<button type="button" class="button cl-btn cl-btn--small cl-ps-tab" data-tab="desktop"><?php esc_html_e( '🖥 Desktop', 'cacheloop-simple-page-cache-speed-optimization' ); ?></button>
								</div>

								<!-- Mobile Results -->
								<div class="cl-widget__content cl-ps-panel" id="cl-ps-panel-mobile">
									<div class="cl-score-circle" style="background-color: <?php echo esc_attr( $score_color( $mob['score'] ) ); ?>; color: #ffffff; border: none;">
										<span class="cl-score-value" id="cl-ps-score-mobile"><?php echo $mob['score'] > 0 ? esc_html( $mob['score'] ) : '-'; ?></span>
										<span class="cl-score-label" style="color: rgba(255,255,255,0.8);">/100</span>
									</div>
									<div class="cl-speed-metrics">
										<div class="cl-speed-metric"><span class="cl-label">FCP:</span> <strong id="cl-ps-fcp-mobile"><?php echo $mob['score'] > 0 ? esc_html( $mob['fcp'] ) : '-'; ?></strong></div>
										<div class="cl-speed-metric"><span class="cl-label">LCP:</span> <strong id="cl-ps-lcp-mobile"><?php echo $mob['score'] > 0 ? esc_html( $mob['lcp'] ) : '-'; ?></strong></div>
										<div class="cl-speed-metric"><span class="cl-label">TBT:</span> <strong id="cl-ps-tbt-mobile"><?php echo $mob['score'] > 0 ? esc_html( $mob['tbt'] ) : '-'; ?></strong></div>
										<div class="cl-speed-metric"><span class="cl-label">CLS:</span> <strong id="cl-ps-cls-mobile"><?php echo $mob['score'] > 0 ? esc_html( $mob['cls'] ) : '-'; ?></strong></div>
									</div>
								</div>

								<!-- Desktop Results -->
								<div class="cl-widget__content cl-ps-panel" id="cl-ps-panel-desktop" style="display:none;">
									<div class="cl-score-circle" style="background-color: <?php echo esc_attr( $score_color( $dsk['score'] ) ); ?>; color: #ffffff; border: none;">
										<span class="cl-score-value" id="cl-ps-score-desktop"><?php echo $dsk['score'] > 0 ? esc_html( $dsk['score'] ) : '-'; ?></span>
										<span class="cl-score-label" style="color: rgba(255,255,255,0.8);">/100</span>
									</div>
									<div class="cl-speed-metrics">
										<div class="cl-speed-metric"><span class="cl-label">FCP:</span> <strong id="cl-ps-fcp-desktop"><?php echo $dsk['score'] > 0 ? esc_html( $dsk['fcp'] ) : '-'; ?></strong></div>
										<div class="cl-speed-metric"><span class="cl-label">LCP:</span> <strong id="cl-ps-lcp-desktop"><?php echo $dsk['score'] > 0 ? esc_html( $dsk['lcp'] ) : '-'; ?></strong></div>
										<div class="cl-speed-metric"><span class="cl-label">TBT:</span> <strong id="cl-ps-tbt-desktop"><?php echo $dsk['score'] > 0 ? esc_html( $dsk['tbt'] ) : '-'; ?></strong></div>
										<div class="cl-speed-metric"><span class="cl-label">CLS:</span> <strong id="cl-ps-cls-desktop"><?php echo $dsk['score'] > 0 ? esc_html( $dsk['cls'] ) : '-'; ?></strong></div>
									</div>
								</div>
							</div>

							<?php $pro_tips = $this->get_pro_analysis_tips(); ?>
							<!-- Analysis & Recommendations Section (available on Free; any tip that
							     requires a Pro feature routes to an upgrade prompt via the "Fix"
							     button instead of applying — see CACHELOOP_Admin::cl_ajax_quick_enable_feature()). -->
							<div class="cl-widget cl-widget--analysis" style="grid-column: 1 / -1;">
								<h3 class="cl-widget__title"><span class="dashicons dashicons-chart-pie"></span> <?php esc_html_e( 'Analysis & Recommendations', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
								<div class="cl-widget__content">
									<ul class="cl-pro-tips-list" id="cl-pro-tips-list">
										<?php foreach ( $pro_tips as $tip ) : ?>
											<li class="cl-pro-tip cl-pro-tip--<?php echo esc_attr( $tip['type'] ); ?>">
												<span class="cl-pro-tip-icon"></span>
												<div class="cl-pro-tip-content">
													<strong><?php echo esc_html( ucfirst( $tip['type'] ) ); ?>:</strong> <?php echo esc_html( $tip['msg'] ); ?>
												</div>
												<?php if ( ! empty( $tip['action'] ) ) : ?>
													<button type="button" class="cl-pro-tip__fix" data-action="<?php echo esc_attr( $tip['action'] ); ?>">
														<span class="dashicons dashicons-update"></span>
														<?php
														$fix_labels = array(
															'optimize_all'               => __( 'Fix All', 'cacheloop-simple-page-cache-speed-optimization' ),
															'enable_page_cache'          => __( 'Enable Page Cache', 'cacheloop-simple-page-cache-speed-optimization' ),
															'enable_lazy_load'           => __( 'Enable Lazy Load', 'cacheloop-simple-page-cache-speed-optimization' ),
															'enable_minify'              => __( 'Enable Minification', 'cacheloop-simple-page-cache-speed-optimization' ),
															'enable_delay_js'            => __( 'Enable Delay JS', 'cacheloop-simple-page-cache-speed-optimization' ),
															'enable_gzip'                => __( 'Enable Gzip', 'cacheloop-simple-page-cache-speed-optimization' ),
															'enable_browser_cache'       => __( 'Enable Browser Cache', 'cacheloop-simple-page-cache-speed-optimization' ),
															'configure_delay_js_exclusions' => __( 'Configure Exclusions', 'cacheloop-simple-page-cache-speed-optimization' ),
															'configure_lcp_preload'      => __( 'Configure LCP Preload', 'cacheloop-simple-page-cache-speed-optimization' ),
															'configure_lcp_count'        => __( 'Adjust LCP Count', 'cacheloop-simple-page-cache-speed-optimization' ),
														);
														echo esc_html( isset( $fix_labels[ $tip['action'] ] ) ? $fix_labels[ $tip['action'] ] : __( 'Fix', 'cacheloop-simple-page-cache-speed-optimization' ) );
														?>
													</button>
												<?php endif; ?>
											</li>
										<?php endforeach; ?>
									</ul>
								</div>
							</div>
						</div>
					</div><!-- /#tab-dashboard -->

					<!-- TAB: CORE CACHE -->
					<div id="tab-core" class="cl-tab-pane" style="display: none;">
						<div class="cl-section">
							<h2 class="cl-section__title"><?php esc_html_e( 'Core Caching', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h2>
							<p class="cl-section__desc"><?php esc_html_e( 'Fundamental settings for page caching.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
							<div class="cl-cards">
								<!-- Page Cache -->
								<div class="cl-card" id="cl-card-page-cache">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">⚡</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Page Cache', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Creates ultra-fast static HTML files of your dynamic WordPress pages. This is the core engine.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<label class="cl-toggle" for="cl-page-cache" aria-label="<?php esc_attr_e( 'Toggle Page Cache', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
										<input
											type="checkbox"
											id="cl-page-cache"
											name="cacheloop_settings[page_cache]"
											value="1"
											<?php checked( 1, (int) $settings['page_cache'] ); ?>
										>
										<span class="cl-toggle__slider" aria-hidden="true"></span>
									</label>
								</div>

								<!-- Browser Caching -->
								<div class="cl-card" id="cl-card-browser-cache">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">🖥️</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Browser Caching', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Leverages browser caching for static resources like images, CSS, and JS to speed up repeat visits.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<label class="cl-toggle" for="cl-browser-cache" aria-label="<?php esc_attr_e( 'Toggle Browser Caching', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
										<input
											type="checkbox"
											id="cl-browser-cache"
											name="cacheloop_settings[browser_cache]"
											value="1"
											<?php checked( 1, (int) $settings['browser_cache'] ); ?>
										>
										<span class="cl-toggle__slider" aria-hidden="true"></span>
									</label>
								</div>

								<!-- GZIP Compression -->
								<div class="cl-card" id="cl-card-gzip">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">🗜️</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'GZIP Compression', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Compresses HTML, CSS, and JS files before sending them to the browser, significantly reducing transfer time.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<label class="cl-toggle" for="cl-gzip" aria-label="<?php esc_attr_e( 'Toggle GZIP Compression', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
										<input
											type="checkbox"
											id="cl-gzip"
											name="cacheloop_settings[gzip]"
											value="1"
											<?php checked( 1, (int) $settings['gzip'] ); ?>
										>
										<span class="cl-toggle__slider" aria-hidden="true"></span>
									</label>
								</div>

								<?php if ( ! empty( $show_nginx_download ) ) : ?>
								<!-- Nginx Configuration -->
								<div class="cl-card" id="cl-card-nginx-config">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">⚙️</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Nginx Configuration', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Your server does not appear to be Apache or LiteSpeed, so the Browser Caching and GZIP rules above (written to .htaccess) will not apply. Download a ready-to-use Nginx config snippet with the equivalent rules to add to your server block.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<div class="cl-card__action">
										<a href="<?php echo esc_url( wp_nonce_url( admin_url( 'admin-post.php?action=cacheloop_download_nginx_config' ), 'cacheloop_download_nginx_config_nonce' ) ); ?>" class="button cl-btn cl-btn--secondary">
											<span class="dashicons dashicons-download"></span>
											<?php esc_html_e( 'Download Nginx Config', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
										</a>
									</div>
								</div>
								<?php endif; ?>

								<!-- Cache TTL -->
								<div class="cl-card" id="cl-card-cache-ttl">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">⏱️</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Cache TTL', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'How long cached pages are served before being regenerated. Shorter values mean fresher content; longer values reduce server load.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<div class="cl-card__action">
										<select
											id="cl-cache-ttl"
											name="cacheloop_settings[cache_ttl]"
											aria-label="<?php esc_attr_e( 'Cache Time-To-Live', 'cacheloop-simple-page-cache-speed-optimization' ); ?>"
										>
											<option value="3600" <?php selected( 3600, (int) ( $settings['cache_ttl'] ?? 86400 ) ); ?>><?php esc_html_e( '1 Hour', 'cacheloop-simple-page-cache-speed-optimization' ); ?></option>
											<option value="14400" <?php selected( 14400, (int) ( $settings['cache_ttl'] ?? 86400 ) ); ?>><?php esc_html_e( '4 Hours', 'cacheloop-simple-page-cache-speed-optimization' ); ?></option>
											<option value="43200" <?php selected( 43200, (int) ( $settings['cache_ttl'] ?? 86400 ) ); ?>><?php esc_html_e( '12 Hours', 'cacheloop-simple-page-cache-speed-optimization' ); ?></option>
											<option value="86400" <?php selected( 86400, (int) ( $settings['cache_ttl'] ?? 86400 ) ); ?>><?php esc_html_e( '24 Hours', 'cacheloop-simple-page-cache-speed-optimization' ); ?></option>
											<option value="604800" <?php selected( 604800, (int) ( $settings['cache_ttl'] ?? 86400 ) ); ?>><?php esc_html_e( '7 Days', 'cacheloop-simple-page-cache-speed-optimization' ); ?></option>
										</select>
									</div>
								</div>

								<!-- Device Split -->
								<div class="cl-card" id="cl-card-device-split">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">📱</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Device-Specific Cache', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Maintains separate cache files for mobile and desktop visitors. Ensures each device gets its own optimized page.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<label class="cl-toggle" for="cl-device-split" aria-label="<?php esc_attr_e( 'Toggle Device-Specific Cache', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
										<input
											type="checkbox"
											id="cl-device-split"
											name="cacheloop_settings[cache_device_split]"
											value="1"
											<?php checked( 1, (int) ( $settings['cache_device_split'] ?? 0 ) ); ?>
										>
										<span class="cl-toggle__slider" aria-hidden="true"></span>
									</label>
								</div>

								<!-- CDN -->
								<div class="cl-card cl-card--expandable" id="cl-card-cdn">
									<div class="cl-card__header">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">🌐</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'CDN Integration', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Rewrites local asset URLs to serve them from your CDN, reducing origin server load.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<div class="cl-card__action">
										<label class="cl-toggle" for="cl-cdn-enabled" aria-label="<?php esc_attr_e( 'Toggle CDN', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
											<input
												type="checkbox"
												id="cl-cdn-enabled"
												name="cacheloop_settings[cdn_enabled]"
												value="1"
												<?php checked( 1, (int) ( $settings['cdn_enabled'] ?? 0 ) ); ?>
											>
											<span class="cl-toggle__slider" aria-hidden="true"></span>
										</label>
									</div>
									</div>
									<div class="cl-card__extra" style="<?php echo empty( $settings['cdn_enabled'] ) ? 'display:none;' : ''; ?>">
									<div class="cl-card__content" style="padding-top: 8px;">
										<label for="cl-cdn-domain" style="display: block; font-size: 12px; color: var(--cl-text-2); margin-bottom: 4px;">
											<?php esc_html_e( 'CDN Domain', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
										</label>
										<input
											type="text"
											id="cl-cdn-domain"
											name="cacheloop_settings[cdn_domain]"
											placeholder="cdn.example.com"
											value="<?php echo esc_attr( $settings['cdn_domain'] ?? '' ); ?>"
											style="width: 100%; max-width: 320px; padding: 6px 10px; border: 1px solid var(--cl-border); border-radius: var(--cl-radius); background: var(--cl-surface-2); color: var(--cl-text); font-size: 13px;"
										>
									</div>
									</div>
								</div>

								<!-- Varnish Cache Purge (Pro) -->
								<div class="cl-card cl-card--expandable" id="cl-card-varnish">
									<div class="cl-card__header">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">🔥</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Varnish Cache Purge', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Mirrors CacheLoop\'s own cache purges to an upstream Varnish server, so both stay in sync.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<div class="cl-card__action">
										<label class="cl-toggle" for="cl-varnish-enabled" aria-label="<?php esc_attr_e( 'Toggle Varnish Purge', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
											<input
												type="checkbox"
												id="cl-varnish-enabled"
												name="cacheloop_settings[varnish_enabled]"
												value="1"
												<?php checked( 1, (int) ( $settings['varnish_enabled'] ?? 0 ) ); ?>
											>
											<span class="cl-toggle__slider" aria-hidden="true"></span>
										</label>
									</div>
									</div>
									<div class="cl-card__extra" style="<?php echo empty( $settings['varnish_enabled'] ) ? 'display:none;' : ''; ?>">
									<div class="cl-card__content" style="padding-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;">
										<div>
											<label for="cl-varnish-host" style="display: block; font-size: 12px; color: var(--cl-text-2); margin-bottom: 4px;">
												<?php esc_html_e( 'Varnish Host', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
											</label>
											<input
												type="text"
												id="cl-varnish-host"
												name="cacheloop_settings[varnish_host]"
												placeholder="127.0.0.1"
												value="<?php echo esc_attr( $settings['varnish_host'] ?? '' ); ?>"
												style="width: 200px; padding: 6px 10px; border: 1px solid var(--cl-border); border-radius: var(--cl-radius); background: var(--cl-surface-2); color: var(--cl-text); font-size: 13px;"
											>
										</div>
										<div>
											<label for="cl-varnish-port" style="display: block; font-size: 12px; color: var(--cl-text-2); margin-bottom: 4px;">
												<?php esc_html_e( 'Port', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
											</label>
											<input
												type="number"
												id="cl-varnish-port"
												name="cacheloop_settings[varnish_port]"
												placeholder="6081"
												value="<?php echo esc_attr( $settings['varnish_port'] ?? '6081' ); ?>"
												style="width: 90px; padding: 6px 10px; border: 1px solid var(--cl-border); border-radius: var(--cl-radius); background: var(--cl-surface-2); color: var(--cl-text); font-size: 13px;"
											>
										</div>
										<button type="button" id="cl-varnish-test-btn" class="button cl-btn cl-btn--secondary cl-btn--small" style="padding: 6px 14px; font-size: 13px;">
											<?php esc_html_e( 'Test Connection', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
										</button>
										<span id="cl-varnish-test-result" style="font-size: 12px;"></span>
									</div>
									<div class="cl-card__content" style="padding-top: 4px;">
										<details>
											<summary style="cursor:pointer; font-size:12px; color:var(--cl-text-2);"><?php esc_html_e( 'Full-flush needs a VCL change — click for the snippet', 'cacheloop-simple-page-cache-speed-optimization' ); ?></summary>
											<p style="font-size:12px; color:var(--cl-text-2); margin: 8px 0 4px;"><?php esc_html_e( 'Single-page purges work with most default Varnish configs. A full "Clear Cache" needs your VCL to accept BAN requests — add this to vcl_recv:', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
											<pre style="background: var(--cl-surface-2); border: 1px solid var(--cl-border); border-radius: var(--cl-radius); padding: 10px; font-size: 11px; overflow-x: auto;">if (req.method == "BAN") {
    ban("req.http.host == " + req.http.host +
        " && req.url ~ " + req.http.X-Ban-Url);
    return (synth(200, "Banned"));
}</pre>
										</details>
									</div>
									</div>
								</div>

								<!-- Cloudflare Cache Purge (Pro) -->
								<div class="cl-card cl-card--expandable" id="cl-card-cloudflare">
									<div class="cl-card__header">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">☁️</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Cloudflare Cache Purge', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Mirrors CacheLoop\'s own cache purges to Cloudflare\'s edge via their API.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<div class="cl-card__action">
										<label class="cl-toggle" for="cl-cf-enabled" aria-label="<?php esc_attr_e( 'Toggle Cloudflare Purge', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
											<input
												type="checkbox"
												id="cl-cf-enabled"
												name="cacheloop_settings[cf_enabled]"
												value="1"
												<?php checked( 1, (int) ( $settings['cf_enabled'] ?? 0 ) ); ?>
											>
											<span class="cl-toggle__slider" aria-hidden="true"></span>
										</label>
									</div>
									</div>
									<div class="cl-card__extra" style="<?php echo empty( $settings['cf_enabled'] ) ? 'display:none;' : ''; ?>">
									<div class="cl-card__content" style="padding-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;">
										<div>
											<label for="cl-cf-token" style="display: block; font-size: 12px; color: var(--cl-text-2); margin-bottom: 4px;">
												<?php esc_html_e( 'API Token', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
											</label>
											<input
												type="password"
												id="cl-cf-token"
												name="cacheloop_settings[cf_api_token]"
												placeholder="<?php esc_attr_e( 'Scoped token — Zone.Cache Purge', 'cacheloop-simple-page-cache-speed-optimization' ); ?>"
												value="<?php echo esc_attr( $settings['cf_api_token'] ?? '' ); ?>"
												style="width: 260px; padding: 6px 10px; border: 1px solid var(--cl-border); border-radius: var(--cl-radius); background: var(--cl-surface-2); color: var(--cl-text); font-size: 13px;"
											>
										</div>
										<div>
											<label for="cl-cf-zone" style="display: block; font-size: 12px; color: var(--cl-text-2); margin-bottom: 4px;">
												<?php esc_html_e( 'Zone ID', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
											</label>
											<input
												type="text"
												id="cl-cf-zone"
												name="cacheloop_settings[cf_zone_id]"
												placeholder="a1b2c3d4e5f6…"
												value="<?php echo esc_attr( $settings['cf_zone_id'] ?? '' ); ?>"
												style="width: 200px; padding: 6px 10px; border: 1px solid var(--cl-border); border-radius: var(--cl-radius); background: var(--cl-surface-2); color: var(--cl-text); font-size: 13px;"
											>
										</div>
										<button type="button" id="cl-cf-test-btn" class="button cl-btn cl-btn--secondary cl-btn--small" style="padding: 6px 14px; font-size: 13px;">
											<?php esc_html_e( 'Test Connection', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
										</button>
										<span id="cl-cf-test-result" style="font-size: 12px;"></span>
									</div>
									<div class="cl-card__content" style="padding-top: 4px;">
										<p style="font-size:12px; color:var(--cl-text-2); margin: 0;">
											<?php
											printf(
												/* translators: %s: link to Cloudflare API token creation page */
												esc_html__( 'Create a scoped token at %s with "Zone → Cache Purge → Purge" permission for your zone.', 'cacheloop-simple-page-cache-speed-optimization' ),
												'<a href="https://dash.cloudflare.com/profile/api-tokens" target="_blank" rel="noopener">dash.cloudflare.com/profile/api-tokens</a>'
											);
											?>
										</p>
									</div>
									</div>
								</div>

								<!-- Cache Whitelist -->
								<div class="cl-card cl-card--expandable" id="cl-card-whitelist">
									<div class="cl-card__header">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">✅</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Cache Whitelist', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Only cache pages matching these URL patterns (one per line). Leave empty to cache all pages.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<div class="cl-card__action">
										<label class="cl-toggle" for="cl-whitelist-enabled" aria-label="<?php esc_attr_e( 'Toggle Whitelist Mode', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
											<input
												type="checkbox"
												id="cl-whitelist-enabled"
												name="cacheloop_settings[cache_whitelist_enabled]"
												value="1"
												<?php checked( 1, (int) ( $settings['cache_whitelist_enabled'] ?? 0 ) ); ?>
											>
											<span class="cl-toggle__slider" aria-hidden="true"></span>
										</label>
									</div>
									</div>
								<div class="cl-card__extra" style="<?php echo empty( $settings['cache_whitelist_enabled'] ) ? 'display:none;' : ''; ?>">
									<div class="cl-card__content" style="padding-top: 8px;">
										<textarea
											id="cl-cache-whitelist"
											name="cacheloop_settings[cache_whitelist]"
											rows="3"
											placeholder="/blog/*&#10;/articles/*"
											style="width: 100%; max-width: 320px; padding: 6px 10px; border: 1px solid var(--cl-border); border-radius: var(--cl-radius); background: var(--cl-surface-2); color: var(--cl-text); font-size: 13px; font-family: monospace; resize: vertical;"
										><?php echo esc_textarea( $settings['cache_whitelist'] ?? '' ); ?></textarea>
									</div>
								</div>
								</div>

								<!-- Cache Blacklist -->
								<div class="cl-card cl-card--expandable" id="cl-card-blacklist">
									<div class="cl-card__header">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">❌</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Cache Blacklist', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Never cache pages matching these URL patterns (one per line). Supports wildcards (*).', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									</div>
									<div class="cl-card__content" style="padding-top: 8px;">
										<textarea
											id="cl-cache-blacklist"
											name="cacheloop_settings[cache_blacklist]"
											rows="3"
											placeholder="/login&#10;/wp-admin/*&#10;/api/*"
											style="width: 100%; max-width: 320px; padding: 6px 10px; border: 1px solid var(--cl-border); border-radius: var(--cl-radius); background: var(--cl-surface-2); color: var(--cl-text); font-size: 13px; font-family: monospace; resize: vertical;"
										><?php echo esc_textarea( $settings['cache_blacklist'] ?? '' ); ?></textarea>
									</div>
								</div>

								<!-- Cookie-Based Bypass -->
								<div class="cl-card cl-card--expandable" id="cl-card-bypass-cookies">
									<div class="cl-card__header">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">🍪</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Cookie-Based Cache Bypass', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Bypass cache when specific cookies are present. Enter comma-separated cookie names (e.g. my_custom_cookie, wishlist_count).', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									</div>
									<div class="cl-card__content" style="padding-top: 8px;">
										<input
											type="text"
											id="cl-bypass-cookies"
											name="cacheloop_settings[bypass_cookies]"
											placeholder="cookie_name_1, cookie_name_2"
											value="<?php echo esc_attr( $settings['bypass_cookies'] ?? '' ); ?>"
											style="width: 100%; max-width: 320px; padding: 6px 10px; border: 1px solid var(--cl-border); border-radius: var(--cl-radius); background: var(--cl-surface-2); color: var(--cl-text); font-size: 13px;"
										>
									</div>
								</div>

								<?php if ( $is_pro ) : ?>
								<!-- Preloader -->
								<div class="cl-card" id="cl-card-preloader">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">🚀</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Cache Preloading', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Warms up the cache automatically in the background.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<label class="cl-toggle" for="cl-preloader" aria-label="<?php esc_attr_e( 'Toggle Cache Preloading', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
										<input
											type="checkbox"
											id="cl-preloader"
											name="cacheloop_settings[preloader]"
											value="1"
											<?php checked( 1, (int) $settings['preloader'] ); ?>
										>
										<span class="cl-toggle__slider" aria-hidden="true"></span>
									</label>
								</div>
								<?php endif; ?>
							</div>

						</div>
						</div>

					</div><!-- /#tab-core -->

					<!-- TAB: OPTIMIZATION (mixed free/pro — resource hints, lazy load, rendering tweaks) -->
					<div id="tab-optimization" class="cl-tab-pane" style="display: none;">

						<?php if ( ! $is_pro ) : ?>
						<!-- Pro Features summary — shown only to Free users, informational only (no gated controls) -->
						<div class="cl-pro-teaser" style="margin-bottom: 24px;">
							<p class="cl-pro-teaser__badge">★ <?php esc_html_e( 'Unlock the Full Potential', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
							<h3 class="cl-pro-teaser__title"><?php esc_html_e( 'CacheLoop', 'cacheloop-simple-page-cache-speed-optimization' ); ?> <span class="cl-pro-teaser__accent">PRO</span></h3>
							<p class="cl-pro-teaser__subtitle"><?php esc_html_e( 'Squeeze every last millisecond out of your site and automate the maintenance work.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
							<ul class="cl-pro-teaser__list">
								<li><span class="dashicons dashicons-yes-alt"></span><span><strong><?php esc_html_e( 'CSS & JS Minification:', 'cacheloop-simple-page-cache-speed-optimization' ); ?></strong> <?php esc_html_e( 'Removes unnecessary code from stylesheets and scripts and defers non-critical JS.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span></li>
								<li><span class="dashicons dashicons-yes-alt"></span><span><strong><?php esc_html_e( 'Cache Preloading:', 'cacheloop-simple-page-cache-speed-optimization' ); ?></strong> <?php esc_html_e( 'Warms up the cache automatically by crawling your XML sitemap.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span></li>
								<li><span class="dashicons dashicons-yes-alt"></span><span><strong><?php esc_html_e( 'Image Optimization & Object Cache:', 'cacheloop-simple-page-cache-speed-optimization' ); ?></strong> <?php esc_html_e( 'WebP conversion and Redis/Memcached-backed object caching.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span></li>
								<li><span class="dashicons dashicons-yes-alt"></span><span><strong><?php esc_html_e( 'Bloat Remover & Server Resource Saver:', 'cacheloop-simple-page-cache-speed-optimization' ); ?></strong> <?php esc_html_e( 'Disable unused WordPress/WooCommerce features and background activity.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span></li>
								<li><span class="dashicons dashicons-yes-alt"></span><span><strong><?php esc_html_e( 'LCP Preload & Tuning:', 'cacheloop-simple-page-cache-speed-optimization' ); ?></strong> <?php esc_html_e( 'Preload hero images and fine-tune lazy-load exclusions for a faster First Paint.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span></li>
								<li><span class="dashicons dashicons-yes-alt"></span><span><strong><?php esc_html_e( 'Priority Support:', 'cacheloop-simple-page-cache-speed-optimization' ); ?></strong> <?php esc_html_e( 'Dedicated, fast assistance whenever you need it.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span></li>
							</ul>
							<div class="cl-pro-teaser__actions">
								<a href="<?php echo esc_url( 'https://dev.intouchdesign.it/plugin/cacheloop/' ); ?>" target="_blank" rel="noopener noreferrer" class="button button-primary cl-pro-teaser__cta">
									<?php esc_html_e( 'Discover CacheLoop Pro', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
								</a>
							</div>
						</div>
						<?php endif; ?>

						<div class="cl-section">
							<h2 class="cl-section__title"><?php esc_html_e( 'Rendering & Resource Hints', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h2>
							<p class="cl-section__desc"><?php esc_html_e( 'Speed up how the browser discovers and loads your page content.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
							<div class="cl-cards">
								<!-- Lazy Load -->
								<div class="cl-card" id="cl-card-lazy-load">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">🖼️</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Lazy Load Images', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Delays loading of images until they are visible on the screen, saving bandwidth and improving initial load time.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<label class="cl-toggle" for="cl-lazy-load" aria-label="<?php esc_attr_e( 'Toggle Lazy Load', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
										<input
											type="checkbox"
											id="cl-lazy-load"
											name="cacheloop_settings[lazy_load]"
											value="1"
											<?php checked( 1, (int) $settings['lazy_load'] ); ?>
										>
										<span class="cl-toggle__slider" aria-hidden="true"></span>
									</label>
								</div>

								<!-- Disable Emojis -->
								<div class="cl-card" id="cl-card-disable-emojis">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">😶</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Disable Emojis', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Removes the WordPress core script and CSS loaded on every page to support emoji on old browsers. Virtually no site needs it today.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<label class="cl-toggle" for="cl-disable-emojis" aria-label="<?php esc_attr_e( 'Toggle Disable Emojis', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
										<input
											type="checkbox"
											id="cl-disable-emojis"
											name="cacheloop_settings[disable_emojis]"
											value="1"
											<?php checked( 1, (int) $settings['disable_emojis'] ); ?>
										>
										<span class="cl-toggle__slider" aria-hidden="true"></span>
									</label>
								</div>

								<?php if ( $is_pro ) : ?>
								<!-- Preload Critical Images -->
								<div class="cl-card" id="cl-card-preload-lcp-images">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">🎯</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Preload Critical Images', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Adds an early browser hint for the same leading images excluded from Lazy Load, so the browser starts fetching them before it finishes parsing the page.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<label class="cl-toggle" for="cl-preload-lcp-images" aria-label="<?php esc_attr_e( 'Toggle Preload Critical Images', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
										<input
											type="checkbox"
											id="cl-preload-lcp-images"
											name="cacheloop_settings[preload_lcp_images]"
											value="1"
											<?php checked( 1, (int) $settings['preload_lcp_images'] ); ?>
										>
										<span class="cl-toggle__slider" aria-hidden="true"></span>
									</label>
								</div>

								<!-- Local Google Fonts -->
								<div class="cl-card" id="cl-card-local-google-fonts">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">🔤</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Local Google Fonts', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Downloads Google Fonts to your own server and serves them from there. Removes a third-party request, improves GDPR compliance, and forces font-display: swap.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<label class="cl-toggle" for="cl-local-google-fonts" aria-label="<?php esc_attr_e( 'Toggle Local Google Fonts', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
										<input
											type="checkbox"
											id="cl-local-google-fonts"
											name="cacheloop_settings[local_google_fonts]"
											value="1"
											<?php checked( 1, (int) $settings['local_google_fonts'] ); ?>
										>
										<span class="cl-toggle__slider" aria-hidden="true"></span>
									</label>
								</div>

								<!-- Instant Page -->
								<div class="cl-card" id="cl-card-instant-page">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">⚡</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Instant Page (Prefetch on Hover)', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Preloads a page in the background as soon as a visitor hovers its link, so the click feels instant.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<label class="cl-toggle" for="cl-instant-page" aria-label="<?php esc_attr_e( 'Toggle Instant Page', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
										<input
											type="checkbox"
											id="cl-instant-page"
											name="cacheloop_settings[instant_page]"
											value="1"
											<?php checked( 1, (int) $settings['instant_page'] ); ?>
										>
										<span class="cl-toggle__slider" aria-hidden="true"></span>
									</label>
								</div>

								<!-- Disable Animations -->
								<div class="cl-card" id="cl-card-disable-animations">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">🛑</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Disable CSS Animations', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Forces CSS animations and transitions to complete instantly. Excellent for maximizing metrics in synthetic speed tests.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<label class="cl-toggle" for="cl-disable-animations" aria-label="<?php esc_attr_e( 'Toggle Disable Animations', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
										<input
											type="checkbox"
											id="cl-disable-animations"
											name="cacheloop_settings[disable_animations]"
											value="1"
											<?php checked( 1, (int) $settings['disable_animations'] ); ?>
										>
										<span class="cl-toggle__slider" aria-hidden="true"></span>
									</label>
								</div>

								<!-- Critical CSS -->
								<div class="cl-card" id="cl-card-critical-css">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">🎨</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Critical CSS', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Automatically extracts and inlines the CSS needed for the visible part of the page, so it paints before the full stylesheet finishes loading. Generated per page template in the background — never computed on a live request.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<label class="cl-toggle" for="cl-critical-css" aria-label="<?php esc_attr_e( 'Toggle Critical CSS', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
										<input
											type="checkbox"
											id="cl-critical-css"
											name="cacheloop_settings[critical_css_enabled]"
											value="1"
											<?php checked( 1, (int) ( $settings['critical_css_enabled'] ?? 0 ) ); ?>
										>
										<span class="cl-toggle__slider" aria-hidden="true"></span>
									</label>
								</div>
								<?php endif; ?>
							</div>

							<!-- LCP Image Exclusions (free: CACHELOOP_Lazy_Load already implements this via lcp_image_count) -->
							<div class="cl-advanced-settings" style="margin-top:20px; padding:20px; background:#f9fafb; border:1px solid #e2e8f0; border-radius:8px;" id="cl-card-lcp-count">
								<h4 style="margin-top:0;"><?php esc_html_e( 'Exclude First Images from Lazy Load', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h4>
								<p class="description"><?php esc_html_e( 'Enter the number of images to exclude from Lazy Load (typically 1 or 2 for above-the-fold/hero images).', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
								<input type="number" name="cacheloop_settings[lcp_image_count]" min="1" max="10" style="width: 80px;" value="<?php echo esc_attr( $settings['lcp_image_count'] ?? 1 ); ?>">
							</div>

							<?php if ( $is_pro ) : ?>
							<!-- LCP Preload URLs -->
							<div class="cl-advanced-settings" style="margin-top:20px; padding:20px; background:#f9fafb; border:1px solid #e2e8f0; border-radius:8px;">
								<h4 style="margin-top:0;"><?php esc_html_e( 'LCP Preload', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h4>
								<p class="description"><?php esc_html_e( 'Enter URLs of images (like the hero image) to preload, one per line. This significantly improves the Largest Contentful Paint (LCP) metric.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
								<textarea name="cacheloop_settings[lcp_preload_urls]" id="cl-lcp-preload" rows="3" style="width:100%; border-color:#cbd5e1;"><?php echo esc_textarea( $settings['lcp_preload_urls'] ?? '' ); ?></textarea>
							</div>
							<div id="cl-card-lcp-preload"></div>

							<!-- Preconnect: custom domains -->
							<div class="cl-advanced-settings" style="margin-top:20px; padding:20px; background:#f9fafb; border:1px solid #e2e8f0; border-radius:8px;">
								<h4 style="margin-top:0;"><?php esc_html_e( 'Preconnect – Custom Domains', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h4>
								<p class="description"><?php esc_html_e( 'Enter extra third-party domains to preconnect to (one per line, e.g. https://checkout.stripe.com). CacheLoop already auto-detects common ones like Google Fonts and Google Analytics.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
								<textarea name="cacheloop_settings[preconnect_domains]" id="cl-preconnect-domains" rows="3" style="width:100%; border-color:#cbd5e1;"><?php echo esc_textarea( $settings['preconnect_domains'] ?? '' ); ?></textarea>
							</div>
							<?php endif; ?>
						</div>
					</div><!-- /#tab-optimization -->

					<!-- TAB: GESTIONE ASSET (Pro-only — tab itself hidden from Free users, see sidebar) -->
					<?php if ( $is_pro ) : ?>
					<div id="tab-assets" class="cl-tab-pane" style="display: none;">
						<div class="cl-section">
							<h2 class="cl-section__title"><?php esc_html_e( 'Gestione Asset (CSS/JS)', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h2>
							<p class="cl-section__desc"><?php esc_html_e( 'Optimize the delivery of your stylesheets and scripts.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
							<div class="cl-cards">
								<!-- Minify CSS -->
								<div class="cl-card" id="cl-card-minify-css">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">📦</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Minify & Combine CSS', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Reduces file sizes by removing whitespace and combines CSS to reduce HTTP requests.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<label class="cl-toggle" for="cl-minify-css" aria-label="<?php esc_attr_e( 'Toggle Minify CSS', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
										<input
											type="checkbox"
											id="cl-minify-css"
											name="cacheloop_settings[minify]"
											value="1"
											<?php checked( 1, (int) $settings['minify'] ); ?>
										>
										<span class="cl-toggle__slider" aria-hidden="true"></span>
									</label>
								</div>

								<!-- Unused CSS Removal -->
								<div class="cl-card cl-card--expandable" id="cl-card-unused-css">
									<div class="cl-card__header">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">✂️</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Remove Unused CSS', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Strips CSS rules that don\'t match anything on each page. Requires "Minify & Combine CSS" above — otherwise there\'s nothing for it to work on.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<label class="cl-toggle" for="cl-unused-css" aria-label="<?php esc_attr_e( 'Toggle Remove Unused CSS', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
										<input
											type="checkbox"
											id="cl-unused-css"
											name="cacheloop_settings[unused_css_enabled]"
											value="1"
											<?php checked( 1, (int) ( $settings['unused_css_enabled'] ?? 0 ) ); ?>
										>
										<span class="cl-toggle__slider" aria-hidden="true"></span>
									</label>
									</div>
								<div class="cl-card__extra" style="<?php echo empty( $settings['unused_css_enabled'] ) ? 'display:none;' : ''; ?>">
									<div class="cl-card__content" style="padding-top: 8px;">
										<p style="font-size:12px; color:#dc3545; margin: 0 0 8px;">
											<?php esc_html_e( '⚠ Can break page appearance if a class is only added by JavaScript after load (menus, sliders, form states). Test every page template after enabling — start with the safelist below if anything looks wrong, or turn this off.', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
										</p>
										<label for="cl-unused-css-safelist" style="display: block; font-size: 12px; color: var(--cl-text-2); margin-bottom: 4px;">
											<?php esc_html_e( 'Extra safelist — one class name/pattern per line, never stripped', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
										</label>
										<textarea
											id="cl-unused-css-safelist"
											name="cacheloop_settings[unused_css_safelist]"
											rows="3"
											placeholder="my-custom-toggle&#10;menu-active"
											style="width: 100%; max-width: 420px; padding: 6px 10px; border: 1px solid var(--cl-border); border-radius: var(--cl-radius); background: var(--cl-surface-2); color: var(--cl-text); font-size: 13px; font-family: monospace;"
										><?php echo esc_textarea( $settings['unused_css_safelist'] ?? '' ); ?></textarea>
									</div>
								</div>
								</div>

								<!-- Defer CSS -->
								<div class="cl-card" id="cl-card-defer-css">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">💨</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Load CSS Asynchronously (Defer)', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Eliminates render-blocking CSS. Warning: May cause FOUC if used with Delay JS.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<label class="cl-toggle" for="cl-defer-css" aria-label="<?php esc_attr_e( 'Toggle Defer CSS', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
										<input
											type="checkbox"
											id="cl-defer-css"
											name="cacheloop_settings[defer_css]"
											value="1"
											<?php checked( 1, (int) $settings['defer_css'] ); ?>
										>
										<span class="cl-toggle__slider" aria-hidden="true"></span>
									</label>
								</div>

								<!-- Delay JS Execution -->
								<div class="cl-card" id="cl-card-delay-js">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">⚡</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Delay JS Execution', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Delays loading of JavaScript until the user interacts with the page (scroll or click). Massive boost for Mobile PageSpeed scores.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<label class="cl-toggle" for="cl-delay-js" aria-label="<?php esc_attr_e( 'Toggle Delay JS', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
										<input
											type="checkbox"
											id="cl-delay-js"
											name="cacheloop_settings[delay_js]"
											value="1"
											<?php checked( 1, (int) $settings['delay_js'] ); ?>
										>
										<span class="cl-toggle__slider" aria-hidden="true"></span>
									</label>
								</div>

								<!-- Combine Footer JS -->
								<div class="cl-card" id="cl-card-combine-js-footer">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">🧩</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Combine Footer JS', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Combines local scripts enqueued in the footer into a single file to reduce HTTP requests. Concatenates only — does not minify JS content.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<label class="cl-toggle" for="cl-combine-js-footer" aria-label="<?php esc_attr_e( 'Toggle Combine Footer JS', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
										<input
											type="checkbox"
											id="cl-combine-js-footer"
											name="cacheloop_settings[combine_js_footer]"
											value="1"
											<?php checked( 1, (int) $settings['combine_js_footer'] ); ?>
										>
										<span class="cl-toggle__slider" aria-hidden="true"></span>
									</label>
								</div>

								<div class="cl-advanced-settings" style="margin-top:20px; padding:20px; background:#f9fafb; border:1px solid #e2e8f0; border-radius:8px;">
									<h4 style="margin-top:0;"><?php esc_html_e( 'Delay JS Exclusions', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h4>
									<p class="description"><?php esc_html_e( 'Enter filenames or paths of JS files to exclude from Delay JS execution (one per line).', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
									<textarea name="cacheloop_settings[delay_js_exclusions]" id="cl-delay-js-exclusions" rows="5" style="width:100%; border-color:#cbd5e1;"><?php echo esc_textarea( $settings['delay_js_exclusions'] ?? '' ); ?></textarea>
									<button type="button" class="button cl-btn cl-btn--small" id="cl-restore-exclusions" style="margin-top:10px;"><?php esc_html_e( 'Restore Defaults', 'cacheloop-simple-page-cache-speed-optimization' ); ?></button>
								</div>
								
								<div class="cl-advanced-settings" style="margin-top:20px; padding:20px; background:#f9fafb; border:1px solid #e2e8f0; border-radius:8px;">
									<?php
										$scanned_assets  = get_option(
											'cacheloop_scanned_assets',
											array(
												'css' => array(),
												'js'  => array(),
											)
										);
										$excluded_js     = $settings['excluded_assets_js'] ?? array();
										$excluded_css    = $settings['excluded_assets_css'] ?? array();
										$flagged_assets  = $this->get_google_flagged_assets();
										$has_suggestions = ! empty( $flagged_assets['css'] ) || ! empty( $flagged_assets['js'] );
										// Basename without query string, so scanned URLs (which keep
										// ?ver=...) still match the plain filenames Google reported.
										$cl_asset_basename = static function ( $url ) {
											return basename( strtok( $url, '?' ) );
										};
									?>
									<?php if ( $has_suggestions ) : ?>
									<div style="margin-bottom:16px;">
										<button type="button" class="button cl-btn cl-btn--small" id="cl-apply-google-suggestions">
											<span class="dashicons dashicons-update"></span> <?php esc_html_e( 'Re-check Suggested Files', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
										</button>
										<p class="description" style="margin-top:6px;"><?php esc_html_e( 'Files your last Speedtest flagged as slow (marked with ⚠ below) are already pre-checked. Use this if you unchecked one by mistake. Review the selection, then click Save Settings to apply.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
									</div>
									<?php endif; ?>

									<h4 style="margin-top:0;"><?php esc_html_e( 'Select CSS to Combine/Defer', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h4>
									<p class="description"><?php esc_html_e( 'Select the scanned CSS files you want to include in optimization.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
									<div style="width:100%; height:200px; overflow-y:auto; border:1px solid #cbd5e1; padding:10px; background:#fff; border-radius:4px;">
										<?php
										if ( ! empty( $scanned_assets['css'] ) ) {
											foreach ( $scanned_assets['css'] as $hash => $url ) {
												$is_flagged = in_array( $cl_asset_basename( $url ), $flagged_assets['css'], true );
												// A file Google just flagged is pre-checked even if it was
												// previously excluded — nothing saves until Save Settings anyway.
												$is_checked = $is_flagged || ! in_array( $hash, $excluded_css, true );
												echo '<label style="display:block; margin-bottom:8px; font-size:13px; line-height:1.4;">';
												echo '<input type="checkbox" ' . ( $is_flagged ? 'class="cl-flagged-checkbox" ' : '' ) . 'name="cacheloop_settings[included_assets_css][]" value="' . esc_attr( $hash ) . '" ';
												checked( $is_checked );
												echo ' style="margin-right:8px;">';
												echo esc_html( basename( $url ) ) . ' <span style="color:#64748b; font-size:11px;">(' . esc_html( $url ) . ')</span>';
												if ( $is_flagged ) {
													echo ' <span class="cl-flag-badge" title="' . esc_attr__( 'Google flagged this file in the last Speedtest', 'cacheloop-simple-page-cache-speed-optimization' ) . '">⚠ ' . esc_html__( 'Google flagged', 'cacheloop-simple-page-cache-speed-optimization' ) . '</span>';
												}
												echo '</label>';
											}
										} else {
											echo '<p style="color:#64748b; font-style:italic;">' . esc_html__( 'No CSS files scanned yet. Visit the frontend to scan.', 'cacheloop-simple-page-cache-speed-optimization' ) . '</p>';
										}
										?>
									</div>

									<h4 style="margin-top:20px;"><?php esc_html_e( 'Select JS to Delay', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h4>
									<p class="description"><?php esc_html_e( 'Select the scanned JS files you want to delay.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
									<div style="width:100%; height:200px; overflow-y:auto; border:1px solid #cbd5e1; padding:10px; background:#fff; border-radius:4px;">
										<?php
										if ( ! empty( $scanned_assets['js'] ) ) {
											foreach ( $scanned_assets['js'] as $hash => $url ) {
												$is_flagged = in_array( $cl_asset_basename( $url ), $flagged_assets['js'], true );
												// A file Google just flagged is pre-checked even if it was
												// previously excluded — nothing saves until Save Settings anyway.
												$is_checked = $is_flagged || ! in_array( $hash, $excluded_js, true );
												echo '<label style="display:block; margin-bottom:8px; font-size:13px; line-height:1.4;">';
												echo '<input type="checkbox" ' . ( $is_flagged ? 'class="cl-flagged-checkbox" ' : '' ) . 'name="cacheloop_settings[included_assets_js][]" value="' . esc_attr( $hash ) . '" ';
												checked( $is_checked );
												echo ' style="margin-right:8px;">';
												echo esc_html( basename( $url ) ) . ' <span style="color:#64748b; font-size:11px;">(' . esc_html( $url ) . ')</span>';
												if ( $is_flagged ) {
													echo ' <span class="cl-flag-badge" title="' . esc_attr__( 'Google flagged this file in the last Speedtest', 'cacheloop-simple-page-cache-speed-optimization' ) . '">⚠ ' . esc_html__( 'Google flagged', 'cacheloop-simple-page-cache-speed-optimization' ) . '</span>';
												}
												echo '</label>';
											}
										} else {
											echo '<p style="color:#64748b; font-style:italic;">' . esc_html__( 'No JS files scanned yet. Visit the frontend to scan.', 'cacheloop-simple-page-cache-speed-optimization' ) . '</p>';
										}
										?>
									</div>
								</div>

							</div>
						</div>
					</div><!-- /#tab-assets -->
					<?php endif; ?>

					<!-- TAB: ADVANCED -->
					<div id="tab-media" class="cl-tab-pane" style="display: none;">

						<?php if ( $is_pro ) : ?>
						<div class="cl-section">
							<h2 class="cl-section__title"><?php esc_html_e( 'Media & Database', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h2>
							<p class="cl-section__desc"><?php esc_html_e( 'Image conversion, database cleanup, and background-task tuning.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>

							<div class="cl-cards">
								<!-- DB Optimizer -->
								<div class="cl-card" id="cl-card-db-optimizer">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">🗄️</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Database Optimization', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Automatically cleans up old page drafts and database clutter every week.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<div class="cl-card__actions">
										<button
											id="cl-run-db-optimizer-btn"
											type="button"
											class="button cl-btn cl-btn--small"
											aria-label="<?php esc_attr_e( 'Run database optimization now', 'cacheloop-simple-page-cache-speed-optimization' ); ?>"
										>
											<?php esc_html_e( 'Run Now', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
										</button>
										<label class="cl-toggle" for="cl-db-optimizer" aria-label="<?php esc_attr_e( 'Toggle Database Optimizer', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
											<input
												type="checkbox"
												id="cl-db-optimizer"
												name="cacheloop_settings[db_optimizer]"
												value="1"
												<?php checked( 1, (int) $settings['db_optimizer'] ); ?>
											>
											<span class="cl-toggle__slider" aria-hidden="true"></span>
										</label>
									</div>
								</div>

								<!-- Heartbeat Control -->
								<div class="cl-card" id="cl-card-heartbeat">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">💓</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Server Resource Saver', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Reduces background activity from WordPress that can slow down your server unnecessarily.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<label class="cl-toggle" for="cl-heartbeat" aria-label="<?php esc_attr_e( 'Toggle Server Resource Saver', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
										<input
											type="checkbox"
											id="cl-heartbeat"
											name="cacheloop_settings[heartbeat]"
											value="1"
											<?php checked( 1, (int) $settings['heartbeat'] ); ?>
										>
										<span class="cl-toggle__slider" aria-hidden="true"></span>
									</label>
								</div>
							</div>

							<!-- ============================================================= -->
							<!-- Image Optimization -->
							<!-- ============================================================= -->
							<div class="cl-section" style="margin-top: 32px;">
								<h2 class="cl-section__title"><?php esc_html_e( 'Image Optimization', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h2>
								<p class="cl-section__desc"><?php esc_html_e( 'Converts JPEG/PNG images to WebP using your server\'s GD or Imagick extension. Originals are always kept.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>

								<!-- Optimization Stats -->
								<div class="cl-widget cl-widget--stats" style="margin-bottom: 20px;">
									<h3 class="cl-widget__title"><span class="dashicons dashicons-chart-bar"></span> <?php esc_html_e( 'Optimization Status', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
									<div class="cl-widget__content" id="cl-image-optimize-stats">
										<div class="cl-stat-box">
											<span class="cl-stat-label"><?php esc_html_e( 'Total Images', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span>
											<span class="cl-stat-value" id="cl-io-stat-total">—</span>
										</div>
										<div class="cl-stat-box">
											<span class="cl-stat-label"><?php esc_html_e( 'Optimized', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span>
											<span class="cl-stat-value" id="cl-io-stat-optimized">—</span>
										</div>
										<div class="cl-stat-box">
											<span class="cl-stat-label"><?php esc_html_e( 'Not Optimized', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span>
											<span class="cl-stat-value" id="cl-io-stat-unoptimized">—</span>
										</div>
										<div class="cl-stat-box">
											<span class="cl-stat-label"><?php esc_html_e( 'Errors', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span>
											<span class="cl-stat-value" id="cl-io-stat-errors">—</span>
										</div>
										<div class="cl-stat-box">
											<span class="cl-stat-label"><?php esc_html_e( 'Space Saved', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span>
											<span class="cl-stat-value" id="cl-io-stat-saved">—</span>
										</div>
										<div class="cl-stat-box">
											<span class="cl-stat-label"><?php esc_html_e( 'Success Rate', 'cacheloop-simple-page-cache-speed-optimization' ); ?></span>
											<span class="cl-stat-value" id="cl-io-stat-percent">—</span>
										</div>
									</div>
								</div>

								<div class="cl-cards">
									<div class="cl-card" id="cl-card-image-optimize">
										<div class="cl-card__content">
											<div class="cl-card__icon" aria-hidden="true">🖼️</div>
											<div class="cl-card__text">
												<h3 class="cl-card__title"><?php esc_html_e( 'Enable Image Optimization', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
												<p class="cl-card__desc"><?php esc_html_e( 'Serves a WebP version of your images to browsers that support it, via <picture> — the original always stays as fallback.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
											</div>
										</div>
										<label class="cl-toggle" for="cl-image-optimize" aria-label="<?php esc_attr_e( 'Toggle Image Optimization', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
											<input type="checkbox" id="cl-image-optimize" name="cacheloop_settings[image_optimize]" value="1" <?php checked( 1, (int) $settings['image_optimize'] ); ?>>
											<span class="cl-toggle__slider" aria-hidden="true"></span>
										</label>
									</div>
									<div class="cl-card" id="cl-card-image-optimize-upload">
										<div class="cl-card__content">
											<div class="cl-card__icon" aria-hidden="true">📤</div>
											<div class="cl-card__text">
												<h3 class="cl-card__title"><?php esc_html_e( 'Optimize on Upload', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
												<p class="cl-card__desc"><?php esc_html_e( 'Automatically converts new media a few seconds after upload, in the background.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
											</div>
										</div>
										<label class="cl-toggle" for="cl-image-optimize-upload" aria-label="<?php esc_attr_e( 'Toggle Optimize on Upload', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
											<input type="checkbox" id="cl-image-optimize-upload" name="cacheloop_settings[image_optimize_on_upload]" value="1" <?php checked( 1, (int) $settings['image_optimize_on_upload'] ); ?>>
											<span class="cl-toggle__slider" aria-hidden="true"></span>
										</label>
									</div>
								</div>
								<div class="cl-advanced-settings" style="margin-top:20px; padding:20px; background:#f9fafb; border:1px solid #e2e8f0; border-radius:8px;">
									<h4 style="margin-top:0;"><?php esc_html_e( 'Compression Library', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h4>
									<p class="description"><?php esc_html_e( 'Auto prefers Imagick (better quality/color handling) and falls back to GD. Pin one explicitly if you know which your server supports well.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
									<div id="cl-io-method-options" style="display:flex; flex-direction:column; gap:8px; margin-top:10px;">
										<?php
										$io_method  = $settings['image_optimize_method'] ?? 'auto';
										$io_choices = array(
											'auto'    => __( 'Auto (recommended)', 'cacheloop-simple-page-cache-speed-optimization' ),
											'imagick' => __( 'Imagick', 'cacheloop-simple-page-cache-speed-optimization' ),
											'gd'      => __( 'GD', 'cacheloop-simple-page-cache-speed-optimization' ),
										);
										foreach ( $io_choices as $io_key => $io_label ) :
											?>
											<label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
												<input type="radio" name="cacheloop_settings[image_optimize_method]" value="<?php echo esc_attr( $io_key ); ?>" <?php checked( $io_method, $io_key ); ?>>
												<span><?php echo esc_html( $io_label ); ?></span>
												<span class="cl-io-lib-status" data-lib="<?php echo esc_attr( $io_key ); ?>" style="font-size:12px; color:var(--cl-text-muted);"></span>
											</label>
										<?php endforeach; ?>
									</div>
								</div>
								<div class="cl-advanced-settings" style="margin-top:20px; padding:20px; background:#f9fafb; border:1px solid #e2e8f0; border-radius:8px;">
									<h4 style="margin-top:0;"><?php esc_html_e( 'WebP Quality', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h4>
									<p class="description"><?php esc_html_e( 'Higher values keep more quality at the cost of larger files. 80-85 is a good default.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
									<input type="number" name="cacheloop_settings[image_optimize_quality]" min="1" max="100" style="width: 80px;" value="<?php echo esc_attr( $settings['image_optimize_quality'] ?? 82 ); ?>">
								</div>
								<div class="cl-advanced-settings" style="margin-top:20px; padding:20px; background:#f9fafb; border:1px solid #e2e8f0; border-radius:8px;">
									<h4 style="margin-top:0;"><?php esc_html_e( 'Optimize Existing Media', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h4>
									<p class="description"><?php esc_html_e( 'New uploads are optimized automatically. Use this to convert images already in your Media Library before this feature was turned on.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
									<button type="button" class="button cl-btn cl-btn--small" id="cl-image-optimize-all-btn"><?php esc_html_e( 'Optimize All', 'cacheloop-simple-page-cache-speed-optimization' ); ?></button>
									<span id="cl-image-optimize-status" style="margin-left:10px; font-size:13px;"></span>
									<div id="cl-image-optimize-progress-wrap" style="display:none; margin-top:10px; background:#e2e8f0; border-radius:4px; height:8px; overflow:hidden;">
										<div id="cl-image-optimize-progress-bar" style="width:0%; height:100%; background:var(--cl-accent, #2563eb); transition:width .3s;"></div>
									</div>
								</div>

								<!-- Optimized Images Table -->
								<div class="cl-advanced-settings" style="margin-top:20px; padding:20px; background:#f9fafb; border:1px solid #e2e8f0; border-radius:8px;">
									<div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;">
										<h4 style="margin:0;"><?php esc_html_e( 'Optimized Images', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h4>
										<div>
											<button type="button" class="button cl-btn cl-btn--small" id="cl-io-revert-all-btn" style="background:#dc3545; color:#fff; border-color:#dc3545;"><?php esc_html_e( 'Revert All', 'cacheloop-simple-page-cache-speed-optimization' ); ?></button>
											<span id="cl-io-revert-status" style="margin-left:8px; font-size:13px;"></span>
										</div>
									</div>
									<div id="cl-io-table-wrap" style="overflow-x:auto; margin-top:14px;">
										<table class="wp-list-table widefat fixed striped" id="cl-io-table">
											<thead>
												<tr>
													<th style="width:60px;"><?php esc_html_e( 'Image', 'cacheloop-simple-page-cache-speed-optimization' ); ?></th>
													<th><?php esc_html_e( 'File', 'cacheloop-simple-page-cache-speed-optimization' ); ?></th>
													<th><?php esc_html_e( 'Status', 'cacheloop-simple-page-cache-speed-optimization' ); ?></th>
													<th title="<?php esc_attr_e( 'Total across every generated size (thumbnail, medium, large, full) — not just the full-size file shown in the Media Library.', 'cacheloop-simple-page-cache-speed-optimization' ); ?>"><?php esc_html_e( 'Original', 'cacheloop-simple-page-cache-speed-optimization' ); ?> <span class="dashicons dashicons-info-outline" style="font-size:14px; width:14px; height:14px; vertical-align:text-top; opacity:0.6;"></span></th>
													<th title="<?php esc_attr_e( 'Total across every generated size (thumbnail, medium, large, full).', 'cacheloop-simple-page-cache-speed-optimization' ); ?>"><?php esc_html_e( 'Optimized', 'cacheloop-simple-page-cache-speed-optimization' ); ?></th>
													<th><?php esc_html_e( 'Saved', 'cacheloop-simple-page-cache-speed-optimization' ); ?></th>
													<th><?php esc_html_e( 'Date', 'cacheloop-simple-page-cache-speed-optimization' ); ?></th>
													<th><?php esc_html_e( 'Action', 'cacheloop-simple-page-cache-speed-optimization' ); ?></th>
												</tr>
											</thead>
											<tbody id="cl-io-table-body">
												<tr><td colspan="8"><?php esc_html_e( 'Loading…', 'cacheloop-simple-page-cache-speed-optimization' ); ?></td></tr>
											</tbody>
										</table>
									</div>
									<div id="cl-io-pagination" style="margin-top:12px; display:flex; gap:10px; align-items:center;">
										<button type="button" class="button cl-btn cl-btn--small" id="cl-io-prev-page" disabled>&lsaquo; <?php esc_html_e( 'Prev', 'cacheloop-simple-page-cache-speed-optimization' ); ?></button>
										<span id="cl-io-page-info" style="font-size:13px;"></span>
										<button type="button" class="button cl-btn cl-btn--small" id="cl-io-next-page" disabled><?php esc_html_e( 'Next', 'cacheloop-simple-page-cache-speed-optimization' ); ?> &rsaquo;</button>
									</div>
								</div>
							</div>

							<!-- ============================================================= -->
							<!-- Bloat Remover -->
							<!-- ============================================================= -->
							<div class="cl-section" style="margin-top: 32px;">
								<h2 class="cl-section__title"><?php esc_html_e( 'Bloat Remover', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h2>
								<p class="cl-section__desc"><?php esc_html_e( 'Disable WordPress/WooCommerce features most sites never use. Each toggle is independent and safe to leave off if unsure.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
								<div class="cl-advanced-settings" style="padding:20px; background:#f9fafb; border:1px solid #e2e8f0; border-radius:8px;">
									<div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px;">
										<?php
										$bloat_options = array(
											'bloat_disable_xmlrpc'         => array( __( 'Disable XML-RPC', 'cacheloop-simple-page-cache-speed-optimization' ), __( 'Blocks xmlrpc.php requests, a common brute-force/DDoS target.', 'cacheloop-simple-page-cache-speed-optimization' ) ),
											'bloat_disable_dashicons'      => array( __( 'Disable Dashicons for Guests', 'cacheloop-simple-page-cache-speed-optimization' ), __( 'Removes the admin icon font from the public-facing site.', 'cacheloop-simple-page-cache-speed-optimization' ) ),
											'bloat_disable_jquery_migrate' => array( __( 'Remove jQuery Migrate', 'cacheloop-simple-page-cache-speed-optimization' ), __( 'Drops the compatibility shim most modern themes/plugins don\'t need.', 'cacheloop-simple-page-cache-speed-optimization' ) ),
											'bloat_disable_block_css'      => array( __( 'Disable Block Library CSS', 'cacheloop-simple-page-cache-speed-optimization' ), __( 'Removes core Gutenberg block CSS — only safe if you don\'t use core blocks for styling.', 'cacheloop-simple-page-cache-speed-optimization' ) ),
											'bloat_disable_cart_fragment'  => array( __( 'Disable Cart Fragments', 'cacheloop-simple-page-cache-speed-optimization' ), __( 'Stops WooCommerce\'s AJAX mini-cart updater outside cart-related pages.', 'cacheloop-simple-page-cache-speed-optimization' ) ),
											'bloat_disable_woo_assets'     => array( __( 'Disable WooCommerce Assets Elsewhere', 'cacheloop-simple-page-cache-speed-optimization' ), __( 'Dequeues WooCommerce CSS/JS on pages that aren\'t shop/cart/checkout/account.', 'cacheloop-simple-page-cache-speed-optimization' ) ),
											'bloat_disable_rss'            => array( __( 'Disable RSS Feeds', 'cacheloop-simple-page-cache-speed-optimization' ), __( 'Blocks all feed URLs and removes feed links from <head>.', 'cacheloop-simple-page-cache-speed-optimization' ) ),
											'bloat_disable_oembeds'        => array( __( 'Disable oEmbeds', 'cacheloop-simple-page-cache-speed-optimization' ), __( 'Stops other sites from embedding your content via URL, and vice versa.', 'cacheloop-simple-page-cache-speed-optimization' ) ),
											'bloat_disable_gutenberg'      => array( __( 'Disable Block Editor', 'cacheloop-simple-page-cache-speed-optimization' ), __( 'Switches all post types back to the Classic Editor.', 'cacheloop-simple-page-cache-speed-optimization' ) ),
										);
										foreach ( $bloat_options as $key => $labels ) :
											?>
											<label style="display:flex; align-items:flex-start; gap:8px; cursor:pointer;" for="cl-<?php echo esc_attr( str_replace( '_', '-', $key ) ); ?>">
												<input type="checkbox" id="cl-<?php echo esc_attr( str_replace( '_', '-', $key ) ); ?>" name="cacheloop_settings[<?php echo esc_attr( $key ); ?>]" value="1" style="margin-top:3px;" <?php checked( 1, (int) ( $settings[ $key ] ?? 0 ) ); ?>>
												<span>
													<strong style="display:block; font-size:13px;"><?php echo esc_html( $labels[0] ); ?></strong>
													<span class="description" style="font-size:12px;"><?php echo esc_html( $labels[1] ); ?></span>
												</span>
											</label>
										<?php endforeach; ?>
									</div>
									<div style="margin-top:18px; padding-top:16px; border-top:1px solid #e2e8f0;">
										<h4 style="margin-top:0;"><?php esc_html_e( 'Limit Post Revisions', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h4>
										<p class="description"><?php esc_html_e( 'Maximum revisions kept per post. Leave empty for WordPress\' default (unlimited).', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										<input type="number" name="cacheloop_settings[bloat_limit_revisions]" min="0" max="100" style="width: 80px;" value="<?php echo esc_attr( $settings['bloat_limit_revisions'] ?? '' ); ?>" placeholder="∞">
									</div>
								</div>
							</div>
						</div>
						<?php endif; ?>
					</div><!-- /#tab-media -->

					<!-- TAB: OBJECT CACHE (Pro-only) -->
					<div id="tab-object-cache" class="cl-tab-pane" style="display: none;">
						<?php if ( $is_pro ) : ?>
							<!-- ============================================================= -->
							<!-- Object Cache -->
							<!-- ============================================================= -->
							<div class="cl-section" style="margin-top: 32px;">
								<h2 class="cl-section__title"><?php esc_html_e( 'Object Cache', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h2>
								<p class="cl-section__desc"><?php esc_html_e( 'Backs WordPress\' object cache with Redis or Memcached, cutting repeated database queries. Requires the corresponding PHP extension on your server.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
								<div class="cl-cards">
									<div class="cl-card" id="cl-card-object-cache">
										<div class="cl-card__content">
											<div class="cl-card__icon" aria-hidden="true">⚙️</div>
											<div class="cl-card__text">
												<h3 class="cl-card__title"><?php esc_html_e( 'Enable Object Cache', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
												<p class="cl-card__desc"><?php esc_html_e( 'Installs the wp-content/object-cache.php drop-in. Never overwrites another caching plugin\'s drop-in.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
											</div>
										</div>
										<label class="cl-toggle" for="cl-object-cache-enabled" aria-label="<?php esc_attr_e( 'Toggle Object Cache', 'cacheloop-simple-page-cache-speed-optimization' ); ?>">
											<input type="checkbox" id="cl-object-cache-enabled" name="cacheloop_settings[object_cache_enabled]" value="1" <?php checked( 1, (int) $settings['object_cache_enabled'] ); ?>>
											<span class="cl-toggle__slider" aria-hidden="true"></span>
										</label>
									</div>
								</div>
								<?php if ( CACHELOOP_Object_Cache::has_foreign_dropin() ) : ?>
								<div class="notice notice-warning" style="margin: 12px 0; padding: 10px 14px;">
									<p><?php esc_html_e( 'Another plugin already has a wp-content/object-cache.php drop-in installed. CacheLoop will not overwrite it — remove the other plugin\'s object cache first if you want to use this one.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
								</div>
								<?php endif; ?>
								<div class="cl-advanced-settings" style="margin-top:16px; padding:20px; background:#f9fafb; border:1px solid #e2e8f0; border-radius:8px;">
									<div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px;">
										<div>
											<label for="cl-oc-driver" style="display:block; font-weight:600; font-size:13px; margin-bottom:4px;"><?php esc_html_e( 'Driver', 'cacheloop-simple-page-cache-speed-optimization' ); ?></label>
											<select id="cl-oc-driver" name="cacheloop_settings[object_cache_driver]" style="width:100%;">
												<option value="redis" <?php selected( 'redis', $settings['object_cache_driver'] ?? 'redis' ); ?>>Redis</option>
												<option value="memcached" <?php selected( 'memcached', $settings['object_cache_driver'] ?? 'redis' ); ?>>Memcached</option>
											</select>
										</div>
										<div>
											<label for="cl-oc-host" style="display:block; font-weight:600; font-size:13px; margin-bottom:4px;"><?php esc_html_e( 'Host', 'cacheloop-simple-page-cache-speed-optimization' ); ?></label>
											<input type="text" id="cl-oc-host" name="cacheloop_settings[object_cache_host]" style="width:100%;" value="<?php echo esc_attr( $settings['object_cache_host'] ?? '127.0.0.1' ); ?>" placeholder="127.0.0.1">
										</div>
										<div>
											<label for="cl-oc-port" style="display:block; font-weight:600; font-size:13px; margin-bottom:4px;"><?php esc_html_e( 'Port', 'cacheloop-simple-page-cache-speed-optimization' ); ?></label>
											<input type="number" id="cl-oc-port" name="cacheloop_settings[object_cache_port]" style="width:100%;" value="<?php echo esc_attr( $settings['object_cache_port'] ?? '6379' ); ?>">
										</div>
										<div>
											<label for="cl-oc-password" style="display:block; font-weight:600; font-size:13px; margin-bottom:4px;"><?php esc_html_e( 'Password (optional)', 'cacheloop-simple-page-cache-speed-optimization' ); ?></label>
											<input type="password" id="cl-oc-password" name="cacheloop_settings[object_cache_password]" style="width:100%;" value="<?php echo esc_attr( $settings['object_cache_password'] ?? '' ); ?>" autocomplete="new-password">
										</div>
										<div>
											<label for="cl-oc-ttl" style="display:block; font-weight:600; font-size:13px; margin-bottom:4px;"><?php esc_html_e( 'Default TTL (seconds)', 'cacheloop-simple-page-cache-speed-optimization' ); ?></label>
											<input type="number" id="cl-oc-ttl" name="cacheloop_settings[object_cache_ttl]" min="60" max="86400" style="width:100%;" value="<?php echo esc_attr( $settings['object_cache_ttl'] ?? 3600 ); ?>">
										</div>
									</div>
									<div style="margin-top:16px; display:flex; align-items:center; gap:12px;">
										<button type="button" class="button cl-btn cl-btn--small" id="cl-oc-test-connection"><?php esc_html_e( 'Test Connection', 'cacheloop-simple-page-cache-speed-optimization' ); ?></button>
										<span id="cl-oc-test-result" style="font-size:13px;"></span>
									</div>
									<div id="cl-oc-stats" style="margin-top:14px; font-size:13px; color:var(--cl-text-muted);"></div>
								</div>
							</div>
						<?php endif; ?>
					</div><!-- /#tab-object-cache -->

					<!-- TAB: TOOLS (free-accessible) -->
					<div id="tab-tools" class="cl-tab-pane" style="display: none;">
						<div class="cl-section">
							<h2 class="cl-section__title"><?php esc_html_e( 'Diagnostics', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h2>
							<p class="cl-section__desc"><?php esc_html_e( 'API keys and speed-testing configuration.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
							<!-- Google PageSpeed API Key -->
							<div class="cl-card" style="margin-bottom: 20px;">
								<div class="cl-card__content">
									<div class="cl-card__icon" aria-hidden="true">🔑</div>
									<div class="cl-card__text">
										<h3 class="cl-card__title"><?php esc_html_e( 'Google PageSpeed API Key', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
										<p class="cl-card__desc"><?php esc_html_e( 'Prevents rate-limiting (Error 429) during Speedtest scans.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
									</div>
								</div>
								<div style="display:flex; flex-direction:column; align-items:flex-end; gap: 6px;">
									<input type="text"
											name="cacheloop_settings[pagespeed_api_key]"
											value="<?php echo esc_attr( isset( $settings['pagespeed_api_key'] ) ? $settings['pagespeed_api_key'] : '' ); ?>"
											placeholder="AIzaSy..."
											style="width: 280px; padding: 6px 12px; border: 1px solid var(--cl-border); border-radius: var(--cl-radius-sm);">
									<a href="https://developers.google.com/speed/docs/insights/v5/get-started#APIKey" target="_blank" style="font-size: 12px; color: var(--cl-accent); text-decoration: none;">
										<?php esc_html_e( 'How to get a free API Key &rarr;', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
									</a>
								</div>
							</div>
						</div>

						<!-- Import/Export Settings -->
						<div class="cl-section" style="margin-top: 40px; border-top: 1px solid var(--cl-border); padding-top: 30px;">
							<h2 class="cl-section__title"><?php esc_html_e( 'Tools', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h2>
							<p class="cl-section__desc"><?php esc_html_e( 'Backup your configuration or migrate it to another site.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>

							<div class="cl-cards">
								<div class="cl-card">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">📤</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Export Settings', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Download a JSON file containing all your CacheLoop settings.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<a href="<?php echo esc_url( wp_nonce_url( admin_url( 'admin-post.php?action=cacheloop_export_settings' ), 'cacheloop_export_settings_nonce' ) ); ?>" class="button cl-btn cl-btn--secondary">
										<?php esc_html_e( 'Export JSON', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
									</a>
								</div>
								<div class="cl-card">
									<div class="cl-card__content" style="flex: 1;">
										<div class="cl-card__icon" aria-hidden="true">📥</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Import Settings', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<div class="cl-import-form-wrapper">
												<input type="hidden" id="cl_import_nonce" value="<?php echo esc_attr( wp_create_nonce( 'cacheloop_import_settings_nonce' ) ); ?>">
												<div style="display: flex; gap: 10px; align-items: center; margin-top: 10px;">
													<input type="file" id="cl_import_file_dummy" accept=".json">
													<button type="button" id="cl-import-trigger-btn" class="button cl-btn cl-btn--secondary">
														<?php esc_html_e( 'Import JSON', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
													</button>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="cl-card">
									<div class="cl-card__content">
										<div class="cl-card__icon" aria-hidden="true">🔄</div>
										<div class="cl-card__text">
											<h3 class="cl-card__title"><?php esc_html_e( 'Reset Freemius Cache', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h3>
											<p class="cl-card__desc"><?php esc_html_e( 'Clear Freemius database cache to resolve activation issues.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
										</div>
									</div>
									<a href="<?php echo esc_url( wp_nonce_url( admin_url( 'admin-post.php?action=cacheloop_reset_fs' ), 'cacheloop_reset_fs_action' ) ); ?>" class="button cl-btn cl-btn--secondary">
										<?php esc_html_e( 'Reset Cache', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
									</a>
								</div>
							</div>
						</div>

						<!-- Server Info & System Check -->
						<div class="cl-section" id="cl-server-info-section" style="margin-top: 40px; border-top: 1px solid var(--cl-border); padding-top: 30px;">
							<h2 class="cl-section__title"><span class="dashicons dashicons-admin-tools"></span> <?php esc_html_e( 'Server Info & System Check', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h2>
							<p class="cl-section__desc"><?php esc_html_e( 'Diagnostic information about your server environment. Download this report and send it to support if you experience issues.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>

							<!-- Summary cards row -->
							<div id="cl-server-summary" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 16px;">
								<div class="cl-stat-box" id="cl-server-php-box">
									<span class="cl-stat-label">PHP</span>
									<span class="cl-stat-value" id="cl-server-php-version" style="font-size:13px;">—</span>
								</div>
								<div class="cl-stat-box" id="cl-server-wp-box">
									<span class="cl-stat-label">WordPress</span>
									<span class="cl-stat-value" id="cl-server-wp-version" style="font-size:13px;">—</span>
								</div>
								<div class="cl-stat-box" id="cl-server-fs-box">
									<span class="cl-stat-label">Freemius</span>
									<span class="cl-stat-value" id="cl-server-fs-status" style="font-size:13px;">—</span>
								</div>
								<div class="cl-stat-box" id="cl-server-cache-box">
									<span class="cl-stat-label">Cache</span>
									<span class="cl-stat-value" id="cl-server-cache-count" style="font-size:13px;">—</span>
								</div>
							</div>

							<!-- Detailed info toggle -->
							<details id="cl-server-details" style="margin-top: 16px;">
								<summary style="cursor:pointer; font-size:13px; font-weight:600; color:var(--cl-text-muted); user-select:none;">
									<span class="dashicons dashicons-arrow-down" id="cl-server-details-icon" style="margin-right:4px;"></span>
									<?php esc_html_e( 'Show detailed server information', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
								</summary>
								<div id="cl-server-info-output" style="background: var(--cl-surface-2); border: 1px solid var(--cl-border); border-radius: var(--cl-radius); padding: 14px; font-family: monospace; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; color: var(--cl-text); margin: 12px 0 0 0; max-height: 400px; overflow-y: auto;"><?php esc_html_e( 'Click "Refresh Info" to load server details.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></div>
							</details>

							<div style="margin-top: 16px; display: flex; gap: 10px; align-items: center;">
								<button type="button" id="cl-refresh-server-info-btn" class="button cl-btn cl-btn--small" style="padding: 6px 14px; font-size: 13px;">
									<span class="dashicons dashicons-update" id="cl-server-info-spinner" style="display:none; animation: cl-spin 1s linear infinite;"></span>
									<?php esc_html_e( 'Refresh Info', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
								</button>
								<button type="button" id="cl-download-server-info-btn" class="button cl-btn cl-btn--small" style="padding: 6px 14px; font-size: 13px;">
									<span class="dashicons dashicons-download"></span>
									<?php esc_html_e( 'Download Report', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
								</button>
								<button type="button" id="cl-copy-server-info-btn" class="button cl-btn cl-btn--small" style="padding: 6px 14px; font-size: 13px;">
									<span class="dashicons dashicons-clipboard"></span>
									<?php esc_html_e( 'Copy', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
								</button>
							</div>
						</div>

						<!-- Debug Log -->
						<div class="cl-section" id="cl-debug-log-section" style="margin-top: 32px;">
							<h2 class="cl-section__title"><?php esc_html_e( 'Debug Log', 'cacheloop-simple-page-cache-speed-optimization' ); ?></h2>
							<p class="cl-section__desc"><?php esc_html_e( 'View cache hits, misses, and errors for troubleshooting. Most recent entries first.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></p>
							<div style="display: flex; gap: 12px; margin-bottom: 12px; align-items: center;">
								<select id="cl-log-lines-select" style="padding: 6px 10px; border: 1px solid var(--cl-border); border-radius: var(--cl-radius); background: var(--cl-surface-2); color: var(--cl-text); font-size: 13px;">
									<option value="25">25 lines</option>
									<option value="50" selected>50 lines</option>
									<option value="100">100 lines</option>
									<option value="200">200 lines</option>
								</select>
								<button type="button" id="cl-refresh-log-btn" class="button cl-btn cl-btn--small" style="padding: 6px 14px; font-size: 13px;">
									<?php esc_html_e( 'Refresh Log', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
								</button>
								<button type="button" id="cl-copy-log-btn" class="button cl-btn cl-btn--small" style="padding: 6px 14px; font-size: 13px;">
									<span class="dashicons dashicons-clipboard"></span>
									<?php esc_html_e( 'Copy', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
								</button>
								<button type="button" id="cl-clear-log-btn" class="button cl-btn cl-btn--small" style="padding: 6px 14px; font-size: 13px; background: #dc3545; color: #fff; border-color: #dc3545;">
									<?php esc_html_e( 'Clear Log', 'cacheloop-simple-page-cache-speed-optimization' ); ?>
								</button>
							</div>
							<pre id="cl-debug-log-output" style="background: var(--cl-surface-2); border: 1px solid var(--cl-border); border-radius: var(--cl-radius); padding: 16px; max-height: 400px; overflow-y: auto; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; color: var(--cl-text); margin: 0;"><?php esc_html_e( 'Click "Refresh Log" to load cache debug entries.', 'cacheloop-simple-page-cache-speed-optimization' ); ?></pre>
						</div>
					</div><!-- /#tab-tools -->

					<!-- Save Button -->
					<div class="cl-form-footer" style="margin-top: 30px; border-top: 1px solid #e2e8f0; padding-top: 20px;">
						<?php submit_button( __( 'Save Settings', 'cacheloop-simple-page-cache-speed-optimization' ), 'primary cl-btn cl-btn--primary', 'submit', false ); ?>
					</div>
				</form>

				<p class="cl-footer-credit" style="text-align: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--cl-border); font-size: 12px; color: var(--cl-text-muted);">
					<?php
					printf(
						/* translators: %s: Author website URL */
						wp_kses_post( __( 'Developed with ❤️ by <a href="%s" target="_blank">InTouchDesign</a>.', 'cacheloop-simple-page-cache-speed-optimization' ) ),
						'https://dev.intouchdesign.it/'
					);
					?>
				</p>

			</div><!-- /.cl-tab-content -->
		</main><!-- /.cl-admin-main -->
	</div><!-- /.cl-admin-layout -->

	<!-- Toast Notification (driven by JS) -->
	<div id="cl-toast" class="cl-toast" role="status" aria-live="polite" aria-atomic="true"></div>

</div><!-- /.cl-wrap -->
