@moneybar.online/moneybar 3.1.0

package/dist/index.js

@@ -0,0 +1,3065 @@
+import { createClient } from '@supabase/supabase-js';
+/**
+ * MoneyBar - The navbar of monetization
+ *
+ * Fix the 3 money-blocking stages that stop revenue:
+ * 1. Forced sign-ins before value → Value-first trials
+ * 2. Silent drop-offs → Exit feedback capture
+ * 3. Broken payment flows → Seamless Google Auth + payments
+ *
+ * Features:
+ * - Server-side usage tracking (incognito-proof)
+ * - Google OAuth authentication
+ * - Payment integration with DodoPayments
+ * - User feedback collection
+ * - Automatic UI management (paywall, auth, status)
+ * - User context for personalization
+ *
+ * @example Simple Usage (Recommended):
+ * ```javascript
+ * import { MoneyBar } from '@moneybar.online/moneybar';
+ *
+ * const moneyBar = new MoneyBar({
+ *   appId: 'my-pdf-app',
+ *   freeDownloadLimit: 3,
+ *   supabase: { url: 'https://xyz.supabase.co', anonKey: 'anon_key' },
+ *   payment: { productId: 'prod_xyz' }
+ * });
+ *
+ * // Single button - handles all monetization automatically
+ * moneyBar.attachToButton('#download-btn', (userContext) => {
+ *   // Your action logic here - with user context for personalization
+ *   if (userContext.isPremium) {
+ *     generatePremiumPDF();
+ *   } else {
+ *     generateBasicPDF();
+ *   }
+ * });
+ * ```
+ *
+ * @example Multiple Buttons:
+ * ```javascript
+ * moneyBar.attachToButtons({
+ *   buttons: [
+ *     {
+ *       selector: '#free-btn',
+ *       downloadCallback: (ctx) => downloadFreeTemplate(ctx),
+ *       isPremium: false
+ *     },
+ *     {
+ *       selector: '#premium-btn',
+ *       downloadCallback: (ctx) => downloadPremiumTemplate(ctx),
+ *       isPremium: true
+ *     }
+ *   ]
+ * });
+ * ```
+ */
+export class MoneyBar {
+    mergeConfigs(config) {
+        // Try to get config from window.APP_CONFIG
+        const windowConfig = typeof window !== 'undefined' ? window.APP_CONFIG : null;
+        if (!config && !windowConfig) {
+            throw new Error('MoneyBar: No configuration provided. Either pass config to constructor or set window.APP_CONFIG');
+        }
+        // If no constructor config provided, use window config entirely
+        if (!config) {
+            return windowConfig;
+        }
+        // If no window config, use constructor config entirely
+        if (!windowConfig) {
+            return config;
+        }
+        // Merge configs: constructor config takes precedence over window config
+        return {
+            ...windowConfig,
+            ...config
+        };
+    }
+    constructor(config) {
+        this.currentUser = null;
+        this.userFingerprint = null;
+        this.eventListeners = new Map();
+        this.supabaseConnectionFailed = false;
+        this.paymentConnectionFailed = false;
+        this.cachedStatus = null;
+        this.statusCacheTime = 0;
+        this.STATUS_CACHE_DURATION = 5000; // 5 seconds cache
+        this.initializationPromise = null;
+        this.cachedPremiumStatus = null;
+        this.premiumStatusCacheTime = 0;
+        // Auto-load from window.APP_CONFIG if no config provided, or merge configs
+        this.config = this.mergeConfigs(config);
+        if (this.config.options?.debug) {
+            // console.log('🔍 DEBUG: MoneyBar constructor - full config:', JSON.stringify(config, null, 2));
+            // console.log('🔍 DEBUG: Email config present:', !!config.email);
+        }
+        this.validateConfig();
+        this.initializeSupabase();
+        this.initializePayment();
+        this.initializeFingerprint();
+        this.setupAuthListener();
+        this.checkPaymentStatus();
+    }
+    /**
+     * Main method to handle download attempts
+     * Call this from your download button's click handler
+     */
+    async handleDownload() {
+        try {
+            // Security check: if Supabase connection failed, disable downloads to prevent localStorage bypass
+            if (this.supabaseConnectionFailed) {
+                this.config.callbacks?.onError?.(new Error('Server connection required for download verification. Please check your configuration.'));
+                return;
+            }
+            // Security check: if payment configuration is invalid, disable downloads
+            if (this.config.payment && this.paymentConnectionFailed) {
+                this.config.callbacks?.onError?.(new Error('Payment configuration error. Please contact support.'));
+                return;
+            }
+            // Check if user is premium first (if authenticated)
+            if (this.currentUser) {
+                const isPremium = await this.checkPremiumStatus(this.currentUser.email);
+                if (isPremium) {
+                    this.config.callbacks?.onPremiumDownload();
+                    return;
+                }
+            }
+            // Check usage limits (works for both authenticated and anonymous users)
+            const status = await this.getDownloadStatus();
+            if (status.currentCount >= status.limit) {
+                // Limit reached - show paywall/limit message
+                this.config.callbacks?.onLimitReached(status.currentCount, status.limit);
+                return;
+            }
+            // Increment counter and proceed with action
+            await this.incrementDownloadCount();
+            this.config.callbacks?.onDownloadAllowed();
+            // Invalidate cache since count changed
+            this.cachedStatus = null;
+            // Check if limit reached after increment
+            const newStatus = await this.getDownloadStatus();
+            this.emit('countChanged', { count: newStatus.currentCount, limit: newStatus.limit });
+            if (newStatus.currentCount >= newStatus.limit) {
+                // Show paywall for next time
+                setTimeout(() => {
+                    this.config.callbacks?.onLimitReached(newStatus.currentCount, newStatus.limit);
+                }, 100);
+            }
+        }
+        catch (error) {
+            this.handleError(error);
+        }
+    }
+    /**
+     * Get current download status for the user
+     */
+    async getDownloadStatus(forceRefresh = false) {
+        console.log(`🔍 [INIT] getDownloadStatus called (forceRefresh: ${forceRefresh}) at ${new Date().toISOString()}`);
+        // Check if we can use cached status
+        const cacheAge = this.cachedStatus ? Date.now() - this.statusCacheTime : -1;
+        const canUseCache = !forceRefresh && this.cachedStatus && cacheAge < this.STATUS_CACHE_DURATION;
+        if (canUseCache) {
+            console.log(`🔍 [INIT] Using cached status (age: ${cacheAge}ms)`);
+            return this.cachedStatus;
+        }
+        // If there's already an initialization in progress and it's not forced refresh, wait for it
+        if (!forceRefresh && this.initializationPromise) {
+            console.log(`🔍 [INIT] Waiting for existing initialization promise`);
+            return await this.initializationPromise;
+        }
+        console.log(`🔍 [INIT] Starting new status fetch (cache age: ${cacheAge}ms)`);
+        // Create the initialization promise
+        this.initializationPromise = this.fetchFreshStatus(forceRefresh);
+        try {
+            const result = await this.initializationPromise;
+            console.log(`🔍 [INIT] Status fetch completed successfully`);
+            return result;
+        }
+        finally {
+            // Clear the promise after completion
+            this.initializationPromise = null;
+        }
+    }
+    async fetchFreshStatus(forceRefresh) {
+        try {
+            let count = 0;
+            let isPremium = false;
+            // Only call API if we really need fresh data
+            if (forceRefresh || !this.cachedStatus) {
+                // Get download count only if we don't have it cached
+                count = await this.getDownloadCount();
+            }
+            else {
+                // Use cached count if available to avoid unnecessary API call
+                count = this.cachedStatus.currentCount;
+            }
+            // Check premium status only for authenticated users, and only when needed
+            if (this.currentUser) {
+                const premiumCacheValid = this.cachedPremiumStatus !== null && (Date.now() - this.premiumStatusCacheTime) < this.STATUS_CACHE_DURATION;
+                if (forceRefresh || !premiumCacheValid) {
+                    console.log(`🔥 [SUPABASE API] About to call checkPremiumStatus from getDownloadStatus (forceRefresh: ${forceRefresh}, cacheValid: ${premiumCacheValid})`);
+                    isPremium = await this.checkPremiumStatus(this.currentUser.email);
+                    // Update cache
+                    this.cachedPremiumStatus = isPremium;
+                    this.premiumStatusCacheTime = Date.now();
+                }
+                else {
+                    // Use cached premium status to avoid unnecessary API call
+                    isPremium = this.cachedPremiumStatus; // We know it's not null because premiumCacheValid is true
+                    console.log(`🔍 [CACHE] Using cached premium status from getDownloadStatus: ${isPremium}`);
+                }
+            }
+            else {
+                // Unauthenticated users cannot be premium
+                isPremium = false;
+            }
+            const status = {
+                currentCount: count,
+                limit: this.config.freeDownloadLimit,
+                isPremium,
+                isAuthenticated: !!this.currentUser,
+                remaining: Math.max(0, this.config.freeDownloadLimit - count)
+            };
+            // Cache the status
+            this.cachedStatus = status;
+            this.statusCacheTime = Date.now();
+            return status;
+        }
+        catch (error) {
+            this.handleError(error);
+            // Return safe defaults on error
+            const errorStatus = {
+                currentCount: 0,
+                limit: this.config.freeDownloadLimit,
+                isPremium: false,
+                isAuthenticated: false,
+                remaining: this.config.freeDownloadLimit
+            };
+            // Cache error status for short time to avoid repeated failures
+            this.cachedStatus = errorStatus;
+            this.statusCacheTime = Date.now();
+            return errorStatus;
+        }
+    }
+    /**
+     * Creates a UserContext object with current user information
+     */
+    async getUserContext() {
+        const status = await this.getDownloadStatus();
+        return {
+            isPremium: status.isPremium,
+            isAuthenticated: status.isAuthenticated,
+            email: this.currentUser?.email,
+            name: this.currentUser?.user_metadata?.full_name || this.currentUser?.user_metadata?.name,
+            currentCount: status.currentCount,
+            remaining: status.remaining,
+            limit: status.limit,
+            user: this.currentUser
+        };
+    }
+    /**
+     * Manually trigger Google sign-in
+     */
+    async signIn() {
+        try {
+            const { error } = await this.supabase.auth.signInWithOAuth({
+                provider: 'google',
+                options: {
+                    redirectTo: `${window.location.origin}${window.location.pathname}`
+                }
+            });
+            if (error)
+                throw error;
+        }
+        catch (error) {
+            this.handleError(error);
+        }
+    }
+    /**
+     * Sign out current user
+     */
+    async signOut() {
+        try {
+            await this.supabase.auth.signOut();
+            this.currentUser = null;
+            this.emit('authChanged', { user: null, isPremium: false });
+        }
+        catch (error) {
+            this.handleError(error);
+        }
+    }
+    /**
+     * Create payment for premium upgrade
+     */
+    async createPayment() {
+        if (!this.currentUser) {
+            throw new Error('User must be signed in to create payment');
+        }
+        if (!this.config.payment) {
+            throw new Error('Payment configuration not provided');
+        }
+        const requestBody = {
+            email: this.currentUser.email,
+            product_id: this.config.payment.productId,
+            mode: this.config.payment.mode || 'test',
+            app_id: this.config.appId,
+            return_url: `${window.location.origin}${window.location.pathname}?payment=success`
+        };
+        console.log(`🔥 [SUPABASE API] createPayment called for email: ${this.currentUser.email} | Time: ${new Date().toISOString()}`);
+        try {
+            const response = await fetch(`${this.config.supabase.url}/functions/v1/create-payment`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${this.config.supabase.anonKey}`
+                },
+                body: JSON.stringify(requestBody)
+            });
+            console.log(`🔥 [SUPABASE API] createPayment response: ${response.status}`);
+            if (this.config.options?.debug) {
+                //console.log('🔍 DEBUG: createPayment response status:', response.status);
+            }
+            if (!response.ok) {
+                const errorText = await response.text();
+                if (this.config.options?.debug) {
+                    console.error('🔍 DEBUG: createPayment error response:', errorText);
+                }
+                let errorData;
+                try {
+                    errorData = JSON.parse(errorText);
+                }
+                catch {
+                    errorData = { error: errorText };
+                }
+                // Check if this is a product ID error (invalid config)
+                if (errorText.includes('404') || errorText.includes('could not be found')) {
+                    this.paymentConnectionFailed = true;
+                    if (this.config.options?.debug) {
+                        console.warn('Invalid payment product ID detected, disabling downloads');
+                    }
+                    // Update UI to show disabled state
+                    this.updateStatusDisplays();
+                }
+                throw new Error(errorData.error || 'Payment creation failed');
+            }
+            const result = await response.json();
+            if (this.config.options?.debug) {
+                //console.log('🔍 DEBUG: createPayment success response:', result);
+            }
+            return result;
+        }
+        catch (error) {
+            this.handleError(error);
+            return null;
+        }
+    }
+    /**
+     * Simplified API: Attach download limiting to a single button
+     * Handles all UI logic automatically (paywall, auth, payment flow)
+     */
+    attachToButton(selector, downloadCallback) {
+        //console.log('🎨 [THEME DEBUG] attachToButton called');
+        //console.log('🎨 [THEME DEBUG] Full config:', JSON.stringify(this.config, null, 2));
+        const button = document.querySelector(selector);
+        if (!button) {
+            throw new Error(`Button not found: ${selector}`);
+        }
+        // Store original button text (for potential future use)
+        // const originalText = button.textContent || 'Download';
+        // Create and inject UI elements
+        this.injectBaseStyles();
+        this.createTitleBar(); // Always create title bar first
+        this.createPaywallModal();
+        this.createSuccessModal();
+        this.createAuthUI();
+        this.createStatusDisplay();
+        // Set up button click handler
+        // Mark button as attached by LeadFast
+        button.setAttribute('data-leadfast-attached', 'true');
+        button.onclick = async (e) => {
+            e.preventDefault();
+            await this.handleButtonClick(downloadCallback);
+        };
+        // Update UI based on auth state
+        this.setupUIUpdates();
+    }
+    /**
+     * Simplified API: Attach download limiting to multiple buttons
+     * Each button can have different download callbacks and premium status
+     */
+    attachToButtons(config) {
+        this.injectBaseStyles();
+        this.createTitleBar(); // Always create title bar first
+        this.createPaywallModal();
+        this.createSuccessModal();
+        this.createAuthUI();
+        config.buttons.forEach(buttonConfig => {
+            const button = document.querySelector(buttonConfig.selector);
+            if (!button) {
+                console.warn(`Button not found: ${buttonConfig.selector}`);
+                return;
+            }
+            // Store original text for potential future use
+            // const originalText = button.textContent || 'Download';
+            // Set up click handler - all buttons use the same logic now
+            // Mark button as attached by LeadFast
+            button.setAttribute('data-leadfast-attached', 'true');
+            button.onclick = async (e) => {
+                e.preventDefault();
+                await this.handleButtonClick(buttonConfig.downloadCallback);
+            };
+            this.setupUIUpdates();
+        });
+        // Add global status display
+        this.createGlobalStatusDisplay();
+    }
+    async handleButtonClick(downloadCallback) {
+        // Prevent rapid clicks/race conditions
+        const button = document.querySelector('[data-leadfast-attached="true"]');
+        if (button && button.disabled) {
+            console.log('⚠️ Button click ignored - operation already in progress');
+            return;
+        }
+        if (button) {
+            button.disabled = true;
+            button.style.opacity = '0.6';
+        }
+        try {
+            await this.handleButtonClickInternal(downloadCallback);
+        }
+        finally {
+            // Re-enable button
+            if (button) {
+                button.disabled = false;
+                button.style.opacity = '1';
+            }
+        }
+    }
+    async handleButtonClickInternal(downloadCallback) {
+        // const clickTime = Date.now();
+        // console.log(`🕐 [TIMING] Button click started at: ${new Date(clickTime).toISOString()}`);
+        // Security check: if Supabase connection failed, disable downloads to prevent localStorage bypass
+        if (this.supabaseConnectionFailed) {
+            // console.log(`🕐 [TIMING] Connection failed check: ${Date.now() - clickTime}ms`);
+            this.showConnectionError();
+            return;
+        }
+        // Security check: if payment configuration is invalid, disable downloads
+        if (this.config.payment && this.paymentConnectionFailed) {
+            // console.log(`🕐 [TIMING] Payment config failed check: ${Date.now() - clickTime}ms`);
+            this.showPaymentConfigError();
+            return;
+        }
+        // Check cache status
+        const cacheValid = this.cachedStatus && (Date.now() - this.statusCacheTime) < this.STATUS_CACHE_DURATION;
+        // console.log(`🕐 [CACHE] Cache valid: ${cacheValid}, age: ${this.cachedStatus ? Date.now() - this.statusCacheTime : 'no cache'}ms`);
+        // console.log(`🕐 [CACHE] Cached status:`, this.cachedStatus);
+        // const statusStartTime = Date.now();
+        // Use cached status if available (since it's already displayed in title bar)
+        const status = cacheValid
+            ? this.cachedStatus
+            : await this.getDownloadStatus();
+        // console.log(`🕐 [TIMING] Status check completed: ${Date.now() - statusStartTime}ms (total: ${Date.now() - clickTime}ms)`);
+        // console.log(`🕐 [STATUS] Final status:`, status);
+        // Check if user is premium first (quick check from cached status)
+        if (status.isPremium) {
+            // console.log(`🕐 [TIMING] Premium user - callback executed: ${Date.now() - clickTime}ms`);
+            // Get user context for premium users too
+            const userContext = await this.getUserContext();
+            // Check if callback expects user context parameter
+            if (downloadCallback.length > 0) {
+                // Callback expects user context parameter
+                downloadCallback(userContext);
+            }
+            else {
+                // Legacy callback with no parameters
+                downloadCallback();
+            }
+            return;
+        }
+        // Quick limit check from cached status - show paywall immediately if needed
+        if (status.currentCount >= status.limit) {
+            // console.log(`🕐 [TIMING] Limit reached (${status.currentCount}/${status.limit}) - showing paywall: ${Date.now() - clickTime}ms`);
+            // Limit reached - show paywall instantly (no additional API calls)
+            // const paywallStartTime = Date.now();
+            this.showPaywallInstant(status);
+            // console.log(`🕐 [TIMING] Paywall shown: ${Date.now() - paywallStartTime}ms (total: ${Date.now() - clickTime}ms)`);
+            return;
+        }
+        // console.log(`🕐 [TIMING] Limit not reached (${status.currentCount}/${status.limit}) - proceeding with action`);
+        // Allow action and increment counter
+        // const incrementStartTime = Date.now();
+        // Execute user's function first - only increment count if it succeeds
+        try {
+            // Check if callback expects user context parameter
+            if (downloadCallback.length > 0) {
+                // Get user context BEFORE increment for callback
+                const userContext = await this.getUserContext();
+                // For non-premium users, simulate the increment so user context matches UI
+                if (!userContext.isPremium) {
+                    userContext.currentCount += 1;
+                    userContext.remaining = Math.max(0, userContext.limit - userContext.currentCount);
+                }
+                // Callback expects user context parameter
+                downloadCallback(userContext);
+            }
+            else {
+                // Legacy callback with no parameters
+                downloadCallback();
+            }
+            // Double-check limit before increment (race condition protection)
+            const freshStatus = await this.getDownloadStatus(true); // Force refresh
+            if (freshStatus.currentCount >= freshStatus.limit) {
+                console.warn(`⚠️ Limit reached during execution (${freshStatus.currentCount}/${freshStatus.limit}) - canceling increment`);
+                // User reached limit while their function was executing
+                alert('⚠️ You reached the limit while this action was processing. No attempt was counted.');
+                return;
+            }
+            // Only increment count after successful execution - with limit check
+            const newCount = await this.incrementDownloadCount();
+            // Double-check: if server returned count exceeding limit, something went wrong
+            if (newCount > this.config.freeDownloadLimit) {
+                console.error(`⚠️ Server returned count (${newCount}) exceeding limit (${this.config.freeDownloadLimit})`);
+                // Don't update UI with invalid state
+                return;
+            }
+            // console.log(`🕐 [TIMING] Count incremented: ${Date.now() - incrementStartTime}ms`);
+            // Show success message only if explicitly enabled in config
+            if (this.config.successMessage?.enabled === true) {
+                const title = this.config.successMessage?.title || 'Action Completed!';
+                const message = this.config.successMessage?.message || 'Your action completed successfully!';
+                this.showSuccess(title, message);
+            }
+        }
+        catch (error) {
+            console.error('User function failed:', error);
+            // Don't increment count on error - user shouldn't lose an attempt
+            alert('Action failed. Please check the console for details. No attempt was counted.');
+            return; // Exit early, don't update UI
+        }
+        // Update UI with fresh status (invalidate cache since count changed)
+        // console.log(`🕐 [CACHE] Invalidating cache due to count change (was: ${this.cachedStatus ? 'cached' : 'null'})`);
+        this.cachedStatus = null;
+        this.updateStatusDisplays();
+        // console.log(`🕐 [TIMING] Button click completed: ${Date.now() - clickTime}ms`);
+    }
+    injectBaseStyles() {
+        //console.log('🎨 [THEME DEBUG] injectBaseStyles called');
+        if (document.getElementById('lead-fast-styles')) {
+            //console.log('🎨 [THEME DEBUG] Styles already injected, skipping');
+            return;
+        }
+        // Inject DaisyUI CDN if theme is specified
+        if (this.config.theme?.name) {
+            //console.log('🎨 [THEME DEBUG] Theme specified, calling injectDaisyUI');
+            this.injectDaisyUI();
+        }
+        else {
+            //console.log('🎨 [THEME DEBUG] No theme specified in config');
+        }
+        const styles = document.createElement('style');
+        styles.id = 'lead-fast-styles';
+        const primaryColor = this.config.theme?.primaryColor || '#3182ce';
+        styles.textContent = `
+      /* User Profile Card - Top Right */
+      .lead-fast-profile {
+        position: fixed;
+        top: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 1000;
+        font-family: system-ui, -apple-system, sans-serif;
+        width: 90%;
+        max-width: 1200px;
+      }
+
+      .lead-fast-title-bar {
+        background: rgba(250, 247, 245, 0.9) !important;
+        border: 1px solid rgba(231, 226, 223, 0.6) !important;
+        color: #291334 !important;
+        border-radius: 16px;
+        padding: 12px 24px;
+        box-shadow: 0 8px 32px rgb(0 0 0 / 0.1), 0 2px 8px rgb(0 0 0 / 0.05);
+        backdrop-filter: blur(20px);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 60px;
+        font-family: system-ui, -apple-system, sans-serif;
+      }
+
+      /* Theme variations for floating title bar */
+      [data-theme="bumblebee"] .lead-fast-title-bar {
+        background: rgba(255, 248, 220, 0.9) !important;
+        border-color: rgba(254, 215, 170, 0.6) !important;
+        color: #1c1917 !important;
+      }
+
+      [data-theme="garden"] .lead-fast-title-bar {
+        background: rgba(240, 253, 244, 0.9) !important;
+        border-color: rgba(134, 239, 172, 0.6) !important;
+        color: #14532d !important;
+      }
+
+      [data-theme="emerald"] .lead-fast-title-bar {
+        background: rgba(236, 253, 245, 0.9) !important;
+        border-color: rgba(167, 243, 208, 0.6) !important;
+        color: #065f46 !important;
+      }
+
+      [data-theme="corporate"] .lead-fast-title-bar {
+        background: rgba(248, 250, 252, 0.9) !important;
+        border-color: rgba(226, 232, 240, 0.6) !important;
+        color: #1e293b !important;
+      }
+
+      [data-theme="dark"] .lead-fast-title-bar {
+        background: rgba(31, 41, 55, 0.9) !important;
+        border-color: rgba(55, 65, 81, 0.6) !important;
+        color: #f9fafb !important;
+      }
+
+      [data-theme="cyberpunk"] .lead-fast-title-bar {
+        background: rgba(0, 20, 36, 0.9) !important;
+        border-color: rgba(7, 89, 133, 0.6) !important;
+        color: #0ea5e9 !important;
+        box-shadow: 0 8px 32px rgba(14, 165, 233, 0.2), 0 2px 8px rgba(14, 165, 233, 0.1);
+      }
+
+      [data-theme="valentine"] .lead-fast-title-bar {
+        background: rgba(233, 30, 122, 0.15) !important;
+        border-color: rgba(233, 30, 122, 0.6) !important;
+        color: #831843 !important;
+      }
+
+      [data-theme="synthwave"] .lead-fast-title-bar {
+        background: rgba(32, 20, 64, 0.9) !important;
+        border-color: rgba(186, 85, 211, 0.6) !important;
+        color: #ff00ff !important;
+        box-shadow: 0 8px 32px rgba(255, 0, 255, 0.2), 0 2px 8px rgba(255, 0, 255, 0.1);
+      }
+
+      [data-theme="dracula"] .lead-fast-title-bar {
+        background: rgba(40, 42, 54, 0.9) !important;
+        border-color: rgba(98, 114, 164, 0.6) !important;
+        color: #f8f8f2 !important;
+      }
+
+      [data-theme="halloween"] .lead-fast-title-bar {
+        background: rgba(26, 26, 26, 0.9) !important;
+        border-color: rgba(255, 165, 0, 0.6) !important;
+        color: #ff6600 !important;
+      }
+
+      [data-theme="forest"] .lead-fast-title-bar {
+        background: rgba(23, 46, 23, 0.9) !important;
+        border-color: rgba(34, 197, 94, 0.6) !important;
+        color: #22c55e !important;
+      }
+
+      [data-theme="luxury"] .lead-fast-title-bar {
+        background: rgba(9, 9, 11, 0.9) !important;
+        border-color: rgba(212, 175, 55, 0.6) !important;
+        color: #d4af37 !important;
+      }
+
+      [data-theme="night"] .lead-fast-title-bar {
+        background: rgba(15, 23, 42, 0.9) !important;
+        border-color: rgba(30, 58, 138, 0.6) !important;
+        color: #60a5fa !important;
+      }
+
+      [data-theme="light"] .lead-fast-title-bar {
+        background: rgba(255, 255, 255, 0.9) !important;
+        border-color: rgba(229, 231, 235, 0.6) !important;
+        color: #1f2937 !important;
+      }
+
+      [data-theme="cupcake"] .lead-fast-title-bar {
+        background: rgba(250, 235, 215, 0.9) !important;
+        border-color: rgba(219, 185, 156, 0.6) !important;
+        color: #8b4513 !important;
+      }
+
+      [data-theme="retro"] .lead-fast-title-bar {
+        background: rgba(212, 165, 116, 0.9) !important;
+        border-color: rgba(185, 144, 102, 0.6) !important;
+        color: #5d4037 !important;
+      }
+
+      [data-theme="aqua"] .lead-fast-title-bar {
+        background: rgba(240, 253, 250, 0.9) !important;
+        border-color: rgba(125, 211, 252, 0.6) !important;
+        color: #155e75 !important;
+      }
+
+      [data-theme="lofi"] .lead-fast-title-bar {
+        background: rgba(248, 248, 248, 0.9) !important;
+        border-color: rgba(68, 68, 68, 0.6) !important;
+        color: #1a1a1a !important;
+      }
+
+      [data-theme="pastel"] .lead-fast-title-bar {
+        background: rgba(254, 251, 255, 0.9) !important;
+        border-color: rgba(209, 196, 233, 0.6) !important;
+        color: #7c3aed !important;
+      }
+
+      [data-theme="fantasy"] .lead-fast-title-bar {
+        background: rgba(255, 247, 237, 0.9) !important;
+        border-color: rgba(249, 168, 212, 0.6) !important;
+        color: #be185d !important;
+      }
+
+      [data-theme="wireframe"] .lead-fast-title-bar {
+        background: rgba(223, 223, 223, 0.9) !important;
+        border-color: rgba(0, 0, 0, 0.3) !important;
+        color: #000000 !important;
+      }
+
+      [data-theme="black"] .lead-fast-title-bar {
+        background: rgba(0, 0, 0, 0.9) !important;
+        border-color: rgba(55, 55, 55, 0.6) !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="cmyk"] .lead-fast-title-bar {
+        background: rgba(0, 255, 255, 0.9) !important;
+        border-color: rgba(255, 0, 255, 0.6) !important;
+        color: #000000 !important;
+      }
+
+      [data-theme="autumn"] .lead-fast-title-bar {
+        background: rgba(139, 69, 19, 0.9) !important;
+        border-color: rgba(255, 140, 0, 0.6) !important;
+        color: #ff8c00 !important;
+      }
+
+      [data-theme="business"] .lead-fast-title-bar {
+        background: rgba(29, 78, 216, 0.9) !important;
+        border-color: rgba(59, 130, 246, 0.6) !important;
+        color: #3b82f6 !important;
+      }
+
+      [data-theme="acid"] .lead-fast-title-bar {
+        background: rgba(255, 255, 0, 0.9) !important;
+        border-color: rgba(255, 0, 255, 0.6) !important;
+        color: #000000 !important;
+      }
+
+      [data-theme="lemonade"] .lead-fast-title-bar {
+        background: rgba(255, 255, 224, 0.9) !important;
+        border-color: rgba(34, 197, 94, 0.6) !important;
+        color: #15803d !important;
+      }
+
+      [data-theme="coffee"] .lead-fast-title-bar {
+        background: rgba(101, 67, 33, 0.9) !important;
+        border-color: rgba(160, 82, 45, 0.6) !important;
+        color: #d2b48c !important;
+      }
+
+      [data-theme="winter"] .lead-fast-title-bar {
+        background: rgba(248, 250, 252, 0.9) !important;
+        border-color: rgba(59, 130, 246, 0.6) !important;
+        color: #1e40af !important;
+      }
+
+      .lead-fast-title-section {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+      }
+
+      .lead-fast-logo {
+        font-size: 20px;
+        font-weight: 700;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: inherit;
+        text-decoration: none;
+      }
+
+      .lead-fast-logo img {
+        width: 32px;
+        height: 32px;
+        border-radius: 6px;
+      }
+
+      .lead-fast-nav {
+        display: flex;
+        align-items: center;
+        gap: 32px;
+        margin-left: 24px;
+      }
+
+      .lead-fast-nav-link {
+        color: inherit;
+        text-decoration: none;
+        font-weight: 500;
+        font-size: 14px;
+        opacity: 0.8;
+        transition: all 0.2s;
+      }
+
+      .lead-fast-nav-link:hover {
+        opacity: 1;
+        text-decoration: none;
+      }
+
+      .lead-fast-user-section {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .lead-fast-avatar {
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, ${primaryColor}, #4f46e5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-weight: 600;
+        font-size: 14px;
+      }
+
+      .lead-fast-user-info {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 2px;
+      }
+
+      .lead-fast-user-email {
+        color: inherit !important;
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 1;
+      }
+
+      .lead-fast-user-status {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .lead-fast-badge {
+        padding: 2px 6px;
+        border-radius: 12px;
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.025em;
+        line-height: 1;
+      }
+
+      .lead-fast-badge.premium {
+        background: #10b981 !important;
+        color: #ffffff !important;
+      }
+
+      .lead-fast-badge.free {
+        background: #65c3c8 !important;
+        color: #291334 !important;
+      }
+
+      [data-theme="dark"] .lead-fast-badge.premium {
+        background: #059669 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="dark"] .lead-fast-badge.free {
+        background: #374151 !important;
+        color: #f9fafb !important;
+      }
+
+      .lead-fast-count {
+        font-size: 10px;
+        color: inherit !important;
+        opacity: 0.7;
+        line-height: 1;
+      }
+
+      .lead-fast-signout {
+        background: rgba(0, 0, 0, 0.1) !important;
+        border: none;
+        color: inherit !important;
+        cursor: pointer;
+        padding: 6px 12px;
+        border-radius: 8px;
+        transition: all 0.2s;
+        font-size: 11px;
+        font-weight: 500;
+        margin-left: 8px;
+      }
+
+      [data-theme="dark"] .lead-fast-signout {
+        background: rgba(255, 255, 255, 0.1) !important;
+      }
+
+      [data-theme="cyberpunk"] .lead-fast-signout {
+        background: rgba(14, 165, 233, 0.2) !important;
+      }
+
+      .lead-fast-signout:hover {
+        background: rgba(0, 0, 0, 0.2) !important;
+        transform: translateY(-1px);
+      }
+
+      [data-theme="dark"] .lead-fast-signout:hover {
+        background: rgba(255, 255, 255, 0.2) !important;
+      }
+
+      [data-theme="cyberpunk"] .lead-fast-signout:hover {
+        background: rgba(14, 165, 233, 0.3) !important;
+      }
+
+      .lead-fast-branding {
+        position: absolute;
+        bottom: -20px;
+        left: 24px;
+        font-size: 9px;
+        color: inherit !important;
+        opacity: 0.4;
+        font-weight: 500;
+        letter-spacing: 0.05em;
+        text-transform: lowercase;
+        background: rgba(255, 255, 255, 0.8);
+        padding: 2px 6px;
+        border-radius: 4px;
+        backdrop-filter: blur(8px);
+      }
+
+      [data-theme="dark"] .lead-fast-branding {
+        background: rgba(0, 0, 0, 0.6);
+      }
+
+      [data-theme="cyberpunk"] .lead-fast-branding {
+        background: rgba(0, 20, 36, 0.8);
+      }
+
+      /* Modal Theming */
+      .download-limiter-modal {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0,0,0,0.5);
+        z-index: 9999;
+        align-items: center;
+        justify-content: center;
+      }
+      .download-limiter-modal.show { display: flex; }
+
+      .download-limiter-content {
+        background: #faf7f5 !important;
+        color: #291334 !important;
+        padding: 2rem;
+        border-radius: 12px;
+        max-width: 400px;
+        text-align: center;
+        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        border: 1px solid #e7e2df !important;
+        font-family: system-ui, -apple-system, sans-serif;
+      }
+
+      [data-theme="dark"] .download-limiter-content {
+        background: #1f2937 !important;
+        color: #f9fafb !important;
+        border-color: #374151 !important;
+      }
+
+      [data-theme="cyberpunk"] .download-limiter-content {
+        background: #001424 !important;
+        color: #0ea5e9 !important;
+        border-color: #075985 !important;
+      }
+
+      [data-theme="valentine"] .download-limiter-content {
+        background: rgba(233, 30, 122, 0.05) !important;
+        color: #831843 !important;
+        border-color: #e91e7a !important;
+      }
+
+      [data-theme="bumblebee"] .download-limiter-content {
+        background: rgba(255, 248, 220, 0.95) !important;
+        color: #1c1917 !important;
+        border-color: rgba(254, 215, 170, 0.8) !important;
+      }
+
+      [data-theme="garden"] .download-limiter-content {
+        background: rgba(240, 253, 244, 0.95) !important;
+        color: #14532d !important;
+        border-color: rgba(134, 239, 172, 0.8) !important;
+      }
+
+      [data-theme="emerald"] .download-limiter-content {
+        background: rgba(236, 253, 245, 0.95) !important;
+        color: #065f46 !important;
+        border-color: rgba(167, 243, 208, 0.8) !important;
+      }
+
+      [data-theme="corporate"] .download-limiter-content {
+        background: rgba(248, 250, 252, 0.95) !important;
+        color: #1e293b !important;
+        border-color: rgba(226, 232, 240, 0.8) !important;
+      }
+
+      [data-theme="forest"] .download-limiter-content {
+        background: rgba(23, 46, 23, 0.95) !important;
+        color: #22c55e !important;
+        border-color: rgba(34, 197, 94, 0.8) !important;
+      }
+
+      [data-theme="halloween"] .download-limiter-content {
+        background: rgba(26, 26, 26, 0.95) !important;
+        color: #ff6500 !important;
+        border-color: rgba(255, 165, 0, 0.3) !important;
+      }
+
+      [data-theme="synthwave"] .download-limiter-content {
+        background: rgba(32, 20, 64, 0.95) !important;
+        color: #ba55d3 !important;
+        border-color: rgba(186, 85, 211, 0.3) !important;
+      }
+
+      [data-theme="dracula"] .download-limiter-content {
+        background: rgba(40, 42, 54, 0.95) !important;
+        color: #f8f8f2 !important;
+        border-color: rgba(98, 114, 164, 0.3) !important;
+      }
+
+      [data-theme="luxury"] .download-limiter-content {
+        background: rgba(9, 9, 11, 0.95) !important;
+        color: #d4af37 !important;
+        border-color: rgba(212, 175, 55, 0.3) !important;
+      }
+
+      [data-theme="night"] .download-limiter-content {
+        background: rgba(15, 23, 42, 0.95) !important;
+        color: #1e40af !important;
+        border-color: rgba(30, 58, 138, 0.3) !important;
+      }
+
+      [data-theme="light"] .download-limiter-content {
+        background: rgba(255, 255, 255, 0.95) !important;
+        color: #1f2937 !important;
+        border-color: rgba(229, 231, 235, 0.8) !important;
+      }
+
+      [data-theme="cupcake"] .download-limiter-content {
+        background: rgba(250, 235, 215, 0.95) !important;
+        color: #8b4513 !important;
+        border-color: rgba(219, 185, 156, 0.8) !important;
+      }
+
+      [data-theme="retro"] .download-limiter-content {
+        background: rgba(212, 165, 116, 0.95) !important;
+        color: #5d4037 !important;
+        border-color: rgba(185, 144, 102, 0.8) !important;
+      }
+
+      [data-theme="aqua"] .download-limiter-content {
+        background: rgba(240, 253, 250, 0.95) !important;
+        color: #155e75 !important;
+        border-color: rgba(125, 211, 252, 0.8) !important;
+      }
+
+      [data-theme="lofi"] .download-limiter-content {
+        background: rgba(248, 248, 248, 0.95) !important;
+        color: #1a1a1a !important;
+        border-color: rgba(68, 68, 68, 0.8) !important;
+      }
+
+      [data-theme="pastel"] .download-limiter-content {
+        background: rgba(254, 251, 255, 0.95) !important;
+        color: #7c3aed !important;
+        border-color: rgba(209, 196, 233, 0.8) !important;
+      }
+
+      [data-theme="fantasy"] .download-limiter-content {
+        background: rgba(255, 247, 237, 0.95) !important;
+        color: #be185d !important;
+        border-color: rgba(249, 168, 212, 0.8) !important;
+      }
+
+      [data-theme="wireframe"] .download-limiter-content {
+        background: rgba(255, 255, 255, 0.95) !important;
+        color: #000000 !important;
+        border-color: rgba(0, 0, 0, 0.3) !important;
+      }
+
+      [data-theme="black"] .download-limiter-content {
+        background: rgba(0, 0, 0, 0.95) !important;
+        color: #ffffff !important;
+        border-color: rgba(55, 55, 55, 0.8) !important;
+      }
+
+      [data-theme="cmyk"] .download-limiter-content {
+        background: rgba(0, 255, 255, 0.95) !important;
+        color: #000000 !important;
+        border-color: rgba(255, 0, 255, 0.8) !important;
+      }
+
+      [data-theme="autumn"] .download-limiter-content {
+        background: rgba(139, 69, 19, 0.95) !important;
+        color: #ff8c00 !important;
+        border-color: rgba(255, 140, 0, 0.8) !important;
+      }
+
+      [data-theme="business"] .download-limiter-content {
+        background: rgba(29, 78, 216, 0.95) !important;
+        color: #3b82f6 !important;
+        border-color: rgba(59, 130, 246, 0.8) !important;
+      }
+
+      [data-theme="acid"] .download-limiter-content {
+        background: rgba(255, 255, 0, 0.95) !important;
+        color: #000000 !important;
+        border-color: rgba(255, 0, 255, 0.8) !important;
+      }
+
+      [data-theme="lemonade"] .download-limiter-content {
+        background: rgba(255, 255, 224, 0.95) !important;
+        color: #15803d !important;
+        border-color: rgba(34, 197, 94, 0.8) !important;
+      }
+
+      [data-theme="coffee"] .download-limiter-content {
+        background: rgba(101, 67, 33, 0.95) !important;
+        color: #d2b48c !important;
+        border-color: rgba(160, 82, 45, 0.8) !important;
+      }
+
+      [data-theme="winter"] .download-limiter-content {
+        background: rgba(248, 250, 252, 0.95) !important;
+        color: #1e40af !important;
+        border-color: rgba(59, 130, 246, 0.8) !important;
+      }
+
+      .download-limiter-content h2 {
+        color: inherit !important;
+        margin: 0 0 1rem 0;
+        font-size: 1.5rem;
+        font-weight: 600;
+      }
+      .download-limiter-content p {
+        color: inherit !important;
+        margin: 0 0 1.5rem 0;
+        line-height: 1.6;
+      }
+      .download-limiter-signin-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        background: #65c3c8 !important;
+        color: #291334 !important;
+        border: none;
+        padding: 12px 20px;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        text-decoration: none;
+        transition: all 0.2s;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      }
+
+      [data-theme="dark"] .download-limiter-signin-btn {
+        background: #3b82f6 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="cyberpunk"] .download-limiter-signin-btn {
+        background: #f59e0b !important;
+        color: #000000 !important;
+      }
+
+      [data-theme="valentine"] .download-limiter-signin-btn {
+        background: #e91e7a !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="bumblebee"] .download-limiter-signin-btn {
+        background: #fbbf24 !important;
+        color: #1c1917 !important;
+      }
+
+      [data-theme="garden"] .download-limiter-signin-btn {
+        background: #22c55e !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="emerald"] .download-limiter-signin-btn {
+        background: #10b981 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="corporate"] .download-limiter-signin-btn {
+        background: #3b82f6 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="forest"] .download-limiter-signin-btn {
+        background: #22c55e !important;
+        color: #1a1a1a !important;
+      }
+
+      [data-theme="halloween"] .download-limiter-signin-btn {
+        background: #ff6500 !important;
+        color: #1a1a1a !important;
+      }
+
+      [data-theme="synthwave"] .download-limiter-signin-btn {
+        background: #ba55d3 !important;
+        color: #201040 !important;
+      }
+
+      [data-theme="dracula"] .download-limiter-signin-btn {
+        background: #8be9fd !important;
+        color: #282a36 !important;
+      }
+
+      [data-theme="luxury"] .download-limiter-signin-btn {
+        background: #d4af37 !important;
+        color: #09090b !important;
+      }
+
+      [data-theme="night"] .download-limiter-signin-btn {
+        background: #1e40af !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="light"] .download-limiter-signin-btn {
+        background: #3b82f6 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="cupcake"] .download-limiter-signin-btn {
+        background: #8b4513 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="retro"] .download-limiter-signin-btn {
+        background: #d4a574 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="aqua"] .download-limiter-signin-btn {
+        background: #0891b2 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="lofi"] .download-limiter-signin-btn {
+        background: #1a1a1a !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="pastel"] .download-limiter-signin-btn {
+        background: #7c3aed !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="fantasy"] .download-limiter-signin-btn {
+        background: #be185d !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="wireframe"] .download-limiter-signin-btn {
+        background: #dfdfdf !important;
+        color: #000000 !important;
+        border: 1px solid #000000 !important;
+      }
+
+      [data-theme="black"] .download-limiter-signin-btn {
+        background: #ffffff !important;
+        color: #000000 !important;
+      }
+
+      [data-theme="cmyk"] .download-limiter-signin-btn {
+        background: #ff00ff !important;
+        color: #000000 !important;
+      }
+
+      [data-theme="autumn"] .download-limiter-signin-btn {
+        background: #ff8c00 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="business"] .download-limiter-signin-btn {
+        background: #3b82f6 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="acid"] .download-limiter-signin-btn {
+        background: #ff00ff !important;
+        color: #000000 !important;
+      }
+
+      [data-theme="lemonade"] .download-limiter-signin-btn {
+        background: #22c55e !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="coffee"] .download-limiter-signin-btn {
+        background: #a0522d !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="winter"] .download-limiter-signin-btn {
+        background: #3b82f6 !important;
+        color: #ffffff !important;
+      }
+
+      .download-limiter-signin-btn:hover {
+        opacity: 0.9;
+        transform: translateY(-1px);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+      }
+
+      /* Upgrade Button Styles for All Themes */
+      [data-theme="dark"] .upgrade-btn {
+        background: #3b82f6 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="cyberpunk"] .upgrade-btn {
+        background: #ff073a !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="valentine"] .upgrade-btn {
+        background: #e91e7a !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="bumblebee"] .upgrade-btn {
+        background: #f59e0b !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="garden"] .upgrade-btn {
+        background: #10b981 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="emerald"] .upgrade-btn {
+        background: #10b981 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="corporate"] .upgrade-btn {
+        background: #3b82f6 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="forest"] .upgrade-btn {
+        background: #10b981 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="halloween"] .upgrade-btn {
+        background: #ff7b00 !important;
+        color: #000000 !important;
+      }
+
+      [data-theme="synthwave"] .upgrade-btn {
+        background: #e879f9 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="dracula"] .upgrade-btn {
+        background: #bd93f9 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="luxury"] .upgrade-btn {
+        background: #d4af37 !important;
+        color: #000000 !important;
+      }
+
+      [data-theme="night"] .upgrade-btn {
+        background: #38bdf8 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="light"] .upgrade-btn {
+        background: #3b82f6 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="cupcake"] .upgrade-btn {
+        background: #f472b6 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="retro"] .upgrade-btn {
+        background: #d4a574 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="aqua"] .upgrade-btn {
+        background: #06b6d4 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="lofi"] .upgrade-btn {
+        background: #a3a3a3 !important;
+        color: #000000 !important;
+      }
+
+      [data-theme="pastel"] .upgrade-btn {
+        background: #a78bfa !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="fantasy"] .upgrade-btn {
+        background: #f472b6 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="wireframe"] .upgrade-btn {
+        background: #dfdfdf !important;
+        color: #000000 !important;
+        border: 1px solid #000000 !important;
+      }
+
+      [data-theme="black"] .upgrade-btn {
+        background: #ffffff !important;
+        color: #000000 !important;
+      }
+
+      [data-theme="cmyk"] .upgrade-btn {
+        background: #0891b2 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="autumn"] .upgrade-btn {
+        background: #d97706 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="business"] .upgrade-btn {
+        background: #3b82f6 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="acid"] .upgrade-btn {
+        background: #84cc16 !important;
+        color: #000000 !important;
+      }
+
+      [data-theme="lemonade"] .upgrade-btn {
+        background: #22c55e !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="coffee"] .upgrade-btn {
+        background: #a0522d !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="winter"] .upgrade-btn {
+        background: #3b82f6 !important;
+        color: #ffffff !important;
+      }
+
+      /* Cancel Button Styles for All Themes */
+      [data-theme="dark"] .cancel-btn {
+        background: #4b5563 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="cyberpunk"] .cancel-btn {
+        background: #7e22ce !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="valentine"] .cancel-btn {
+        background: #c11560 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="bumblebee"] .cancel-btn {
+        background: #d97706 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="garden"] .cancel-btn {
+        background: #059669 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="emerald"] .cancel-btn {
+        background: #059669 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="corporate"] .cancel-btn {
+        background: #6b7280 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="forest"] .cancel-btn {
+        background: #059669 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="halloween"] .cancel-btn {
+        background: #7c3aed !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="synthwave"] .cancel-btn {
+        background: #7e22ce !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="dracula"] .cancel-btn {
+        background: #6272a4 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="luxury"] .cancel-btn {
+        background: #8b5cf6 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="night"] .cancel-btn {
+        background: #0284c7 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="light"] .cancel-btn {
+        background: #6b7280 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="cupcake"] .cancel-btn {
+        background: #ec4899 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="retro"] .cancel-btn {
+        background: #b8925c !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="aqua"] .cancel-btn {
+        background: #0891b2 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="lofi"] .cancel-btn {
+        background: #6b7280 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="pastel"] .cancel-btn {
+        background: #8b5cf6 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="fantasy"] .cancel-btn {
+        background: #ec4899 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="wireframe"] .cancel-btn {
+        background: #f5f5f5 !important;
+        color: #000000 !important;
+        border: 1px solid #000000 !important;
+      }
+
+      [data-theme="black"] .cancel-btn {
+        background: #6b7280 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="cmyk"] .cancel-btn {
+        background: #0369a1 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="autumn"] .cancel-btn {
+        background: #c2410c !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="business"] .cancel-btn {
+        background: #6b7280 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="acid"] .cancel-btn {
+        background: #65a30d !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="lemonade"] .cancel-btn {
+        background: #16a34a !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="coffee"] .cancel-btn {
+        background: #8b4513 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="winter"] .cancel-btn {
+        background: #1e40af !important;
+        color: #ffffff !important;
+      }
+
+      /* Success Button Styles for All Themes */
+      [data-theme="dark"] .success-btn {
+        background: #10b981 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="cyberpunk"] .success-btn {
+        background: #00ff41 !important;
+        color: #000000 !important;
+      }
+
+      [data-theme="valentine"] .success-btn {
+        background: #e91e7a !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="bumblebee"] .success-btn {
+        background: #f59e0b !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="garden"] .success-btn {
+        background: #10b981 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="emerald"] .success-btn {
+        background: #10b981 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="corporate"] .success-btn {
+        background: #10b981 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="forest"] .success-btn {
+        background: #10b981 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="halloween"] .success-btn {
+        background: #ff7b00 !important;
+        color: #000000 !important;
+      }
+
+      [data-theme="synthwave"] .success-btn {
+        background: #00ff41 !important;
+        color: #000000 !important;
+      }
+
+      [data-theme="dracula"] .success-btn {
+        background: #50fa7b !important;
+        color: #000000 !important;
+      }
+
+      [data-theme="luxury"] .success-btn {
+        background: #d4af37 !important;
+        color: #000000 !important;
+      }
+
+      [data-theme="night"] .success-btn {
+        background: #22d3ee !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="light"] .success-btn {
+        background: #10b981 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="cupcake"] .success-btn {
+        background: #f472b6 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="retro"] .success-btn {
+        background: #d4a574 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="aqua"] .success-btn {
+        background: #06b6d4 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="lofi"] .success-btn {
+        background: #10b981 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="pastel"] .success-btn {
+        background: #34d399 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="fantasy"] .success-btn {
+        background: #f472b6 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="wireframe"] .success-btn {
+        background: #dfdfdf !important;
+        color: #000000 !important;
+        border: 1px solid #000000 !important;
+      }
+
+      [data-theme="black"] .success-btn {
+        background: #10b981 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="cmyk"] .success-btn {
+        background: #06b6d4 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="autumn"] .success-btn {
+        background: #d97706 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="business"] .success-btn {
+        background: #10b981 !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="acid"] .success-btn {
+        background: #84cc16 !important;
+        color: #000000 !important;
+      }
+
+      [data-theme="lemonade"] .success-btn {
+        background: #22c55e !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="coffee"] .success-btn {
+        background: #a0522d !important;
+        color: #ffffff !important;
+      }
+
+      [data-theme="winter"] .success-btn {
+        background: #3b82f6 !important;
+        color: #ffffff !important;
+      }
+      .download-limiter-signout-btn {
+        background: #dc3545;
+        color: white;
+        border: none;
+        padding: 6px 12px;
+        border-radius: 4px;
+        font-size: 12px;
+        cursor: pointer;
+        margin-left: 8px;
+      }
+      .download-limiter-premium-badge {
+        background: linear-gradient(45deg, #f39c12, #e74c3c);
+        color: white;
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-size: 10px;
+        margin-left: 8px;
+        font-weight: bold;
+      }
+      .download-limiter-btn-premium {
+        opacity: 0.7;
+      }
+      .download-limiter-success-modal {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0,0,0,0.5);
+        z-index: 10000;
+        align-items: center;
+        justify-content: center;
+      }
+      .download-limiter-success-modal.show { display: flex; }
+      .download-limiter-success-content {
+        background: white;
+        padding: 2rem;
+        border-radius: 8px;
+        max-width: 400px;
+        text-align: center;
+        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+        border-left: 4px solid #38a169;
+      }
+
+      /* Single upgrade flow styles */
+      .single-upgrade-container {
+        margin: 20px 0;
+        text-align: center;
+      }
+
+      .single-upgrade-content .upgrade-btn {
+        background: linear-gradient(135deg, #059669, #0d9488) !important;
+        color: white !important;
+        border: none !important;
+        padding: 16px 32px !important;
+        border-radius: 12px !important;
+        font-size: 18px !important;
+        font-weight: 600 !important;
+        cursor: pointer !important;
+        transition: all 0.3s ease !important;
+        box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3) !important;
+        margin-bottom: 16px !important;
+        min-width: 200px !important;
+      }
+
+      .single-upgrade-content .upgrade-btn:hover {
+        background: linear-gradient(135deg, #047857, #0f766e) !important;
+        transform: translateY(-2px) !important;
+        box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4) !important;
+      }
+
+      .single-upgrade-content .upgrade-description {
+        font-size: 14px !important;
+        color: #6b7280 !important;
+        margin: 12px 0 0 0 !important;
+        line-height: 1.5 !important;
+        max-width: 300px !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+      }
+
+      /* Anonymous user usage count styles */
+      .lead-fast-anonymous-status {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .lead-fast-anonymous-status .lead-fast-count {
+        background: rgba(59, 130, 246, 0.1);
+        color: #1d4ed8;
+        padding: 6px 12px;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        border: 1px solid rgba(59, 130, 246, 0.2);
+      }
+
+      /* Success button theming */
+      .download-limiter-btn.success-btn {
+        background: #059669 !important;
+        color: white !important;
+        border: none !important;
+        padding: 12px 24px !important;
+        border-radius: 8px !important;
+        cursor: pointer !important;
+        margin-top: 20px !important;
+        font-size: 16px !important;
+        font-weight: 500 !important;
+        transition: all 0.2s ease !important;
+      }
+
+      .download-limiter-btn.success-btn:hover {
+        background: #047857 !important;
+        transform: translateY(-1px) !important;
+      }
+
+      /* Theme-specific success button colors */
+      [data-theme="cyberpunk"] .download-limiter-btn.success-btn {
+        background: #0ea5e9 !important;
+        box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
+      }
+
+      [data-theme="cyberpunk"] .download-limiter-btn.success-btn:hover {
+        background: #0284c7 !important;
+      }
+
+      [data-theme="valentine"] .download-limiter-btn.success-btn {
+        background: #be185d !important;
+      }
+
+      [data-theme="valentine"] .download-limiter-btn.success-btn:hover {
+        background: #9d174d !important;
+      }
+
+      [data-theme="bumblebee"] .download-limiter-btn.success-btn {
+        background: #f59e0b !important;
+      }
+
+      [data-theme="bumblebee"] .download-limiter-btn.success-btn:hover {
+        background: #d97706 !important;
+      }
+
+      [data-theme="garden"] .download-limiter-btn.success-btn {
+        background: #16a34a !important;
+      }
+
+      [data-theme="garden"] .download-limiter-btn.success-btn:hover {
+        background: #15803d !important;
+      }
+
+      /* Google Sign-in button theming */
+      .download-limiter-btn.google-signin-btn {
+        background: #4285f4 !important;
+        color: white !important;
+        border: none !important;
+        padding: 12px 24px !important;
+        border-radius: 8px !important;
+        cursor: pointer !important;
+        margin-right: 10px !important;
+        display: inline-flex !important;
+        align-items: center !important;
+        gap: 8px !important;
+        font-size: 14px !important;
+        font-weight: 500 !important;
+        transition: all 0.2s ease !important;
+      }
+
+      .download-limiter-btn.google-signin-btn:hover {
+        background: #3367d6 !important;
+        transform: translateY(-1px) !important;
+      }
+
+      /* Upgrade button theming */
+      .download-limiter-btn.upgrade-btn {
+        background: #059669 !important;
+        color: white !important;
+        border: none !important;
+        padding: 12px 24px !important;
+        border-radius: 8px !important;
+        cursor: pointer !important;
+        margin-right: 10px !important;
+        font-size: 16px !important;
+        font-weight: 500 !important;
+        transition: all 0.2s ease !important;
+      }
+
+      .download-limiter-btn.upgrade-btn:hover {
+        background: #047857 !important;
+        transform: translateY(-1px) !important;
+      }
+
+      /* Theme-specific button colors */
+      [data-theme="cyberpunk"] .download-limiter-btn.upgrade-btn {
+        background: #0ea5e9 !important;
+        box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
+      }
+
+      [data-theme="valentine"] .download-limiter-btn.upgrade-btn {
+        background: #be185d !important;
+      }
+
+      [data-theme="bumblebee"] .download-limiter-btn.upgrade-btn {
+        background: #f59e0b !important;
+      }
+
+      [data-theme="garden"] .download-limiter-btn.upgrade-btn {
+        background: #16a34a !important;
+      }
+
+      /* Cancel button container and styling - positioned at very bottom */
+      .download-limiter-cancel-container {
+        margin-top: 30px !important;
+        padding-top: 20px !important;
+        border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
+        text-align: center !important;
+        position: relative !important;
+        bottom: 0 !important;
+      }
+
+      .download-limiter-btn.cancel-btn {
+        background: transparent !important;
+        color: #6b7280 !important;
+        border: none !important;
+        padding: 8px 16px !important;
+        border-radius: 6px !important;
+        cursor: pointer !important;
+        font-size: 13px !important;
+        font-weight: 400 !important;
+        transition: all 0.2s ease !important;
+        text-decoration: underline !important;
+        margin: 0 auto !important;
+        display: block !important;
+      }
+
+      .download-limiter-btn.cancel-btn:hover {
+        color: #374151 !important;
+        background: rgba(107, 114, 128, 0.1) !important;
+        text-decoration: none !important;
+      }
+
+      /* Theme-specific cancel button border */
+      [data-theme="dark"] .download-limiter-cancel-container {
+        border-top-color: rgba(255, 255, 255, 0.1) !important;
+      }
+
+      [data-theme="dark"] .download-limiter-btn.cancel-btn {
+        color: #9ca3af !important;
+      }
+
+      [data-theme="dark"] .download-limiter-btn.cancel-btn:hover {
+        color: #d1d5db !important;
+        background: rgba(156, 163, 175, 0.1) !important;
+      }
+
+      [data-theme="cyberpunk"] .download-limiter-cancel-container {
+        border-top-color: rgba(14, 165, 233, 0.2) !important;
+      }
+
+      [data-theme="cyberpunk"] .download-limiter-btn.cancel-btn {
+        color: #0ea5e9 !important;
+      }
+
+      [data-theme="cyberpunk"] .download-limiter-btn.cancel-btn:hover {
+        color: #38bdf8 !important;
+        background: rgba(14, 165, 233, 0.1) !important;
+      }
+    `;
+        document.head.appendChild(styles);
+    }
+    injectDaisyUI() {
+        //console.log('🎨 [THEME DEBUG] injectDaisyUI called');
+        //console.log('🎨 [THEME DEBUG] Theme config:', this.config.theme);
+        // Check if DaisyUI is already loaded
+        const existingLink = document.querySelector('link[href*="daisyui"]');
+        if (existingLink) {
+            //console.log('🎨 [THEME DEBUG] DaisyUI already exists:', existingLink);
+            // Apply theme if DaisyUI already exists
+            if (this.config.theme?.name) {
+                const themeName = this.config.theme.name.toLowerCase();
+                //console.log('🎨 [THEME DEBUG] Setting existing theme:', themeName);
+                document.documentElement.setAttribute('data-theme', themeName);
+                //console.log('🎨 [THEME DEBUG] Current data-theme attribute:', document.documentElement.getAttribute('data-theme'));
+            }
+            return;
+        }
+        //console.log('🎨 [THEME DEBUG] No existing DaisyUI found, injecting...');
+        // Note: Tailwind CSS is not needed as we use custom CSS for all styling
+        // Apply theme directly using our custom CSS - no external dependencies needed
+        if (this.config.theme?.name) {
+            const themeName = this.config.theme.name.toLowerCase();
+            document.documentElement.setAttribute('data-theme', themeName);
+            // Update status displays immediately since no CSS loading is needed
+            this.updateStatusDisplays();
+        }
+    }
+    createPaywallModal() {
+        if (document.getElementById('download-limiter-paywall'))
+            return;
+        const modal = document.createElement('div');
+        modal.id = 'download-limiter-paywall';
+        modal.className = 'download-limiter-modal';
+        modal.innerHTML = `
+      <div class="download-limiter-content">
+        <h3 id="download-limiter-paywall-title">Usage Limit Reached</h3>
+        <p id="download-limiter-paywall-subtitle">You've used all your free attempts. Upgrade to premium for unlimited usage!</p>
+
+        <!-- Auth Section (shows when not signed in) -->
+        <div id="download-limiter-auth-section" style="margin: 20px 0;">
+          <p>Sign in to continue or upgrade to premium</p>
+          <button id="download-limiter-signin-btn" class="download-limiter-btn google-signin-btn">
+            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+              <path d="M16.51 8H8.98v3h4.3c-.18 1-.74 1.48-1.6 2.04v2.01h2.6a8.8 8.8 0 0 0 2.38-5.88c0-.57-.05-.66-.15-1.18z" fill="white"/>
+              <path d="M8.98 17c2.16 0 3.97-.72 5.3-1.94l-2.6-2.04a4.8 4.8 0 0 1-2.7.75 4.8 4.8 0 0 1-4.52-3.4H1.83v2.07A8 8 0 0 0 8.98 17z" fill="white"/>
+              <path d="M4.46 10.37a4.8 4.8 0 0 1-.25-1.37c0-.48.09-.94.25-1.37V5.56H1.83a8 8 0 0 0 0 6.88l2.63-2.07z" fill="white"/>
+              <path d="M8.98 3.77c1.32 0 2.5.45 3.44 1.35l2.58-2.58C13.94.64 11.66 0 8.98 0A8 8 0 0 0 1.83 5.56l2.63 2.07c.61-1.8 2.26-3.86 4.52-3.86z" fill="white"/>
+            </svg>
+            Sign in with Google
+          </button>
+        </div>
+
+        <!-- Payment Section (shows when signed in) -->
+        <div id="download-limiter-payment-section" style="margin: 20px 0; display: none;">
+          <button id="download-limiter-upgrade-btn" class="download-limiter-btn upgrade-btn">
+            Upgrade to Premium
+          </button>
+        </div>
+
+        <div class="download-limiter-cancel-container">
+          <button id="download-limiter-close-btn" class="download-limiter-btn cancel-btn">
+            Cancel
+          </button>
+        </div>
+      </div>
+    `;
+        document.body.appendChild(modal);
+        // Set up event handlers
+        modal.querySelector('#download-limiter-signin-btn').addEventListener('click', async () => {
+            await this.signIn();
+        });
+        modal.querySelector('#download-limiter-upgrade-btn').addEventListener('click', async () => {
+            const payment = await this.createPayment();
+            if (payment?.checkout_url) {
+                window.location.href = payment.checkout_url;
+            }
+        });
+        modal.querySelector('#download-limiter-close-btn').addEventListener('click', () => {
+            if (this.config.options?.debug) {
+                console.log('🔍 DEBUG: Cancel button clicked');
+                console.log('🔍 DEBUG: this.config.feedback:', this.config.feedback);
+                console.log('🔍 DEBUG: this.config.email:', this.config.email);
+                console.log('🔍 DEBUG: Feedback config exists:', !!(this.config.feedback || this.config.email));
+            }
+            // Show feedback form if feedback config exists, otherwise just close
+            if (this.config.feedback || this.config.email) {
+                if (this.config.options?.debug) {
+                    console.log('🔍 DEBUG: Showing feedback form');
+                }
+                this.showFeedbackForm();
+            }
+            else {
+                if (this.config.options?.debug) {
+                    console.log('🔍 DEBUG: No email config, just closing modal');
+                }
+                modal.classList.remove('show');
+            }
+        });
+        // Removed click-outside-to-close behavior to encourage users to use the Cancel button
+        // which triggers the feedback form. This improves feedback collection.
+    }
+    createSuccessModal() {
+        if (document.getElementById('download-limiter-success'))
+            return;
+        const modal = document.createElement('div');
+        modal.id = 'download-limiter-success';
+        modal.className = 'download-limiter-modal'; // Use same modal class as paywall
+        modal.innerHTML = `
+      <div class="download-limiter-content"> <!-- Use same content class as paywall for theming -->
+        <h3 id="download-limiter-success-title">Action Started!</h3>
+        <p id="download-limiter-success-message">Your action completed successfully!</p>
+        <button id="download-limiter-success-close" class="download-limiter-btn success-btn">
+          OK
+        </button>
+      </div>
+    `;
+        document.body.appendChild(modal);
+        // Set up event handlers
+        modal.querySelector('#download-limiter-success-close').addEventListener('click', () => {
+            modal.classList.remove('show');
+        });
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                modal.classList.remove('show');
+            }
+        });
+    }
+    showFeedbackForm() {
+        // const feedbackStartTime = Date.now();
+        // console.log(`🕐 [FEEDBACK] showFeedbackForm called: ${new Date(feedbackStartTime).toISOString()}`);
+        // Hide paywall first
+        // const paywallHideStart = Date.now();
+        const paywall = document.getElementById('download-limiter-paywall');
+        if (paywall) {
+            paywall.classList.remove('show');
+            // console.log(`🕐 [FEEDBACK] Paywall hidden: ${Date.now() - paywallHideStart}ms`);
+        }
+        // Create or show feedback modal
+        // const createFeedbackStart = Date.now();
+        this.createFeedbackModal();
+        // console.log(`🕐 [FEEDBACK] createFeedbackModal completed: ${Date.now() - createFeedbackStart}ms`);
+        const modal = document.getElementById('download-limiter-feedback');
+        if (modal) {
+            modal.classList.add('show');
+            // console.log(`🕐 [FEEDBACK] Feedback modal shown: ${Date.now() - feedbackStartTime}ms total`);
+        }
+        else {
+            // console.log(`🕐 [FEEDBACK] ERROR - Feedback modal not found after ${Date.now() - feedbackStartTime}ms`);
+        }
+    }
+    createFeedbackModal() {
+        if (document.getElementById('download-limiter-feedback')) {
+            if (this.config.options?.debug) {
+                console.log('🔍 DEBUG: Feedback modal already exists');
+            }
+            return;
+        }
+        // Get feedback configuration or fallback to legacy email config
+        const feedbackConfig = this.config.feedback || (this.config.email ? {
+            form: {
+                title: 'Quick Feedback',
+                description: 'Why didn\'t you upgrade?',
+                option1: 'Not useful for my needs',
+                option2: 'Didn\'t find what I was looking for',
+                option3: 'Just trying it out'
+            },
+            email: this.config.email
+        } : null);
+        if (this.config.options?.debug) {
+            console.log('🔍 DEBUG: Feedback config:', feedbackConfig);
+            console.log('🔍 DEBUG: this.config.feedback:', this.config.feedback);
+            console.log('🔍 DEBUG: this.config.email:', this.config.email);
+        }
+        if (!feedbackConfig) {
+            if (this.config.options?.debug) {
+                console.log('🔍 DEBUG: No feedback config found, not creating modal');
+            }
+            return;
+        }
+        const modal = document.createElement('div');
+        modal.id = 'download-limiter-feedback';
+        modal.className = 'download-limiter-modal';
+        modal.innerHTML = `
+      <div class="download-limiter-content">
+        <h3>${feedbackConfig.form.title}</h3>
+        <p style="margin-bottom: 20px;">${feedbackConfig.form.description}</p>
+
+        <form id="feedback-form" style="text-align: left;">
+          <div style="margin-bottom: 15px;">
+            <label style="display: block; margin-bottom: 8px;">
+              <input type="radio" name="reason" value="option1" style="margin-right: 8px;">
+              ${feedbackConfig.form.option1}
+            </label>
+            <label style="display: block; margin-bottom: 8px;">
+              <input type="radio" name="reason" value="option2" style="margin-right: 8px;">
+              ${feedbackConfig.form.option2}
+            </label>
+            <label style="display: block; margin-bottom: 8px;">
+              <input type="radio" name="reason" value="option3" style="margin-right: 8px;">
+              ${feedbackConfig.form.option3}
+            </label>
+          </div>
+
+          <div style="margin-bottom: 15px;">
+            <label for="feedback-details" style="display: block; margin-bottom: 5px;">Tell us more:</label>
+            <textarea
+              id="feedback-details"
+              name="details"
+              rows="3"
+              style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;"
+              placeholder="Your feedback helps us improve..." maxlength="200"></textarea>
+          </div>
+
+          <div style="margin-bottom: 20px;">
+            <label for="feedback-email" style="display: block; margin-bottom: 5px;">
+              Email (optional):
+            </label>
+            <input
+              type="email"
+              id="feedback-email"
+              name="email"
+              style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;"
+              placeholder="your@email.com">
+            <small style="color: #666; display: block; margin-top: 4px;">
+              Only if you want us to reach out about what you mentioned above. We don't follow up unless you want us to
+            </small>
+          </div>
+
+   
+          <div style="text-align: center;">
+            <button type="submit" class="download-limiter-btn success-btn" style="margin-right: 10px;">
+              Submit Feedback
+            </button>
+            <button type="button" id="feedback-skip-btn" class="download-limiter-btn cancel-btn">
+              Skip
+            </button>
+          </div>
+        </form>
+      </div>
+    `;
+        document.body.appendChild(modal);
+        if (this.config.options?.debug) {
+            console.log('🔍 DEBUG: Feedback modal created and added to DOM');
+        }
+        // Set up event listeners
+        const form = modal.querySelector('#feedback-form');
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.submitFeedback(form);
+        });
+        modal.querySelector('#feedback-skip-btn').addEventListener('click', () => {
+            modal.classList.remove('show');
+        });
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                modal.classList.remove('show');
+            }
+        });
+    }
+    async submitFeedback(form) {
+        const formData = new FormData(form);
+        const reason = formData.get('reason');
+        const details = formData.get('details');
+        const email = formData.get('email');
+        if (!reason) {
+            alert('Please select a reason');
+            return;
+        }
+        const feedbackData = {
+            reason,
+            details,
+            email: email || undefined,
+            timestamp: new Date().toISOString(),
+            userAgent: navigator.userAgent,
+            appId: this.config.appId
+        };
+        try {
+            await this.sendFeedbackEmail(feedbackData);
+            // Close feedback modal
+            const modal = document.getElementById('download-limiter-feedback');
+            if (modal) {
+                modal.classList.remove('show');
+            }
+            // Show thank you message
+            alert('Thank you for your feedback!');
+        }
+        catch (error) {
+            console.error('Failed to send feedback:', error);
+            alert('Failed to send feedback. Please try again.');
+        }
+    }
+    async sendFeedbackEmail(feedbackData) {
+        const emailConfig = this.config.feedback?.email || this.config.email;
+        if (!emailConfig) {
+            throw new Error('Email configuration not available');
+        }
+        const emailBody = `
+New Feedback from ${this.config.appId}
+
+Reason: ${feedbackData.reason}
+Details: ${feedbackData.details}
+User Email: ${feedbackData.email || 'Not provided'}
+Timestamp: ${feedbackData.timestamp}
+User Agent: ${feedbackData.userAgent}
+    `.trim();
+        const response = await fetch('https://api.resend.com/emails', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${emailConfig.resendApiKey}`
+            },
+            body: JSON.stringify({
+                from: emailConfig.fromEmail,
+                to: [emailConfig.fromEmail], // Send feedback to yourself
+                subject: `Feedback from ${this.config.appId}`,
+                text: emailBody
+            })
+        });
+        if (!response.ok) {
+            throw new Error(`Email API error: ${response.status}`);
+        }
+    }
+    createAuthUI() {
+        if (document.getElementById('lead-fast-profile'))
+            return;
+        const profileContainer = document.createElement('div');
+        profileContainer.id = 'lead-fast-profile';
+        profileContainer.className = 'lead-fast-profile';
+        document.body.appendChild(profileContainer);
+    }
+    createStatusDisplay() {
+        if (document.getElementById('download-limiter-status'))
+            return;
+        const statusDiv = document.createElement('div');
+        statusDiv.id = 'download-limiter-status';
+        statusDiv.className = 'download-limiter-status';
+        document.body.appendChild(statusDiv);
+    }
+    createGlobalStatusDisplay() {
+        this.createStatusDisplay();
+    }
+    showPaywallInstant(status) {
+        // const showStartTime = Date.now();
+        // console.log(`🕐 [MODAL] showPaywallInstant started: ${new Date(showStartTime).toISOString()}`);
+        // Ensure modal exists before trying to show it
+        // const createStartTime = Date.now();
+        this.createPaywallModal();
+        // console.log(`🕐 [MODAL] createPaywallModal completed: ${Date.now() - createStartTime}ms`);
+        const modal = document.getElementById('download-limiter-paywall');
+        if (modal) {
+            // console.log(`🕐 [MODAL] Modal found in DOM: ${Date.now() - showStartTime}ms`);
+            // Update paywall title with exact count (no API call needed)
+            const titleEl = modal.querySelector('#download-limiter-paywall-title');
+            if (titleEl) {
+                titleEl.textContent = `You've used ${status.limit} free attempts`;
+                // console.log(`🕐 [MODAL] Title updated: ${Date.now() - showStartTime}ms`);
+            }
+            // Show appropriate section based on auth state
+            const authSection = modal.querySelector('#download-limiter-auth-section');
+            const paymentSection = modal.querySelector('#download-limiter-payment-section');
+            if (!this.currentUser) {
+                // console.log(`🕐 [MODAL] Setting up anonymous user flow: ${Date.now() - showStartTime}ms`);
+                // Anonymous user - show single upgrade flow
+                const subtitleEl = modal.querySelector('#download-limiter-paywall-subtitle');
+                if (subtitleEl) {
+                    subtitleEl.textContent = 'Sign in to continue. If you\'re already premium, you\'ll get unlimited access. New users can upgrade after signing in.';
+                }
+                // Hide separate auth/payment sections and show single upgrade button
+                authSection.style.display = 'none';
+                paymentSection.style.display = 'none';
+                // Show single upgrade button
+                // const upgradeStartTime = Date.now();
+                this.showSingleUpgradeFlow(modal);
+                // console.log(`🕐 [MODAL] Single upgrade flow setup: ${Date.now() - upgradeStartTime}ms`);
+            }
+            else {
+                // console.log(`🕐 [MODAL] Setting up signed-in user flow: ${Date.now() - showStartTime}ms`);
+                // Existing flow for signed-in users - direct to payment
+                authSection.style.display = 'none';
+                paymentSection.style.display = 'block';
+            }
+            modal.classList.add('show');
+            // console.log(`🕐 [MODAL] Modal shown (classList.add('show')): ${Date.now() - showStartTime}ms`);
+        }
+        else {
+            // console.log(`🕐 [MODAL] ERROR: Modal not found in DOM after creation: ${Date.now() - showStartTime}ms`);
+        }
+    }
+    async showPaywall() {
+        // Get current status if not cached
+        const status = await this.getDownloadStatus();
+        this.showPaywallInstant(status);
+    }
+    showSingleUpgradeFlow(modal) {
+        // Create single upgrade button that handles both login and payment
+        let upgradeContainer = modal.querySelector('.single-upgrade-container');
+        if (!upgradeContainer) {
+            upgradeContainer = document.createElement('div');
+            upgradeContainer.className = 'single-upgrade-container';
+            upgradeContainer.innerHTML = `
+        <div class="single-upgrade-content">
+          <button class="download-limiter-btn upgrade-btn" id="single-upgrade-btn">
+            Continue with Google
+          </button>
+          <!--<p class="upgrade-description">
+            Sign in to restore access. Premium members get unlimited usage immediately.
+          </p>-->
+        </div>
+      `;
+            // Insert before the cancel container to keep cancel at the bottom
+            const cancelContainer = modal.querySelector('.download-limiter-cancel-container');
+            if (cancelContainer) {
+                modal.querySelector('.download-limiter-content')?.insertBefore(upgradeContainer, cancelContainer);
+            }
+            else {
+                modal.querySelector('.download-limiter-content')?.appendChild(upgradeContainer);
+            }
+        }
+        upgradeContainer.style.display = 'block';
+        // Add click handler for single upgrade flow
+        const upgradeBtn = modal.querySelector('#single-upgrade-btn');
+        if (upgradeBtn) {
+            upgradeBtn.replaceWith(upgradeBtn.cloneNode(true)); // Remove existing listeners
+            const newUpgradeBtn = modal.querySelector('#single-upgrade-btn');
+            newUpgradeBtn?.addEventListener('click', async () => {
+                try {
+                    // Step 1: Sign in with Google
+                    const { error } = await this.supabase.auth.signInWithOAuth({
+                        provider: 'google',
+                        options: {
+                            redirectTo: `${window.location.origin}${window.location.pathname}?upgrade=true`
+                        }
+                    });
+                    if (error) {
+                        console.error('Sign in error:', error);
+                        this.showError('Sign In Failed', 'Failed to sign in with Google. Please try again.');
+                    }
+                    // OAuth will redirect, so no further action needed here
+                }
+                catch (error) {
+                    console.error('Upgrade flow error:', error);
+                    this.showError('Upgrade Failed', 'Failed to start upgrade process. Please try again.');
+                }
+            });
+        }
+    }
+    showSuccess(title, message) {
+        const modal = document.getElementById('download-limiter-success');
+        if (modal) {
+            const titleEl = modal.querySelector('#download-limiter-success-title');
+            const messageEl = modal.querySelector('#download-limiter-success-message');
+            if (titleEl)
+                titleEl.textContent = title;
+            if (messageEl)
+                messageEl.textContent = message;
+            modal.classList.add('show');
+            // No auto-hide - let user dismiss manually
+        }
+    }
+    showError(title, message) {
+        // Create a clean error toast instead of alert
+        const toast = document.createElement('div');
+        toast.style.cssText = `
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      background: #fee2e2;
+      border: 1px solid #fecaca;
+      color: #dc2626;
+      padding: 12px 16px;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 1.4;
+      max-width: 300px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      z-index: 10000;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    `;
+        toast.innerHTML = `
+      <div style="font-weight: 600; margin-bottom: 4px;">${title}</div>
+      <div style="font-size: 13px; opacity: 0.9;">${message}</div>
+    `;
+        document.body.appendChild(toast);
+        // Auto-remove after 5 seconds
+        setTimeout(() => {
+            if (toast.parentNode) {
+                toast.parentNode.removeChild(toast);
+            }
+        }, 5000);
+        // Click to dismiss
+        toast.addEventListener('click', () => {
+            if (toast.parentNode) {
+                toast.parentNode.removeChild(toast);
+            }
+        });
+    }
+    showConnectionError() {
+        this.showError('Connection Error', 'Server connection required for download verification. Please check your configuration and try again.');
+    }
+    showPaymentConfigError() {
+        this.showError('Payment Configuration Error', 'Payment system is not properly configured. Please contact support.');
+    }
+    disableDownloadButtons(errorType) {
+        // Find all buttons that were attached by the library
+        const buttons = document.querySelectorAll('[data-leadfast-attached]');
+        const errorMessages = {
+            connection: 'Download disabled: Server connection required',
+            payment: 'Download disabled: Payment configuration error'
+        };
+        const statusMessages = {
+            connection: '⚠️ Connection Error - Downloads Disabled',
+            payment: '⚠️ Payment Config Error - Downloads Disabled'
+        };
+        buttons.forEach(button => {
+            const btnElement = button;
+            btnElement.disabled = true;
+            btnElement.style.opacity = '0.5';
+            btnElement.style.cursor = 'not-allowed';
+            btnElement.title = errorMessages[errorType];
+        });
+        // Update user section to show error
+        const userSection = document.querySelector('.lead-fast-user-section');
+        if (userSection) {
+            userSection.innerHTML = `
+        <div style="
+          color: #ef4444;
+          padding: 6px 8px;
+          font-size: 12px;
+          font-weight: 500;
+          line-height: 1.2;
+          border-radius: 4px;
+          background: rgba(239, 68, 68, 0.05);
+          border: 1px solid rgba(239, 68, 68, 0.2);
+          max-width: 200px;
+          text-align: center;
+        ">
+          ${statusMessages[errorType]}
+        </div>
+      `;
+        }
+    }
+    async updateStatusDisplays() {
+        //console.log('🎨 [THEME DEBUG] updateStatusDisplays called');
+        // If connection failed, disable all download buttons
+        if (this.supabaseConnectionFailed) {
+            this.disableDownloadButtons('connection');
+            return;
+        }
+        // If payment configuration is invalid, disable all download buttons
+        if (this.config.payment && this.paymentConnectionFailed) {
+            this.disableDownloadButtons('payment');
+            return;
+        }
+        const status = await this.getDownloadStatus();
+        this.updateUserSection(status);
+    }
+    createTitleBar() {
+        //console.log('🎨 [THEME DEBUG] Creating title bar');
+        // Create the profile div if it doesn't exist
+        let profileDiv = document.getElementById('lead-fast-profile');
+        if (!profileDiv) {
+            profileDiv = document.createElement('div');
+            profileDiv.id = 'lead-fast-profile';
+            profileDiv.className = 'lead-fast-profile';
+            document.body.appendChild(profileDiv);
+        }
+        // Get title bar configuration
+        const titleConfig = this.config.titleBar || {};
+        const title = titleConfig.title || 'My App';
+        const titleImage = titleConfig.titleImage;
+        const links = titleConfig.links || [];
+        // Always create title bar with logo and navigation
+        profileDiv.innerHTML = `
+      <div class="lead-fast-title-bar">
+        <div class="lead-fast-title-section">
+          <a href="#" class="lead-fast-logo">
+            ${titleImage ? `<img src="${titleImage}" alt="${title}">` : ''}
+            <span>${title}</span>
+          </a>
+          <nav class="lead-fast-nav">
+            ${links.map(link => `
+              <a href="${link.url}" class="lead-fast-nav-link" ${link.target ? `target="${link.target}"` : ''}>
+                ${link.text}
+              </a>
+            `).join('')}
+          </nav>
+        </div>
+
+        <div class="lead-fast-user-section" id="lead-fast-user-section">
+          <!-- User section will be populated when logged in -->
+        </div>
+
+        <!-- <a href="https://www.moneyfast.bar" target="_blank" class="lead-fast-branding" style="text-decoration: none; color: inherit;">moneyfast.bar</a>-->
+      </div>
+    `;
+    }
+    updateUserSection(status) {
+        //console.log('🎨 [THEME DEBUG] updateUserSection called');
+        //console.log('🎨 [THEME DEBUG] Current data-theme:', document.documentElement.getAttribute('data-theme'));
+        const userSection = document.getElementById('lead-fast-user-section');
+        if (!userSection) {
+            //console.log('🎨 [THEME DEBUG] User section not found!');
+            return;
+        }
+        if (this.currentUser) {
+            // User is signed in - show user info
+            const userInitial = this.currentUser.email.charAt(0).toUpperCase();
+            const userEmail = this.currentUser.email;
+            const badgeClass = status.isPremium ? 'premium' : 'free';
+            const badgeText = status.isPremium ? 'Premium' : 'Free';
+            const countText = status.isPremium ? 'Unlimited' : `${status.currentCount}/${status.limit}`;
+            //console.log('🎨 [THEME DEBUG] Populating user section');
+            userSection.innerHTML = `
+        <div class="lead-fast-avatar">${userInitial}</div>
+        <div class="lead-fast-user-info">
+          <div class="lead-fast-user-email">${userEmail}</div>
+          <div class="lead-fast-user-status">
+            <span class="lead-fast-badge ${badgeClass}">${badgeText}</span>
+            <span class="lead-fast-count">${countText}</span>
+          </div>
+        </div>
+        <button class="lead-fast-signout">signout</button>
+      `;
+            // Debug CSS variables after updating user section
+            const titleBar = document.querySelector('.lead-fast-title-bar');
+            if (titleBar) {
+                const computedStyle = getComputedStyle(titleBar);
+                //console.log('🎨 [THEME DEBUG] Title bar background color:', computedStyle.backgroundColor);
+                //console.log('🎨 [THEME DEBUG] Title bar border color:', computedStyle.borderColor);
+            }
+            // Add sign out functionality
+            const signoutBtn = userSection.querySelector('.lead-fast-signout');
+            if (signoutBtn) {
+                signoutBtn.addEventListener('click', () => {
+                    this.signOut();
+                });
+            }
+        }
+        else {
+            // Anonymous user - show usage count
+            //console.log('🎨 [THEME DEBUG] Showing anonymous user usage count');
+            const countText = `Attempts: ${status.currentCount}/${status.limit}`;
+            userSection.innerHTML = `
+        <div class="lead-fast-anonymous-status">
+          <span class="lead-fast-count">${countText}</span>
+        </div>
+      `;
+        }
+    }
+    setupUIUpdates() {
+        // Update UI on auth changes
+        this.on('authChanged', async () => {
+            // Invalidate cache when auth state changes
+            // console.log(`🕐 [CACHE] Invalidating cache due to auth change (was: ${this.cachedStatus ? 'cached' : 'null'})`);
+            this.cachedStatus = null;
+            this.updateStatusDisplays();
+            // Update paywall display if it's currently shown
+            const modal = document.getElementById('download-limiter-paywall');
+            if (modal && modal.classList.contains('show')) {
+                this.updatePaywallDisplay();
+                // Auto-redirect to payment after sign-in from paywall (if not already premium)
+                if (this.currentUser && this.config.payment) {
+                    setTimeout(async () => {
+                        const isPremium = await this.checkPremiumStatus(this.currentUser.email);
+                        if (!isPremium) {
+                            // User is not premium, redirect to payment
+                            const payment = await this.createPayment();
+                            if (payment?.checkout_url) {
+                                window.location.href = payment.checkout_url;
+                            }
+                        }
+                        else {
+                            // User is already premium, just close paywall and stay on page
+                            modal.classList.remove('show');
+                        }
+                    }, 1000); // Small delay to let UI update
+                }
+            }
+        });
+        // Update UI on count changes
+        this.on('countChanged', () => {
+            this.updateStatusDisplays();
+        });
+        // Initial update
+        this.updateStatusDisplays();
+    }
+    updatePaywallDisplay() {
+        const modal = document.getElementById('download-limiter-paywall');
+        if (!modal)
+            return;
+        const authSection = modal.querySelector('#download-limiter-auth-section');
+        const paymentSection = modal.querySelector('#download-limiter-payment-section');
+        if (!this.currentUser) {
+            // Not signed in - show auth section
+            authSection.style.display = 'block';
+            paymentSection.style.display = 'none';
+        }
+        else {
+            // Signed in - show payment section
+            authSection.style.display = 'none';
+            paymentSection.style.display = 'block';
+        }
+    }
+    /**
+     * Event listener management
+     */
+    on(event, listener) {
+        if (!this.eventListeners.has(event)) {
+            this.eventListeners.set(event, []);
+        }
+        this.eventListeners.get(event).push(listener);
+    }
+    off(event, listener) {
+        const listeners = this.eventListeners.get(event);
+        if (listeners) {
+            const index = listeners.indexOf(listener);
+            if (index > -1) {
+                listeners.splice(index, 1);
+            }
+        }
+    }
+    emit(event, data) {
+        const listeners = this.eventListeners.get(event);
+        if (listeners) {
+            listeners.forEach(listener => {
+                try {
+                    listener(data);
+                }
+                catch (error) {
+                    console.error(`Error in ${event} listener:`, error);
+                }
+            });
+        }
+    }
+    validateConfig() {
+        if (!this.config.appId)
+            throw new Error('appId is required');
+        if (!this.config.supabase?.url)
+            throw new Error('supabase.url is required');
+        if (!this.config.supabase?.anonKey)
+            throw new Error('supabase.anonKey is required');
+        if (typeof this.config.freeDownloadLimit !== 'number' || this.config.freeDownloadLimit < 0) {
+            throw new Error('freeDownloadLimit must be a non-negative number');
+        }
+    }
+    async initializeSupabase() {
+        try {
+            this.supabase = createClient(this.config.supabase.url, this.config.supabase.anonKey);
+            // Skip connection test - we'll detect connection issues during actual API calls
+            this.supabaseConnectionFailed = false;
+        }
+        catch (error) {
+            console.error('Failed to initialize Supabase:', error);
+            this.supabaseConnectionFailed = true;
+        }
+    }
+    async initializePayment() {
+        // Skip if no payment configuration
+        if (!this.config.payment) {
+            return;
+        }
+        // Validate product ID format
+        const productId = this.config.payment.productId;
+        if (!productId || !productId.startsWith('pdt_') || productId.length < 10) {
+            this.paymentConnectionFailed = true;
+            if (this.config.options?.debug) {
+                console.warn('Invalid payment product ID format:', productId);
+            }
+            return;
+        }
+        // For now, skip payment gateway connectivity test
+        // Only validate product ID format (which we already did above)
+        // In production, you can add actual DodoPayments API test here
+        this.paymentConnectionFailed = false;
+    }
+    async initializeFingerprint() {
+        try {
+            this.userFingerprint = await this.generateFingerprint();
+        }
+        catch (error) {
+            this.userFingerprint = crypto.randomUUID ? crypto.randomUUID() : String(Date.now());
+            if (this.config.options?.debug) {
+                console.warn('Fingerprint generation failed, using fallback:', error);
+            }
+        }
+    }
+    async generateFingerprint() {
+        const ua = navigator.userAgent || '';
+        const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || '';
+        const screenSize = `${screen.width}x${screen.height}`;
+        const lang = navigator.language || '';
+        const raw = `${ua}||${tz}||${screenSize}||${lang}`;
+        const buf = new TextEncoder().encode(raw);
+        const hashBuffer = await crypto.subtle.digest('SHA-256', buf);
+        const hashArray = Array.from(new Uint8Array(hashBuffer));
+        return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+    }
+    async setupAuthListener() {
+        this.supabase.auth.onAuthStateChange(async (event, session) => {
+            const previousUser = this.currentUser;
+            this.currentUser = session?.user || null;
+            let isPremium = false;
+            if (this.currentUser) {
+                // Only check premium status if user changed or cache is expired
+                const userChanged = !previousUser || previousUser.email !== this.currentUser.email;
+                const cacheExpired = !this.cachedPremiumStatus || (Date.now() - this.premiumStatusCacheTime) > this.STATUS_CACHE_DURATION;
+                if (userChanged || cacheExpired) {
+                    console.log(`🔥 [SUPABASE API] About to call checkPremiumStatus from setupAuthListener (userChanged: ${userChanged}, cacheExpired: ${cacheExpired})`);
+                    isPremium = await this.checkPremiumStatus(this.currentUser.email);
+                    // Cache the result
+                    this.cachedPremiumStatus = isPremium;
+                    this.premiumStatusCacheTime = Date.now();
+                }
+                else {
+                    // Use cached result
+                    isPremium = this.cachedPremiumStatus; // We know it's not null because cacheExpired is false
+                    console.log(`🔍 [CACHE] Using cached premium status from auth listener: ${isPremium}`);
+                }
+            }
+            else {
+                // Clear cache when user logs out
+                this.cachedPremiumStatus = null;
+                this.premiumStatusCacheTime = 0;
+            }
+            // Check if user just signed in for upgrade flow
+            const urlParams = new URLSearchParams(window.location.search);
+            const isUpgradeFlow = urlParams.get('upgrade') === 'true';
+            if (event === 'SIGNED_IN' && !previousUser && this.currentUser && this.config.payment) {
+                // Check if this is an upgrade flow (from anonymous trial)
+                if (isUpgradeFlow) {
+                    if (!isPremium) {
+                        // User signed in for upgrade - redirect to payment immediately
+                        const payment = await this.createPayment();
+                        if (payment?.checkout_url) {
+                            // Clean URL before redirect
+                            window.history.replaceState({}, document.title, window.location.pathname);
+                            window.location.href = payment.checkout_url;
+                        }
+                    }
+                    else {
+                        // User is already premium, just clean URL and close modal
+                        window.history.replaceState({}, document.title, window.location.pathname);
+                        const modal = document.getElementById('download-limiter-paywall');
+                        if (modal) {
+                            modal.classList.remove('show');
+                        }
+                    }
+                }
+            }
+            this.emit('authChanged', { user: this.currentUser, isPremium });
+        });
+        // Get initial auth state
+        const { data: { user } } = await this.supabase.auth.getUser();
+        this.currentUser = user;
+    }
+    async getDownloadCount() {
+        if (!this.userFingerprint)
+            return 0;
+        console.log(`🔥 [SUPABASE API] getDownloadCount called | Time: ${new Date().toISOString()}`);
+        try {
+            const response = await fetch(`${this.config.supabase.url}/functions/v1/check-download-limit`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${this.config.supabase.anonKey}`
+                },
+                body: JSON.stringify({
+                    fingerprint: this.userFingerprint,
+                    app_id: this.config.appId,
+                    action: 'check'
+                })
+            });
+            console.log(`🔥 [SUPABASE API] getDownloadCount response: ${response.status}`);
+            if (response.ok) {
+                const data = await response.json();
+                this.supabaseConnectionFailed = false; // Connection successful
+                return data.current_count || 0;
+            }
+            else {
+                // Handle auth errors (401/403) as connection failures
+                if (response.status === 401 || response.status === 403) {
+                    console.warn(`Supabase authentication failed: ${response.status} - Invalid anon key`);
+                    this.supabaseConnectionFailed = true;
+                }
+            }
+        }
+        catch (error) {
+            this.supabaseConnectionFailed = true; // Mark connection as failed
+            if (this.config.options?.debug) {
+                console.warn('Failed to get server usage count, connection failed:', error);
+            }
+        }
+        // Security: Do not fallback to localStorage when server connection fails
+        // This prevents users from bypassing limits by manipulating localStorage
+        return 0;
+    }
+    async incrementDownloadCount() {
+        if (!this.userFingerprint) {
+            // if (this.config.options?.debug) {
+            //   console.warn('🔍 DEBUG: No userFingerprint available for incrementDownloadCount');
+            // }
+            return 0;
+        }
+        const requestBody = {
+            fingerprint: this.userFingerprint,
+            app_id: this.config.appId,
+            action: 'increment'
+        };
+        console.log(`🔥 [SUPABASE API] incrementDownloadCount called | Time: ${new Date().toISOString()}`);
+        try {
+            const response = await fetch(`${this.config.supabase.url}/functions/v1/check-download-limit`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${this.config.supabase.anonKey}`
+                },
+                body: JSON.stringify(requestBody)
+            });
+            console.log(`🔥 [SUPABASE API] incrementDownloadCount response: ${response.status}`);
+            if (this.config.options?.debug) {
+                //console.log('🔍 DEBUG: Response status:', response.status);
+                if (!response.ok) {
+                    const errorText = await response.text();
+                    console.error('🔍 DEBUG: Error response:', errorText);
+                }
+            }
+            if (response.ok) {
+                const data = await response.json();
+                this.supabaseConnectionFailed = false; // Connection successful
+                return data.new_count || 0;
+            }
+            else {
+                // Handle auth errors (401/403) as connection failures
+                if (response.status === 401 || response.status === 403) {
+                    console.warn(`Supabase authentication failed: ${response.status} - Invalid anon key`);
+                    this.supabaseConnectionFailed = true;
+                }
+            }
+        }
+        catch (error) {
+            this.supabaseConnectionFailed = true; // Mark connection as failed
+            if (this.config.options?.debug) {
+                console.warn('Failed to increment server count, connection failed:', error);
+            }
+        }
+        // Security: Do not fallback to localStorage when server connection fails
+        // This prevents users from bypassing limits by manipulating localStorage
+        return 0;
+    }
+    async checkPremiumStatus(email) {
+        console.log(`🔥 [SUPABASE API] checkPremiumStatus called for email: ${email} | Time: ${new Date().toISOString()}`);
+        try {
+            const response = await fetch(`${this.config.supabase.url}/functions/v1/check-payment-status`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${this.config.supabase.anonKey}`
+                },
+                body: JSON.stringify({
+                    email,
+                    app_id: this.config.appId
+                })
+            });
+            console.log(`🔥 [SUPABASE API] checkPremiumStatus response: ${response.status}`);
+            if (response.ok) {
+                const data = await response.json();
+                return data.status === 'completed';
+            }
+        }
+        catch (error) {
+            if (this.config.options?.debug) {
+                console.warn('Failed to check premium status:', error);
+            }
+        }
+        return false;
+    }
+    getLocalDownloadCount() {
+        const key = `download_count_${this.config.appId}`;
+        const val = parseInt(localStorage.getItem(key) || '0', 10);
+        return isNaN(val) ? 0 : val;
+    }
+    incrementLocalDownloadCount() {
+        const key = `download_count_${this.config.appId}`;
+        const next = this.getLocalDownloadCount() + 1;
+        localStorage.setItem(key, String(next));
+        return next;
+    }
+    handleError(error) {
+        if (this.config.options?.debug) {
+            console.error('Lead Fast Error:', error);
+        }
+        if (this.config.callbacks?.onError) {
+            this.config.callbacks.onError(error);
+        }
+        else {
+            // Default error handling
+            console.error('Lead Fast:', error.message);
+        }
+        this.emit('error', error);
+    }
+    async checkPaymentStatus() {
+        // Check if user returned from payment
+        const urlParams = new URLSearchParams(window.location.search);
+        if (urlParams.get('payment') === 'success') {
+            // Wait for auth to be ready
+            setTimeout(async () => {
+                if (this.currentUser) {
+                    const isPremium = await this.checkPremiumStatus(this.currentUser.email);
+                    if (isPremium) {
+                        this.showSuccess('Payment Successful!', 'Welcome to premium! You now have unlimited usage.');
+                    }
+                    else {
+                        this.showSuccess('Processing Payment', 'Payment is being processed. Please refresh in a few moments.');
+                    }
+                }
+                else {
+                    this.showSuccess('Processing Payment', 'Please wait while we verify your payment...');
+                }
+                // Clean up URL
+                const cleanUrl = window.location.href.split('?')[0];
+                window.history.replaceState({}, document.title, cleanUrl);
+            }, 2000);
+        }
+    }
+}
+// Export types for consumer use
+export * from './types.js';
+//# sourceMappingURL=index.js.map