@moneybar.online/moneybar 5.0.0 → 5.0.1

package/src/index.ts

@@ -1,3428 +0,0 @@
-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',
- *   freeAttemptLimit: 3,
- *   supabase: { url: 'https://xyz.supabase.co', anonKey: 'anon_key' },
- *   payment: { productId: 'prod_xyz' }
- * });
- *
- * // Single button - handles all monetization automatically
- * moneyBar.attachToButton('#action-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 securityKeyFailed: boolean = false; // Track security key validation failures
-  private isLoadingStatus: boolean = false; // Track if we're currently loading status from backend
-  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 security key validation failed
-      if (this.securityKeyFailed) {
-        this.showError(
-          'Invalid Security Key',
-          'Your security key is invalid, expired, or not found. Please check your MoneyBar configuration and ensure you have a valid security_key.'
-        );
-        return;
-      }
-
-      // 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();
-
-        // CRITICAL: Check if security key validation failed
-        // Don't proceed with normal status if there's a security error
-        if (this.securityKeyFailed) {
-          // Return a minimal error status
-          return {
-            currentCount: 0,
-            limit: this.config.freeAttemptLimit,
-            isPremium: false,
-            isAuthenticated: false,
-            remaining: 0
-          };
-        }
-      } 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) {
-          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.freeAttemptLimit,
-        isPremium,
-        isAuthenticated: !!this.currentUser,
-        remaining: Math.max(0, this.config.freeAttemptLimit - 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.freeAttemptLimit,
-        isPremium: false,
-        isAuthenticated: false,
-        remaining: this.config.freeAttemptLimit
-      };
-
-      // 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 payment = this.config.payment?.find(p => p.provider === 'dodo');
-    if (!payment) {
-      throw new Error('No dodo payment provider configured');
-    }
-
-    const requestBody = {
-      email: this.currentUser.email,
-      product_id: payment.productId,
-      mode: payment.mode || 'test',
-      app_id: this.config.appId,
-      return_url: `${window.location.origin}${window.location.pathname}?payment=success`
-    };
-
-    console.log(`🔥 [PAYMENT API] createPayment called for provider: ${payment.provider}, email: ${this.currentUser.email} | Time: ${new Date().toISOString()}`);
-
-    try {
-      // Route to appropriate payment API based on provider
-      let response;
-      if (payment.provider === 'dodo') {
-        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)
-        });
-      } else {
-        throw new Error(`Payment provider '${payment.provider}' is not yet supported`);
-      }
-      console.log(`🔥 [PAYMENT API] createPayment response for ${payment.provider}: ${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.freeAttemptLimit) {
-        console.error(`⚠️ Server returned count (${newCount}) exceeding limit (${this.config.freeAttemptLimit})`);
-        // 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);
-      }
-
-      /* Loading state styles */
-      .lead-fast-loading-status {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-      }
-
-      .lead-fast-spinner {
-        width: 20px;
-        height: 20px;
-        color: #3b82f6;
-      }
-
-      .lead-fast-loading-text {
-        font-size: 14px;
-        color: #6b7280;
-        font-weight: 500;
-      }
-
-      /* 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> {
-    // Get email config - handle both new array format and legacy format
-    let emailConfig;
-    if (this.config.feedback?.email) {
-      // New array format - use first provider (typically resend)
-      if (Array.isArray(this.config.feedback.email)) {
-        emailConfig = this.config.feedback.email[0];
-      } else {
-        // Legacy format fallback
-        emailConfig = this.config.feedback.email as any;
-      }
-    } else if (this.config.email) {
-      // Deprecated legacy email config
-      emailConfig = {
-        provider: 'resend',
-        apiKey: (this.config.email as any).resendApiKey,
-        fromEmail: (this.config.email as any).fromEmail
-      };
-    }
-
-    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();
-
-    // Handle different email providers
-    let response;
-    if (emailConfig.provider === 'resend' || !emailConfig.provider) {
-      response = await fetch('https://api.resend.com/emails', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${emailConfig.apiKey || (emailConfig as any).resendApiKey}`
-        },
-        body: JSON.stringify({
-          from: emailConfig.fromEmail,
-          to: [emailConfig.fromEmail], // Send feedback to yourself
-          subject: `Feedback from ${this.config.appId}`,
-          text: emailBody
-        })
-      });
-    } else {
-      throw new Error(`Unsupported email provider: ${emailConfig.provider}`);
-    }
-
-    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' | 'security_key'): 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',
-      security_key: 'Download disabled: Invalid or missing security key'
-    };
-
-    const statusMessages = {
-      connection: '⚠️ Connection Error - Downloads Disabled',
-      payment: '⚠️ Payment Config Error - Downloads Disabled',
-      security_key: '🔐 Invalid Security Key - Please Update Configuration'
-    };
-
-    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');
-
-    // Check for security key error first (most specific)
-    if (this.securityKeyFailed) {
-      this.disableDownloadButtons('security_key');
-      return;
-    }
-
-    // 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;
-    }
-
-    // Show loading state
-    this.isLoadingStatus = true;
-    this.updateUserSection(null); // Show loading UI
-
-    const status = await this.getDownloadStatus();
-
-    // Clear loading state
-    this.isLoadingStatus = false;
-
-    // CRITICAL: Check again AFTER API call - flag may have been set during getDownloadStatus
-    if (this.securityKeyFailed) {
-      this.disableDownloadButtons('security_key');
-      return;
-    }
-
-    if (this.supabaseConnectionFailed) {
-      this.disableDownloadButtons('connection');
-      return;
-    }
-
-    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 | null): 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;
-    }
-
-    // Show loading state if status is null
-    if (status === null || this.isLoadingStatus) {
-      userSection.innerHTML = `
-        <div class="lead-fast-loading-status">
-          <svg class="lead-fast-spinner" viewBox="0 0 24 24">
-            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="31.4 31.4" stroke-linecap="round">
-              <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/>
-            </circle>
-          </svg>
-          <span class="lead-fast-loading-text">Loading...</span>
-        </div>
-      `;
-      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.freeAttemptLimit !== 'number' || this.config.freeAttemptLimit < 0) {
-      throw new Error('freeAttemptLimit 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 payment = this.config.payment?.find(p => p.provider === 'dodo');
-    if (!payment) {
-      this.paymentConnectionFailed = true;
-      if (this.config.options?.debug) {
-        console.warn('No dodo payment provider configured');
-      }
-      return;
-    }
-    const productId = 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) {
-          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;
-
-    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,
-          security_key: this.config.security_key,
-          action: 'check'
-        })
-      });
-
-      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) {
-          // Try to get the actual error message from response
-          try {
-            const errorData = await response.json();
-            const errorMsg = errorData.error || errorData.message || 'Authentication failed';
-
-            // Check if it's a security key validation error
-            if (errorMsg.toLowerCase().includes('security key')) {
-              console.error(`❌ Security Key Validation Failed [check-download-limit]: ${errorMsg}`);
-              console.error(`💡 Backend Function: check-download-limit`);
-              console.error(`💡 Please check your security_key in the MoneyBar configuration`);
-              this.securityKeyFailed = true; // Set security key error flag
-              this.supabaseConnectionFailed = true; // Also mark connection as failed to disable downloads
-            } else {
-              console.warn(`Supabase authentication failed [check-download-limit]: ${response.status} - ${errorMsg}`);
-              this.supabaseConnectionFailed = true;
-            }
-          } catch (e) {
-            console.warn(`Supabase authentication failed: ${response.status} - Unable to parse error`);
-            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,
-      security_key: this.config.security_key,
-      action: 'increment'
-    };
-
-    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)
-      });
-
-      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) {
-          // Try to get the actual error message from response
-          try {
-            const errorData = await response.json();
-            const errorMsg = errorData.error || errorData.message || 'Authentication failed';
-
-            // Check if it's a security key validation error
-            if (errorMsg.toLowerCase().includes('security key')) {
-              console.error(`❌ Security Key Validation Failed [check-download-limit]: ${errorMsg}`);
-              console.error(`💡 Backend Function: check-download-limit`);
-              console.error(`💡 Please check your security_key in the MoneyBar configuration`);
-              this.securityKeyFailed = true; // Set security key error flag
-              this.supabaseConnectionFailed = true; // Also mark connection as failed to disable downloads
-            } else {
-              console.warn(`Supabase authentication failed [check-download-limit]: ${response.status} - ${errorMsg}`);
-              this.supabaseConnectionFailed = true;
-            }
-          } catch (e) {
-            console.warn(`Supabase authentication failed: ${response.status} - Unable to parse error`);
-            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> {
-    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
-        })
-      });
-
-      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';