diff --git "a/dashboard/index.html" "b/dashboard/index.html"
new file mode 100644--- /dev/null
+++ "b/dashboard/index.html"
@@ -0,0 +1,2887 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Skrapyx | Neural Analysis</title>
+    <!-- Tailwind v4 Browser compiler to render dynamic layout classes instantly -->
+    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://js.stripe.com/v3/"></script>
+
+    <style>
+        #authLanding { background: #091116; z-index: 9999; }
+        .neural-bg { display: none; }
+        .glass-card { background: #0f1720; border: 1px solid #1a2b3b; }
+
+        @keyframes fade-in-up {
+            from { opacity: 0; transform: translateY(8px); }
+            to   { opacity: 1; transform: translateY(0); }
+        }
+        .fade-in-up { animation: fade-in-up 0.5s ease-out forwards; }
+
+        @keyframes slide-up {
+            from { opacity: 0; transform: translateY(6px) scale(0.99); }
+            to   { opacity: 1; transform: translateY(0) scale(1); }
+        }
+        .animate-popover { animation: slide-up 0.2s ease-out forwards; }
+
+        .profile-popover {
+            background: #0f1720;
+            border: 1px solid #1a2b3b;
+            box-shadow: 0 20px 50px rgba(0,0,0,0.8);
+        }
+        .popover-item { transition: background 0.15s; }
+        .popover-item:hover { background: rgba(255,255,255,0.04); }
+
+        .sidebar {
+            width: 240px;
+            flex-shrink: 0;
+            background: #091116;
+            border-right: 1px solid #1a2b3b;
+        }
+
+        #mainHeader { padding: 0 16px; display: flex; align-items: center; justify-content: space-between; }
+
+        .offer-pill {
+            background: transparent;
+            border: 1px solid rgba(241,66,71,0.25);
+            padding: 4px 10px; border-radius: 9999px;
+            display: flex; align-items: center; gap: 6px;
+            font-size: 10px; font-weight: 600;
+            color: #f14247; cursor: pointer; transition: all 0.2s;
+        }
+        .offer-pill:hover { background: rgba(241,66,71,0.08); }
+
+        .header-icon-btn {
+            width: 32px; height: 32px; display: flex;
+            align-items: center; justify-content: center;
+            border-radius: 7px; color: #52525b; transition: all 0.15s;
+        }
+        .header-icon-btn:hover { background: #1a2b3b; color: #d4d4d8; }
+
+        .profile-modal-input {
+            background: #0d161d; border: 1px solid #1a2b3b;
+            border-radius: 8px; transition: border-color 0.2s;
+        }
+        .profile-modal-input:focus-within { border-color: #f14247; }
+
+        .sora-btn-ghost { background: transparent; border: 1px solid #1a2b3b; color: #d4d4d8; border-radius: 8px; }
+        .sora-btn-ghost:hover { background: #1a2b3b; }
+        .sora-btn-primary { background: #f14247; color: white; border-radius: 8px; }
+        .sora-btn-primary:hover { background: #ff5c61; }
+
+        .settings-category-btn {
+            display: flex; align-items: center; gap: 10px; width: 100%;
+            padding: 8px 12px; border-radius: 8px;
+            font-size: 11px; font-weight: 500; color: #71717a; transition: all 0.15s;
+        }
+        .settings-category-btn:hover { background: #0d161d; color: #d4d4d8; }
+        .settings-category-btn.active { background: #1a2b3b; color: white; }
+
+        .settings-row {
+            display: flex; justify-content: space-between; align-items: center;
+            padding: 14px 0; border-bottom: 1px solid #1a2b3b;
+        }
+        .settings-row:last-child { border-bottom: none; }
+
+        .settings-select {
+            background: #0d161d; border: 1px solid #1a2b3b;
+            border-radius: 6px; color: #d4d4d8; padding: 5px 10px;
+            font-size: 11px; font-weight: 500; cursor: pointer; outline: none;
+        }
+        .settings-select:hover { border-color: #f14247; }
+
+        @keyframes shimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        .shimmer-wrapper { position: relative; overflow: hidden; background: #0d161d; border-radius: 8px; }
+        .shimmer-bg {
+            position: absolute; inset: 0;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
+            animation: shimmer 1.5s infinite;
+        }
+    </style>
+    </head>
+<body class="h-screen flex antialiased overflow-hidden bg-[#091116] text-zinc-400">
+
+    <!-- Auth Landing Screen -->
+    <div id="authLanding" class="fixed inset-0 flex items-center justify-center">
+        <div class="relative z-10 w-full max-w-xs px-8 text-center">
+            <div class="w-8 h-8 bg-[#f14247] rounded-lg mx-auto mb-6 flex items-center justify-center">
+                <i data-lucide="zap" width="16" height="16" stroke-width="2.5" class="text-white"></i>
+            </div>
+            <h1 class="text-lg font-semibold text-white mb-2 tracking-tight">Skrapyx</h1>
+            <p class="text-zinc-600 text-sm mb-8">App store intelligence platform</p>
+
+            <div id="sessionStatus" class="flex flex-col items-center gap-3 py-4">
+                <span class="text-[11px] font-medium text-zinc-500">Verifying session</span>
+            </div>
+
+            <button id="loginBtn" onclick="signInWithGoogle()" class="hidden w-full bg-[#111] border border-zinc-800 hover:border-zinc-600 py-3 rounded-xl flex items-center justify-center gap-3 transition-colors">
+                <img src="https://fonts.gstatic.com/s/i/productlogos/googleg/v6/24px.svg" class="w-4 h-4">
+                <span class="text-sm font-medium text-zinc-300">Continue with Google</span>
+            </button>
+        </div>
+    </div>
+
+    <!-- Main Dashboard Application Wrapper -->
+    <div id="appDashboard" class="hidden h-screen w-full flex opacity-0 transition-opacity duration-500">
+        <aside class="sidebar h-full flex flex-col py-4 px-3 z-50 overflow-hidden">
+            <!-- Logo -->
+            <div class="flex items-center gap-2.5 mb-6 px-2">
+                <div class="w-6 h-6 bg-[#f14247] rounded-md flex items-center justify-center shrink-0">
+                    <i data-lucide="zap" width="16" height="16" stroke-width="2.5" class="text-white shrink-0"></i>
+                </div>
+                <span class="text-[12px] font-semibold text-white tracking-tight">Skrapyx</span>
+            </div>
+
+            <!-- Actions -->
+            <div class="flex flex-col gap-1 mb-4 px-1">
+                <div class="w-full h-8 flex items-center gap-3 px-2.5 rounded-lg bg-zinc-900/30 border border-zinc-800/40 focus-within:border-[#f14247]/50 transition-colors">
+                    <i data-lucide="search" width="16" height="16" stroke-width="2.5" class="text-zinc-600 shrink-0"></i>
+                    <input type="text" placeholder="Search" class="bg-transparent border-none outline-none text-[11px] text-zinc-300 placeholder:text-zinc-700 w-full">
+                </div>
+
+                <button onclick="openProjectModal()" class="w-full h-8 flex items-center gap-3 px-2.5 text-zinc-400 rounded-lg text-[11px] font-medium hover:bg-zinc-900/50 hover:text-zinc-200 transition-colors">
+                    <i data-lucide="plus" width="16" height="16" stroke-width="2.5" class="shrink-0"></i>
+                    <span>New analysis</span>
+                </button>
+
+                <button onclick="toggleBattleMode()" id="battleBtn" class="w-full h-8 flex items-center gap-3 px-2.5 text-zinc-500 rounded-lg text-[11px] font-medium hover:bg-zinc-900/50 hover:text-zinc-200 transition-colors">
+                    <i data-lucide="swords" width="16" height="16" stroke-width="2.5" class="shrink-0"></i>
+                    <span>Market battle</span>
+                </button>
+            </div>
+
+            <div class="h-px bg-zinc-900 mx-1 mb-3"></div>
+
+            <div class="flex-1 overflow-y-auto scrollbar-none px-1" id="projectList"></div>
+
+            <div class="mt-auto pt-3 border-t border-zinc-900 px-1">
+                <!-- Profile Popover -->
+                <div id="profilePopover" class="hidden absolute bottom-[72px] left-[-8px] z-[100] profile-popover rounded-xl p-1 animate-popover w-[240px]">
+                    <!-- User Header -->
+                    <div class="flex items-center gap-2 p-2 rounded-lg popover-item cursor-pointer" onclick="openEditProfile()">
+                        <img id="popoverAvatar" src="" class="w-6 h-6 rounded-full object-cover hidden border border-zinc-800">
+                        <div id="popoverInitials" class="w-6 h-6 rounded-full bg-zinc-800 flex items-center justify-center text-[9px] font-semibold text-white">RU</div>
+                        <div class="flex-1 min-w-0">
+                            <div class="flex items-center gap-1.5">
+                                <span id="popoverBadge" class="hidden text-[7px] font-bold bg-[#f14247] text-white px-1 py-0.5 rounded leading-none shrink-0">PRO</span>
+                                <p id="popoverName" class="text-[11px] font-medium text-white truncate">User</p>
+                            </div>
+                            <p id="popoverHandle" class="text-[9px] font-bold text-zinc-500 uppercase tracking-widest mt-0.5">@operator</p>
+                        </div>
+                        <i data-lucide="chevron-right" width="16" height="16" stroke-width="2.5" class="text-zinc-700 shrink-0"></i>
+                    </div>
+
+                    <div id="popoverSubscriptionSection" class="p-1 hidden">
+                        <button id="popoverUpgradeBtn" onclick="openSubscriptionModal()" class="w-full py-2 px-3 bg-[#f14247]/10 border border-[#f14247]/20 rounded-lg text-[10px] font-medium text-[#f14247] hover:bg-[#f14247]/15 transition-colors flex items-center justify-center gap-1.5">
+                            <i data-lucide="zap" width="16" height="16" stroke-width="2.5" class="shrink-0"></i> Upgrade to Pro
+                        </button>
+                        <button id="popoverManageBtn" onclick="handlePortal(this)" class="w-full py-2 px-3 bg-zinc-900 border border-zinc-800 rounded-lg text-[10px] font-medium text-zinc-400 hover:text-zinc-200 transition-colors flex items-center justify-center gap-1.5 hidden">
+                            <i data-lucide="credit-card" width="16" height="16" stroke-width="2.5"></i> Manage plan
+                        </button>
+                    </div>
+
+                    <div class="h-px bg-zinc-800 mx-1 my-1"></div>
+
+                    <div class="space-y-0.5">
+                        <button onclick="openSettings('general')" class="w-full flex items-center gap-3 px-2.5 py-1.5 rounded-lg popover-item text-zinc-400 hover:text-zinc-100">
+                            <i data-lucide="settings" width="16" height="16" stroke-width="2.5" class="shrink-0"></i>
+                            <span class="text-[11px] font-medium">Settings</span>
+                        </button>
+                        <button onclick="signOutUser()" class="w-full flex items-center gap-3 px-2.5 py-1.5 rounded-lg popover-item text-zinc-500 hover:text-red-400">
+                            <i data-lucide="log-out" width="16" height="16" stroke-width="2.5" class="shrink-0"></i>
+                            <span class="text-[11px] font-medium">Sign out</span>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- User pill -->
+                <div id="authContainer" class="flex items-center gap-2.5 px-2 py-2 rounded-lg hover:bg-zinc-900 transition-colors cursor-pointer" onclick="handleAuthClick()">
+                    <div class="relative shrink-0">
+                        <img id="userAvatarImg" src="" class="w-6 h-6 rounded-full object-cover hidden border border-zinc-800">
+                        <div id="userAvatar" class="w-6 h-6 rounded-full bg-zinc-800 flex items-center justify-center text-[9px] font-semibold text-white">RU</div>
+                        <div class="absolute -bottom-0.5 -right-0.5 w-2 h-2 bg-[#f14247] rounded-full border-2 border-[#091116]"></div>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center gap-1.5">
+                            <span id="nameBadge" class="hidden text-[7px] font-bold bg-[#f14247] text-white px-1 py-0.5 rounded leading-none">PRO</span>
+                            <p id="userName" class="text-[11px] font-medium text-zinc-300 truncate">Sign in</p>
+                        </div>
+                        <p id="userRole" class="text-[9px] text-zinc-600 truncate">credits: 0</p>
+                    </div>
+                    <i id="profileChevron" data-lucide="more-horizontal" width="16" height="16" stroke-width="2.5" class="text-zinc-700 shrink-0"></i>
+                </div>
+            </div>
+        </aside>
+
+    <!-- Main Content -->
+
+
+    <main class="flex-1 flex flex-col relative overflow-hidden bg-[#091116]">
+        
+        <!-- Scrollable Content Area -->
+        <div class="flex-1 overflow-y-auto scrollbar-none">
+
+        <!-- App Meta Header -->
+        <div id="mainHeader" class="relative opacity-0 transition-all duration-500 px-8 py-6 border-b border-zinc-900">
+            <div class="flex items-center justify-between gap-4">
+                <div class="flex items-center gap-4 min-w-0">
+                    <button onclick="toggleAppDropdown()" class="flex items-center gap-4 text-left group">
+                        <div class="relative shrink-0">
+                            <img id="appIconImg" src="" alt="" class="hidden w-10 h-10 rounded-xl border border-zinc-800 object-cover">
+                            <div id="appIconPlaceholder" class="w-10 h-10 rounded-xl bg-zinc-900 border border-zinc-800 flex items-center justify-center">
+                                <i data-lucide="box" width="16" height="16" stroke-width="2.5" class="text-zinc-700 shrink-0"></i>
+                            </div>
+                        </div>
+                        <div class="flex flex-col gap-1 min-w-0">
+                            <div class="flex items-center gap-2">
+                                <h1 id="currentAppName" class="text-sm font-semibold text-white tracking-tight truncate group-hover:text-[#f14247] transition-colors">—</h1>
+                                <i data-lucide="chevron-down" width="16" height="16" stroke-width="2.5" class="text-zinc-600 group-hover:text-zinc-400 shrink-0"></i>
+                                <span id="metaLogs" class="text-[10px] text-zinc-600"></span>
+                            </div>
+                            <div class="flex items-center gap-2 flex-wrap text-zinc-500 text-[11px]">
+                                <span id="metaDeveloper" class="hidden truncate max-w-[200px]"></span>
+                                <span id="metaSep1" class="hidden text-zinc-800">·</span>
+                                <span id="metaVersion" class="hidden"></span>
+                            </div>
+                        </div>
+                    </button>
+                    
+                    <!-- App Header Dropdown -->
+                    <div id="appHeaderDropdown" class="hidden absolute top-20 left-10 z-[100] profile-popover rounded-xl p-1 animate-popover w-[240px]">
+                        <div class="p-2 border-b border-zinc-800/50 mb-1">
+                            <p class="text-[10px] font-black text-zinc-500 uppercase tracking-widest">Switch Project</p>
+                        </div>
+                        <div id="dropdownProjectList" class="max-h-[300px] overflow-y-auto scrollbar-none space-y-0.5">
+                            <!-- Injected by JS -->
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="flex items-center gap-3 shrink-0">
+                    <span id="metaDate" class="text-[10px] text-zinc-600 uppercase tracking-widest"></span>
+                    <a id="storeLink" href="#" target="_blank" rel="noopener"
+                       class="hidden w-8 h-8 rounded-lg bg-zinc-900 border border-zinc-800 flex items-center justify-center text-zinc-500 hover:text-zinc-200 transition-colors"
+                       title="Open on Store">
+                        <i data-lucide="external-link" width="16" height="16" stroke-width="2.5"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Dynamic Content Section -->
+        <div id="contentWrapper" class="opacity-0 transition-opacity duration-700 relative px-10 py-10 space-y-12">
+            
+            <!-- App Description -->
+            <div id="appDescriptionSection" class="hidden animate-in fade-in slide-in-from-top-2 duration-500">
+                <h3 class="text-[11px] font-medium text-zinc-500 mb-3 flex items-center gap-2">
+                    <span class="w-1.5 h-1.5 rounded-full bg-[#f14247]"></span> 
+                    Application Context
+                </h3>
+                <div class="card p-6 bg-[#0f1720]">
+                    <p id="appDescriptionText" class="text-zinc-400 text-sm leading-relaxed font-medium line-clamp-3 transition-all duration-500"></p>
+                    <button id="toggleDescBtn" onclick="toggleFullDescription()" class="mt-4 text-[10px] font-semibold text-zinc-500 hover:text-zinc-200 transition-colors flex items-center gap-1.5">
+                        <span>Read full context</span>
+                        <i data-lucide="chevron-down" width="16" height="16" stroke-width="2.5"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Screenshots Gallery -->
+            <div id="screenshotsSection" class="hidden animate-in fade-in slide-in-from-top-2 duration-500">
+                <h3 class="text-[11px] font-medium text-zinc-500 mb-3 flex items-center gap-2">
+                    <span class="w-1.5 h-1.5 rounded-full bg-[#f14247]"></span>
+                    Store Screenshots
+                </h3>
+                <div id="screenshotsRow" class="flex gap-3 overflow-x-auto scrollbar-none pb-2">
+                    <!-- injected by JS -->
+                </div>
+            </div>
+
+            <!-- Intelligence Core: Logic Cross-Analysis -->
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                <!-- Neural Executive Synthesis -->
+                <div class="col-span-1 lg:col-span-3">
+                    <h3 class="text-[11px] font-medium text-[#f14247] mb-3 flex items-center gap-2">
+                        <i data-lucide="brain-circuit" class="w-3.5 h-3.5"></i>
+                        <span>Neural Executive Synthesis</span>
+                    </h3>
+                    <div class="card p-8 md:p-10 bg-[#0f1720] border-[#f14247]/20">
+                        <p id="neuralBriefText" class="text-zinc-100 text-lg md:text-xl font-medium leading-relaxed italic tracking-tight opacity-0 transition-opacity duration-1000">Neural synthesis initializing...</p>
+                    </div>
+                </div>
+
+                <!-- Qwen AI Overview -->
+                <div class="lg:col-span-2 relative">
+                    <h3 class="text-[11px] font-medium text-zinc-500 mb-3 flex items-center gap-2">
+                        <span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> 
+                        Qwen AI Structural Breakdown
+                    </h3>
+                    <div id="overviewContainer" class="card p-8 h-[calc(100%-36px)] bg-[#0f1720] flex flex-col relative overflow-hidden group">
+                        <p class="text-[12px] text-zinc-500 font-medium italic">General overview not available.</p>
+                    </div>
+                </div>
+
+                <!-- Sentiment Breakdown -->
+                <div class="relative">
+                    <h3 class="text-[11px] font-medium text-zinc-500 mb-3 flex items-center gap-2">
+                        <span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span> 
+                        Sentiment Analysis
+                    </h3>
+                    <div class="card p-6 h-[calc(100%-36px)] bg-[#0f1720] flex items-center justify-center flex-col relative overflow-hidden">
+                        <canvas id="distributionChart" class="max-h-[140px] relative z-10 mb-6"></canvas>
+                        <div id="distributionLegend" class="w-full flex justify-between text-[10px] font-medium text-zinc-500 relative z-10 px-4"></div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Global Intelligence: Timeline -->
+            <div class="grid grid-cols-1 gap-12 pt-6">
+                <!-- Sentiment Timeline -->
+                <div class="space-y-4">
+                     <h3 class="text-[11px] font-medium text-zinc-500 flex items-center gap-4">
+                        Sentiment Trajectory Matrix
+                        <div id="versionStats" class="flex gap-2"></div>
+                     </h3>
+                     <div class="card p-6 bg-[#0f1720]">
+                        <div class="h-[300px] w-full relative">
+                            <canvas id="sentimentChart"></canvas>
+                        </div>
+                        <div id="versionRoad" class="mt-4 flex justify-between px-6 opacity-20 pointer-events-none"></div>
+                     </div>
+                </div>
+            </div>
+
+            <!-- Data Table Section -->
+            <div class="space-y-4 pb-20 pt-8">
+                  <div class="flex items-center justify-between">
+                    <h3 class="text-[11px] font-medium text-zinc-500 flex items-center gap-2">
+                        <span class="w-1.5 h-1.5 rounded-full bg-zinc-600"></span>
+                        Raw Intelligence Logs
+                    </h3>
+                    <button onclick="exportReviewsToCSV()" class="px-4 py-2 bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 rounded-lg text-[10px] font-semibold text-zinc-300 transition-all flex items-center gap-2">
+                        <i data-lucide="download" width="16" height="16" stroke-width="2.5"></i>
+                        Export CSV
+                    </button>
+                  </div>
+                 
+                 <div class="card bg-[#0a0a0a] overflow-hidden">
+                    <table class="w-full text-left border-collapse">
+                        <thead class="bg-zinc-900/50 text-[10px] font-semibold text-zinc-500 uppercase tracking-wider border-b border-zinc-800">
+                            <tr>
+                                <th class="py-4 pl-8">Profile</th>
+                                <th class="py-4 pl-6">Transcript</th>
+                                <th class="py-4 text-center w-24">Vector</th>
+                                <th class="py-4 text-center w-32">Resonance</th>
+                                <th class="py-4 pr-8 text-right w-44">Timestamp</th>
+                            </tr>
+                        </thead>
+                        <tbody id="tableBody" class="divide-y divide-zinc-900"></tbody>
+                    </table>
+                    <div id="paginationFooter" class="py-6 flex items-center justify-center bg-zinc-900/10 border-t border-zinc-900">
+                        <button onclick="loadNextPage()" id="loadMoreBtn" class="px-6 py-3 bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 rounded-xl text-[11px] font-semibold text-zinc-300 hover:text-white transition-all flex items-center gap-2">
+                            <span>Parse next sequence</span>
+                            <i data-lucide="arrow-down" width="16" height="16" stroke-width="2.5"></i>
+                        </button>
+                    </div>
+        </div><!-- End Scrollable Content Area -->
+
+        <!-- Empty State -->
+        <div id="emptyState" class="absolute inset-0 flex items-center justify-center flex-col p-6 text-center z-30 transition-all duration-700 pointer-events-none">
+            <div id="emptyStateContent" class="flex flex-col items-center">
+                <i data-lucide="zap" size="32" class="text-zinc-800 mb-4"></i>
+                <p class="text-[11px] font-medium text-zinc-800 tracking-[0.2em]">Intelligence Ready</p>
+            </div>
+        </div>
+    </main>
+
+    <!-- Modal: Search & Project Discovery -->
+    <div id="scanModal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-6">
+        <div class="card w-full max-w-xl bg-[#0c0c0c] p-0 overflow-hidden flex flex-col max-h-[85vh]">
+            <div class="p-8 border-b border-zinc-900 bg-zinc-900/10">
+                <div class="flex items-center justify-between mb-8">
+                    <h3 class="text-lg font-semibold text-white tracking-tight">Intelligence discovery</h3>
+                    <button onclick="closeModal()" class="text-zinc-600 hover:text-white transition-colors">
+                        <i data-lucide="x" size="20"></i>
+                    </button>
+                </div>
+                <div class="relative group">
+                    <i data-lucide="search" class="absolute left-5 top-1/2 -translate-y-1/2 text-zinc-600" width="16" height="16" stroke-width="2.5"></i>
+                    <input id="appSearchInput" type="text" onkeyup="handleSearch()" placeholder="Search app name or bundle ID..." 
+                           class="w-full bg-zinc-900/50 border border-zinc-800 rounded-xl py-4 pl-12 pr-12 text-[13px] text-zinc-200 outline-none focus:border-zinc-700 transition-colors placeholder:text-zinc-700">
+                    <div id="searchLoading" class="hidden absolute right-5 top-1/2 -translate-y-1/2">
+                        <div class="w-4 h-4 border-2 border-zinc-800 border-t-[#f14247] rounded-full animate-spin"></div>
+                    </div>
+                </div>
+                <div class="flex items-center gap-3 mt-6">
+                    <button id="searchModeGP" onclick="setSearchMode('google')" class="flex-1 py-3 rounded-xl text-[10px] font-semibold uppercase tracking-wider bg-[#f14247]/5 text-[#f14247] border border-[#f14247]/10 active-mode flex items-center justify-center gap-2">
+                        <img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_Play_2022_icon.svg" class="w-3.5 h-3.5">
+                        Google Play
+                    </button>
+                    <button id="searchModeAS" onclick="setSearchMode('apple')" class="flex-1 py-3 rounded-xl text-[10px] font-semibold uppercase tracking-wider bg-zinc-900 text-zinc-500 border border-zinc-800 flex items-center justify-center gap-2">
+                        <img src="https://upload.wikimedia.org/wikipedia/commons/6/67/App_Store_%28iOS%29.svg" class="w-3.5 h-3.5">
+                        App Store
+                    </button>
+                    <button id="searchModeIdea" onclick="setSearchMode('idea')" class="flex-1 py-3 rounded-xl text-[10px] font-semibold uppercase tracking-wider bg-zinc-900 text-zinc-500 border border-zinc-800 flex items-center justify-center gap-2">
+                        <i data-lucide="brain-circuit" width="14" height="14"></i>
+                        Describe Idea
+                    </button>
+                </div>
+            </div>
+            
+            <div id="searchResults" class="flex-1 overflow-y-auto p-4 space-y-1.5 scrollbar-none min-h-[300px]">
+                <div class="h-full flex flex-col items-center justify-center text-zinc-800 py-12">
+                    <i data-lucide="compass" size="40" class="mb-4 opacity-10"></i>
+                    <p class="text-[11px] font-medium uppercase tracking-[0.2em]">Ready to analyze</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal: Project Creation -->
+    <div id="projectModal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-[150] flex items-center justify-center p-6">
+        <div class="card w-full max-w-sm bg-[#0c0c0c] p-8 flex flex-col gap-8">
+            <div>
+                <h3 class="text-lg font-semibold text-white tracking-tight">Create workspace</h3>
+                <p class="text-[11px] text-zinc-500 mt-1">Name your workspace or define your vision</p>
+            </div>
+            
+            <div class="space-y-6">
+                <div class="relative">
+                    <i data-lucide="folder" class="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-700" width="16" height="16" stroke-width="2.5"></i>
+                    <input id="projectNameInput" type="text" placeholder="e.g. Market analysis" 
+                           class="w-full bg-zinc-900/50 border border-zinc-800 rounded-xl py-3.5 pl-11 pr-4 text-[13px] text-zinc-200 outline-none focus:border-zinc-700 transition-colors placeholder:text-zinc-700">
+                </div>
+                
+                <div class="flex items-center gap-3">
+                    <div class="flex-1 h-px bg-zinc-900"></div>
+                    <span class="text-[9px] font-medium text-zinc-700 uppercase tracking-widest">Or</span>
+                    <div class="flex-1 h-px bg-zinc-900"></div>
+                </div>
+
+                <div class="relative">
+                    <i data-lucide="sparkles" class="absolute left-4 top-4 text-[#f14247]/40" width="16" height="16" stroke-width="2.5"></i>
+                    <textarea id="projectIdeaInput" rows="3" placeholder="Explain your idea... we'll find matching competitors" 
+                           class="w-full bg-zinc-900/50 border border-zinc-800 rounded-xl py-4 pl-11 pr-4 text-[13px] text-zinc-200 outline-none focus:border-[#f14247]/20 transition-colors placeholder:text-zinc-700 scrollbar-none resize-none"></textarea>
+                </div>
+            </div>
+
+            <div class="flex gap-4">
+                <button onclick="closeProjectModal()" class="flex-1 py-3 text-zinc-500 hover:text-white transition-colors text-[11px] font-medium">Cancel</button>
+                <button id="createProjectBtn" onclick="handleCreateProject(this)" class="flex-1 py-3 bg-white text-black rounded-xl text-[11px] font-semibold hover:bg-zinc-200 transition-colors">Create</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal: Confirmation -->
+    <div id="confirmModal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-[200] flex items-center justify-center p-6">
+        <div class="card bg-[#0c0c0c] border-red-500/20 w-full max-w-sm p-8 text-center flex flex-col gap-6">
+            <div>
+                <h3 class="text-lg font-semibold text-white tracking-tight mb-2">Confirm deletion</h3>
+                <p class="text-xs text-zinc-500 leading-relaxed font-medium">This will permanently remove all historical intelligence data. This action cannot be undone.</p>
+            </div>
+            <div class="flex gap-4">
+                <button onclick="closeConfirmModal()" class="flex-1 py-3 text-zinc-500 hover:text-white transition-colors text-[11px] font-medium">Cancel</button>
+                <button onclick="confirmDeleteProject()" class="flex-1 py-3 bg-red-500 text-white rounded-xl text-[11px] font-semibold hover:bg-red-400 transition-colors">Delete</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Configuration for zero-cost Hugging Face hosting
+        const HF_USERNAME = "usmanovrustam"; // Match your HF account
+        const API_BASE_URL = (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')
+            ? ''
+            : `https://${HF_USERNAME}-skrapyx-api.hf.space`;
+
+        let fullData = {}; 
+        let activeId = null; 
+        let activeProjectId = null;
+        let currentUserToken = null;
+        let currentUserProfile = null;
+
+        async function apiFetch(url, options = {}) {
+            const finalUrl = url.startsWith('/') ? `${API_BASE_URL}${url}` : url;
+            // Self-healing token retrieval
+            if (window.auth && window.auth.currentUser) {
+                try {
+                    currentUserToken = await window.auth.currentUser.getIdToken();
+                } catch (e) {
+                    console.error("[Auth] Token refresh failed:", e);
+                }
+            }
+
+            if (!currentUserToken) {
+                console.warn("[Auth] No token available for fetch, aborting:", url);
+                throw new Error("Unauthorized: No token available");
+            }
+
+            const headers = {
+                ...options.headers,
+                'Authorization': `Bearer ${currentUserToken}`
+            };
+            const response = await fetch(finalUrl, { ...options, headers });
+            
+            if (response.status === 401) {
+                console.error("[Auth] Session unauthorized even with fresh token.");
+                // Instead of alert, we could potentially force a re-login here,
+                // but for now we just fail gracefully.
+                return response;
+            }
+
+            if (response.status === 402 && !options.skip402Modal) {
+                showAnalyzing(false); // Hide any active loader
+                showSubscriptionModal();
+                return response;
+            }
+            
+            return response;
+        }
+
+        function showSubscriptionModal() {
+            document.getElementById('subscriptionModal').classList.remove('hidden');
+        }
+
+        function closeSubscriptionModal() {
+            document.getElementById('subscriptionModal').classList.add('hidden');
+        }
+        let timelineChartObj = null;
+        let distributionChartObj = null;
+        let battleMode = false; 
+        let battleSelection = [];
+        let searchMode = 'google';
+        let searchTimeout = null;
+        let expandedProjects = new Set();
+        let cachedProjects = [];
+        let contextProjectId = null;
+        let currentPage = 1;
+        const reviewsPerPage = 20;
+
+        function init() { 
+            lucide.createIcons(); 
+            loadProjects(); 
+        }
+
+        function renderTimeline() {
+            if (chartInstance) chartInstance.destroy();
+            const ctx = document.getElementById('sentimentChart').getContext('2d');
+            const data = fullData.timeline;
+            if (!data || data.length === 0) return;
+            
+            const gradient = ctx.createLinearGradient(0, 0, 0, 300);
+            gradient.addColorStop(0, 'rgba(255, 255, 255, 0.05)');
+            gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+
+            chartInstance = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: data.map(t => new Date(t.week).toLocaleDateString(undefined, {month:'short', day:'numeric'})),
+                    datasets: [{
+                        data: data.map(t => t.rating),
+                        borderColor: '#ffffff',
+                        borderWidth: 2,
+                        tension: 0.4,
+                        pointRadius: 0,
+                        pointHoverRadius: 6,
+                        pointHoverBackgroundColor: '#ffffff',
+                        fill: true,
+                        backgroundColor: gradient
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: { 
+                        legend: { display: false }, 
+                        tooltip: { 
+                            enabled: true, 
+                            mode: 'index', 
+                            intersect: false,
+                            backgroundColor: '#000',
+                            titleColor: '#fff',
+                            bodyColor: '#a1a1aa',
+                            borderColor: '#18181b',
+                            borderWidth: 1,
+                            padding: 12,
+                            displayColors: false
+                        } 
+                    },
+                    scales: {
+                        y: { min: 1, max: 5, grid: { color: 'rgba(255,255,255,0.01)', borderColor: 'transparent' }, ticks: { color: '#222', font: { size: 9, weight: '700' }, stepSize: 1 } },
+                        x: { grid: { display: false }, ticks: { color: '#222', font: { size: 9, weight: '700' } } }
+                    }
+                }
+            });
+
+            const road = document.getElementById('versionRoad');
+            road.innerHTML = (fullData.versions_history || []).map(v => `
+                <div class="flex flex-col items-center gap-1 group pointer-events-auto cursor-help">
+                    <div class="h-8 border-l border-white/10 group-hover:border-white/30 transition-all"></div>
+                    <span class="text-[9px] font-medium text-zinc-600 group-hover:text-zinc-400 transition-all">${v.version}</span>
+                </div>
+            `).join('');
+
+            const vStats = document.getElementById('versionStats');
+            vStats.innerHTML = (fullData.versions_history || []).slice(-2).map(v => `
+                <span class="bg-zinc-900 border border-zinc-800 px-2 py-0.5 rounded text-[9px] font-medium text-zinc-500">${v.version}</span>
+            `).join('');
+        }
+
+        let battleChartObj = null;
+
+        async function startBattle(confirmMeterCharge = false) {
+            const overlay = document.getElementById('analyzingOverlay');
+            overlay.classList.remove('hidden');
+            document.getElementById('jobStatusTitle').textContent = "Neural Clash Initializing";
+            document.getElementById('clashReportText').innerHTML = "Synthesizing competitive intelligence...";
+            
+            try {
+                const payload = {
+                    scan_id_a: battleSelection[0],
+                    scan_id_b: battleSelection[1]
+                };
+                if (confirmMeterCharge) payload.confirm_meter_charge = true;
+
+                // Perform Battle Analysis API call
+                const response = await apiFetch('/api/battle', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload),
+                    skip402Modal: true
+                });
+                
+                const battleData = await response.json();
+
+                // Handle Metered/Credit Gating
+                if (response.status === 402) {
+                    overlay.classList.add('hidden');
+                    if (battleData.error === "Meter Consent Required") {
+                        const proceed = await window.showMeteredConsent(battleData.message);
+                        if (proceed) {
+                            return await startBattle(true);
+                        }
+                        return;
+                    } else if (battleData.error === "Insufficient Credits") {
+                        openSubscriptionModal('single');
+                        return;
+                    }
+                }
+
+                if (!response.ok) throw new Error(battleData.error || "Clash failed");
+
+                // Show view after success
+                document.getElementById('view-battle').classList.remove('hidden');
+                
+                // Fetch full scan data for visuals
+                const res1 = await apiFetch(`/api/scan/${battleSelection[0]}`); const d1 = await res1.json();
+                const res2 = await apiFetch(`/api/scan/${battleSelection[1]}`); const d2 = await res2.json();
+                
+                // Render App A Info
+                document.getElementById('battleAppA').innerHTML = renderBattleApp(d1, 'amber');
+                // Render App B Info
+                document.getElementById('battleAppB').innerHTML = renderBattleApp(d2, 'blue');
+                
+                // Render Clash Report
+                document.getElementById('clashReportText').innerHTML = (battleData.clash_report || "Comparison failed.").replace(/\d\. /g, '<br><br><b>$&</b>').replace(/WINNING EDGE:|VULNERABILITY GAP:|STRATEGIC VERDICT:/g, '<span class="text-white font-semibold block mt-6 mb-2">$&</span>');
+
+                // Render Multi-line Chart
+                renderBattleChart(d1, d2);
+                
+                lucide.createIcons();
+            } catch (err) {
+                console.error(err);
+                alert("Battle Failed: " + err.message);
+                closeBattleMode();
+            } finally {
+                overlay.classList.add('hidden');
+            }
+        }
+
+        function renderBattleApp(d, color) {
+            const positiveRate = d.reviews.length > 0 ? (d.reviews.filter(r=>r.rating>3).length/d.reviews.length*100).toFixed(0) : 0;
+            
+            return `
+                <div class="space-y-8">
+                    <div class="flex flex-col items-center">
+                         <div class="w-20 h-20 rounded-2xl bg-zinc-900 border border-zinc-800 mb-6 flex items-center justify-center overflow-hidden">
+                            <img src="${(d.reviews[0] && d.reviews[0].icon) || ''}" class="w-full h-full object-cover opacity-60 grayscale hover:grayscale-0 transition-all" onerror="this.src='https://ui-avatars.com/api/?name=${encodeURIComponent(d.app_name)}&background=111&color=fff'" />
+                         </div>
+                         <h2 class="text-xl font-semibold text-white tracking-tight truncate w-full text-center">${d.app_name}</h2>
+                         <p class="text-[11px] text-zinc-500 font-medium mt-1">Competitor analysis</p>
+                    </div>
+
+                    <div class="grid grid-cols-1 gap-3">
+                        <div class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 text-center">
+                            <span class="block text-2xl font-semibold text-white tracking-tight">${positiveRate}%</span>
+                            <span class="text-[10px] font-medium text-zinc-500 mt-1">Sentiment index</span>
+                        </div>
+                        <div class="p-5 rounded-xl bg-zinc-900/50 border border-zinc-800 text-center">
+                            <span class="block text-2xl font-semibold text-white tracking-tight">${d.reviews.length}</span>
+                            <span class="text-[10px] font-medium text-zinc-500 mt-1">Data points</span>
+                        </div>
+                    </div>
+
+                    <div class="space-y-3">
+                        <h4 class="text-[11px] font-semibold text-zinc-600 border-b border-zinc-900 pb-2">Analysis summary</h4>
+                        <p class="text-[12px] text-zinc-500 font-medium leading-relaxed line-clamp-6 italic">
+                            "${d.neural_synthesis || 'Establishing baseline intelligence...'}"
+                        </p>
+                    </div>
+                </div>
+            `;
+        }
+
+        function renderBattleChart(d1, d2) {
+            const ctx = document.getElementById('battleSentimentChart');
+            if (!ctx) return;
+            if (battleChartObj) battleChartObj.destroy();
+
+            const t1 = d1.timeline || [];
+            const t2 = d2.timeline || [];
+            
+            // Align weeks
+            const allWeeks = Array.from(new Set([...t1.map(t=>t.week), ...t2.map(t=>t.week)])).sort();
+            const data1 = allWeeks.map(w => (t1.find(x=>x.week === w) || {}).rating || null);
+            const data2 = allWeeks.map(w => (t2.find(x=>x.week === w) || {}).rating || null);
+
+            battleChartObj = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: allWeeks.map(w => new Date(w).toLocaleDateString('en-US', {month:'short', day:'numeric'})),
+                    datasets: [
+                        { label: d1.app_name, data: data1, borderColor: '#f59e0b', backgroundColor: 'transparent', tension: 0.4, borderWidth: 3, pointRadius:0 },
+                        { label: d2.app_name, data: data2, borderColor: '#3b82f6', backgroundColor: 'transparent', tension: 0.4, borderWidth: 3, pointRadius:0 }
+                    ]
+                },
+                options: {
+                    responsive: true, maintainAspectRatio: false,
+                    plugins: { legend: { display: false } },
+                    scales: {
+                        x: { grid: { display: false }, ticks: { color: '#333', font: { size: 9, weight: 'bold' } } },
+                        y: { min: 1, max: 5, grid: { color: 'rgba(255,255,255,0.03)' }, ticks: { color: '#333', font: { size: 9, weight: 'bold' } } }
+                    }
+                }
+            });
+        }
+
+        function closeBattleMode() { document.getElementById('view-battle').classList.add('hidden'); toggleBattleMode(); }
+        function openModal() { document.getElementById('scanModal').classList.remove('hidden'); }
+        function closeModal() {
+            document.getElementById('scanModal').classList.add('hidden');
+            document.getElementById('projectModal').classList.add('hidden');
+            document.getElementById('selectionModal').classList.add('hidden');
+            activeProjectId = null;
+        }
+
+        function setSearchMode(mode) {
+            searchMode = mode;
+            document.getElementById('searchModeGP').className = `flex-1 py-3 rounded-xl text-[10px] font-semibold uppercase tracking-wider flex items-center justify-center gap-2 ${mode === 'google' ? 'bg-[#f14247]/5 text-[#f14247] border border-[#f14247]/10' : 'bg-zinc-900 text-zinc-500 border border-zinc-800 hover:bg-zinc-800'}`;
+            document.getElementById('searchModeAS').className = `flex-1 py-3 rounded-xl text-[10px] font-semibold uppercase tracking-wider flex items-center justify-center gap-2 ${mode === 'apple' ? 'bg-[#f14247]/5 text-[#f14247] border border-[#f14247]/10' : 'bg-zinc-900 text-zinc-500 border border-zinc-800 hover:bg-zinc-800'}`;
+            document.getElementById('searchModeIdea').className = `flex-1 py-3 rounded-xl text-[10px] font-semibold uppercase tracking-wider flex items-center justify-center gap-2 ${mode === 'idea' ? 'bg-[#f14247]/5 text-[#f14247] border border-[#f14247]/10' : 'bg-zinc-900 text-zinc-500 border border-zinc-800 hover:bg-zinc-800'}`;
+            
+            const input = document.getElementById('appSearchInput');
+            if (mode === 'idea') {
+                input.placeholder = "Describe an app idea or problem to solve...";
+            } else {
+                input.placeholder = "Search app name or bundle ID...";
+            }
+            handleSearch();
+        }
+
+        async function handleSearch() {
+            let q = document.getElementById('appSearchInput').value.trim();
+            if (q.length < 2) return;
+            
+            clearTimeout(searchTimeout);
+            searchTimeout = setTimeout(async () => {
+                document.getElementById('searchLoading').classList.remove('hidden');
+                document.getElementById('searchResults').innerHTML = '<div class="h-full flex flex-col items-center justify-center text-zinc-600 py-12"><div class="w-6 h-6 border-2 border-zinc-800 border-t-[#f14247] rounded-full animate-spin mb-4"></div><p class="text-[11px] font-medium uppercase tracking-[0.2em] animate-pulse">Running Neural Query...</p></div>';
+                try {
+                    let endpoint = '';
+                    if (searchMode === 'idea') {
+                        endpoint = `/api/agent/discover?q=${encodeURIComponent(q)}`;
+                    } else {
+                        endpoint = `/api/search/${searchMode}?q=${encodeURIComponent(q)}`;
+                    }
+
+                    const res = await apiFetch(endpoint);
+                    const data = await res.json();
+                    
+                    if (searchMode === 'idea') {
+                        // The discover API returns { candidates: [...] }
+                        if (data.candidates && Array.isArray(data.candidates)) {
+                            renderSearchResults(data.candidates);
+                        } else {
+                            throw new Error(data.error || "Failed to discover apps");
+                        }
+                    } else {
+                        if (Array.isArray(data)) {
+                            renderSearchResults(data);
+                        } else {
+                            throw new Error(data.error || "Failed to parse results");
+                        }
+                    }
+                } catch (err) {
+                    console.error("Search failure:", err);
+                    document.getElementById('searchResults').innerHTML = `
+                        <div class="h-full flex flex-col items-center justify-center text-red-500/80 py-12">
+                            <i data-lucide="search-x" size="32" class="mb-4"></i>
+                            <p class="text-[11px] font-medium">No results or search failed</p>
+                        </div>
+                    `;
+                    lucide.createIcons();
+                } finally {
+                    document.getElementById('searchLoading').classList.add('hidden');
+                }
+            }, 800);
+        }
+
+        function renderSearchResults(results) {
+            const container = document.getElementById('searchResults');
+            container.innerHTML = results.map(app => {
+                const actualMode = searchMode === 'idea' ? (app.source === 'Google Play' ? 'google' : 'apple') : searchMode;
+                return `
+                <div class="flex items-center gap-4 p-4 hover:bg-zinc-900 rounded-2xl group transition-all border border-transparent hover:border-zinc-800">
+                    <img src="${app.icon}" class="w-10 h-10 rounded-xl bg-zinc-800 object-cover border border-zinc-800">
+                    <div class="flex-1 min-w-0">
+                        <h4 class="text-[13px] font-semibold text-white truncate">${app.title}</h4>
+                        <p class="text-[11px] text-zinc-600 truncate mt-0.5">${app.developer} • ${app.source}</p>
+                    </div>
+                    <button onclick="createInitialProject(this, '${app.id}', '${app.title.replace(/'/g, "\\'")}', '${actualMode}')" 
+                            class="px-4 py-2 bg-white text-black text-[11px] font-semibold rounded-lg opacity-0 group-hover:opacity-100 transition-all">Analyze</button>
+                </div>
+                `;
+            }).join('');
+            lucide.createIcons();
+        }
+
+        async function executeScan(projId, platform, confirmMeterCharge = false) {
+            const payload = { proj_id: projId, platform };
+            if (confirmMeterCharge) payload.confirm_meter_charge = true;
+
+            console.log("[Scan] Initiating API request:", payload);
+            const res = await apiFetch('/api/scan', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload),
+                skip402Modal: true
+            });
+            console.log("[Scan] API Response Status:", res.status);
+            
+            const job = await res.json();
+
+            // Handling the new Metered Consent Architecture
+            if (res.status === 402) {
+                showAnalyzing(false); // Hide the global loader if it's there
+                if (job.error === "Meter Consent Required") {
+                    console.log("[Scan] Metered billing consent required.");
+                    const proceed = await window.showMeteredConsent(job.message);
+                    console.log("[Billing] User consent choice:", proceed);
+                    if (proceed) {
+                        showAnalyzing(true, "Credit Authorization", "Verifying and initiating neural sync...");
+                        console.log("[Scan] Re-submitting scan with confirm_meter_charge=true");
+                        return await executeScan(projId, platform, true);
+                    }
+                    console.log("[Scan] User declined charge, aborting.");
+                    return null;
+                } else if (job.error === "Insufficient Credits") {
+                    openSubscriptionModal('single');
+                    return null;
+                }
+            }
+
+            if (!res.ok) {
+                alert(job.error || job.message || "Failed to start scan");
+                return null;
+            }
+
+            if (job.job_id) {
+                console.log("[Scan] Neural sync initiated, Job ID:", job.job_id);
+                startPolling(job.job_id);
+                // Also close the project modal if it was open
+                if (typeof closeProjectModal === 'function') closeProjectModal();
+            }
+            return job;
+        }
+
+        function startPolling(jobId) {
+            showAnalyzing(true);
+            const interval = setInterval(async () => {
+                try {
+                    const res = await apiFetch(`/api/jobs/${jobId}`);
+                    if (!res.ok) throw new Error("Job tracking failed");
+                    const status = await res.json();
+                    
+                    const titleEl = document.getElementById('jobStatusTitle');
+                    const msgEl = document.getElementById('jobStatusMessage');
+                    const barEl = document.getElementById('progressBar');
+                    const percEl = document.getElementById('progressPercent');
+
+                    if (titleEl) titleEl.textContent = status.status;
+                    if (msgEl) msgEl.textContent = status.message || "Synthesizing Growth Strategy...";
+                    if (barEl) barEl.style.width = (status.progress || 0) + '%';
+                    if (percEl) percEl.textContent = (status.progress || 0) + '%';
+
+                    if (status.status === 'Completed') {
+                        clearInterval(interval);
+                        // Delay closing slightly so user sees 100%
+                        setTimeout(() => {
+                            showAnalyzing(false);
+                            loadProjects();
+                            if (status.scan_id) selectScan(status.scan_id);
+                        }, 800);
+                    } else if (status.status === 'Failed') {
+                        clearInterval(interval);
+                        showAnalyzing(false, true, status.message);
+                        loadProjects();
+                    }
+                } catch (err) {
+                    console.error("Polling Error:", err);
+                    clearInterval(interval);
+                    showAnalyzing(false, true, "Lost connection to server");
+                }
+            }, 2000);
+        }
+
+        function exportReviewsToCSV() {
+            if (!fullData || !fullData.reviews || fullData.reviews.length === 0) {
+                alert("No data available to export.");
+                return;
+            }
+
+            const headers = ["Reviewer Name", "Review Text", "Rating", "Thumbs Up Count", "Date"];
+            const rows = fullData.reviews.map(r => {
+                const date = r.date ? new Date(r.date).toISOString().replace('T', ' ').split('.')[0] : 'N/A';
+                return [
+                    `"${(r.user || 'Anonymous').replace(/"/g, '""')}"`,
+                    `"${(r.review || '').replace(/"/g, '""')}"`,
+                    r.rating,
+                    r.thumbs_up || 0,
+                    `"${date}"`
+                ].join(',');
+            });
+
+            const csvContent = "data:text/csv;charset=utf-8," + headers.join(',') + "\n" + rows.join('\n');
+            const encodedUri = encodeURI(csvContent);
+            const link = document.createElement("a");
+            link.setAttribute("href", encodedUri);
+            const timestamp = new Date().toISOString().split('T')[0];
+            const filename = `${fullData.app_name || 'app'}_intelligence_report_${timestamp}.csv`;
+            link.setAttribute("download", filename);
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+
+        function showAnalyzing(show, title = "Syncing Neural Data", message = "Synthesizing market intelligence and growth signals...") {
+            const overlay = document.getElementById('analyzingOverlay');
+            if (!overlay) return;
+            
+            if (show) {
+                document.getElementById('jobStatusTitle').textContent = title;
+                document.getElementById('jobStatusMessage').textContent = message;
+                overlay.classList.remove('hidden');
+            } else {
+                overlay.classList.add('hidden');
+            }
+        }
+
+        async function createInitialProject(btn, appId, name, mode) {
+            if (btn.disabled) return;
+            const originalHtml = btn.innerHTML;
+            btn.disabled = true;
+            btn.style.opacity = '1';
+            btn.style.minWidth = btn.offsetWidth + 'px';
+            btn.innerHTML = `<i data-lucide="loader-2" class="w-3 h-3 animate-spin"></i>`;
+            lucide.createIcons();
+            
+            try {
+                showAnalyzing(true, "Creating Intelligence Project", "Establishing encrypted neural link to app store data...");
+                
+                let project;
+                if (activeProjectId) {
+                    await apiFetch(`/api/projects/${activeProjectId}/link`, {
+                        method: 'POST',
+                        body: JSON.stringify(mode === 'google' ? { gp_id: appId } : { as_id: appId })
+                    });
+                    project = { id: activeProjectId };
+                } else {
+                    const res = await apiFetch('/api/projects', {
+                        method: 'POST',
+                        body: JSON.stringify({ name, [mode === 'google' ? 'gp_id' : 'as_id']: appId })
+                    });
+                    project = await res.json();
+                }
+                
+                const scanResult = await executeScan(project.id, mode === 'google' ? 'Android' : 'iOS');
+                if (scanResult) {
+                    closeModal();
+                    await loadProjects();
+                }
+            } catch (err) {
+                console.error("Creation Failed:", err);
+                alert("Creation failed: " + (err.message || "Unknown error"));
+            } finally {
+                showAnalyzing(false);
+                btn.disabled = false;
+                btn.innerHTML = originalHtml;
+                lucide.createIcons();
+            }
+        }
+
+        async function loadProjects() {
+            if (!currentUserToken) return; 
+            
+            const list = document.getElementById('projectList');
+            // Show shimmer placeholders if initial load
+            if (!list.innerHTML.trim() || list.innerHTML.includes('shimmer-wrapper')) {
+                list.innerHTML = Array(6).fill(0).map(() => `
+                    <div class="shimmer-wrapper h-8 mb-1 flex items-center gap-3 px-2.5">
+                        <div class="shimmer-bg"></div>
+                        <div class="w-3 h-3 rounded bg-white/5"></div>
+                        <div class="h-2 w-24 bg-white/5 rounded"></div>
+                    </div>
+                `).join('');
+            }
+
+            try {
+                const res = await apiFetch('/api/projects');
+                if (!res.ok) return;
+                
+                const projects = await res.json();
+                if (!projects || typeof projects !== 'object') return;
+                cachedProjects = Object.values(projects).sort((a, b) => (b.is_pinned - a.is_pinned));
+                
+                const profRes = await apiFetch('/api/user/profile');
+                if (profRes.ok) {
+                    const prof = await profRes.json();
+                    const cc = document.getElementById('creditCount');
+                    if (cc) cc.innerText = prof.credits ?? 0;
+                }
+                renderProjectList();
+            } catch (err) {
+                console.error("Load Projects Failed:", err);
+            }
+        }
+
+        // Consolidated redundant init function
+
+
+        /* Sidebar & Header Transitions Logic */
+
+        window.toggleAppDropdown = () => {
+            const dropdown = document.getElementById('appHeaderDropdown');
+            dropdown.classList.toggle('hidden');
+        };
+
+        window.handleHeaderProjectSelect = (id) => {
+            selectProject(id);
+            document.getElementById('appHeaderDropdown').classList.add('hidden');
+        };
+
+        // Close dropdown on outside click
+        document.addEventListener('click', (e) => {
+            const dropdown = document.getElementById('appHeaderDropdown');
+            const trigger = document.querySelector('[onclick="toggleAppDropdown()"]');
+            if (dropdown && !dropdown.classList.contains('hidden') && !dropdown.contains(e.target) && !trigger.contains(e.target)) {
+                dropdown.classList.add('hidden');
+            }
+        });
+
+        function renderProjectList() {
+            const list = document.getElementById('projectList');
+            const dropdownList = document.getElementById('dropdownProjectList');
+            if (!list || !cachedProjects) return;
+
+            // Header Dropdown Items
+            if (dropdownList) {
+                dropdownList.innerHTML = cachedProjects.map(proj => `
+                    <div onclick="handleHeaderProjectSelect('${proj.id}')" class="flex items-center gap-3 p-2.5 rounded-xl popover-item group cursor-pointer ${activeProjectId === proj.id ? 'bg-zinc-900' : ''}">
+                        <div class="w-6 h-6 rounded-lg bg-zinc-800 flex items-center justify-center text-[11px] font-semibold text-white border border-zinc-700">
+                            ${proj.name[0].toUpperCase()}
+                        </div>
+                        <div class="flex-1 min-w-0">
+                            <p class="text-[12px] font-semibold text-white truncate">${proj.name}</p>
+                        </div>
+                        ${activeProjectId === proj.id ? '<i data-lucide="check" width="16" height="16" stroke-width="2.5" class="text-[#f14247] shrink-0"></i>' : ''}
+                    </div>
+                `).join('');
+            }
+
+            list.innerHTML = cachedProjects.map(proj => {
+                    const isExpanded = expandedProjects.has(proj.id);
+                const androidScan = (proj.scans || []).find(s=>s.platform==='Android');
+                const iosScan = (proj.scans || []).find(s=>s.platform==='iOS');
+
+                    return `
+                    <div class="project-container group relative" oncontextmenu="showContextMenu(event, '${proj.id}', ${proj.is_pinned})">
+                        <div onclick="toggleProject('${proj.id}')" 
+                             class="flex items-center justify-between px-2.5 py-3 cursor-pointer hover:bg-zinc-900/50 rounded-lg transition-all 
+                             ${activeProjectId === proj.id ? 'bg-[#f14247]/5 text-white' : 'text-zinc-500'} group-hover:text-white">
+                            <div class="flex items-center gap-3 flex-1 min-w-0">
+                                <i data-lucide="${proj.is_pinned ? 'pin' : 'folder'}" width="16" height="16" stroke-width="2.5" class="${proj.is_pinned ? 'text-[#f14247]' : (activeProjectId === proj.id ? 'text-[#f14247]' : '')} shrink-0"></i>
+                                <span class="text-[13px] font-medium truncate">${proj.name}</span>
+                            </div>
+                            <i data-lucide="${isExpanded ? 'chevron-down' : 'chevron-right'}" width="16" height="16" stroke-width="2.5" class="shrink-0"></i>
+                        </div>
+                        <div class="${isExpanded ? 'block' : 'hidden'} pl-8 pr-2 mt-1 space-y-1">
+                            ${proj.gp_id ? `
+                                <div class="group/item flex items-center justify-between py-2 px-3 rounded-md hover:bg-zinc-900 cursor-pointer relative ${activeId === androidScan?.id ? 'bg-zinc-900' : ''}">
+                                    <div onclick="${androidScan ? `selectScan('${androidScan.id}', event)` : `handlePendingStoreClick('${proj.id}', 'google')`}" 
+                                         class="flex items-center gap-3 flex-1 text-[11px] font-medium ${activeId === androidScan?.id ? 'text-white' : 'text-zinc-600'} ${!androidScan ? 'opacity-70 italic' : ''}">
+                                        <img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_Play_2022_icon.svg" class="w-3.5 h-3.5 grayscale">
+                                        Android 
+                                    </div>
+                                </div>
+                            ` : `
+                                <button onclick="linkNewStore('${proj.id}', 'google')" class="w-full text-left py-2 px-3 text-[11px] text-zinc-600 hover:text-[#f14247] transition-all">+ Link Android</button>
+                            `}
+                            ${proj.as_id ? `
+                                <div class="group/item flex items-center justify-between py-2 px-3 rounded-md hover:bg-zinc-900 cursor-pointer relative ${activeId === iosScan?.id ? 'bg-zinc-900' : ''}">
+                                    <div onclick="${iosScan ? `selectScan('${iosScan.id}', event)` : `handlePendingStoreClick('${proj.id}', 'apple')`}" 
+                                         class="flex items-center gap-3 flex-1 text-[11px] font-medium ${activeId === iosScan?.id ? 'text-white' : 'text-zinc-600'} ${!iosScan ? 'opacity-70 italic' : ''}">
+                                        <img src="https://upload.wikimedia.org/wikipedia/commons/6/67/App_Store_%28iOS%29.svg" class="w-3.5 h-3.5 grayscale">
+                                        iOS
+                                    </div>
+                                </div>
+                            ` : `
+                                <button onclick="linkNewStore('${proj.id}', 'apple')" class="w-full text-left py-2 px-3 text-[11px] text-zinc-600 hover:text-blue-500 transition-all">+ Link iOS</button>
+                            `}
+                        </div>
+                    </div>
+                `}).join('');
+                lucide.createIcons();
+        }
+
+        function selectProject(id) {
+            activeProjectId = id;
+            if (!expandedProjects.has(id)) {
+                expandedProjects.add(id);
+            }
+            
+            // Auto-load latest scan if available
+            const proj = cachedProjects.find(p => p.id === id);
+            if (proj && proj.scans && proj.scans.length > 0) {
+                // Find latest scan by platform priority or just latest timestamp
+                const latest = [...proj.scans].sort((a,b) => new Date(b.timestamp) - new Date(a.timestamp))[0];
+                selectScan(latest.id);
+            } else {
+                // If no scans, show the Project Onboarding view
+                renderProjectOnboarding(id);
+            }
+            
+            renderProjectList();
+        }
+
+        function toggleProject(id) {
+            if (expandedProjects.has(id)) expandedProjects.delete(id);
+            else expandedProjects.add(id);
+            renderProjectList();
+        }
+
+        function renderProjectOnboarding(projId) {
+            const proj = cachedProjects.find(p => p.id === projId);
+            if (!proj) return;
+
+            document.getElementById('emptyState').classList.remove('opacity-0', 'pointer-events-none');
+            document.getElementById('contentWrapper').style.opacity = '0';
+            document.getElementById('mainHeader').classList.add('opacity-0');
+
+            const container = document.getElementById('emptyStateContent');
+            const hasStore = proj.gp_id || proj.as_id;
+
+            container.innerHTML = `
+                <div class="relative w-16 h-16 mb-8">
+                    <div class="absolute inset-0 bg-[#f14247]/5 blur-3xl rounded-full"></div>
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <i data-lucide="${hasStore ? 'zap' : 'link'}" class="text-zinc-800 w-8 h-8"></i>
+                    </div>
+                </div>
+                <h2 class="text-2xl font-semibold text-white tracking-tight mb-2">${proj.name}</h2>
+                <p class="text-[11px] font-medium text-zinc-600">
+                    ${hasStore ? 'Ready for synchronization' : 'Connection required'}
+                </p>
+                
+                <div class="mt-10">
+                    ${hasStore ? `
+                        <button onclick="executeScan('${proj.id}', '${proj.gp_id ? 'Android' : 'iOS'}')" 
+                                class="px-8 py-3.5 bg-white text-black text-[11px] font-semibold rounded-xl hover:bg-zinc-200 transition-all">
+                            Initialize scan
+                        </button>
+                    ` : `
+                        <div class="flex gap-3">
+                             <button onclick="linkNewStore('${proj.id}', 'google')" class="px-6 py-3 bg-zinc-900 border border-zinc-800 text-zinc-400 text-[11px] font-medium rounded-xl hover:text-white transition-all">Link Android</button>
+                             <button onclick="linkNewStore('${proj.id}', 'apple')" class="px-6 py-3 bg-zinc-900 border border-zinc-800 text-zinc-400 text-[11px] font-medium rounded-xl hover:text-white transition-all">Link iOS</button>
+                        </div>
+                    `}
+                </div>
+            `;
+            lucide.createIcons();
+        }
+
+        async function handlePendingStoreClick(projId, platform) {
+            // Trigger the analyzing overlay to show progress if already running
+            const overlay = document.getElementById('analyzingOverlay');
+            if (overlay.classList.contains('hidden')) {
+                // If not running, suggest starting a new scan
+                if (confirm("No analysis data found yet. Start synchronization now?")) {
+                    executeScan(projId, platform === 'google' ? 'Android' : 'iOS');
+                }
+            } else {
+                // Already running, just make sure it stays visible
+                overlay.classList.remove('hidden');
+            }
+        }
+
+        async function linkNewStore(projId, mode) {
+            activeProjectId = projId;
+            openModal();
+            setSearchMode(mode);
+            document.querySelector('#scanModal h3').textContent = "Link " + (mode === 'google' ? 'Google Play' : 'App Store');
+        }
+
+        function openProjectModal() { 
+            document.getElementById('projectModal').classList.remove('hidden');
+            document.getElementById('projectNameInput').focus();
+            lucide.createIcons();
+        }
+        function closeProjectModal() {
+            document.getElementById('projectModal').classList.add('hidden');
+            document.getElementById('projectNameInput').value = '';
+            document.getElementById('projectIdeaInput').value = '';
+        }
+
+        async function handleCreateProject(btn) {
+            const nameInput = document.getElementById('projectNameInput');
+            const ideaInput = document.getElementById('projectIdeaInput');
+            const name = nameInput.value.trim();
+            const idea = ideaInput.value.trim();
+
+            if (!name && !idea) return alert("Please provide a project name or explain your vision.");
+            
+            if (btn && btn.disabled) return;
+            const originalHtml = btn ? btn.innerHTML : "Create";
+
+            if (btn) {
+                btn.disabled = true;
+                btn.innerHTML = `<i data-lucide="loader-2" class="w-4 h-4 animate-spin mx-auto"></i>`;
+                lucide.createIcons();
+            }
+
+            try {
+                // Autonomous Neural Agent Workflow
+                if (idea && idea.length > 5) {
+                    closeProjectModal();
+                    
+                    // Show Global Analyzing Overlay
+                    showAnalyzing(true, "Neural Agent Initiated", "Deconstructing app vision and extracting market signals...");
+                    
+                    const progressBars = document.getElementById('progressBar');
+                    if (progressBars) progressBars.style.width = "20%";
+                    const progressPerc = document.getElementById('progressPercent');
+                    if (progressPerc) progressPerc.textContent = "20%";
+
+                    try {
+                        const agentRes = await apiFetch(`/api/agent/discover?q=${encodeURIComponent(idea)}`);
+                        if (agentRes.status === 401) return; // apiFetch handles 401
+                        
+                        const agentData = await agentRes.json();
+                        if (!agentData.candidates || agentData.candidates.length === 0) {
+                            alert("Neural Agent could not find any relevant matches for this idea. Please try searching manually.");
+                            return;
+                        }
+
+                        openSelectionModal(agentData.candidates, name || idea);
+                    } catch (discoverErr) {
+                        console.error("Discovery Failed:", discoverErr);
+                        alert("Discovery failed. Please try again.");
+                    } finally {
+                        showAnalyzing(false);
+                    }
+                    return;
+                }
+
+                // Standard Project Creation
+                const res = await apiFetch('/api/projects', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ name })
+                });
+                const project = await res.json();
+                
+                closeProjectModal();
+                expandedProjects.add(project.id);
+                await loadProjects();
+            } catch (err) {
+                console.error("Neural Genesis Failed:", err);
+                alert("Project creation failed. Please try again.");
+            } finally {
+                if (btn) {
+                    btn.disabled = false;
+                    btn.innerHTML = originalHtml;
+                    lucide.createIcons();
+                }
+            }
+        }
+
+        // Project Management Logic
+        function showContextMenu(e, projId, isPinned) {
+            e.preventDefault(); e.stopPropagation();
+            contextProjectId = projId;
+            const menu = document.getElementById('projectContextMenu');
+            document.getElementById('pinText').textContent = isPinned ? 'Unpin Project' : 'Pin Project';
+            
+            menu.classList.remove('hidden');
+        menu.style.top = `${e.clientY}px`;
+        menu.style.left = `${e.clientX + 8}px`;
+
+        const closeMenu = (ev) => { 
+            if (!menu.contains(ev.target)) {
+                menu.classList.add('hidden'); 
+                document.removeEventListener('click', closeMenu); 
+            }
+        };
+        setTimeout(() => document.addEventListener('click', closeMenu), 10);
+    }
+
+        async function handlePinProject() {
+            const projectsRes = await apiFetch('/api/projects');
+            const projects = await projectsRes.json();
+            const proj = projects[contextProjectId];
+            
+            await apiFetch(`/api/projects/${contextProjectId}`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ is_pinned: !proj.is_pinned })
+            });
+            loadProjects();
+        }
+
+        async function handleRenameProject() {
+            const newName = prompt("Enter new project name:");
+            if (!newName) return;
+            await apiFetch(`/api/projects/${contextProjectId}`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name: newName })
+            });
+            loadProjects();
+        }
+
+        function hideProjectMenu() {
+            document.getElementById('projectContextMenu').classList.add('hidden');
+        }
+
+        async function handleDeleteProject() {
+            hideProjectMenu();
+            openConfirmModal();
+        }
+
+        function openConfirmModal() {
+            document.getElementById('confirmModal').classList.remove('hidden');
+            lucide.createIcons();
+        }
+
+        function closeConfirmModal() {
+            document.getElementById('confirmModal').classList.add('hidden');
+        }
+
+        function openSelectionModal(candidates, projectName) {
+            const modal = document.getElementById('selectionModal');
+            const list = document.getElementById('selectionList');
+            
+            list.innerHTML = candidates.map(app => `
+                <div onclick="createInitialProject(this, '${app.id}', '${projectName.replace(/'/g, "\\'")}', '${app.source === 'Google Play' ? 'google' : 'apple'}')" 
+                     class="candidate-card p-4 rounded-2xl flex items-center gap-5 cursor-pointer group">
+                    <img src="${app.icon}" class="w-12 h-12 rounded-xl bg-zinc-800 border border-zinc-700/50 object-cover">
+                    <div class="flex-1 min-w-0">
+                        <h4 class="text-[13px] font-semibold text-white truncate">${app.title}</h4>
+                        <p class="text-[11px] text-zinc-500 truncate mt-0.5">${app.developer} • ${app.source}</p>
+                    </div>
+                    <div class="w-8 h-8 rounded-full border border-zinc-800 flex items-center justify-center group-hover:border-[#f14247]/30 group-hover:bg-[#f14247]/10 transition-all">
+                        <i data-lucide="arrow-right" class="text-zinc-600 group-hover:text-[#f14247]" width="14" height="14"></i>
+                    </div>
+                </div>
+            `).join('');
+            
+            modal.classList.remove('hidden');
+            lucide.createIcons();
+        }
+
+        function closeSelectionModal() {
+            document.getElementById('selectionModal').classList.add('hidden');
+        }
+
+        async function confirmDeleteProject() {
+            if (!contextProjectId) return;
+            await apiFetch(`/api/projects/${contextProjectId}`, { method: 'DELETE' });
+            if (activeProjectId === contextProjectId) {
+                activeId = null;
+                fullData = {};
+                document.getElementById('emptyState').classList.remove('opacity-0');
+            }
+            closeConfirmModal();
+            loadProjects();
+        }
+
+        function toggleBattleMode() {
+            battleMode = !battleMode;
+            battleSelection = [];
+            document.querySelectorAll('.project-container .rounded-md').forEach(i => i.classList.remove('border', 'border-amber-500/50', 'border-blue-500/50'));
+            renderProjectList();
+        }
+
+        function toggleBattleSelect(id, e) {
+            if (e) e.stopPropagation();
+            const index = battleSelection.indexOf(id);
+            if (index > -1) {
+                battleSelection.splice(index, 1);
+            } else {
+                if (battleSelection.length >= 2) {
+                    battleSelection[1] = id;
+                } else {
+                    battleSelection.push(id);
+                }
+            }
+            renderProjectList();
+            if (battleSelection.length === 2) startBattle();
+        }
+
+        async function selectScan(id, e) {
+            if (!id || id === 'undefined') return;
+            if (battleMode) {
+                toggleBattleSelect(id, e);
+                return;
+            }
+            activeId = id;
+            
+            // Immediate UI feedback
+            document.querySelectorAll('.project-container .rounded-md').forEach(i => i.classList.remove('bg-white/5', 'text-white'));
+            const target = e?.currentTarget || document.getElementById(`item-${id}`);
+            if (target) {
+                target.classList.add('bg-white/5', 'text-white');
+            } else {
+                const fallback = document.querySelector(`[onclick="selectScan('${id}', event)"]`) || document.querySelector(`[onclick*="selectScan('${id}')"]`);
+                if (fallback) fallback.classList.add('bg-white/5', 'text-white');
+            }
+            
+            document.getElementById('emptyState').classList.add('opacity-0', 'pointer-events-none');
+            document.getElementById('contentWrapper').style.opacity = '0';
+            document.getElementById('mainHeader').classList.remove('opacity-0');
+            document.getElementById('currentAppName').textContent = "Synchronizing...";
+            const overviewBox = document.getElementById('overviewContainer');
+            if (overviewBox) overviewBox.innerHTML = '';
+            
+            const briefText = document.getElementById('neuralBriefText');
+            if (briefText) {
+                briefText.classList.add('opacity-0');
+                briefText.textContent = "Synthesizing intelligence...";
+            }
+            document.getElementById('tableBody').innerHTML = '';
+            
+            try {
+                const res = await apiFetch(`/api/scan/${id}`);
+                const data = await res.json();
+                fullData = data;
+                
+                document.getElementById('emptyState').style.opacity = '0';
+                document.getElementById('mainHeader').style.opacity = '1';
+                document.getElementById('contentWrapper').style.opacity = '1';
+                
+                fullData.reviews = fullData.reviews || [];
+                fullData.timeline = fullData.timeline || [];
+                fullData.geo = fullData.geo || [];
+                fullData.versions_history = fullData.versions_history || [];
+
+                renderDescription();
+                renderOverview(); 
+                currentPage = 1;
+                renderReviews(true);
+                renderTimeline();
+                renderSentimentDistribution();
+                document.getElementById('currentAppName').textContent = fullData.app_name || "Untitled Scan";
+                document.getElementById('metaLogs').textContent = `${fullData.reviews.length} Insights Captured`;
+                document.getElementById('metaDate').textContent = new Date(fullData.timestamp).toLocaleDateString();
+
+                // App Icon
+                const iconImg = document.getElementById('appIconImg');
+                const iconPlaceholder = document.getElementById('appIconPlaceholder');
+                if (iconImg && fullData.icon) {
+                    iconImg.src = fullData.icon;
+                    iconImg.alt = fullData.app_name || '';
+                    iconImg.classList.remove('hidden');
+                    if (iconPlaceholder) iconPlaceholder.classList.add('hidden');
+                } else {
+                    if (iconImg) iconImg.classList.add('hidden');
+                    if (iconPlaceholder) iconPlaceholder.classList.remove('hidden');
+                }
+
+                // Screenshots Gallery
+                const screenshotsSection = document.getElementById('screenshotsSection');
+                const screenshotsRow = document.getElementById('screenshotsRow');
+                if (screenshotsRow && fullData.screenshots && fullData.screenshots.length > 0) {
+                    screenshotsSection.classList.remove('hidden');
+                    screenshotsRow.innerHTML = fullData.screenshots.map(url => `
+                        <a href="${url}" target="_blank" rel="noopener" class="flex-shrink-0 group">
+                            <img src="${url}" alt="Screenshot"
+                                 class="h-[200px] w-auto rounded-xl border border-white/10 object-cover shadow-lg shadow-black/30
+                                        group-hover:border-emerald-500/30 group-hover:shadow-emerald-500/10 transition-all duration-300">
+                        </a>
+                    `).join('');
+                } else if (screenshotsSection) {
+                    screenshotsSection.classList.add('hidden');
+                }
+
+                // Helper: show/hide a field + its separator
+                const showMeta = (elId, sepId, value) => {
+                    const el = document.getElementById(elId);
+                    const sep = sepId ? document.getElementById(sepId) : null;
+                    if (el && value) {
+                        el.classList.remove('hidden');
+                        if (sep) sep.classList.remove('hidden');
+                    } else {
+                        if (el) el.classList.add('hidden');
+                        if (sep) sep.classList.add('hidden');
+                    }
+                };
+
+                // Populate developer
+                const devEl = document.getElementById('metaDeveloper');
+                if (devEl && fullData.developer) { devEl.textContent = fullData.developer; devEl.classList.remove('hidden'); }
+                else if (devEl) devEl.classList.add('hidden');
+
+                // Version
+                const verEl = document.getElementById('metaVersion');
+                if (verEl && fullData.version) { verEl.textContent = `v${fullData.version}`; verEl.classList.remove('hidden'); document.getElementById('metaSep1')?.classList.remove('hidden'); }
+                else { verEl?.classList.add('hidden'); document.getElementById('metaSep1')?.classList.add('hidden'); }
+
+                // Released
+                if (fullData.released) { document.getElementById('metaReleasedText').textContent = fullData.released; showMeta('metaReleased', 'metaSep2', true); }
+                else showMeta('metaReleased', 'metaSep2', false);
+
+                // Updated
+                if (fullData.updated) { document.getElementById('metaUpdatedText').textContent = fullData.updated; showMeta('metaUpdated', 'metaSep3', true); }
+                else showMeta('metaUpdated', 'metaSep3', false);
+
+                // Installs
+                if (fullData.installs) { document.getElementById('metaInstallsText').textContent = fullData.installs; showMeta('metaInstalls', 'metaSep4', true); }
+                else showMeta('metaInstalls', 'metaSep4', false);
+
+                // Content rating
+                const ratingEl = document.getElementById('metaRating');
+                if (ratingEl && fullData.content_rating) { ratingEl.textContent = fullData.content_rating; ratingEl.classList.remove('hidden'); document.getElementById('metaSep5')?.classList.remove('hidden'); }
+                else { ratingEl?.classList.add('hidden'); document.getElementById('metaSep5')?.classList.add('hidden'); }
+
+                // Store link button — fallback to source_id if store_url missing (old scans)
+                const storeLink = document.getElementById('storeLink');
+                if (storeLink) {
+                    const url = fullData.store_url || (
+                        fullData.platform === 'Android' && fullData.source_id
+                            ? `https://play.google.com/store/apps/details?id=${fullData.source_id}`
+                            : fullData.source_id
+                                ? `https://apps.apple.com/app/id${fullData.source_id}`
+                                : null
+                    );
+                    if (url) {
+                        storeLink.href = url;
+                        storeLink.classList.remove('hidden');
+                    } else {
+                        storeLink.classList.add('hidden');
+                    }
+                }
+
+                // Resync hint for old scans that lack new metadata
+                const hasNewMeta = fullData.developer || fullData.released || fullData.installs;
+                const resyncHint = document.getElementById('metaResyncHint');
+                if (resyncHint) {
+                    resyncHint.classList.toggle('hidden', !!hasNewMeta);
+                }
+
+                lucide.createIcons();
+            } catch (err) {
+                console.error("Hydration Error:", err);
+            }
+        }
+
+        function renderDescription() {
+            const section = document.getElementById('appDescriptionSection');
+            const textEl = document.getElementById('appDescriptionText');
+            if (!section || !textEl) return;
+
+            if (fullData && fullData.app_description) {
+                section.classList.remove('hidden');
+                textEl.textContent = fullData.app_description;
+                // Reset toggle state
+                textEl.classList.add('line-clamp-3');
+                const btn = document.getElementById('toggleDescBtn');
+                if (btn) {
+                    btn.classList.remove('hidden');
+                    btn.innerHTML = `<span>Show full description</span><i data-lucide="chevron-down" width="16" height="16" stroke-width="2.5"></i>`;
+                }
+            } else {
+                section.classList.add('hidden');
+            }
+            lucide.createIcons();
+        }
+
+        function renderTimeline() {
+            const ctx = document.getElementById('sentimentChart');
+            if (!ctx) return;
+            
+            if (timelineChartObj) timelineChartObj.destroy();
+
+            const timeline = fullData.timeline || [];
+            if (timeline.length === 0) {
+                ctx.parentElement.classList.add('flex', 'items-center', 'justify-center');
+                ctx.parentElement.innerHTML = '<span class="text-zinc-500 italic text-[10px]">Insufficient historical data for trajectory.</span>';
+                return;
+            }
+
+            const labels = timeline.map(t => new Date(t.week).toLocaleDateString(undefined, { month: 'short', day: 'numeric' }));
+            const data = timeline.map(t => t.rating);
+
+            timelineChartObj = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Weekly Intelligence',
+                        data: data,
+                        borderColor: '#f14247',
+                        borderWidth: 3,
+                        pointRadius: 0,
+                        pointHoverRadius: 6,
+                        pointHoverBackgroundColor: '#f14247',
+                        pointHoverBorderColor: '#fff',
+                        pointHoverBorderWidth: 2,
+                        fill: true,
+                        backgroundColor: (context) => {
+                            const chart = context.chart;
+                            const {ctx, chartArea} = chart;
+                            if (!chartArea) return null;
+                            const gradient = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
+                            gradient.addColorStop(0, 'rgba(241, 66, 71, 0.2)');
+                            gradient.addColorStop(1, 'rgba(241, 66, 71, 0)');
+                            return gradient;
+                        },
+                        tension: 0.4
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: { legend: { display: false } },
+                    scales: {
+                        y: { 
+                            min: 1, max: 5, 
+                            grid: { display: false },
+                            ticks: { color: '#525252', font: { size: 9, weight: 'bold' } }
+                        },
+                        x: { 
+                            grid: { display: false },
+                            ticks: { color: '#525252', font: { size: 9, weight: 'bold' } }
+                        }
+                    }
+                }
+            });
+        }
+
+        function renderSentimentDistribution() {
+            const canvas = document.getElementById('distributionChart');
+            const legend = document.getElementById('distributionLegend');
+            if (!canvas) return;
+
+            if (distributionChartObj) distributionChartObj.destroy();
+
+            const reviews = fullData.reviews || [];
+            if (reviews.length === 0) return;
+
+            const counts = { pos: 0, neu: 0, neg: 0 };
+            reviews.forEach(r => {
+                if (r.rating >= 4) counts.pos++;
+                else if (r.rating === 3) counts.neu++;
+                else counts.neg++;
+            });
+
+            const total = reviews.length;
+            const posPerc = Math.round((counts.pos / total) * 100);
+            const neuPerc = Math.round((counts.neu / total) * 100);
+            const negPerc = Math.round((counts.neg / total) * 100);
+
+            if (legend) {
+                legend.innerHTML = `
+                    <div class="flex flex-col"><span class="text-[#f14247]">${posPerc}%</span><span>Positive</span></div>
+                    <div class="flex flex-col text-center"><span class="text-zinc-400">${neuPerc}%</span><span>Neutral</span></div>
+                    <div class="flex flex-col text-right"><span class="text-red-500">${negPerc}%</span><span>Negative</span></div>
+                `;
+            }
+
+            distributionChartObj = new Chart(canvas, {
+                type: 'doughnut',
+                data: {
+                    labels: ['Positive', 'Neutral', 'Negative'],
+                    datasets: [{
+                        data: [counts.pos, counts.neu, counts.neg],
+                        backgroundColor: ['#f14247', '#525252', '#ef4444'],
+                        borderWidth: 0,
+                        hoverOffset: 4,
+                        cutout: '80%'
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: { legend: { display: false } }
+                }
+            });
+        }
+
+        function renderOverview() {
+            const overviewBox = document.getElementById('overviewContainer');
+            if (!overviewBox) return;
+
+            if (fullData && fullData.general_overview && fullData.general_overview.length > 5) {
+                overviewBox.innerHTML = `
+                    <div class="flex items-start gap-6 relative z-10 w-full animate-in fade-in slide-in-from-top-4 duration-700">
+                        <div class="bg-purple-500/10 p-4 rounded-[20px] border border-purple-500/20 shadow-[0_0_15px_rgba(168,85,247,0.15)] flex-shrink-0">
+                            <i data-lucide="zap" size="24" class="text-purple-400"></i>
+                        </div>
+                        <div class="flex-1 pt-1">
+                            <p class="text-white text-[15px] font-medium leading-[1.8] tracking-wide whitespace-pre-wrap">${fullData.general_overview}</p>
+                        </div>
+                    </div>
+                `;
+            } else {
+                overviewBox.innerHTML = `
+                    <div class="flex items-center gap-4 text-zinc-500 italic relative z-10 p-4">
+                        <i data-lucide="help-circle" size="16"></i>
+                        <span class="text-[12px] font-medium">Please execute a new synchronize scan to generate the Qwen AI overview.</span>
+                    </div>
+                `;
+            }
+
+            const briefText = document.getElementById('neuralBriefText');
+            if (briefText) {
+                briefText.textContent = (fullData && fullData.neural_synthesis) || "Strategic overview synthesis complete.";
+                briefText.classList.remove('opacity-0');
+            }
+            lucide.createIcons();
+        }
+
+        async function handleCheckout(btn, planType = 'single') {
+            if (!btn) {
+                console.error("[Checkout] No button reference provided.");
+                // Fallback for generic calls
+                btn = event ? event.currentTarget : null;
+            }
+            if (!currentUserToken) {
+                alert("Session expired. Please refresh the page to login.");
+                return;
+            }
+
+            const originalText = btn ? btn.innerHTML : "Continue";
+            if (btn) {
+                btn.innerHTML = '<i data-lucide="loader-2" class="animate-spin" width="16" height="16" stroke-width="2.5"></i>';
+                btn.disabled = true;
+                lucide.createIcons();
+            }
+            
+            console.log(`[Checkout] Initiating ${planType} session...`);
+            try {
+                const response = await fetch('/api/create-checkout-session', {
+                    method: 'POST',
+                    headers: { 
+                        'Authorization': `Bearer ${currentUserToken}`,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ plan: planType })
+                });
+
+                if (response.status === 401) {
+                    alert("Your session has expired. Neural synchronization lost. Please refresh the page.");
+                    window.location.reload();
+                    return;
+                }
+
+                const session = await response.json();
+                if (session.url) {
+                    console.log("[Checkout] Redirecting to Stripe:", session.url);
+                    window.location.href = session.url;
+                } else {
+                    const errorMsg = session.message || session.error || 'Unknown error';
+                    alert('Checkout failed: ' + errorMsg);
+                    if (btn) {
+                        btn.innerHTML = originalText;
+                        btn.disabled = false;
+                        lucide.createIcons();
+                    }
+                }
+            } catch (err) {
+                console.error("[Checkout] Error:", err);
+                if (btn) {
+                    btn.innerHTML = originalText;
+                    btn.disabled = false;
+                    lucide.createIcons();
+                }
+            }
+        }
+        async function handlePortal(btn) {
+            if (!btn) btn = document.getElementById('manageBillingBtn');
+            const originalHtml = btn.innerHTML;
+            btn.innerHTML = '<i data-lucide="loader-2" class="animate-spin" width="16" height="16" stroke-width="2.5"></i>';
+            btn.disabled = true;
+            lucide.createIcons();
+            
+            console.log("[Billing] Initiated Customer Portal request...");
+            try {
+                const response = await fetch('/api/create-portal-session', {
+                    method: 'POST',
+                    headers: { 
+                        'Authorization': `Bearer ${currentUserToken}`,
+                        'Content-Type': 'application/json'
+                    }
+                });
+
+                if (response.status === 401) {
+                    alert("Session expired. Please refresh the page.");
+                    window.location.reload();
+                    return;
+                }
+
+                const session = await response.json();
+                if (session.url) {
+                    window.location.href = session.url;
+                } else {
+                    alert('Portal failed: ' + (session.error || 'Unknown error'));
+                    btn.innerHTML = originalHtml;
+                    btn.disabled = false;
+                    lucide.createIcons();
+                }
+            } catch (err) {
+                console.error("[Portal] Error:", err);
+                btn.innerHTML = originalHtml;
+                btn.disabled = false;
+                lucide.createIcons();
+            }
+        }
+
+        function renderReviews(reset = false) {
+            const body = document.getElementById('tableBody');
+            const footer = document.getElementById('paginationFooter');
+            
+            if (reset) {
+                body.innerHTML = '';
+                currentPage = 1;
+            }
+
+            const start = (currentPage - 1) * reviewsPerPage;
+            const end = start + reviewsPerPage;
+            const reviews = fullData.reviews || [];
+            const pageData = reviews.slice(start, end);
+
+            const html = pageData.map(r => {
+                const dateObj = r.date ? new Date(r.date) : null;
+                const formattedDate = dateObj 
+                    ? dateObj.toISOString().replace('T', ' ').split('.')[0] 
+                    : 'N/A';
+                
+                return `
+                    <tr class="hover:bg-white/[0.04] transition-all duration-300 border-b border-white/[0.03] group relative z-10 animate-in fade-in slide-in-from-left-4">
+                        <td class="py-5 pl-8 font-medium text-white">${r.user || 'User'}</td>
+                        <td class="py-5 pl-6 text-zinc-400 font-medium">
+                            <p class="max-w-xl line-clamp-2 leading-relaxed font-medium">"${r.review}"</p>
+                        </td>
+                        <td class="py-5 text-center">
+                            <span class="text-[10px] font-semibold ${r.rating < 3 ? 'text-red-400 bg-red-500/5' : 'text-[#f14247] bg-[#f14247]/5'} px-2 py-1 rounded-md border border-current opacity-60">${r.rating} stars</span>
+                        </td>
+                        <td class="py-5 text-center tabular-nums text-zinc-500 font-medium">${r.thumbs_up || 0}</td>
+                        <td class="py-5 pr-8 text-right tabular-nums text-zinc-600 font-medium text-[10px]">${formattedDate}</td>
+                    </tr>
+                `;
+            }).join('');
+
+            body.insertAdjacentHTML('beforeend', html);
+            
+            if (reviews.length > end) {
+                footer.classList.remove('hidden');
+            } else {
+                footer.classList.add('hidden');
+            }
+            lucide.createIcons();
+        }
+
+        function loadNextPage() {
+            currentPage++;
+            renderReviews();
+        }
+
+        // Only initialize basic icons on load, auth will trigger data
+        window.addEventListener('load', () => lucide.createIcons());
+    </script>
+
+    <!-- Firebase SDKs -->
+    <script type="module">
+        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
+        import { getAuth, GoogleAuthProvider, signInWithPopup, onAuthStateChanged, signOut, updateProfile } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
+
+        const firebaseConfig = {
+            apiKey: "AIzaSyDVAS-I1gx-FWYMCiP7luW3dQEHUrhQPvc",
+            authDomain: "store-screapper.firebaseapp.com",
+            projectId: "store-screapper",
+            storageBucket: "store-screapper.firebasestorage.app",
+            messagingSenderId: "544138694682",
+            appId: "1:544138694682:web:ee734849fc7540fd3681a3",
+            measurementId: "G-21ZPLYN9QK"
+        };
+
+        const app = initializeApp(firebaseConfig);
+        const auth = getAuth(app);
+        const provider = new GoogleAuthProvider();
+        provider.setCustomParameters({
+            'client_id': '544138694682-roeq8gml3cigd7vvc8kpgafrffhi9s0s.apps.googleusercontent.com'
+        });
+
+        window.auth = auth;
+
+        window.signInWithGoogle = async () => {
+            try {
+                await signInWithPopup(auth, provider);
+            } catch (error) {
+                console.error("Auth Error:", error);
+                alert("Login failed: " + error.message);
+            }
+        };
+
+        window.signOutUser = async () => {
+            try {
+                // Close popover
+                document.getElementById('profilePopover').classList.add('hidden');
+                await signOut(auth);
+            } catch (error) {
+                console.error("Logout Error:", error);
+            }
+        };
+
+        // Profile Popover Toggle Logic
+        window.handleAuthClick = () => {
+            if (!currentUserToken) {
+                window.signInWithGoogle();
+                return;
+            }
+            const popover = document.getElementById('profilePopover');
+            popover.classList.toggle('hidden');
+            if (!popover.classList.contains('hidden')) {
+                lucide.createIcons();
+            }
+        };
+
+        // Close popover on outside click
+        document.addEventListener('mousedown', (e) => {
+            const popover = document.getElementById('profilePopover');
+            const trigger = document.getElementById('authContainer');
+            if (!popover.classList.contains('hidden') && !popover.contains(e.target) && !trigger.contains(e.target)) {
+                popover.classList.add('hidden');
+            }
+        });
+
+        function openSubscriptionModal() {
+            document.getElementById('profilePopover').classList.add('hidden');
+            const modal = document.getElementById('subscriptionModal');
+            if (modal) {
+                modal.classList.remove('hidden');
+                if (window.fetchUsage) window.fetchUsage();
+            }
+        }
+        window.openSubscriptionModal = openSubscriptionModal;
+
+        // Edit Profile Logic
+        window.openSettings = (initialTab = 'general') => {
+            document.getElementById('profilePopover').classList.add('hidden');
+            const modal = document.getElementById('settingsModal');
+            if (modal) {
+                modal.classList.remove('hidden');
+                switchSettingsTab(initialTab);
+                
+                // Sync data for Account tab
+                if (currentUserProfile) {
+                    const disp = document.getElementById('settingsDisplayName');
+                    const hand = document.getElementById('settingsUserHandle');
+                    const plan = document.getElementById('settingsPlanStatus');
+                    const bill = document.getElementById('settingsBillingRow');
+                    
+                    if (disp) disp.innerText = currentUserProfile.name || "Operator";
+                    if (hand) hand.innerText = `@${currentUserProfile.username || 'operator'}`;
+                    if (plan) plan.innerText = currentUserProfile.is_pro ? "Pro Plan" : "Free Plan";
+                    if (bill) {
+                        if (currentUserProfile.is_pro) bill.classList.remove('hidden');
+                        else bill.classList.add('hidden');
+                    }
+                    
+                    // Avatar
+                    const sImg = document.getElementById('settingsAvatarImg');
+                    const sInit = document.getElementById('settingsAvatarInit');
+                    if (auth.currentUser && auth.currentUser.photoURL) {
+                        sImg.src = auth.currentUser.photoURL;
+                        sImg.classList.remove('hidden');
+                        sInit.classList.add('hidden');
+                    } else {
+                        sInit.innerText = (currentUserProfile.name || "U")[0].toUpperCase();
+                        sInit.classList.remove('hidden');
+                        sImg.classList.add('hidden');
+                    }
+                }
+                
+                lucide.createIcons();
+            }
+        };
+
+        window.closeSettings = () => {
+            document.getElementById('settingsModal').classList.add('hidden');
+        };
+
+        window.switchSettingsTab = (tabId) => {
+            // Update Buttons
+            document.querySelectorAll('.settings-category-btn').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            const activeBtn = document.getElementById(`tabBtn-${tabId}`);
+            if (activeBtn) activeBtn.classList.add('active');
+
+            // Update Panes
+            document.querySelectorAll('.settings-pane').forEach(pane => {
+                pane.classList.add('hidden');
+            });
+            const activePane = document.getElementById(`settingsPane-${tabId}`);
+            if (activePane) activePane.classList.remove('hidden');
+            
+            lucide.createIcons();
+        };
+
+        window.applyTheme = (theme) => {
+            const body = document.body;
+            if (theme === 'light') {
+                body.classList.remove('dark');
+                body.classList.add('light');
+            } else if (theme === 'dark') {
+                body.classList.remove('light');
+                body.classList.add('dark');
+            } else {
+                // system
+                if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+                    body.classList.remove('dark');
+                    body.classList.add('light');
+                } else {
+                    body.classList.remove('light');
+                    body.classList.add('dark');
+                }
+            }
+        };
+
+        window.openEditProfile = () => {
+            const user = auth.currentUser;
+            if (!user || !currentUserProfile) return;
+
+            document.getElementById('profilePopover').classList.add('hidden');
+            const modal = document.getElementById('editProfileModal');
+            
+            // Populate fields
+            document.getElementById('editDisplayName').value = currentUserProfile.name || user.displayName || "";
+            document.getElementById('editUsername').value = currentUserProfile.username || "";
+            
+            // Avatar logic
+            const initials = document.getElementById('modalAvatarInitials');
+            const img = document.getElementById('modalAvatarImg');
+            if (user.photoURL) {
+                img.src = user.photoURL;
+                img.classList.remove('hidden');
+                initials.classList.add('hidden');
+            } else {
+                initials.innerText = (currentUserProfile.name || user.displayName || 'U')[0].toUpperCase();
+                initials.classList.remove('hidden');
+                img.classList.add('hidden');
+            }
+
+            modal.classList.remove('hidden');
+            lucide.createIcons();
+        };
+
+        window.closeEditProfile = () => {
+            document.getElementById('editProfileModal').classList.add('hidden');
+        };
+
+        window.saveProfile = async () => {
+            const user = auth.currentUser;
+            if (!user) return;
+
+            const nameInput = document.getElementById('editDisplayName').value;
+            const usernameInput = document.getElementById('editUsername').value;
+            const saveBtn = document.querySelector('#editProfileModal .sora-btn-primary');
+            const originalText = saveBtn.innerText;
+
+            try {
+                saveBtn.innerText = "Saving...";
+                saveBtn.disabled = true;
+
+                // 1. Update Firebase Auth Profile (Local display name)
+                await updateProfile(user, {
+                    displayName: nameInput
+                });
+
+                // 2. Update Backend Firestore Profile (Persistence)
+                const res = await apiFetch('/api/user/profile', {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        name: nameInput,
+                        username: usernameInput
+                    })
+                });
+
+                if (res.ok) {
+                    currentUserProfile = await res.json();
+                    
+                    // Update UI manually for instant feedback
+                    document.getElementById('userName').innerText = currentUserProfile.name;
+                    document.getElementById('popoverName').innerText = currentUserProfile.name;
+                    document.getElementById('popoverHandle').innerText = `@${currentUserProfile.username}`;
+                    
+                    window.closeEditProfile();
+                } else {
+                    throw new Error("Failed to save to database");
+                }
+                
+                saveBtn.innerText = originalText;
+                saveBtn.disabled = false;
+            } catch (error) {
+                console.error("Save Profile Error:", error);
+                alert("Failed to save profile: " + error.message);
+                saveBtn.innerText = originalText;
+                saveBtn.disabled = false;
+            }
+        };
+
+        window.handleAvatarChange = (input) => {
+            if (input.files && input.files[0]) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    const img = document.getElementById('modalAvatarImg');
+                    const initials = document.getElementById('modalAvatarInitials');
+                    img.src = e.target.result;
+                    img.classList.remove('hidden');
+                    initials.classList.add('hidden');
+                };
+                reader.readAsDataURL(input.files[0]);
+            }
+        };
+        
+        // Trigger file input
+        document.querySelector('#editProfileModal .group').onclick = () => {
+            document.getElementById('avatarInput').click();
+        };
+
+        onAuthStateChanged(auth, async (user) => {
+            const landing = document.getElementById('authLanding');
+            const dashboard = document.getElementById('appDashboard');
+            const sessionStatus = document.getElementById('sessionStatus');
+            const loginBtn = document.getElementById('loginBtn');
+            
+            const authCont = document.getElementById('authContainer');
+            const name = document.getElementById('userName');
+            const role = document.getElementById('userRole');
+            const icon = document.querySelector('#authContainer i[data-lucide]');
+
+            const authPopover = document.getElementById('profilePopover');
+            const popAvatar = document.getElementById('popoverAvatar');
+            const popInitials = document.getElementById('popoverInitials');
+            const popName = document.getElementById('popoverName');
+            
+            const userAvatarImg = document.getElementById('userAvatarImg');
+            const userAvatarDiv = document.getElementById('userAvatar');
+
+            if (user) {
+                // Captured Token for API
+                currentUserToken = await user.getIdToken();
+
+                // Show Dashboard
+                landing.classList.add('hidden');
+                dashboard.classList.remove('hidden');
+                setTimeout(() => dashboard.classList.remove('opacity-0'), 100);
+
+                // Populate Main Sidebar Trigger
+                if (userAvatarImg && userAvatarDiv) {
+                    if (user.photoURL) {
+                        userAvatarImg.src = user.photoURL;
+                        userAvatarImg.classList.remove('hidden');
+                        userAvatarDiv.classList.add('hidden');
+                    } else {
+                        userAvatarDiv.innerText = user.displayName ? user.displayName[0].toUpperCase() : 'U';
+                        userAvatarDiv.classList.remove('hidden');
+                        userAvatarImg.classList.add('hidden');
+                    }
+                }
+                
+                 // Populate Popover Header
+                if (popAvatar && popInitials) {
+                    if (user.photoURL) {
+                        popAvatar.src = user.photoURL;
+                        popAvatar.classList.remove('hidden');
+                        popInitials.classList.add('hidden');
+                    } else {
+                        popInitials.innerText = user.displayName ? user.displayName[0].toUpperCase() : 'U';
+                        popInitials.classList.remove('hidden');
+                        popAvatar.classList.add('hidden');
+                    }
+                }
+
+                if (name) name.innerText = user.displayName || user.email;
+                if (popName) popName.innerText = user.displayName || user.email;
+
+                // Updated Profile Fetch for Pro status & Username
+                const profRes = await apiFetch('/api/user/profile');
+                if (profRes.ok) {
+                    const prof = await profRes.json();
+                    currentUserProfile = prof; // Store globally
+
+                    const planText = prof.is_pro ? "Pro Plan" : "Free Plan";
+                    const creditCountText = `credits: ${prof.credits ?? 0}`;
+                    if (role) { role.innerText = creditCountText; role.className = "text-[9px] text-[#f14247] font-black truncate uppercase tracking-widest"; }
+
+                    const nameBadge = document.getElementById('nameBadge');
+                    const popBadge = document.getElementById('popoverBadge');
+
+                    if (prof.is_pro) {
+                        if (nameBadge) { nameBadge.innerText = "PRO"; nameBadge.classList.remove('hidden'); }
+                        if (popBadge) { popBadge.innerText = "PRO"; popBadge.classList.remove('hidden'); }
+                    } else {
+                        if (nameBadge) nameBadge.classList.add('hidden');
+                        if (popBadge) popBadge.classList.add('hidden');
+                    }
+                    
+                    const titlePrefix = prof.is_pro ? "Skrapyx | Pro" : "Skrapyx | Free";
+                    document.title = `${titlePrefix} - Analysis Dashboard`;
+
+                    if (prof.is_pro) {
+                        // Show Manage Subscription in Popover
+                        document.getElementById('popoverSubscriptionSection')?.classList.remove('hidden');
+                        document.getElementById('popoverUpgradeBtn')?.classList.add('hidden');
+                        document.getElementById('popoverManageBtn')?.classList.remove('hidden');
+
+                        // Hide Offer Pill for Pro users
+                        document.getElementById('offerPill')?.classList.add('hidden');
+                        
+                    } else {
+                        document.getElementById('creditBadge')?.classList.remove('hidden');
+
+                        // Show Upgrade to Pro in Popover
+                        document.getElementById('popoverSubscriptionSection')?.classList.remove('hidden');
+                        document.getElementById('popoverUpgradeBtn')?.classList.remove('hidden');
+                        document.getElementById('popoverManageBtn')?.classList.add('hidden');
+
+                        // Show Offer Pill for Free users
+                        document.getElementById('offerPill')?.classList.remove('hidden');
+                    }
+                    if (document.getElementById('creditCount')) {
+                        document.getElementById('creditCount').innerText = prof.credits ?? 0;
+                    }
+                    lucide.createIcons();
+                }
+
+                // Handle payment success feedback
+                const params = new URLSearchParams(window.location.search);
+                if (params.get('payment') === 'success') {
+                    showJobStatus("Intelligence credits refilled successfully!", "Refill Complete");
+                    setTimeout(() => {
+                         window.history.replaceState({}, document.title, "/"); 
+                    }, 2000);
+                }
+
+                // Show Logout UI
+                // Show Logout State in Popover context
+                if (icon) icon.setAttribute('data-lucide', 'circle-user-round'); 
+                // Ensure authContainer triggers the popover menu, not a direct sign-out
+                if (authCont) authCont.onclick = handleAuthClick;
+
+                // Fetch profiles and projects immediately upon auth
+                loadProjects();
+                
+                // Fetch Usage and refresh UI
+                if (window.fetchUsage) window.fetchUsage();
+            } else {
+                currentUserToken = null;
+                const creditBadge = document.getElementById('creditBadge');
+                if (creditBadge) creditBadge.classList.add('hidden');
+                
+                landing.classList.remove('hidden');
+                dashboard.classList.add('hidden');
+                dashboard.classList.add('opacity-0');
+                
+                // Show Login Button, hide Verification status
+                sessionStatus.classList.add('hidden');
+                loginBtn.classList.remove('hidden');
+
+                if (userAvatarDiv) userAvatarDiv.innerHTML = 'G';
+                if (name) name.innerText = "Sign In";
+                if (role) role.innerText = "Google Account";
+                if (icon) icon.setAttribute('data-lucide', 'log-in');
+                if (authCont) authCont.onclick = signInWithGoogle;
+            }
+            lucide.createIcons();
+        });
+
+        // Usage Metering Synchronizer
+        window.fetchUsage = async function() {
+            try {
+                // Ensure we have a token
+                if (!currentUserToken) return;
+
+                const res = await apiFetch('/api/user/usage');
+                if (res.ok) {
+                    const data = await res.json();
+                    const badge = document.getElementById('usageBadge');
+                    const count = document.getElementById('usageCount');
+                    if (badge && count) {
+                        if (data.usage > 0) {
+                            badge.classList.remove('hidden');
+                            count.innerText = data.usage;
+                        } else {
+                            badge.classList.add('hidden');
+                        }
+                    }
+                }
+            } catch (err) {
+                console.warn("[Usage] Synchronizer suppressed:", err);
+            }
+        };
+
+        // Periodic Usage Refresh (every 2 mins)
+        setInterval(() => {
+            if (window.fetchUsage) window.fetchUsage();
+
+        }, 120000);
+
+        // Agent Selection UI Logic
+        let pendingProjectContext = null;
+
+        window.openSelectionModal = (candidates, plannedName) => {
+            pendingProjectContext = { name: plannedName };
+            const modal = document.getElementById('agentSelectionModal');
+            const list = document.getElementById('agentCandidateList');
+            
+            list.innerHTML = candidates.map(c => `
+                <div onclick="finalizeAgentSelection('${c.id}', '${c.title.replace(/'/g, "\\'")}', '${c.source}', '${c.icon}')" 
+                     class="candidate-card p-4 rounded-3xl flex items-center gap-5 cursor-pointer group mb-3">
+                    <img src="${c.icon}" class="w-14 h-14 rounded-2xl shadow-2xl group-hover:scale-110 transition-transform">
+                    <div class="flex-1 min-w-0">
+                        <h4 class="text-sm font-black text-white truncate group-hover:text-[#f14247] transition-colors">${c.title}</h4>
+                        <div class="flex items-center gap-3 mt-1">
+                            <p class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">${c.developer || 'Unknown Publisher'}</p>
+                            ${c.installs ? `<span class="w-1 h-1 rounded-full bg-zinc-800"></span><p class="text-[10px] font-black text-zinc-400 uppercase tracking-widest">${c.installs}</p>` : ''}
+                        </div>
+                    </div>
+                    <div class="flex flex-col items-end gap-2">
+                        <span class="px-3 py-1 rounded-full text-[8px] font-black uppercase tracking-tighter ${c.source === 'App Store' ? 'bg-blue-500/10 text-blue-400 border border-blue-500/20' : 'bg-[#f14247]/10 text-[#f14247] border border-[#f14247]/20'}">
+                            ${c.source}
+                        </span>
+                        ${c.score ? `<div class="flex items-center gap-1 text-[10px] text-zinc-400"><i data-lucide="star" width="12" height="12" stroke-width="2.5" class="fill-amber-500 text-amber-500"></i> ${Number(c.score).toFixed(1)}</div>` : ''}
+                    </div>
+                </div>
+            `).join('');
+            
+            modal.classList.remove('hidden');
+            lucide.createIcons();
+        };
+
+        window.closeSelectionModal = () => {
+            document.getElementById('agentSelectionModal').classList.add('hidden');
+        };
+
+        window.finalizeAgentSelection = async (appId, title, source, icon) => {
+            closeSelectionModal();
+            
+            // Show progress overlay again
+            const overlay = document.getElementById('analyzingOverlay');
+            const tit = document.getElementById('jobStatusTitle');
+            const msg = document.getElementById('jobStatusMessage');
+            const bar = document.getElementById('progressBar');
+            const perc = document.getElementById('progressPercent');
+            
+            overlay.classList.remove('hidden');
+            tit.textContent = "Finalizing Correlation";
+            msg.textContent = `Establishing link to ${title}...`;
+            bar.style.width = "60%";
+            perc.textContent = "60%";
+            
+            try {
+                const projectRes = await apiFetch('/api/projects', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ 
+                        name: title,
+                        gp_id: source === 'Google Play' ? appId : null,
+                        as_id: source === 'App Store' ? appId : null
+                    })
+                });
+                const project = await projectRes.json();
+                
+                await loadProjects();
+                expandedProjects.add(project.id);
+                activeProjectId = project.id;
+                
+                tit.textContent = "Initiating Neural Sweep";
+                msg.textContent = "Preparing analysis nodes for full intelligence capture...";
+                bar.style.width = "85%";
+                perc.textContent = "85%";
+                
+                executeScan(project.id, source === 'Google Play' ? 'Android' : 'iOS');
+            } catch (err) {
+                console.error("Selection Finalize Error:", err);
+                overlay.classList.add('hidden');
+                alert("Failed to create project from selection.");
+            }
+        };
+
+        // --- Custom Billing Consent Logic ---
+        let consentPromise = null;
+        window.showMeteredConsent = async function(message) {
+            console.log("[Billing] Triggering Custom Consent Modal:", message);
+            const modal = document.getElementById('meteredBillingModal');
+            const msgEl = document.getElementById('meteredBillingMessage');
+            if (msgEl) msgEl.textContent = message;
+            modal.classList.remove('hidden');
+            modal.style.display = 'flex'; // Force visibility
+            
+            return new Promise((resolve) => {
+                consentPromise = resolve;
+            });
+        };
+
+        window.handleConsent = (choice) => {
+            console.log("[Billing] handleConsent triggered with choice:", choice);
+            const modal = document.getElementById('meteredBillingModal');
+            const confirmBtn = document.getElementById('meteredBillingConfirm');
+            
+            if (choice) {
+                confirmBtn.disabled = true;
+                confirmBtn.innerHTML = '<i data-lucide="loader-2" class="animate-spin w-4 h-4 mx-auto"></i>';
+                lucide.createIcons();
+            }
+
+            modal.classList.add('hidden');
+            modal.style.display = 'none'; 
+            
+            if (consentPromise) {
+                consentPromise(choice);
+                consentPromise = null;
+            }
+
+            // Reset buttons after delay
+            setTimeout(() => {
+                confirmBtn.disabled = false;
+                confirmBtn.textContent = 'Confirm & Analyze';
+                if (typeof lucide !== 'undefined') lucide.createIcons();
+            }, 2000);
+        };
+    </script>
+    <!-- Subscription Modal -->
+    <div id="subscriptionModal" class="fixed inset-0 z-[100] flex items-center justify-center p-6 bg-[#091116]/95 backdrop-blur-2xl hidden">
+        <div class="w-full max-w-6xl rounded-[40px] p-8 md:p-12 animate-in fade-in zoom-in duration-500 overflow-y-auto max-h-screen">
+            
+            <!-- Header -->
+            <div class="text-center mb-16 space-y-6">
+                <h2 class="text-5xl md:text-6xl font-black text-white italic uppercase tracking-tighter">Skrapyx Elite</h2>
+                <p class="text-zinc-500 text-xs font-bold uppercase tracking-[0.4em]">Scaling Neural Capacity & Market Domination</p>
+            </div>
+
+            <!-- Pricing Grid -->
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto mb-10">
+                
+                <!-- Basic Tier -->
+                <div class="relative w-full rounded-2xl p-1.5 shadow-xl backdrop-blur-xl border border-white/10 bg-transparent flex flex-col group transition-all duration-300 hover:border-white/20">
+                    <div class="relative mb-4 rounded-xl border border-white/10 bg-zinc-900/50 p-6">
+                        <div aria-hidden="true" class="absolute inset-x-0 top-0 h-48 rounded-[inherit] pointer-events-none" style="background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 40%, rgba(0,0,0,0) 100%)"></div>
+                        
+                        <div class="mb-8 flex items-center justify-between relative z-10">
+                            <div class="flex items-center gap-2 text-sm font-bold text-white tracking-widest uppercase">Neural Basic</div>
+                        </div>
+                        <div class="mb-3 flex items-end gap-1 relative z-10">
+                            <span class="text-4xl font-black tracking-tight text-white">$2.99</span>
+                            <span class="text-zinc-400 pb-1 text-xs font-bold uppercase tracking-widest">/ month</span>
+                        </div>
+                        <p class="text-zinc-500 text-xs relative z-10 font-medium italic">Essential intelligence for starting operators.</p>
+                    </div>
+                    
+                    <div class="space-y-6 p-4 flex-grow flex flex-col">
+                        <ul class="space-y-4 flex-grow text-[10px]">
+                            <li class="flex items-start gap-3 text-zinc-400 font-medium"><i data-lucide="check" class="w-4 h-4 text-[#f14247]/50 mt-0.5"></i> 10 Neural Scans / month</li>
+                            <li class="flex items-start gap-3 text-zinc-400 font-medium"><i data-lucide="check" class="w-4 h-4 text-[#f14247]/50 mt-0.5"></i> Standard Neural Synthesis</li>
+                            <li class="flex items-start gap-3 text-zinc-300 font-bold"><i data-lucide="check" class="w-4 h-4 text-[#f14247]/50 mt-0.5"></i> 3-Day History Archive</li>
+                        </ul>
+                        <button onclick="handleCheckout(this, 'single')" class="w-full py-5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all bg-white/5 text-white border border-white/10 hover:bg-white/10">Initialize Basic</button>
+                    </div>
+                </div>
+
+                <!-- Pro Tier (Highlight) -->
+                <div class="relative w-full rounded-2xl p-1.5 shadow-[0_0_80px_rgba(241,66,71,0.15)] backdrop-blur-xl border border-[#f14247]/50 bg-transparent flex flex-col scale-105 z-10">
+                    <div class="relative mb-4 rounded-xl border border-[#f14247]/20 bg-[#f14247]/[0.03] p-6">
+                        <div aria-hidden="true" class="absolute inset-x-0 top-0 h-48 rounded-[inherit] pointer-events-none" style="background: linear-gradient(180deg, rgba(241,66,71,0.15) 0%, rgba(241,66,71,0.05) 40%, rgba(0,0,0,0) 100%)"></div>
+                        
+                        <div class="mb-8 flex items-center justify-between relative z-10">
+                            <div class="flex items-center gap-2 text-sm font-black text-white tracking-widest uppercase">Neural Pro</div>
+                            <span class="border border-[#f14247]/30 text-[#f14247] bg-[#f14247]/10 rounded-full px-3 py-1 text-[9px] font-black uppercase tracking-widest">Active Focus</span>
+                        </div>
+                        <div class="mb-3 flex items-end gap-1 relative z-10">
+                            <span class="text-5xl font-black tracking-tight text-white">$7.99</span>
+                            <span class="text-zinc-400 pb-1 text-xs font-bold uppercase tracking-widest">/ month</span>
+                        </div>
+                        <p class="text-zinc-400 text-xs relative z-10 font-medium italic">Infinite neural capacity for professional operators.</p>
+                    </div>
+                    
+                    <div class="space-y-6 p-4 flex-grow flex flex-col">
+                        <ul class="space-y-4 flex-grow text-xs">
+                            <li class="flex items-start gap-3 text-white font-bold"><i data-lucide="zap" width="16" height="16" stroke-width="2.5" class="text-[#f14247] mt-0.5 fill-[#f14247]/20"></i> Unlimited Parallel Scans</li>
+                            <li class="flex items-start gap-3 text-zinc-300 font-medium"><i data-lucide="check" width="16" height="16" stroke-width="2.5" class="text-[#f14247] mt-0.5"></i> Live Market Monitoring</li>
+                            <li class="flex items-start gap-3 text-zinc-300 font-medium"><i data-lucide="check" width="16" height="16" stroke-width="2.5" class="text-[#f14247] mt-0.5"></i> Batch CSV Exports</li>
+                            <li class="flex items-start gap-3 text-zinc-300 font-medium"><i data-lucide="check" width="16" height="16" stroke-width="2.5" class="text-[#f14247] mt-0.5"></i> Priority Compute Queue</li>
+                            <li class="flex items-start gap-3 text-[#f14247] font-black"><i data-lucide="shield-check" width="16" height="16" stroke-width="2.5" class="text-[#f14247] mt-0.5"></i> 7-Day History Archive</li>
+                        </ul>
+                        <button onclick="handleCheckout(this, 'monthly')" class="w-full py-5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all bg-[#f14247] text-white hover:bg-[#ff5c61] shadow-[0_0_20px_rgba(241,66,71,0.3)]">Activate Pro Stream</button>
+                    </div>
+                </div>
+
+                <!-- Max Tier -->
+                <div class="relative w-full rounded-2xl p-1.5 shadow-xl backdrop-blur-xl border border-white/10 bg-transparent flex flex-col group transition-all duration-300 hover:border-white/20">
+                    <div class="relative mb-4 rounded-xl border border-white/10 bg-zinc-900/50 p-6">
+                        <div aria-hidden="true" class="absolute inset-x-0 top-0 h-48 rounded-[inherit] pointer-events-none" style="background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 40%, rgba(0,0,0,0) 100%)"></div>
+                        
+                        <div class="mb-8 flex items-center justify-between relative z-10">
+                            <div class="flex items-center gap-2 text-sm font-bold text-white tracking-widest uppercase">Neural Max</div>
+                        </div>
+                        <div class="mb-3 flex items-end gap-1 relative z-10">
+                            <span class="text-4xl font-black tracking-tight text-white">$79.99</span>
+                            <span class="text-zinc-400 pb-1 text-xs font-bold uppercase tracking-widest">/ year</span>
+                        </div>
+                        <p class="text-zinc-500 text-xs relative z-10 font-medium italic">Enterprise volume and permanent archive.</p>
+                    </div>
+                    
+                    <div class="space-y-6 p-4 flex-grow flex flex-col">
+                        <ul class="space-y-4 flex-grow text-xs">
+                            <li class="flex items-start gap-3 text-zinc-300 font-bold"><i data-lucide="check" width="16" height="16" stroke-width="2.5" class="text-[#f14247]/50 mt-0.5"></i> 2 Months Free Value</li>
+                            <li class="flex items-start gap-3 text-zinc-400 font-medium"><i data-lucide="check" width="16" height="16" stroke-width="2.5" class="text-[#f14247]/50 mt-0.5"></i> Everything in Pro</li>
+                            <li class="flex items-start gap-3 text-zinc-400 font-medium"><i data-lucide="check" width="16" height="16" stroke-width="2.5" class="text-[#f14247]/50 mt-0.5"></i> Raw API Access (BETA)</li>
+                        </ul>
+                        <button onclick="handleCheckout(this, 'yearly')" class="w-full py-5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all bg-white/5 text-white border border-white/10 hover:bg-white/10">Initialize Max</button>
+                    </div>
+                </div>
+
+                <!-- Pay As You Go (Metered) -->
+                <div class="relative w-full rounded-2xl p-1.5 shadow-xl backdrop-blur-xl border border-white/10 bg-transparent flex flex-col group transition-all duration-300 hover:border-white/20">
+                    <div class="relative mb-4 rounded-xl border border-white/10 bg-zinc-900/50 p-6">
+                        <div aria-hidden="true" class="absolute inset-x-0 top-0 h-48 rounded-[inherit] pointer-events-none" style="background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 40%, rgba(0,0,0,0) 100%)"></div>
+                        
+                        <div class="mb-8 flex items-center justify-between relative z-10">
+                            <div class="flex items-center gap-2 text-sm font-bold text-[#f14247] tracking-widest uppercase">Pay As You Go</div>
+                        </div>
+                        <div class="mb-3 flex items-end gap-1 relative z-10">
+                            <span class="text-4xl font-black tracking-tight text-white">$0</span>
+                            <span class="text-zinc-400 pb-1 text-xs font-bold uppercase tracking-widest">/ initial</span>
+                        </div>
+                        <p class="text-zinc-500 text-xs relative z-10 font-medium">Pay only for actual neural synthesis data.</p>
+                    </div>
+                    
+                    <div class="space-y-6 p-4 flex-grow flex flex-col">
+                        <ul class="space-y-4 flex-grow text-xs">
+                            <li class="flex items-start gap-3 text-zinc-300 font-bold"><i data-lucide="zap" width="16" height="16" stroke-width="2.5" class="text-[#f14247] mt-0.5 fill-[#f14247]/20"></i> $0.50 per Unified Scan</li>
+                            <li class="flex items-start gap-3 text-zinc-400 font-medium"><i data-lucide="check" width="16" height="16" stroke-width="2.5" class="text-[#f14247]/50 mt-0.5"></i> Automated Billing Cycles</li>
+                            <li class="flex items-start gap-3 text-zinc-400 font-medium"><i data-lucide="check" width="16" height="16" stroke-width="2.5" class="text-[#f14247]/50 mt-0.5"></i> Post-Pay Economy</li>
+                        </ul>
+                        <button onclick="handleCheckout(this, 'metered')" class="w-full py-5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all bg-[#f14247] text-white hover:bg-[#ff5c61] shadow-[0_0_20px_rgba(241,66,71,0.3)] flex items-center justify-center gap-2">
+                            <i data-lucide="credit-card" width="14" height="14"></i> Pay with Stripe ($0.50)
+                        </button>
+                    </div>
+                </div>
+
+            </div>
+            
+            <!-- Tax Transparency Note -->
+            <p class="text-center text-[9px] text-zinc-500 font-bold uppercase tracking-widest mb-10 mt-8 opacity-70">
+                * Taxes (e.g., VAT) will be calculated and displayed at checkout based on your billing address.
+            </p>
+
+            <!-- Footer -->
+            <div class="flex items-center justify-center max-w-5xl mx-auto border-t border-white/5 pt-8 mb-8 pb-10">
+                <button onclick="document.getElementById('subscriptionModal').classList.add('hidden')" class="text-zinc-500 px-6 py-2 text-[10px] rounded-full border border-white/5 font-black uppercase tracking-widest hover:text-white hover:bg-white/5 transition-all">Dismiss Terminal</button>
+                <div class="flex items-center gap-6 opacity-30 grayscale absolute right-12 bottom-16 hidden md:flex">
+                    <i data-lucide="shield-check" width="16" height="16" stroke-width="2.5" class="text-white"></i>
+                    <i data-lucide="credit-card" width="16" height="16" stroke-width="2.5" class="text-white"></i>
+                    <i data-lucide="lock" width="16" height="16" stroke-width="2.5" class="text-white"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Metered Billing Authorization Modal -->
+    <!-- Metered Billing Authorization Modal -->
+    <div id="meteredBillingModal" class="fixed inset-0 z-[1100] flex items-center justify-center p-6 bg-[#091116]/95 backdrop-blur-xl hidden">
+        <div class="w-full max-w-sm bg-[#0c0c0c] border border-white/5 rounded-[32px] p-8 animate-in fade-in zoom-in duration-300 shadow-2xl">
+            <div class="w-12 h-12 bg-[#f14247]/10 rounded-2xl flex items-center justify-center mb-6">
+                <i data-lucide="wallet" class="text-[#f14247]" width="24" height="24"></i>
+            </div>
+            
+            <h3 class="text-xl font-bold text-white tracking-tight mb-2">Credit Authorization</h3>
+            <p id="meteredBillingMessage" class="text-[13px] text-zinc-500 leading-relaxed font-medium mb-8">
+                Not enough credit. Do you want me to charge $0.50 for this store?
+            </p>
+
+            <div class="flex flex-col gap-3">
+                <button id="meteredBillingCheckout" onclick="handleCheckout(this, 'metered')"
+                        class="w-full py-4 bg-[#f14247] hover:bg-[#ff5c61] text-white text-[11px] font-black uppercase tracking-widest rounded-xl shadow-[0_0_20px_rgba(241,66,71,0.2)] transition-all flex items-center justify-center gap-2">
+                    <i data-lucide="credit-card" width="14" height="14"></i> Pay with Stripe ($0.50)
+                </button>
+                <div class="text-[9px] text-zinc-600 font-bold uppercase tracking-widest text-center my-1">— or —</div>
+                <button id="meteredBillingConfirm" onclick="handleConsent(true)" 
+                        class="w-full py-4 bg-zinc-900 hover:bg-zinc-800 text-zinc-300 text-[11px] font-black uppercase tracking-widest rounded-xl border border-white/5 transition-all">
+                    Background Analysis
+                </button>
+                <button id="meteredBillingCancel" onclick="handleConsent(false)"
+                        class="w-full py-3 text-zinc-500 hover:text-zinc-400 text-[10px] font-bold uppercase tracking-widest transition-all">
+                    Dismiss
+                </button>
+            </div>
+            
+            <p class="text-[9px] text-zinc-700 font-bold uppercase tracking-widest text-center mt-6">
+                * Added to your next monthly billing cycle
+            </p>
+        </div>
+    </div>
+
+    <!-- Settings Modal -->
+
+    <div id="settingsModal" class="fixed inset-0 z-[120] flex items-center justify-center p-6 bg-[#050505]/90 backdrop-blur-3xl hidden">
+        <div class="w-full max-w-3xl bg-[#161616] rounded-[28px] flex h-[580px] animate-in fade-in zoom-in duration-300 border border-white/5 overflow-hidden shadow-2xl">
+            <!-- Sidebar -->
+            <div class="w-[220px] bg-[#0c0c0c] border-right border-white/5 p-6 flex flex-col">
+                <div class="flex items-center justify-between mb-8">
+                    <button onclick="closeSettings()" class="p-1 hover:bg-white/5 rounded-lg transition-all">
+                        <i data-lucide="x" width="16" height="16" stroke-width="2.5"></i>
+                    </button>
+                </div>
+                <nav class="space-y-1.5 flex-1">
+                    <button onclick="switchSettingsTab('general')" id="tabBtn-general" class="settings-category-btn active">
+                        <i data-lucide="settings" width="16" height="16" stroke-width="2.5"></i> General
+                    </button>
+                    <button onclick="switchSettingsTab('notifications')" id="tabBtn-notifications" class="settings-category-btn">
+                        <i data-lucide="bell" width="16" height="16" stroke-width="2.5"></i> Notifications
+                    </button>
+                    <button onclick="switchSettingsTab('personalization')" id="tabBtn-personalization" class="settings-category-btn">
+                        <i data-lucide="smile" width="16" height="16" stroke-width="2.5"></i> Personalization
+                    </button>
+                    <button onclick="switchSettingsTab('account')" id="tabBtn-account" class="settings-category-btn">
+                        <i data-lucide="user" width="16" height="16" stroke-width="2.5"></i> Account
+                    </button>
+                </nav>
+            </div>
+
+            <!-- Content Area -->
+            <div class="flex-1 p-10 overflow-y-auto">
+                <!-- General Tab -->
+                <div id="settingsPane-general" class="settings-pane space-y-6">
+                    <h2 class="text-xl font-bold text-white mb-8">General</h2>
+                    
+                    <div class="settings-row">
+                        <span class="text-sm font-medium text-zinc-300">Theme</span>
+                        <select id="themeSelect" class="settings-select" onchange="applyTheme(this.value)">
+                            <option value="system">System</option>
+                            <option value="dark" selected>Dark</option>
+                            <option value="light">Light</option>
+                        </select>
+                    </div>
+                    <div class="settings-row">
+                        <span class="text-sm font-medium text-zinc-300">Language</span>
+                        <select class="settings-select">
+                            <option value="auto">Auto-detect</option>
+                            <option value="en">English</option>
+                            <option value="uz">O'zbek</option>
+                            <option value="ru">Русский</option>
+                        </select>
+                    </div>
+                    <div class="settings-row">
+                        <span class="text-sm font-medium text-zinc-300">Compact Mode</span>
+                        <div class="cursor-not-allowed">
+                            <i data-lucide="toggle-right" width="16" height="16" stroke-width="2.5" class="text-zinc-700"></i>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Account Tab -->
+                <div id="settingsPane-account" class="settings-pane hidden space-y-8">
+                    <h2 class="text-xl font-bold text-white mb-8">Account</h2>
+                    
+                    <div class="bg-white/5 rounded-2xl p-6 border border-white/5">
+                        <div class="flex items-center gap-4 mb-6">
+                            <img id="settingsAvatarImg" src="" class="w-16 h-16 rounded-full object-cover hidden border-2 border-white/10">
+                            <div id="settingsAvatarInit" class="w-16 h-16 rounded-full bg-zinc-800 flex items-center justify-center text-xl font-black text-white border-2 border-white/5">RU</div>
+                            <div>
+                                <h4 id="settingsDisplayName" class="text-base font-black text-white">Operator</h4>
+                                <p id="settingsUserHandle" class="text-xs text-zinc-500 font-bold uppercase tracking-widest mt-1">@operator</p>
+                            </div>
+                        </div>
+                        <button onclick="openEditProfile()" class="w-full py-2.5 rounded-xl bg-white/5 border border-white/10 text-[10px] font-black uppercase tracking-widest hover:bg-white/10 transition-all">Edit Personal Profile</button>
+                    </div>
+
+                    <div class="space-y-4">
+                        <h4 class="text-xs font-black text-zinc-500 uppercase tracking-[0.2em] mb-4">Subscription & Billing</h4>
+                        <div class="settings-row">
+                            <span class="text-sm font-medium text-zinc-300">Plan Status</span>
+                            <span id="settingsPlanStatus" class="text-[10px] font-black px-3 py-1 bg-[#f14247]/10 text-[#f14247] rounded-full border border-[#f14247]/20 uppercase tracking-widest">Free Plan</span>
+                        </div>
+                        <div id="settingsBillingRow" class="settings-row hidden">
+                            <span class="text-sm font-medium text-zinc-300">Payment Method</span>
+                            <button onclick="handlePortal(this)" class="text-[10px] font-black text-[#f14247] hover:underline uppercase tracking-widest">Manage in Stripe</button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Placeholder Tabs -->
+                <div id="settingsPane-notifications" class="settings-pane hidden p-12 text-center">
+                    <i data-lucide="bell" width="16" height="16" stroke-width="2.5" class="mx-auto mb-4 text-zinc-800"></i>
+                    <p class="text-zinc-600 text-sm font-bold uppercase tracking-widest">Notification settings integrated soon</p>
+                </div>
+                <div id="settingsPane-personalization" class="settings-pane hidden p-12 text-center">
+                    <i data-lucide="smile" width="16" height="16" stroke-width="2.5" class="mx-auto mb-4 text-zinc-800"></i>
+                    <p class="text-zinc-600 text-sm font-bold uppercase tracking-widest">Personalize your neural assistant</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Edit Profile Modal -->
+    <div id="editProfileModal" class="fixed inset-0 z-[130] flex items-center justify-center p-6 bg-[#050505]/95 backdrop-blur-2xl hidden">
+        <div class="w-full max-w-sm bg-[#161616] rounded-[32px] p-8 animate-in fade-in zoom-in duration-300 border border-white/5 shadow-2xl">
+            <h3 class="text-lg font-black text-white mb-8 tracking-tight">Edit profile</h3>
+            <div class="flex justify-center mb-10">
+                <div class="relative group cursor-pointer" onclick="document.getElementById('avatarInput').click()">
+                    <div id="modalAvatarInitials" class="w-24 h-24 rounded-full bg-zinc-800 flex items-center justify-center text-2xl font-black text-white/50 border-2 border-white/5 group-hover:border-white/20 transition-all">RU</div>
+                    <img id="modalAvatarImg" src="" class="w-24 h-24 rounded-full object-cover hidden border-2 border-white/10 group-hover:border-white/30 transition-all">
+                    <div class="absolute bottom-0 right-0 w-8 h-8 bg-zinc-900 rounded-full border border-white/10 flex items-center justify-center text-white shadow-xl group-hover:bg-zinc-800 transition-all">
+                        <i data-lucide="camera" width="16" height="16" stroke-width="2.5"></i>
+                    </div>
+                    <input type="file" id="avatarInput" class="hidden" accept="image/*" onchange="handleAvatarChange(this)">
+                </div>
+            </div>
+            <div class="profile-modal-input p-4 mb-3">
+                <label class="block text-[10px] font-black text-zinc-500 uppercase tracking-widest mb-1">Display name</label>
+                <input type="text" id="editDisplayName" class="w-full bg-transparent border-none p-0 text-sm font-bold text-white focus:ring-0 placeholder:text-zinc-700" placeholder="Your full name">
+            </div>
+            <div class="profile-modal-input p-4 mb-8">
+                <label class="block text-[10px] font-black text-zinc-500 uppercase tracking-widest mb-1">Username</label>
+                <input type="text" id="editUsername" class="w-full bg-transparent border-none p-0 text-sm font-bold text-white focus:ring-0 placeholder:text-zinc-700" placeholder="your_handle">
+            </div>
+            <p class="text-[10px] text-zinc-500 font-medium leading-relaxed mb-10 px-1">
+                Your profile helps people recognize you. Your name and username are also used in the Skrapyx platform.
+            </p>
+            <div class="flex gap-3 mt-4">
+                <button onclick="closeEditProfile()" class="flex-1 py-3.5 rounded-2xl text-[11px] font-black uppercase tracking-widest sora-btn-ghost transition-all">Cancel</button>
+                <button onclick="saveProfile()" class="flex-1 py-3.5 rounded-2xl text-[11px] font-black uppercase tracking-widest sora-btn-primary transition-all">Save</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Agent Selection Modal -->
+    <div id="agentSelectionModal" class="fixed inset-0 z-[140] flex items-center justify-center p-6 bg-[#091116]/95 backdrop-blur-3xl hidden">
+        <div class="w-full max-w-2xl bg-[#0c0c0c] border border-white/5 rounded-[40px] p-10 shadow-2xl animate-in fade-in zoom-in duration-500 overflow-hidden relative">
+            <div class="absolute -right-20 -top-20 w-64 h-64 bg-[#f14247]/10 blur-[100px] rounded-full pointer-events-none"></div>
+            
+            <header class="relative z-10 mb-8">
+                <h3 class="text-2xl font-black text-white tracking-tighter uppercase italic mb-2">Neural Candidate Pool</h3>
+                <p class="text-[10px] font-black tracking-[0.3em] text-zinc-500 uppercase">Select the exact target for deep analysis</p>
+            </header>
+
+            <div id="agentCandidateList" class="relative z-10 max-h-[400px] overflow-y-auto space-y-3 pr-2 custom-scrollbar">
+                <!-- Candidates will be injected here -->
+            </div>
+
+            <div class="relative z-10 flex gap-4 mt-10">
+                <button onclick="closeSelectionModal()" class="flex-1 py-5 bg-white/5 hover:bg-white/10 text-white text-[11px] font-black uppercase tracking-widest rounded-3xl transition-all">
+                    Discard Results
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Project Context Menu -->
+    <div id="projectContextMenu" class="context-menu hidden">
+        <div class="p-1 space-y-0.5">
+            <button onclick="handlePinProject()" class="context-item w-full">
+                <i data-lucide="pin" width="16" height="16" stroke-width="2.5"></i>
+                <span id="pinText">Pin Project</span>
+            </button>
+            <button onclick="handleRenameProject()" class="context-item w-full">
+                <i data-lucide="edit-3" width="16" height="16" stroke-width="2.5"></i>
+                <span>Rename Workspace</span>
+            </button>
+            <div class="h-px bg-zinc-800/50 my-1 mx-1"></div>
+            <button onclick="handleDeleteProject()" class="context-item danger w-full">
+                <i data-lucide="trash-2" width="16" height="16" stroke-width="2.5"></i>
+                <span>Delete Data</span>
+            </button>
+        </div>
+    </div>
+
+    <!-- Modal: Selection for AI Discovery -->
+    <div id="selectionModal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-[200] flex items-center justify-center p-6">
+        <div class="card w-full max-w-2xl bg-[#0c0c0c] p-0 overflow-hidden flex flex-col max-h-[85vh]">
+            <div class="p-8 border-b border-zinc-900 bg-zinc-900/10">
+                <div class="flex items-center justify-between mb-2">
+                    <h3 class="text-lg font-semibold text-white tracking-tight">Intelligence Targets</h3>
+                    <button onclick="closeSelectionModal()" class="text-zinc-600 hover:text-white transition-colors">
+                        <i data-lucide="x" size="20"></i>
+                    </button>
+                </div>
+                <p class="text-[11px] text-zinc-500">Select the app that most closely matches your vision for deep analysis.</p>
+            </div>
+            
+            <div id="selectionList" class="flex-1 overflow-y-auto p-6 space-y-3 scrollbar-none">
+                <!-- Candidates will be injected here -->
+            </div>
+        </div>
+    </div>
+
+    <!-- Global Analyzing Overlay -->
+    <div id="analyzingOverlay" class="hidden fixed inset-0 z-[1000] flex flex-col items-center justify-center bg-[#091116]/95 animate-in fade-in duration-300">
+        <div class="relative mb-8 w-16 h-16">
+            <div class="absolute inset-0 border-2 border-[#f14247]/10 rounded-full"></div>
+            <div id="loadingSpinner" class="absolute inset-0 border-2 border-[#f14247] border-t-transparent rounded-full animate-spin"></div>
+            <div class="absolute inset-0 flex items-center justify-center">
+                <div class="w-1 h-1 bg-[#f14247] rounded-full animate-ping"></div>
+            </div>
+        </div>
+        
+        <h2 id="jobStatusTitle" class="text-xl font-medium text-white mb-1 tracking-tight">Neural Syncing</h2>
+        <p id="jobStatusMessage" class="text-zinc-600 text-[11px] mb-8 uppercase tracking-widest">Acquiring market signals...</p>
+        
+        <div class="w-48 h-1 bg-zinc-900 rounded-full overflow-hidden">
+            <div id="progressBar" class="h-full bg-[#f14247] w-0 transition-all duration-700"></div>
+        </div>
+        <div id="progressPercent" class="mt-3 text-[10px] text-zinc-600 tabular-nums font-medium">0%</div>
+    </div>
+
+    <style>
+        .candidate-card {
+            background: rgba(255, 255, 255, 0.02);
+            border: 1px solid rgba(255, 255, 255, 0.04);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .candidate-card:hover {
+            background: rgba(241, 66, 71, 0.05);
+            border-color: rgba(241, 66, 71, 0.2);
+            transform: translateX(8px);
+        }
+        .candidate-card.selected {
+            background: rgba(241, 66, 71, 0.1);
+            border-color: rgba(241, 66, 71, 0.4);
+        }
+    </style>
+</body>
+</html>
