@moneybar.online/moneybar 3.1.0

package/src/index.ts

@@ -0,0 +1,3273 @@
+import { MoneyBarConfig, DownloadStatus, MoneyBarEvents, UserContext } from './types.js';
+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 {
+  private config: MoneyBarConfig;
+  private supabase: any;
+  private currentUser: any = null;
+  private userFingerprint: string | null = null;
+  private eventListeners: Map<keyof MoneyBarEvents, Function[]> = new Map();
+  private supabaseConnectionFailed: boolean = false;
+  private paymentConnectionFailed: boolean = false;
+  private cachedStatus: DownloadStatus | null = null;
+  private statusCacheTime: number = 0;
+  private readonly STATUS_CACHE_DURATION = 5000; // 5 seconds cache
+  private initializationPromise: Promise<DownloadStatus> | null = null;
+  private cachedPremiumStatus: boolean | null = null;
+  private premiumStatusCacheTime: number = 0;
+
+  private mergeConfigs(config?: MoneyBarConfig): MoneyBarConfig {
+    // Try to get config from window.APP_CONFIG
+    const windowConfig = typeof window !== 'undefined' ? (window as any).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 as MoneyBarConfig;
+    }
+
+    // If no window config, use constructor config entirely
+    if (!windowConfig) {
+      return config;
+    }
+
+    // Merge configs: constructor config takes precedence over window config
+    return {
+      ...windowConfig,
+      ...config
+    } as MoneyBarConfig;
+  }
+
+  constructor(config?: MoneyBarConfig) {
+    // 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
+   */
+  public async handleDownload(): Promise<void> {
+    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 as Error);
+    }
+  }
+
+  /**
+   * Get current download status for the user
+   */
+  public async getDownloadStatus(forceRefresh: boolean = false): Promise<DownloadStatus> {
+    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;
+    }
+  }
+
+  private async fetchFreshStatus(forceRefresh: boolean): Promise<DownloadStatus> {
+    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: DownloadStatus = {
+        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 as Error);
+      // Return safe defaults on error
+      const errorStatus: DownloadStatus = {
+        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
+   */
+  private async getUserContext(): Promise<UserContext> {
+    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
+   */
+  public async signIn(): Promise<void> {
+    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 as Error);
+    }
+  }
+
+  /**
+   * Sign out current user
+   */
+  public async signOut(): Promise<void> {
+    try {
+      await this.supabase.auth.signOut();
+      this.currentUser = null;
+      this.emit('authChanged', { user: null, isPremium: false });
+    } catch (error) {
+      this.handleError(error as Error);
+    }
+  }
+
+  /**
+   * Create payment for premium upgrade
+   */
+  public async createPayment(): Promise<{ checkout_url: string } | null> {
+    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 as Error);
+      return null;
+    }
+  }
+
+  /**
+   * Simplified API: Attach download limiting to a single button
+   * Handles all UI logic automatically (paywall, auth, payment flow)
+   */
+  public attachToButton(selector: string, downloadCallback: (() => void) | ((userContext: UserContext) => void)): void {
+    //console.log('🎨 [THEME DEBUG] attachToButton called');
+    //console.log('🎨 [THEME DEBUG] Full config:', JSON.stringify(this.config, null, 2));
+
+    const button = document.querySelector(selector) as HTMLButtonElement;
+    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
+   */
+  public attachToButtons(config: {
+    buttons: Array<{
+      selector: string;
+      downloadCallback: (() => void) | ((userContext: UserContext) => void);
+      isPremium?: boolean;
+      premiumLabel?: string;
+    }>;
+  }): void {
+    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) as HTMLButtonElement;
+      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();
+  }
+
+  private async handleButtonClick(downloadCallback: (() => void) | ((userContext: UserContext) => void)): Promise<void> {
+    // Prevent rapid clicks/race conditions
+    const button = document.querySelector('[data-leadfast-attached="true"]') as HTMLButtonElement;
+    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';
+      }
+    }
+  }
+
+  private async handleButtonClickInternal(downloadCallback: (() => void) | ((userContext: UserContext) => void)): Promise<void> {
+    // 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 as (userContext: UserContext) => void)(userContext);
+      } else {
+        // Legacy callback with no parameters
+        (downloadCallback as () => void)();
+      }
+      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 as (userContext: UserContext) => void)(userContext);
+      } else {
+        // Legacy callback with no parameters
+        (downloadCallback as () => void)();
+      }
+
+      // 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`);
+  }
+
+
+  private injectBaseStyles(): void {
+    //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);
+
+  }
+
+  private injectDaisyUI(): void {
+    //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();
+    }
+  }
+
+  private createPaywallModal(): void {
+    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.
+  }
+
+  private createSuccessModal(): void {
+    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');
+      }
+    });
+  }
+
+  private showFeedbackForm(): void {
+    // 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`);
+    }
+  }
+
+  private createFeedbackModal(): void {
+    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') as HTMLFormElement;
+    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');
+      }
+    });
+  }
+
+  private async submitFeedback(form: HTMLFormElement): Promise<void> {
+    const formData = new FormData(form);
+    const reason = formData.get('reason') as string;
+    const details = formData.get('details') as string;
+    const email = formData.get('email') as string;
+
+    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.');
+    }
+  }
+
+  private async sendFeedbackEmail(feedbackData: any): Promise<void> {
+    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}`);
+    }
+  }
+
+  private createAuthUI(): void {
+    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);
+  }
+
+  private createStatusDisplay(): void {
+    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);
+  }
+
+  private createGlobalStatusDisplay(): void {
+    this.createStatusDisplay();
+  }
+
+
+  private showPaywallInstant(status: DownloadStatus): void {
+    // 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') as HTMLElement;
+      const paymentSection = modal.querySelector('#download-limiter-payment-section') as HTMLElement;
+
+      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`);
+    }
+  }
+
+  private async showPaywall(): Promise<void> {
+    // Get current status if not cached
+    const status = await this.getDownloadStatus();
+    this.showPaywallInstant(status);
+  }
+
+  private showSingleUpgradeFlow(modal: HTMLElement): void {
+    // Create single upgrade button that handles both login and payment
+    let upgradeContainer = modal.querySelector('.single-upgrade-container') as HTMLElement;
+
+    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.');
+        }
+      });
+    }
+  }
+
+
+  private showSuccess(title: string, message: string): void {
+    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
+    }
+  }
+
+  private showError(title: string, message: string): void {
+    // 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);
+      }
+    });
+  }
+
+  private showConnectionError(): void {
+    this.showError(
+      'Connection Error',
+      'Server connection required for download verification. Please check your configuration and try again.'
+    );
+  }
+
+  private showPaymentConfigError(): void {
+    this.showError(
+      'Payment Configuration Error',
+      'Payment system is not properly configured. Please contact support.'
+    );
+  }
+
+  private disableDownloadButtons(errorType: 'connection' | 'payment'): void {
+    // 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 as HTMLButtonElement;
+      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>
+      `;
+    }
+  }
+
+  private async updateStatusDisplays(): Promise<void> {
+    //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);
+  }
+
+  private createTitleBar(): void {
+    //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>
+    `;
+  }
+
+  private updateUserSection(status: DownloadStatus): void {
+    //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') as HTMLElement;
+      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>
+      `;
+    }
+  }
+
+  private setupUIUpdates(): void {
+    // 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();
+  }
+
+  private updatePaywallDisplay(): void {
+    const modal = document.getElementById('download-limiter-paywall');
+    if (!modal) return;
+
+    const authSection = modal.querySelector('#download-limiter-auth-section') as HTMLElement;
+    const paymentSection = modal.querySelector('#download-limiter-payment-section') as HTMLElement;
+
+    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
+   */
+  public on<K extends keyof MoneyBarEvents>(
+    event: K,
+    listener: (data: MoneyBarEvents[K]) => void
+  ): void {
+    if (!this.eventListeners.has(event)) {
+      this.eventListeners.set(event, []);
+    }
+    this.eventListeners.get(event)!.push(listener);
+  }
+
+  public off<K extends keyof MoneyBarEvents>(
+    event: K,
+    listener: (data: MoneyBarEvents[K]) => void
+  ): void {
+    const listeners = this.eventListeners.get(event);
+    if (listeners) {
+      const index = listeners.indexOf(listener);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    }
+  }
+
+  private emit<K extends keyof MoneyBarEvents>(
+    event: K,
+    data: MoneyBarEvents[K]
+  ): void {
+    const listeners = this.eventListeners.get(event);
+    if (listeners) {
+      listeners.forEach(listener => {
+        try {
+          listener(data);
+        } catch (error) {
+          console.error(`Error in ${event} listener:`, error);
+        }
+      });
+    }
+  }
+
+  private validateConfig(): void {
+    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');
+    }
+  }
+
+  private async initializeSupabase(): Promise<void> {
+    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;
+    }
+  }
+
+  private async initializePayment(): Promise<void> {
+    // 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;
+  }
+
+  private async initializeFingerprint(): Promise<void> {
+    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);
+      }
+    }
+  }
+
+  private async generateFingerprint(): Promise<string> {
+    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('');
+  }
+
+  private async setupAuthListener(): Promise<void> {
+    this.supabase.auth.onAuthStateChange(async (event: string, session: any) => {
+      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;
+  }
+
+  private async getDownloadCount(): Promise<number> {
+    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;
+  }
+
+  private async incrementDownloadCount(): Promise<number> {
+    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;
+  }
+
+  private async checkPremiumStatus(email: string): Promise<boolean> {
+    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;
+  }
+
+  private getLocalDownloadCount(): number {
+    const key = `download_count_${this.config.appId}`;
+    const val = parseInt(localStorage.getItem(key) || '0', 10);
+    return isNaN(val) ? 0 : val;
+  }
+
+  private incrementLocalDownloadCount(): number {
+    const key = `download_count_${this.config.appId}`;
+    const next = this.getLocalDownloadCount() + 1;
+    localStorage.setItem(key, String(next));
+    return next;
+  }
+
+  private handleError(error: Error): void {
+    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);
+  }
+
+  private async checkPaymentStatus(): Promise<void> {
+    // 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';