diff --git "a/templates/index.html" "b/templates/index.html"
--- "a/templates/index.html"
+++ "b/templates/index.html"
@@ -1,2212 +1,2212 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dynamic English Study Studio</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-        body { font-family: 'Inter', sans-serif; background-color: #f7f9fc; }
-        .card { background-color: white; border-radius: 12px; box-shadow: 0 4px_12px rgba(0,0,0,0.08); padding: 24px; }
-        .btn { padding: 0.5rem 1rem; border-radius: 8px; font-weight: 600; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
-        .btn:disabled { cursor: not-allowed; opacity: 0.5; }
-        .btn-primary { background-color: #4f46e5; color: white; }
-        .btn-primary:hover:not(:disabled) { background-color: #4338ca; }
-        .spinner { border: 2px solid rgba(255,255,255,0.3); width: 20px; height: 20px; border-radius: 50%; border-left-color: #fff; animation: spin 1s ease infinite; }
-        @keyframes spin { to { transform: rotate(360deg); } }
-        .flashcard-container { perspective: 1000px; position: relative; }
-        .flashcard-inner { position: relative; width: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
-        .flashcard-container.flipped .flashcard-inner { transform: rotateY(180deg); }
-        .flashcard-front, .flashcard-back { position: absolute; width: 100%; height:100%; backface-visibility: hidden; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
-        .flashcard-front { background-color: #f9fafb; }
-        .flashcard-back { background-color: #ffffff; transform: rotateY(180deg); }
-        .audio-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #4f46e5; padding: 0; }
-        .delete-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #9ca3af; z-index: 10; }
-        .delete-btn:hover { color: #ef4444; }
-        #activityChatDisplay { border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; min-height: 150px; background-color: #f9fafb; }
-        .ai-prompt { border-bottom: 2px dashed #d1d5db; padding-bottom: 1rem; margin-bottom: 1rem; }
-        .user-response-display { background-color: #eef2ff; border-left: 4px solid #4f46e5; padding: 0.75rem; margin-bottom: 1rem; font-style: italic; }
-        .ai-feedback { background-color: #f0fdf4; border-left: 4px solid #22c55e; padding: 0.75rem; }
-        .ai-feedback h3 { font-weight: 700; }
-        
-        /* Toast Notifications */
-        .toast-container { position: fixed; top: 20px; right: 20px; z-index: 1000; max-width: 400px; }
-        .toast { background: white; border-left: 4px solid #4f46e5; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); padding: 1rem; margin-bottom: 0.5rem; opacity: 0; transform: translateX(100%); transition: all 0.3s ease; }
-        .toast.show { opacity: 1; transform: translateX(0); }
-        .toast.error { border-left-color: #ef4444; }
-        .toast.success { border-left-color: #10b981; }
-        .toast.warning { border-left-color: #f59e0b; }
-        .toast-close { float: right; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #9ca3af; }
-        
-        /* Loading States & Skeleton */
-        .loading-skeleton { 
-            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); 
-            background-size: 200% 100%; 
-            animation: loading 1.5s infinite; 
-            border-radius: 4px;
-        }
-        @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
-        
-        .skeleton-text { height: 1rem; margin: 0.25rem 0; }
-        .skeleton-text.large { height: 1.5rem; }
-        .skeleton-text.small { height: 0.75rem; }
-        .skeleton-box { height: 100px; border-radius: 8px; }
-        
-        /* Enhanced Loading Spinner */
-        .spinner-container { display: flex; align-items: center; justify-content: center; padding: 2rem; }
-        .spinner-large { width: 40px; height: 40px; border-width: 4px; }
-        
-        /* Fade in animations */
-        .fade-in { animation: fadeIn 0.5s ease-in; }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-        
-        /* Slide in animations */
-        .slide-in { animation: slideIn 0.3s ease-out; }
-        @keyframes slideIn { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
-        
-        /* Empty states */
-        .empty-state { 
-            text-align: center; padding: 3rem 1rem; color: #6b7280; 
-            background: #f9fafb; border: 2px dashed #d1d5db; border-radius: 12px; margin: 1rem 0;
-        }
-        .empty-state-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
-        .empty-state-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #374151; }
-        .empty-state-description { font-size: 0.875rem; line-height: 1.5; }
-        
-        /* Enhanced Flashcards - Responsive */
-        .flashcard-container { perspective: 1000px; position: relative; }
-        .flashcard-inner { position: relative; width: 100%; min-height: 280px; transition: transform 0.6s; transform-style: preserve-3d; }
-        .flashcard-container.flipped .flashcard-inner { transform: rotateY(180deg); }
-        .flashcard-front, .flashcard-back { 
-            position: absolute; width: 100%; height: 100%; min-height: 280px; backface-visibility: hidden; 
-            border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; 
-            justify-content: space-between; word-wrap: break-word; overflow-wrap: break-word; 
-        }
-        .flashcard-front { background-color: #f9fafb; }
-        .flashcard-back { background-color: #ffffff; transform: rotateY(180deg); }
-        
-        /* Responsive text handling */
-        .flashcard-text { 
-            font-size: 1rem; line-height: 1.5; max-height: 150px; overflow-y: auto; 
-            word-break: break-word; hyphens: auto; padding: 0.25rem 0;
-        }
-        
-        /* Mobile responsiveness */
-        @media (max-width: 768px) {
-            .flashcard-text { font-size: 0.9rem; max-height: 120px; line-height: 1.4; }
-            .flashcard-container { margin-bottom: 1rem; }
-            .flashcard-inner { min-height: 250px; }
-            .flashcard-front, .flashcard-back { min-height: 250px; padding: 16px; }
-            .card { padding: 16px; }
-            body { padding: 0.5rem; }
-            .container { padding: 0; }
-            
-            /* Adjust grid for mobile */
-            .grid.grid-cols-1.md\\:grid-cols-3 { grid-template-columns: 1fr; }
-            .grid.grid-cols-1.lg\\:grid-cols-2 { grid-template-columns: 1fr; }
-        }
-        
-        @media (max-width: 480px) {
-            .flashcard-text { font-size: 0.85rem; max-height: 100px; }
-            .flashcard-inner { min-height: 220px; }
-            .flashcard-front, .flashcard-back { min-height: 220px; padding: 12px; }
-            
-            /* Make buttons more touch-friendly */
-            .btn { padding: 0.75rem 1rem; min-height: 44px; }
-            .audio-btn { font-size: 1.25rem; padding: 0.5rem; }
-            .delete-btn { font-size: 1rem; padding: 0.5rem; }
-        }
-        
-        /* Text overflow handling */
-        .text-truncate { 
-            overflow: hidden; 
-            text-overflow: ellipsis; 
-            white-space: nowrap; 
-        }
-        
-        .text-wrap { 
-            white-space: normal; 
-            word-wrap: break-word; 
-            overflow-wrap: break-word; 
-        }
-        
-        /* Form Validation */
-        .form-error { border-color: #ef4444 !important; }
-        .error-message { color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem; }
-        
-        /* Enhanced buttons */
-        .btn { position: relative; overflow: hidden; }
-        .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,0.3); transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s; }
-        .btn:active::after { width: 300px; height: 300px; }
-        
-        /* Pulse animation for mic button */
-        .mic-button.is-recording { animation: pulse 1.5s infinite; }
-        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
-        
-        /* Auth Modal */
-        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
-        .modal.show { display: block; }
-        .modal-content { 
-            background-color: white; margin: 5% auto; padding: 0; width: 90%; max-width: 400px; 
-            border-radius: 12px; position: relative; animation: modalSlideIn 0.3s ease;
-        }
-        @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
-        .modal-header { padding: 1.5rem; border-bottom: 1px solid #e5e7eb; }
-        .modal-body { padding: 1.5rem; }
-        .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; gap: 0.5rem; }
-        .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
-        .close:hover { color: #000; }
-        
-        /* Auth Form */
-        .auth-form { display: none; }
-        .auth-form.active { display: block; }
-        .form-group { margin-bottom: 1rem; }
-        .form-group label { display: block; margin-bottom: 0.25rem; font-weight: 500; color: #374151; }
-        .form-group input { width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.875rem; }
-        .form-group input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
-        
-        /* User Menu */
-        .user-menu { position: relative; display: inline-block; }
-        .user-menu-content { display: none; position: absolute; right: 0; background-color: white; min-width: 200px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); border-radius: 8px; z-index: 1; border: 1px solid #e5e7eb; }
-        .user-menu.show .user-menu-content { display: block; }
-        .user-menu-item { padding: 0.75rem 1rem; display: block; color: #374151; text-decoration: none; border-bottom: 1px solid #f3f4f6; }
-        .user-menu-item:hover { background-color: #f9fafb; }
-        .user-menu-item:last-child { border-bottom: none; }
-        
-        /* Header Auth Section */
-        .auth-section { display: flex; align-items: center; gap: 0.5rem; }
-        .user-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: #4f46e5; color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; cursor: pointer; }
-        
-        /* Content Curation Styles */
-        .content-item { 
-            border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; margin-bottom: 1rem;
-            background: white; transition: all 0.2s;
-        }
-        .content-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-color: #4f46e5; }
-        .content-item-title { font-weight: 600; color: #1f2937; margin-bottom: 0.5rem; }
-        .content-item-meta { font-size: 0.75rem; color: #6b7280; margin-bottom: 0.5rem; }
-        .content-item-summary { font-size: 0.875rem; color: #4b5563; line-height: 1.5; }
-        .difficulty-badge { 
-            display: inline-block; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 500;
-        }
-        .difficulty-easy { background-color: #dcfce7; color: #166534; }
-        .difficulty-medium { background-color: #fef3c7; color: #92400e; }
-        .difficulty-hard { background-color: #fee2e2; color: #991b1b; }
-        
-        /* Analytics Styles */
-        .metric-card { 
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
-            color: white; border-radius: 12px; padding: 1.5rem; text-align: center; 
-        }
-        .metric-value { font-size: 2rem; font-weight: bold; margin-bottom: 0.5rem; }
-        .metric-label { font-size: 0.875rem; opacity: 0.9; }
-        
-        /* Study Plan Styles */
-        .plan-activity { 
-            display: flex; align-items: center; padding: 0.75rem; border-radius: 6px; 
-            border-left: 4px solid #4f46e5; background-color: #f8fafc; margin-bottom: 0.5rem;
-        }
-        .plan-activity-icon { margin-right: 0.75rem; font-size: 1.25rem; }
-        .plan-activity-text { flex-grow: 1; font-size: 0.875rem; }
-        .plan-activity-time { font-size: 0.75rem; color: #6b7280; }
-    </style>
-</head>
-<body class="p-4 md:p-8">
-    <!-- Toast Container -->
-    <div id="toastContainer" class="toast-container"></div>
-
-    <div class="container mx-auto max-w-5xl">
-        <header class="mb-10">
-            <div class="flex justify-between items-center mb-6">
-                <div>
-                    <h1 class="text-3xl lg:text-4xl font-bold text-gray-800">Dynamic English Study Studio</h1>
-                    <p class="text-gray-500 mt-2">Your study tool with audio, images, and conversation & pronunciation practice.</p>
-                    <div id="demoModeIndicator" class="mt-2" style="display: none;">
-                        <div class="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
-                            🚀 Demo Mode - No email confirmation needed
-                        </div>
-                    </div>
-                </div>
-                <div class="auth-section">
-                    <!-- Navigation: always visible in HF guest mode -->
-                    <nav class="flex items-center gap-3">
-                        <a href="/admin" class="btn bg-gray-100 hover:bg-gray-200 text-gray-800">Admin</a>
-                        <a href="/dashboard" class="btn bg-gray-100 hover:bg-gray-200 text-gray-800">Dashboard</a>
-                        <a href="/status" class="btn bg-gray-100 hover:bg-gray-200 text-gray-800">Status</a>
-                    </nav>
-                </div>
-            </div>
-        </header>
-
-        <div class="card mb-8">
-            <h2 class="text-xl font-semibold mb-4 text-gray-700">Global Session Settings</h2>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div>
-                   <label for="modelSelector" class="block text-sm font-medium text-gray-700">Main AI Model</label>
-                   <select id="modelSelector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 rounded-md shadow-sm">
-                       <option>Loading models...</option>
-                   </select>
-                </div>
-               <div>
-                   <label for="contextSelector" class="block text-sm font-medium text-gray-700">Vocabulary Focus</label>
-                   <select id="contextSelector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 rounded-md shadow-sm">
-                       <option value="General/Social">General/Social</option>
-                       <option value="Professional/Business">Professional/Business</option>
-                       <option value="Technical/IT">Technical/IT</option>
-                   </select>
-               </div>
-               <div>
-                   <label for="voiceSelector" class="block text-sm font-medium text-gray-700">Voice Accent (TTS)</label>
-                   <select id="voiceSelector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 rounded-md shadow-sm">
-                       <option value="co.uk">British (Female)</option>
-                       <option value="com">American (Female)</option>
-                       <option value="com.au">Australian (Female)</option>
-                   </select>
-               </div>
-           </div>
-        </div>
-
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-            <!-- Coluna da Esquerda: Inputs -->
-            <div class="flex flex-col gap-6">
-                <div class="card">
-                    <h2 class="text-xl font-semibold mb-4 text-gray-700">1. Study from Text</h2>
-                    <div id="textEditor" contenteditable="true" spellcheck="true" lang="en" class="w-full p-4 border rounded-md min-h-[150px]"></div>
-                    <p class="text-sm text-right text-gray-500 mt-2">Characters: <span id="charCount">0</span>/10000</p>
-                    <div class="mt-4 border-t pt-4 flex flex-wrap gap-2 justify-between items-center">
-                        <button id="createCardButton" onclick="createFlashcardFromSelection()" class="btn btn-primary bg-green-600 hover:bg-green-700 disabled:opacity-50" disabled>+ Create Flashcard</button>
-                        <button id="playButton" onclick="handlePlay()" class="btn btn-primary" disabled>
-                            <span id="playText">Listen to Text</span>
-                            <div id="playSpinner" class="spinner ml-2 hidden"></div>
-                        </button>
-                    </div>
-                    <audio id="audioPlayer" controls class="w-full mt-4 hidden"></audio>
-                </div>
-
-                <div class="card">
-                    <h2 class="text-xl font-semibold mb-4 text-gray-700">2. Study from Image (Analysis)</h2>
-                    <input type="file" id="imageUploader" accept="image/*" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100"/>
-                    <img id="imagePreview" src="" class="mt-4 rounded-lg hidden max-h-60 mx-auto" alt="Preview"/>
-                    <div id="imageAnalysisResult" class="mt-4"></div>
-                </div>
-                
-                 <div class="card">
-                    <h2 class="text-xl font-semibold mb-4 text-gray-700">3. Conversation Practice</h2>
-                    <div id="chatDisplay" class="flex flex-col space-y-2 mb-4"></div>
-                    <div class="flex gap-2">
-                        <input type="text" id="chatInput" class="flex-grow border rounded-lg px-3 py-2" placeholder="Type or use the microphone...">
-                        <button onclick="handleTextInput()" class="btn btn-primary bg-gray-500 hover:bg-gray-600">Send</button>
-                        <button id="micButton" onclick="handleVoiceInput()" class="btn btn-primary mic-button w-12 h-12 rounded-full">🎙️</button>
-                    </div>
-                </div>
-
-                <div class="card">
-                    <h2 class="text-xl font-semibold mb-4 text-gray-700">4. Image Generator (Nano Banana)</h2>
-                    <p class="text-sm text-gray-600 mb-2">Describe a scene in English for the AI to draw.</p>
-                    <div class="flex gap-2">
-                        <input type="text" id="imagePromptInput" class="flex-grow border rounded-lg px-3 py-2" placeholder="Ex: a blue cat reading a book on the moon">
-                        <button id="generateImageBtn" onclick="generateImage()" class="btn btn-primary">Generate</button>
-                    </div>
-                    <div id="imageResultContainer" class="mt-4 p-4 border rounded-lg bg-gray-50 min-h-[200px] flex items-center justify-center">
-                        <p class="text-gray-500 italic">Your image will appear here.</p>
-                    </div>
-                </div>
-                
-                <div class="card">
-                    <h2 class="text-xl font-semibold mb-4 text-gray-700">5. Content Discovery & Curation</h2>
-                    <div id="contentCuration" style="display: none;">
-                        <div class="mb-4">
-                            <h3 class="text-lg font-medium mb-2">🔍 Find Relevant Content</h3>
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Search Topic</label>
-                                    <input type="text" id="contentSearchInput" class="w-full border rounded-lg px-3 py-2" placeholder="e.g., cybersecurity, product management">
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
-                                    <select id="contentCategorySelect" class="w-full border rounded-lg px-3 py-2">
-                                        <option value="">All Categories</option>
-                                        <option value="technology">Technology</option>
-                                        <option value="business">Business</option>
-                                        <option value="automotive">Automotive</option>
-                                        <option value="cybersecurity">Cybersecurity</option>
-                                        <option value="science">Science</option>
-                                    </select>
-                                </div>
-                            </div>
-                            <div class="flex gap-2 mb-4">
-                                <button onclick="searchContent()" class="btn btn-primary">🔍 Search Articles</button>
-                                <button onclick="getRecommendations()" class="btn bg-purple-500 hover:bg-purple-600 text-white">✨ AI Recommendations</button>
-                                <button onclick="showSavedArticles()" class="btn bg-green-500 hover:bg-green-600 text-white">📚 Saved Articles</button>
-                            </div>
-                        </div>
-                        
-                        <div id="contentResults" class="space-y-4">
-                            <div class="empty-state">
-                                <div class="empty-state-icon">🔍</div>
-                                <div class="empty-state-title">Discover Personalized Content</div>
-                                <div class="empty-state-description">Search for articles or get AI recommendations based on your interests and English level</div>
-                            </div>
-                        </div>
-                        
-                        <div class="mt-6 pt-4 border-t">
-                            <h3 class="text-lg font-medium mb-2">📝 Add Your Own Content</h3>
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-                                <input type="text" id="customContentTitle" class="border rounded-lg px-3 py-2" placeholder="Article Title">
-                                <input type="url" id="customContentUrl" class="border rounded-lg px-3 py-2" placeholder="URL (optional)">
-                            </div>
-                            <textarea id="customContentText" rows="4" class="w-full border rounded-lg px-3 py-2 mb-4" placeholder="Paste your text content here..."></textarea>
-                            <button onclick="saveCustomContent()" class="btn btn-primary">💾 Save Content</button>
-                        </div>
-                    </div>
-                    <!-- In guest mode content curation is available but saving is local-only -->
-                    <div id="contentCurationLogin" class="text-center py-8" style="display:none;">
-                        <!-- hidden in HF guest mode -->
-                    </div>
-                </div>
-
-                <div class="card">
-                    <h2 class="text-xl font-semibold mb-4 text-gray-700">6. Interactive Writing Practice</h2>
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-                       <div>
-                           <label for="activityTypeSelector" class="block text-sm font-medium text-gray-700">Activity Type</label>
-                           <select id="activityTypeSelector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 rounded-md shadow-sm">
-                               <option value="translate_pt_en">Translate (PT to EN)</option>
-                               <option value="email_writing">Write Formal Email</option>
-                               <option value="summary_writing">Summarize Main Text</option>
-                               <option value="professional_conversation">Simulate Professional Conversation</option>
-                           </select>
-                       </div>
-                        <div class="flex items-end">
-                             <button id="generateActivityButton" onclick="generateActivity()" class="btn btn-primary w-full">Generate Activity</button>
-                        </div>
-                    </div>
-                    
-                    <div id="activityChatContainer" class="mt-4 border-t pt-4">
-                        <div id="activityChatDisplay">
-                            <p class="text-gray-500 italic">Your interactive exercise will appear here.</p>
-                        </div>
-                        <div id="activityResponseArea" class="mt-4 hidden">
-                            <label for="activityInput" class="block text-sm font-medium text-gray-700 mb-1">Your Answer:</label>
-                            <textarea id="activityInput" rows="4" class="w-full p-2 border rounded-md"></textarea>
-                            <button id="submitActivityBtn" onclick="submitActivityResponse()" class="btn btn-primary mt-2">Submit Answer</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Coluna da Direita: Painel Dinâmico -->
-            <div class="flex flex-col gap-6">
-                <!-- Study Analytics Panel (for logged users) -->
-                <div id="analyticsPanel" class="card" style="display: none;">
-                    <div class="flex justify-between items-center mb-4">
-                        <h2 class="text-xl font-semibold text-gray-700">📊 Your Progress</h2>
-                        <button onclick="toggleAnalytics()" class="text-gray-500 hover:text-gray-700">↕️</button>
-                    </div>
-                    <div id="analyticsContent">
-                        <div class="grid grid-cols-2 gap-4 mb-4">
-                            <div class="text-center p-4 bg-blue-50 rounded-lg">
-                                <div class="text-2xl font-bold text-blue-600" id="totalFlashcards">0</div>
-                                <div class="text-sm text-gray-600">Flashcards</div>
-                            </div>
-                            <div class="text-center p-4 bg-green-50 rounded-lg">
-                                <div class="text-2xl font-bold text-green-600" id="totalArticles">0</div>
-                                <div class="text-sm text-gray-600">Articles</div>
-                            </div>
-                        </div>
-                        <div class="text-center p-3 bg-purple-50 rounded-lg">
-                            <div class="text-lg font-semibold text-purple-600" id="currentLevel">B1</div>
-                            <div class="text-sm text-gray-600">Current Level</div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Study Planner Panel (for logged users) -->
-                <div id="studyPlannerPanel" class="card" style="display: none;">
-                    <h2 class="text-xl font-semibold mb-4 text-gray-700">🎯 Study Planner</h2>
-                    <div id="studyPlanContent">
-                        <div class="mb-4">
-                            <h3 class="font-medium mb-2">Quick Plan Generator</h3>
-                            <div class="grid grid-cols-1 gap-2 mb-3">
-                                <select id="targetLevelSelect" class="border rounded-lg px-3 py-2 text-sm">
-                                    <option value="A2">Target: A2 (Elementary)</option>
-                                    <option value="B1">Target: B1 (Intermediate)</option>
-                                    <option value="B2" selected>Target: B2 (Upper-Intermediate)</option>
-                                    <option value="C1">Target: C1 (Advanced)</option>
-                                    <option value="C2">Target: C2 (Proficient)</option>
-                                </select>
-                                <select id="weeklyHoursSelect" class="border rounded-lg px-3 py-2 text-sm">
-                                    <option value="3">3 hours/week</option>
-                                    <option value="5" selected>5 hours/week</option>
-                                    <option value="7">7 hours/week</option>
-                                    <option value="10">10 hours/week</option>
-                                </select>
-                            </div>
-                            <button onclick="generateStudyPlan()" class="btn btn-primary w-full text-sm">🚀 Generate Plan</button>
-                        </div>
-                        <div id="studyPlanResult" class="text-sm text-gray-600">
-                            Your personalized study plan will appear here
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Flashcards Panel -->
-                <div id="flashcardsPanel" class="card">
-                    <div class="flex justify-between items-center mb-4">
-                        <h2 class="text-xl font-semibold text-gray-700">Your Study Session</h2>
-                        <div class="flex items-center gap-2">
-                            <button id="loadFlashcardsBtn" onclick="showUserFlashcards()" class="btn bg-blue-100 text-blue-700 hover:bg-blue-200 text-sm" style="display: none;" title="Load your saved flashcards">📚 Load Saved</button>
-                            <div id="sessionStatus" class="text-sm">
-                                <span id="guestStatus" class="text-gray-500">Guest Mode - Progress not saved</span>
-                                <span id="userStatus" class="text-green-600" style="display: none;">✓ Progress being saved</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div id="flashcardList" class="space-y-6">
-                        <div id="noCardsMessage" class="empty-state">
-                            <div class="empty-state-icon">📚</div>
-                            <div class="empty-state-title">No flashcards yet</div>
-                            <div class="empty-state-description">
-                                Select text from the editor or analyze an image to create your first flashcard!
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Auth Modal -->
-    <div id="authModal" class="modal">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h2 id="authModalTitle">Login</h2>
-                <span class="close" onclick="hideAuthModal()">&times;</span>
-            </div>
-            <div class="modal-body">
-                <!-- Login Form -->
-                <form id="loginForm" class="auth-form active">
-                    <div class="form-group">
-                        <label for="loginEmail">Email</label>
-                        <input type="email" id="loginEmail" required>
-                    </div>
-                    <div class="form-group">
-                        <label for="loginPassword">Password</label>
-                        <input type="password" id="loginPassword" required>
-                    </div>
-                    <button type="submit" class="btn btn-primary w-full">Login</button>
-                    <p class="text-center mt-4 text-sm text-gray-600">
-                        Don't have an account? 
-                        <a href="#" onclick="switchAuthForm('register')" class="text-indigo-600 hover:text-indigo-800">Sign up</a>
-                    </p>
-                </form>
-                
-                <!-- Register Form -->
-                <form id="registerForm" class="auth-form">
-                    <div class="form-group">
-                        <label for="registerEmail">Email</label>
-                        <input type="email" id="registerEmail" required>
-                    </div>
-                    <div class="form-group">
-                        <label for="registerPassword">Password</label>
-                        <input type="password" id="registerPassword" required minlength="8">
-                        <small class="text-gray-500">At least 8 characters</small>
-                    </div>
-                    <div class="form-group">
-                        <label for="confirmPassword">Confirm Password</label>
-                        <input type="password" id="confirmPassword" required>
-                    </div>
-                    <button type="submit" class="btn btn-primary w-full">Create Account</button>
-                    <p class="text-center mt-4 text-sm text-gray-600">
-                        Already have an account? 
-                        <a href="#" onclick="switchAuthForm('login')" class="text-indigo-600 hover:text-indigo-800">Login</a>
-                    </p>
-                </form>
-            </div>
-        </div>
-    </div>
-
-<script>
-    // --- ELEMENTOS GLOBAIS ---
-    const modelSelector = document.getElementById('modelSelector');
-    const contextSelector = document.getElementById('contextSelector');
-    const voiceSelector = document.getElementById('voiceSelector');
-    const textEditor = document.getElementById('textEditor');
-    const createCardButton = document.getElementById('createCardButton');
-    const playButton = document.getElementById('playButton');
-    const audioPlayer = document.getElementById('audioPlayer');
-    const flashcardList = document.getElementById('flashcardList');
-    const noCardsMessage = document.getElementById('noCardsMessage');
-    const imageUploader = document.getElementById('imageUploader');
-    const imagePreview = document.getElementById('imagePreview');
-    const imageAnalysisResult = document.getElementById('imageAnalysisResult');
-    const chatDisplay = document.getElementById('chatDisplay');
-    const chatInput = document.getElementById('chatInput');
-    const micButton = document.getElementById('micButton');
-    const imagePromptInput = document.getElementById('imagePromptInput');
-    const generateImageBtn = document.getElementById('generateImageBtn');
-    const imageResultContainer = document.getElementById('imageResultContainer');
-    const activityTypeSelector = document.getElementById('activityTypeSelector');
-    const generateActivityButton = document.getElementById('generateActivityButton');
-    const activityChatDisplay = document.getElementById('activityChatDisplay');
-    const activityResponseArea = document.getElementById('activityResponseArea');
-    const activityInput = document.getElementById('activityInput');
-    const submitActivityBtn = document.getElementById('submitActivityBtn');
-    const toastContainer = document.getElementById('toastContainer');
-    
-    let chatHistory = [];
-    let recognition;
-    let isRecording = false;
-    let currentActivityPrompt = "";
-    // Default to guest mode for HF Spaces (no-login)
-    let currentUser = 'guest';
-    let isGuestMode = true;
-    
-    // Detectar ambiente HF Spaces
-    function checkDemoMode() {
-        const isHFSpaces = window.location.hostname.includes('hf.space') || 
-                          window.location.hostname.includes('huggingface.co');
-        
-        if (isHFSpaces) {
-            document.getElementById('demoModeIndicator').style.display = 'block';
-        }
-    }
-
-    // --- SISTEMA DE TOAST NOTIFICATIONS ---
-    function showToast(message, type = 'info', duration = 5000) {
-        const toast = document.createElement('div');
-        toast.className = `toast ${type}`;
-        toast.innerHTML = `
-            <button class="toast-close" onclick="this.parentElement.remove()">&times;</button>
-            <div class="font-medium">${getToastTitle(type)}</div>
-            <div class="text-sm mt-1">${message}</div>
-        `;
-        
-        toastContainer.appendChild(toast);
-        
-        // Show animation
-        setTimeout(() => toast.classList.add('show'), 100);
-        
-        // Auto remove
-        setTimeout(() => {
-            toast.classList.remove('show');
-            setTimeout(() => toast.remove(), 300);
-        }, duration);
-    }
-    
-    function getToastTitle(type) {
-        const titles = {
-            'success': '✅ Success',
-            'error': '❌ Error', 
-            'warning': '⚠️ Warning',
-            'info': 'ℹ️ Info'
-        };
-        return titles[type] || 'Info';
-    }
-    
-    // --- ENHANCED ERROR HANDLING ---
-    async function handleApiRequest(url, options, errorContext = 'Request') {
-        try {
-            const response = await fetch(url, options);
-            
-            if (!response.ok) {
-                let errorMessage = `HTTP ${response.status}`;
-                try {
-                    const errorData = await response.json();
-                    errorMessage = errorData.error || errorMessage;
-                } catch (e) {
-                    // Use default HTTP error
-                }
-                throw new Error(errorMessage);
-            }
-            
-            return await response.json();
-        } catch (error) {
-            console.error(`${errorContext} failed:`, error);
-            
-            if (error.name === 'TypeError' && error.message.includes('fetch')) {
-                showToast('Network connection error. Please check your internet connection.', 'error');
-            } else if (error.message.includes('503')) {
-                showToast('Service temporarily unavailable. Please check API configuration.', 'warning');
-            } else {
-                showToast(`${errorContext} failed: ${error.message}`, 'error');
-            }
-            
-            throw error;
-        }
-    }
-    
-    // --- LOADING STATE MANAGEMENT ---
-    function setButtonLoading(button, loading, originalText = null) {
-        if (loading) {
-            button.disabled = true;
-            button.dataset.originalText = button.innerHTML;
-            button.innerHTML = '<div class="spinner mr-2"></div> Loading...';
-        } else {
-            button.disabled = false;
-            button.innerHTML = originalText || button.dataset.originalText || button.innerHTML;
-        }
-    }
-    
-    // --- INPUT VALIDATION ---
-    function validateInput(input, errorMessage) {
-        const value = input.value?.trim() || '';
-        const errorElement = input.parentNode.querySelector('.error-message');
-        
-        if (!value) {
-            input.classList.add('form-error');
-            if (!errorElement) {
-                const error = document.createElement('div');
-                error.className = 'error-message';
-                error.textContent = errorMessage;
-                input.parentNode.appendChild(error);
-            }
-            return false;
-        } else {
-            input.classList.remove('form-error');
-            if (errorElement) errorElement.remove();
-            return true;
-        }
-    }
-
-    // --- CARREGAMENTO DINÂMICO DE MODELOS ---
-    async function populateModelSelector() {
-        try {
-            const models = await handleApiRequest('/list-models', {}, 'Loading models');
-            modelSelector.innerHTML = '';
-            
-            const geminiGroup = document.createElement('optgroup');
-            geminiGroup.label = 'Google Gemini';
-            const groqGroup = document.createElement('optgroup');
-            groqGroup.label = 'Groq (Ultra Fast)';
-            
-            models.forEach(model => {
-                const option = document.createElement('option');
-                option.value = model.value;
-                option.textContent = model.name;
-                if (model.value.startsWith('gemini:')) {
-                    geminiGroup.appendChild(option);
-                } else if (model.value.startsWith('groq:')) {
-                    groqGroup.appendChild(option);
-                }
-            });
-            
-            modelSelector.appendChild(geminiGroup);
-            modelSelector.appendChild(groqGroup);
-            showToast('Models loaded successfully', 'success', 2000);
-        } catch (error) {
-            modelSelector.innerHTML = '<option>Error loading models</option>';
-        }
-    }
-
-    // --- FUNÇÕES DE ÁUDIO ---
-    
-    // Cache para armazenar áudios gerados
-    const audioCache = new Map();
-    
-    // Função para gerar uma chave de cache baseada no texto e voice
-    function getAudioCacheKey(text, tld) {
-        return `${text.substring(0, 100)}_${tld}_${text.length}`;
-    }
-    
-    // Função para limpar cache de áudio (útil quando muda o texto significativamente)
-    function clearAudioCache() {
-        audioCache.forEach(blob => {
-            if (blob && blob.url) {
-                URL.revokeObjectURL(blob.url);
-            }
-        });
-        audioCache.clear();
-        if (currentAudioUrl) {
-            URL.revokeObjectURL(currentAudioUrl);
-            currentAudioUrl = null;
-        }
-        console.log('Audio cache cleared');
-    }
-    
-    async function fetchAudioBlob(text) {
-        const selectedTld = voiceSelector.value;
-        const cacheKey = getAudioCacheKey(text, selectedTld);
-        
-        // Verificar se já temos esse áudio no cache
-        if (audioCache.has(cacheKey)) {
-            return audioCache.get(cacheKey);
-        }
-        
-        const response = await fetch('/tts-proxy', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ text: text, tld: selectedTld })
-        });
-        if (!response.ok) {
-            const err = await response.json();
-            throw new Error(err.error || `HTTP error! status: ${response.status}`);
-        }
-        
-        const blob = await response.blob();
-        
-        // Armazenar no cache (limitar a 10 áudios para não usar muita memória)
-        if (audioCache.size >= 10) {
-            const firstKey = audioCache.keys().next().value;
-            // Revogar URL do áudio mais antigo
-            const oldBlob = audioCache.get(firstKey);
-            if (oldBlob && oldBlob.url) {
-                URL.revokeObjectURL(oldBlob.url);
-            }
-            audioCache.delete(firstKey);
-        }
-        
-        audioCache.set(cacheKey, blob);
-        return blob;
-    }
-    
-    async function playAudio(text, event) {
-        if(event) event.stopPropagation();
-        if (!text || !text.trim()) {
-            showToast('No text to play', 'warning', 2000);
-            return;
-        }
-        
-        try {
-            const audioBlob = await fetchAudioBlob(text);
-            const audioUrl = URL.createObjectURL(audioBlob);
-            const audio = new Audio(audioUrl);
-            
-            audio.onplay = () => showToast('Playing audio...', 'info', 1000);
-            audio.onended = () => URL.revokeObjectURL(audioUrl);
-            audio.onerror = () => showToast('Failed to play audio', 'error');
-            
-            await audio.play();
-        } catch (error) { 
-            console.error('Error playing audio:', error);
-            showToast('Failed to generate audio. Please try again.', 'error');
-        }
-    }
-
-    // --- LÓGICA DO EDITOR ---
-    const charCount = document.getElementById('charCount');
-    const playText = document.getElementById('playText');
-    const playSpinner = document.getElementById('playSpinner');
-    
-    let lastTextForCache = '';
-    
-    textEditor.addEventListener('input', () => {
-        const len = textEditor.innerText.length;
-        const currentText = textEditor.innerText.trim();
-        
-        // Atualizar contador
-        charCount.textContent = `${len}/10000`;
-        playButton.disabled = len === 0;
-        
-        // Limpar cache se o texto mudou significativamente (mais de 50 caracteres de diferença)
-        if (Math.abs(currentText.length - lastTextForCache.length) > 50 || 
-            (currentText.length > 100 && currentText.substring(0, 100) !== lastTextForCache.substring(0, 100))) {
-            if (currentAudioUrl) {
-                audioPlayer.src = '';
-                audioPlayer.classList.add('hidden');
-            }
-            lastTextForCache = currentText;
-        }
-        
-        // Mudança de cor baseada no limite
-        if (len > 10000) {
-            charCount.classList.add('text-red-500');
-            charCount.classList.remove('text-gray-500');
-        } else if (len > 8000) {
-            charCount.classList.remove('text-red-500', 'text-gray-500');
-            charCount.classList.add('text-yellow-500');
-        } else {
-            charCount.classList.remove('text-red-500', 'text-yellow-500');
-            charCount.classList.add('text-gray-500');
-        }
-    });
-    
-    // Controle de seleção de texto para flashcards e áudio
-    textEditor.addEventListener('mouseup', () => {
-        createCardButton.disabled = !window.getSelection().toString().trim();
-        handleTextSelection();
-    });
-    
-    textEditor.addEventListener('keyup', () => {
-        handleTextSelection();
-    });
-    
-    function handleTextSelection() {
-        const selectedText = window.getSelection().toString().trim();
-        const playSelectionBtn = document.getElementById('playSelectionBtn');
-        
-        if (selectedText && selectedText.length > 0) {
-            if (!playSelectionBtn) {
-                // Criar botão de tocar seleção se não existir
-                const selectionBtn = document.createElement('button');
-                selectionBtn.id = 'playSelectionBtn';
-                selectionBtn.className = 'btn bg-blue-500 hover:bg-blue-600 text-white ml-2';
-                selectionBtn.innerHTML = '🎵 Play Selection';
-                selectionBtn.onclick = () => playSelectedText();
-                
-                // Inserir próximo ao botão Play principal
-                playButton.parentNode.insertBefore(selectionBtn, playButton.nextSibling);
-            }
-            playSelectionBtn.style.display = 'inline-block';
-            playSelectionBtn.disabled = false;
-        } else if (playSelectionBtn) {
-            playSelectionBtn.style.display = 'none';
-        }
-    }
-    
-    async function playSelectedText() {
-        const selectedText = window.getSelection().toString().trim();
-        if (!selectedText) {
-            showToast('Please select some text first', 'warning');
-            return;
-        }
-        
-        if (selectedText.length > 1000) {
-            showToast('Selected text is too long. Please select less than 1000 characters.', 'warning');
-            return;
-        }
-        
-        const selectionBtn = document.getElementById('playSelectionBtn');
-        setButtonLoading(selectionBtn, true, '🎵 Play Selection');
-        
-        try {
-            await playAudio(selectedText);
-            showToast(`Playing selected text (${selectedText.length} chars)`, 'success', 2000);
-        } catch (error) {
-            showToast('Failed to play selected text', 'error');
-        } finally {
-            setButtonLoading(selectionBtn, false, '🎵 Play Selection');
-        }
-    }
-    
-    // Variável para armazenar o URL atual do áudio
-    let currentAudioUrl = null;
-    
-    async function handlePlay() {
-        const text = textEditor.innerText.trim();
-        if (!text) {
-            showToast('Please enter some text first', 'warning');
-            return;
-        }
-        
-        if (text.length > 10000) { // Aumentado de 5000 para 10000
-            showToast('Text is too long for audio generation. Please use shorter text.', 'warning');
-            return;
-        }
-        
-        const selectedTld = voiceSelector.value;
-        const cacheKey = getAudioCacheKey(text, selectedTld);
-        
-        // Se já temos um áudio carregado para este texto, apenas reproduzir
-        if (currentAudioUrl && audioPlayer.src && getAudioCacheKey(audioPlayer.dataset.lastText || '', audioPlayer.dataset.lastTld || '') === cacheKey) {
-            try {
-                await audioPlayer.play();
-                showToast('Playing cached audio...', 'success', 1000);
-                return;
-            } catch (error) {
-                console.log('Cached audio failed, regenerating...');
-            }
-        }
-        
-        setButtonLoading(playButton, true);
-        playText.textContent = 'Generating...';
-        playSpinner.classList.remove('hidden');
-        
-        try {
-            const audioBlob = await fetchAudioBlob(text);
-            
-            // Limpar URL anterior se existir
-            if (currentAudioUrl) {
-                URL.revokeObjectURL(currentAudioUrl);
-            }
-            
-            currentAudioUrl = URL.createObjectURL(audioBlob);
-            audioPlayer.src = currentAudioUrl;
-            audioPlayer.dataset.lastText = text;
-            audioPlayer.dataset.lastTld = selectedTld;
-            audioPlayer.classList.remove('hidden');
-            
-            // Remover listener anterior para evitar duplicatas
-            audioPlayer.onplay = () => showToast('Audio ready! Playing...', 'success', 1000);
-            audioPlayer.onended = () => {
-                // NÃO revogar o URL aqui, manter para permitir replay
-                showToast('Audio finished', 'info', 1000);
-            };
-            audioPlayer.onerror = () => showToast('Failed to play audio', 'error');
-            
-            await audioPlayer.play();
-            showToast(`Audio generated successfully! (${text.length} characters)`, 'success', 2000);
-        } catch (error) {
-            console.error('Audio generation error:', error);
-            showToast('Failed to generate audio. Please check your connection and try again.', 'error');
-        } finally {
-            setButtonLoading(playButton, false);
-            playText.textContent = 'Listen to Text';
-            playSpinner.classList.add('hidden');
-        }
-    }
-
-    // --- TODAS AS OUTRAS FUNÇÕES ---
-    
-    // ATIVIDADES
-    async function generateActivity() {
-        const activityType = activityTypeSelector.value;
-        const context = contextSelector.value;
-        const sourceText = textEditor.innerText;
-        generateActivityButton.disabled = true;
-        generateActivityButton.innerHTML = '<div class="spinner mr-2"></div> Generating...';
-        activityChatDisplay.innerHTML = '<p class="text-gray-500 italic">Generating your exercise...</p>';
-        activityResponseArea.classList.add('hidden');
-        let prompt = "";
-        if (activityType === 'translate_pt_en') {
-            prompt = `Based on the '${context}' context, create one single sentence in Portuguese for me to translate into English.`;
-        } else if (activityType === 'email_writing') {
-            prompt = `Create a scenario for me to write a formal email, related to the '${context}' context. Give me clear instructions on what to write.`;
-        } else if (activityType === 'summary_writing') {
-            if (!sourceText) {
-                alert("Please paste text in the main editor to generate a summary activity.");
-                activityChatDisplay.innerHTML = '<p class="text-red-500">Please paste text in the editor in card #1 first.</p>';
-                generateActivityButton.disabled = false;
-                generateActivityButton.textContent = 'Generate Activity';
-                return;
-            }
-            prompt = `Your task is to summarize the following text in 2 or 3 sentences: "${sourceText}"`;
-        } else if (activityType === 'professional_conversation') {
-             prompt = `Start a professional role-playing conversation with me related to '${context}'. Ask me an open-ended question to begin.`;
-        }
-        try {
-            const response = await fetch('/explain-proxy', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    model: modelSelector.value,
-                    context_focus: context,
-                    custom_prompt: prompt
-                })
-            });
-            if (!response.ok) throw new Error((await response.json()).error);
-            const data = await response.json();
-            currentActivityPrompt = data.explanation;
-            activityChatDisplay.innerHTML = `<div class="ai-prompt"><strong>Your Task:</strong><p>${currentActivityPrompt}</p></div>`;
-            activityResponseArea.classList.remove('hidden');
-        } catch (error) {
-            activityChatDisplay.innerHTML = `<p class="text-red-600 font-semibold">Failed to generate activity: ${error.message}</p>`;
-        } finally {
-            generateActivityButton.disabled = false;
-            generateActivityButton.textContent = 'Generate Activity';
-        }
-    }
-    async function submitActivityResponse() {
-        const userResponse = activityInput.value.trim();
-        if (!userResponse) {
-            alert("Please write a response.");
-            return;
-        }
-        submitActivityBtn.disabled = true;
-        submitActivityBtn.innerHTML = '<div class="spinner mr-2"></div> Getting Feedback...';
-        const oldFeedback = activityChatDisplay.querySelector('.ai-feedback');
-        if(oldFeedback) oldFeedback.remove();
-        const oldResponse = activityChatDisplay.querySelector('.user-response-display');
-        if(oldResponse) oldResponse.remove();
-        const userResponseDiv = document.createElement('div');
-        userResponseDiv.className = 'user-response-display';
-        userResponseDiv.innerHTML = `<strong>Your Response:</strong><p>${userResponse}</p>`;
-        activityChatDisplay.appendChild(userResponseDiv);
-        try {
-            const response = await fetch('/activity-feedback', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    model: modelSelector.value,
-                    context_focus: contextSelector.value,
-                    original_prompt: currentActivityPrompt,
-                    user_response: userResponse
-                })
-            });
-            if (!response.ok) throw new Error((await response.json()).error);
-            const data = await response.json();
-            const feedbackDiv = document.createElement('div');
-            feedbackDiv.className = 'ai-feedback';
-            feedbackDiv.innerHTML = `<strong>Feedback:</strong><div class="prose prose-sm max-w-none">${marked.parse(data.feedback)}</div>`;
-            activityChatDisplay.appendChild(feedbackDiv);
-            activityInput.value = '';
-        } catch (error) {
-            const errorDiv = document.createElement('div');
-            errorDiv.className = 'ai-feedback';
-            errorDiv.innerHTML = `<p class="text-red-600 font-semibold">Failed to get feedback: ${error.message}</p>`;
-            activityChatDisplay.appendChild(errorDiv);
-        } finally {
-            submitActivityBtn.disabled = false;
-            submitActivityBtn.textContent = 'Submit Answer';
-        }
-    }
-    
-    // CONVERSAÇÃO
-    function initializeSpeechRecognition() {
-        window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-        if (!window.SpeechRecognition) {
-            micButton.disabled = true;
-            micButton.textContent = '❌';
-            alert('Voice recognition API is not supported in this browser.');
-            return;
-        }
-        recognition = new SpeechRecognition();
-        recognition.lang = 'en-US';
-        recognition.interimResults = false;
-        recognition.continuous = false;
-        recognition.onresult = (event) => {
-            const transcript = event.results[0][0].transcript;
-            chatInput.value = transcript;
-            sendMessage(transcript);
-        };
-        recognition.onerror = (event) => { console.error('Voice recognition error:', event.error); };
-        recognition.onend = () => {
-            isRecording = false;
-            micButton.classList.remove('is-recording');
-            micButton.innerHTML = '🎙️';
-        };
-    }
-    function handleVoiceInput() {
-        if (isRecording) {
-            recognition.stop();
-        } else {
-            isRecording = true;
-            micButton.classList.add('is-recording');
-            micButton.innerHTML = '<div class="spinner"></div>';
-            recognition.start();
-        }
-    }
-    function handleTextInput() {
-        const message = chatInput.value.trim();
-        sendMessage(message);
-        chatInput.value = '';
-    }
-    chatInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') handleTextInput(); });
-    async function sendMessage(message) {
-        if (!message) return;
-        appendMessage(message, 'user');
-        chatHistory.push({ role: 'user', content: message });
-        try {
-            const response = await fetch('/chat-with-ai', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ history: chatHistory, message: message })
-            });
-            if (!response.ok) throw new Error((await response.json()).error);
-            const data = await response.json();
-            appendMessage(data.response, 'ai');
-            chatHistory.push({ role: 'assistant', content: data.response });
-            playAudio(data.response);
-        } catch (error) {
-            appendMessage(`Chat error: ${error.message}`, 'ai');
-        }
-    }
-    function appendMessage(text, sender) {
-        const msg = document.createElement('div');
-        msg.className = `chat-message ${sender}-message`;
-        msg.textContent = text;
-        chatDisplay.appendChild(msg);
-        chatDisplay.scrollTop = chatDisplay.scrollHeight;
-    }
-    
-    // IMAGEM
-    imageUploader.addEventListener('change', (event) => {
-        const file = event.target.files[0];
-        if (!file) return;
-        const reader = new FileReader();
-        reader.onload = (e) => {
-            imagePreview.src = e.target.result;
-            imagePreview.classList.remove('hidden');
-            analyzeImage(e.target.result);
-        };
-        reader.readAsDataURL(file);
-    });
-    async function analyzeImage(base64Image) {
-        // Show skeleton loading
-        imageAnalysisResult.innerHTML = `
-            <div class="spinner-container">
-                <div class="spinner spinner-large !border-l-indigo-500 !border-gray-200"></div>
-                <p class="ml-3 text-gray-600">Analyzing image with AI...</p>
-            </div>
-            <div class="mt-4">
-                <div class="skeleton-text loading-skeleton mb-2"></div>
-                <div class="flex gap-2">
-                    <div class="skeleton-box loading-skeleton" style="width: 80px; height: 32px;"></div>
-                    <div class="skeleton-box loading-skeleton" style="width: 100px; height: 32px;"></div>
-                    <div class="skeleton-box loading-skeleton" style="width: 90px; height: 32px;"></div>
-                </div>
-            </div>`;
-            
-        try {
-            const vocabulary = await handleApiRequest('/analyze-image', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ 
-                    image: base64Image,
-                    model: modelSelector.value
-                })
-            }, 'Analyzing image');
-            
-            displayImageVocabulary(vocabulary);
-            showToast(`Found ${vocabulary.length} vocabulary items in the image!`, 'success');
-        } catch (error) {
-            imageAnalysisResult.innerHTML = `
-                <div class="empty-state">
-                    <div class="empty-state-icon">❌</div>
-                    <div class="empty-state-title">Analysis Failed</div>
-                    <div class="empty-state-description">Please try uploading the image again or check your connection.</div>
-                </div>`;
-        }
-    }
-    function displayImageVocabulary(vocabulary) {
-        imageAnalysisResult.innerHTML = `
-            <div class="fade-in">
-                <h3 class="font-semibold mb-3 text-gray-700">🎯 Suggested Vocabulary (${vocabulary.length} items)</h3>
-                <div class="flex flex-wrap gap-2" id="vocabularyButtons"></div>
-                <p class="text-xs text-gray-500 mt-3">Click any term to create a flashcard</p>
-            </div>`;
-            
-        const buttonContainer = document.getElementById('vocabularyButtons');
-        vocabulary.forEach(({ term, definition }, index) => {
-            const btn = document.createElement('button');
-            btn.className = 'btn bg-violet-100 text-violet-700 hover:bg-violet-200 text-sm slide-in';
-            btn.style.animationDelay = `${index * 0.1}s`;
-            btn.innerHTML = `${term} <span class="text-violet-500 ml-1">+</span>`;
-            btn.title = `${term}: ${definition}`;
-            btn.onclick = () => {
-                btn.disabled = true;
-                btn.innerHTML = '<div class="spinner mr-1"></div> Creating...';
-                createFlashcardFromSuggestion(term, definition);
-            };
-            buttonContainer.appendChild(btn);
-        });
-    }
-    async function generateImage() {
-        const prompt = imagePromptInput.value.trim();
-        if (!prompt) {
-            alert('Please enter a description for the image.');
-            return;
-        }
-        generateImageBtn.disabled = true;
-        generateImageBtn.innerHTML = '<div class="spinner mr-2"></div> Generating...';
-        imageResultContainer.innerHTML = `<div class="flex items-center justify-center p-4"><div class="spinner !border-l-indigo-500 !border-gray-200"></div><p class="ml-3 text-gray-600">Creating your image...</p></div>`;
-        try {
-            const response = await fetch('/generate-image', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ prompt: prompt })
-            });
-            if (!response.ok) throw new Error((await response.json()).error);
-            const data = await response.json();
-            imageResultContainer.innerHTML = `<img src="data:image/png;base64,${data.image_base64}" class="rounded-lg max-h-60 mx-auto" alt="AI-generated image"/>`;
-        } catch (error) {
-            imageResultContainer.innerHTML = `<p class="text-red-600 font-semibold">Failed to generate image: ${error.message}</p>`;
-        } finally {
-            generateImageBtn.disabled = false;
-            generateImageBtn.textContent = 'Generate';
-        }
-    }
-    
-    // FLASHCARDS
-    function createSkeletonFlashcard() {
-        const cardId = `skeleton-${Date.now()}`;
-        const container = document.createElement('div');
-        container.className = 'flashcard-container fade-in';
-        container.id = cardId;
-        container.innerHTML = `
-            <div class="flashcard-inner">
-                <div class="flashcard-front">
-                    <div>
-                        <div class="skeleton-text small loading-skeleton"></div>
-                        <div class="skeleton-text large loading-skeleton mt-4"></div>
-                        <div class="skeleton-text loading-skeleton"></div>
-                    </div>
-                    <div class="border-t pt-3 mt-3">
-                        <div class="skeleton-text loading-skeleton"></div>
-                        <div class="skeleton-text small loading-skeleton mt-2"></div>
-                    </div>
-                </div>
-            </div>`;
-        return container;
-    }
-    
-    async function createFlashcard(word, context, definition = null) {
-        if (!word || !word.trim()) {
-            showToast('Please select a word first', 'warning');
-            return;
-        }
-        
-        // Hide empty state and show skeleton
-        noCardsMessage.classList.add('hidden');
-        const skeletonCard = createSkeletonFlashcard();
-        flashcardList.prepend(skeletonCard);
-        
-        const btn = definition ? null : createCardButton;
-        if (btn) setButtonLoading(btn, true);
-        
-        try {
-            const cardData = await handleApiRequest('/explain-proxy', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    word: word.trim(),
-                    context: context || 'General context',
-                    for_flashcard: true,
-                    model: modelSelector.value,
-                    context_focus: contextSelector.value
-                })
-            }, 'Creating flashcard');
-            
-            if(definition && !cardData.definition) cardData.definition = definition;
-            
-            // Remove skeleton and add real card
-            skeletonCard.remove();
-            renderFlashcard(cardData);
-            
-            // Show appropriate message based on auth status
-            if (currentUser) {
-                showToast(`Flashcard for "${word}" created and saved to your account!`, 'success');
-            } else {
-                showToast(`Flashcard for "${word}" created! Login to save your progress.`, 'success');
-            }
-        } catch (error) {
-            // Remove skeleton on error
-            skeletonCard.remove();
-            // Show empty state if no cards left
-            if (flashcardList.children.length === 1) {
-                noCardsMessage.classList.remove('hidden');
-            }
-        } finally {
-            if (btn) setButtonLoading(btn, false);
-        }
-    }
-    function createFlashcardFromSelection() {
-        const selection = window.getSelection().toString().trim();
-        if (selection) createFlashcard(selection, textEditor.innerText);
-    }
-    function createFlashcardFromSuggestion(term, definition) {
-        createFlashcard(term, `(From image analysis) A visual representation of ${term}.`, definition);
-    }
-    function renderFlashcard(data) {
-        noCardsMessage.classList.add('hidden');
-        const cardId = `card-${Date.now()}`;
-        const container = document.createElement('div');
-        container.className = 'flashcard-container';
-        container.id = cardId;
-        
-        // Calculate dynamic height based on content length
-        const totalLength = (data.gapped_sentence?.length || 0) + 
-                           (data.translation?.length || 0) + 
-                           (data.definition?.length || 0) + 
-                           (data.context_sentence?.length || 0);
-        
-        let minHeight = 280;
-        if (totalLength > 300) minHeight = 350;  
-        if (totalLength > 500) minHeight = 420;  
-        if (totalLength > 800) minHeight = 500;  
-        
-        // Responsive height adjustment
-        if (window.innerWidth <= 768) {
-            minHeight = Math.max(250, minHeight * 0.85);
-        }
-        if (window.innerWidth <= 480) {
-            minHeight = Math.max(220, minHeight * 0.75);
-        }
-        
-        container.style.minHeight = `${minHeight}px`;
-        const fallback = 'Info not generated';
-        container.innerHTML = `
-            <button class="delete-btn" onclick="deleteFlashcard('${cardId}', event)" title="Delete flashcard">🗑️</button>
-            <div class="flashcard-inner">
-                <div class="flashcard-front">
-                     <div>
-                        <div class="text-sm text-gray-600 mb-2">Context Sentence:</div>
-                        <div class="flashcard-text text-lg text-center text-gray-800">${data.gapped_sentence || fallback}</div>
-                    </div>
-                    <div class="border-t pt-3 mt-3 text-center">
-                        <strong class="text-indigo-600">Hint (PT):</strong> 
-                        <div class="flashcard-text mt-1">${data.translation || fallback}</div>
-                    </div>
-                    <div class="text-xs text-center text-gray-400 mt-4">👆 Click to see the answer</div>
-                </div>
-                <div class="flashcard-back">
-                    <div>
-                        <h3 class="text-xl font-bold text-center text-indigo-600 mb-2">${data.term || 'Term'}</h3>
-                        <div class="flex items-center justify-center gap-2 text-gray-600 italic mb-3">
-                            <button class="audio-btn" onclick="playAudio('${(data.context_sentence || '').replace(/'/g, "\\'")}', event)" title="Listen to pronunciation">🔊</button>
-                            <span class="flashcard-text">${data.context_sentence || fallback}</span>
-                        </div>
-                        <div class="text-sm text-gray-800"><strong class="font-semibold">Definition:</strong> 
-                            <div class="flashcard-text mt-1">${data.definition || fallback}</div>
-                        </div>
-                    </div>
-                    <div class="border-t mt-3 pt-3">
-                        <h4 class="text-sm font-semibold text-center">Practice Your Pronunciation</h4>
-                        <div class="flex justify-center items-center gap-2 mt-2">
-                            <button class="btn btn-primary w-12 h-12 rounded-full mic-button" onclick="handlePronunciationPractice(this, '${(data.context_sentence || '').replace(/'/g, "\\'")}', event)" title="Record your pronunciation">🎙️</button>
-                        </div>
-                        <div class="text-xs text-gray-600 p-2 mt-2 bg-gray-50 rounded-md min-h-[40px] flashcard-text" data-feedback-area>Click the microphone to practice pronunciation</div>
-                    </div>
-                </div>
-            </div>`;
-        container.classList.add('fade-in');
-        flashcardList.prepend(container);
-        
-        container.addEventListener('click', (e) => {
-            if(e.target.tagName !== 'BUTTON' && !e.target.closest('button')) {
-                 container.classList.toggle('flipped');
-            }
-        });
-    }
-    function deleteFlashcard(cardId, event) {
-        event.stopPropagation();
-        const cardToDelete = document.getElementById(cardId);
-        if (cardToDelete) {
-            cardToDelete.remove();
-        }
-        if (flashcardList.children.length === 1) {
-            noCardsMessage.classList.remove('hidden');
-        }
-    }
-    async function handlePronunciationPractice(button, targetText, event) {
-        event.stopPropagation();
-        const feedbackArea = button.closest('.flashcard-back').querySelector('[data-feedback-area]');
-        const practiceRecognition = new SpeechRecognition();
-        practiceRecognition.lang = 'en-US';
-        button.innerHTML = '<div class="spinner"></div>';
-        button.disabled = true;
-        feedbackArea.textContent = 'Listening...';
-        practiceRecognition.start();
-        practiceRecognition.onresult = async (e) => {
-            const userText = e.results[0][0].transcript;
-            feedbackArea.textContent = `You said: "${userText}". Analyzing...`;
-            try {
-                const response = await fetch('/pronunciation-feedback', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ target_text: targetText, user_text: userText })
-                });
-                if (!response.ok) throw new Error((await response.json()).error);
-                const data = await response.json();
-                feedbackArea.innerHTML = `<strong>Feedback:</strong> ${data.feedback}`;
-            } catch (error) {
-                feedbackArea.textContent = `Analysis error: ${error.message}`;
-            } finally {
-                button.innerHTML = '🎙️';
-                button.disabled = false;
-            }
-        };
-        practiceRecognition.onerror = (e) => {
-            feedbackArea.textContent = `Recording error: ${e.error}`;
-            button.innerHTML = '🎙️';
-            button.disabled = false;
-        };
-    }
-    
-    // --- AUTHENTICATION FUNCTIONS ---
-    
-    async function checkAuthStatus() {
-        // For HF Spaces we default to guest/demo mode and skip server auth checks
-        try {
-            const isHF = window.location.hostname.includes('hf.space') || window.location.hostname.includes('huggingface.co');
-            if (isHF) {
-                // Guest mode
-                isGuestMode = true;
-                currentUser = 'guest';
-                showGuestState();
-                return;
-            }
-
-            const response = await fetch('/auth/check');
-            const data = await response.json();
-            
-            if (data.authenticated) {
-                currentUser = data.user;
-                isGuestMode = false;
-                showAuthenticatedState();
-                // Load user settings into selectors
-                if (data.user.settings) {
-                    loadUserSettings(data.user.settings);
-                }
-            } else {
-                showGuestState();
-            }
-        } catch (error) {
-            console.error('Auth check failed:', error);
-            showGuestState();
-        }
-    }
-    
-    function showAuthenticatedState() {
-        document.getElementById('guestAuth').style.display = 'none';
-        document.getElementById('userAuth').style.display = 'block';
-        document.getElementById('userEmail').textContent = currentUser.email;
-        document.getElementById('userAvatar').textContent = currentUser.email.charAt(0).toUpperCase();
-        
-        // Update session status
-        document.getElementById('guestStatus').style.display = 'none';
-        document.getElementById('userStatus').style.display = 'inline';
-        document.getElementById('loadFlashcardsBtn').style.display = 'inline-block';
-        
-    // Show advanced panels
-    document.getElementById('contentCuration').style.display = 'block';
-    document.getElementById('contentCurationLogin').style.display = 'none';
-    document.getElementById('analyticsPanel').style.display = 'block';
-    document.getElementById('studyPlannerPanel').style.display = 'block';
-        
-        // Show footer user actions
-        document.getElementById('footerUserActions').style.display = 'block';
-        
-        // Load analytics and study plan
-        loadAnalytics();
-        loadCurrentStudyPlan();
-        
-        showToast(`Welcome back, ${currentUser.email}!`, 'success', 3000);
-    }
-    
-    function showGuestState() {
-        document.getElementById('guestAuth').style.display = 'flex';
-        document.getElementById('userAuth').style.display = 'none';
-        
-        // Update session status
-        document.getElementById('guestStatus').style.display = 'inline';
-        document.getElementById('userStatus').style.display = 'none';
-        document.getElementById('loadFlashcardsBtn').style.display = 'none';
-        
-    // In HF guest mode, keep content curation visible but indicate limited persistence
-    document.getElementById('contentCuration').style.display = 'block';
-    document.getElementById('contentCurationLogin').style.display = 'none';
-    document.getElementById('analyticsPanel').style.display = 'block';
-    document.getElementById('studyPlannerPanel').style.display = 'block';
-        
-        // Hide footer user actions
-        document.getElementById('footerUserActions').style.display = 'none';
-        
-    currentUser = 'guest';
-    isGuestMode = true;
-    }
-    
-    function loadUserSettings(settings) {
-        if (settings.preferred_model) modelSelector.value = settings.preferred_model;
-        if (settings.context_focus) contextSelector.value = settings.context_focus;
-        if (settings.voice_accent) voiceSelector.value = settings.voice_accent;
-    }
-    
-    function showAuthModal(type = 'login') {
-        // In HF Spaces we run in guest/demo mode. Show guidance instead of a modal.
-        showToast('Guest mode active: no login required. Use Admin/Dashboard links for more tools.', 'info', 5000);
-    }
-    
-    function hideAuthModal() {
-        // No-op in guest mode
-    }
-    
-    function switchAuthForm(type) {
-        const loginForm = document.getElementById('loginForm');
-        const registerForm = document.getElementById('registerForm');
-        const title = document.getElementById('authModalTitle');
-        
-        if (type === 'login') {
-            loginForm.classList.add('active');
-            registerForm.classList.remove('active');
-            title.textContent = 'Login';
-        } else {
-            registerForm.classList.add('active');
-            loginForm.classList.remove('active');
-            title.textContent = 'Create Account';
-        }
-    }
-    
-    function toggleUserMenu() {
-        document.getElementById('userAuth').classList.toggle('show');
-    }
-    
-    // Close user menu when clicking outside
-    document.addEventListener('click', (e) => {
-        if (!e.target.closest('.user-menu')) {
-            document.getElementById('userAuth').classList.remove('show');
-        }
-    });
-    
-    // Login form submission
-    document.getElementById('loginForm').addEventListener('submit', async (e) => {
-        e.preventDefault();
-        const email = document.getElementById('loginEmail').value;
-        const password = document.getElementById('loginPassword').value;
-        
-        const submitBtn = e.target.querySelector('button[type="submit"]');
-        setButtonLoading(submitBtn, true);
-        
-        try {
-            const data = await handleApiRequest('/login', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ email, password })
-            }, 'Logging in');
-            
-            currentUser = data.user;
-            hideAuthModal();
-            showAuthenticatedState();
-            
-            if (data.user.settings) {
-                loadUserSettings(data.user.settings);
-            }
-            
-        } catch (error) {
-            // Error already handled by handleApiRequest
-        } finally {
-            setButtonLoading(submitBtn, false);
-        }
-    });
-    
-    // Register form submission
-    document.getElementById('registerForm').addEventListener('submit', async (e) => {
-        e.preventDefault();
-        const email = document.getElementById('registerEmail').value;
-        const password = document.getElementById('registerPassword').value;
-        const confirmPassword = document.getElementById('confirmPassword').value;
-        
-        if (password !== confirmPassword) {
-            showToast('Passwords do not match', 'error');
-            return;
-        }
-        
-        const submitBtn = e.target.querySelector('button[type="submit"]');
-        setButtonLoading(submitBtn, true);
-        
-        try {
-            const data = await handleApiRequest('/register', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ email, password })
-            }, 'Creating account');
-            
-            hideAuthModal();
-            
-            // Mostrar mensagem baseada na resposta do servidor
-            if (data.auto_confirmed) {
-                showToast(data.message || 'Account created and ready to use! (Demo mode)', 'success', 5000);
-                // Se auto-confirmado, pode logar automaticamente
-                setTimeout(() => {
-                    showToast('You can now login with your credentials', 'info', 3000);
-                }, 2000);
-            } else {
-                showToast(data.message || 'Account created! Please check your email to confirm.', 'success', 8000);
-            }
-            
-        } catch (error) {
-            // Error already handled by handleApiRequest
-        } finally {
-            setButtonLoading(submitBtn, false);
-        }
-    });
-    
-    async function logout() {
-        try {
-            await handleApiRequest('/logout', {
-                method: 'POST'
-            }, 'Logging out');
-            
-            showGuestState();
-            showToast('Logged out successfully', 'info');
-            
-        } catch (error) {
-            // Error already handled by handleApiRequest
-        }
-    }
-    
-    async function showUserSettings() {
-        // Allow guest mode: warn that some features won't persist
-        if (!currentUser || isGuestMode) {
-            showToast('Using guest mode — data may not be saved between sessions.', 'warning', 4000);
-            // continue in guest mode
-        }
-        
-        document.getElementById('userAuth').classList.remove('show');
-        
-        // Simple settings update using current form values
-        const settings = {
-            preferred_model: modelSelector.value,
-            context_focus: contextSelector.value,
-            voice_accent: voiceSelector.value,
-            daily_goal: 10, // Default
-            notification_enabled: true // Default
-        };
-        
-        try {
-            await handleApiRequest('/user/settings', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(settings)
-            }, 'Saving settings');
-            
-            showToast('Settings saved successfully!', 'success');
-        } catch (error) {
-            // Error already handled
-        }
-    }
-    
-    async function showUserFlashcards() {
-        if (!currentUser || isGuestMode) {
-            showToast('Using guest mode — conversations are local-only in HF Spaces.', 'warning', 4000);
-        }
-        
-        document.getElementById('userAuth').classList.remove('show');
-        
-        try {
-            const data = await handleApiRequest('/user/flashcards', {}, 'Loading your flashcards');
-            
-            // Clear current flashcards
-            flashcardList.innerHTML = '';
-            
-            if (data.flashcards && data.flashcards.length > 0) {
-                data.flashcards.forEach(card => {
-                    const flashcardData = {
-                        term: card.term,
-                        translation: card.translation,
-                        context_sentence: card.context_sentence,
-                        gapped_sentence: card.gapped_sentence,
-                        definition: card.definition
-                    };
-                    renderFlashcard(flashcardData);
-                });
-                showToast(`Loaded ${data.flashcards.length} saved flashcards`, 'success');
-            } else {
-                noCardsMessage.classList.remove('hidden');
-                showToast('No saved flashcards found', 'info');
-            }
-            
-        } catch (error) {
-            noCardsMessage.classList.remove('hidden');
-        }
-    }
-    
-    // --- CONTENT CURATION FUNCTIONS ---
-    
-    async function searchContent() {
-        if (!currentUser) {
-            showToast('Please log in to search content', 'warning');
-            return;
-        }
-        
-        const query = document.getElementById('contentSearchInput').value.trim();
-        const category = document.getElementById('contentCategorySelect').value;
-        
-        if (!query) {
-            showToast('Please enter a search topic', 'warning');
-            return;
-        }
-        
-        const resultsContainer = document.getElementById('contentResults');
-        resultsContainer.innerHTML = '<div class="spinner-container"><div class="spinner spinner-large"></div><p class="ml-3">Searching for relevant content...</p></div>';
-        
-        try {
-            const data = await handleApiRequest('/content/search', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ query, category })
-            }, 'Searching content');
-            
-            displayContentResults(data.results);
-        } catch (error) {
-            resultsContainer.innerHTML = '<div class="text-red-600">Failed to search content. Please try again.</div>';
-        }
-    }
-    
-    async function getRecommendations() {
-        if (!currentUser) {
-            showToast('Please log in to get recommendations', 'warning');
-            return;
-        }
-        
-        const resultsContainer = document.getElementById('contentResults');
-        resultsContainer.innerHTML = '<div class="spinner-container"><div class="spinner spinner-large"></div><p class="ml-3">Generating AI recommendations...</p></div>';
-        
-        try {
-            const data = await handleApiRequest('/content/recommendations', {}, 'Getting recommendations');
-            displayRecommendations(data.recommendations);
-        } catch (error) {
-            resultsContainer.innerHTML = '<div class="text-red-600">Failed to get recommendations. Please try again.</div>';
-        }
-    }
-    
-    function displayContentResults(results) {
-        const container = document.getElementById('contentResults');
-        
-        if (!results || results.length === 0) {
-            container.innerHTML = `
-                <div class="empty-state">
-                    <div class="empty-state-icon">🔍</div>
-                    <div class="empty-state-title">No Content Found</div>
-                    <div class="empty-state-description">Try different search terms or check your interests settings</div>
-                </div>`;
-            return;
-        }
-        
-        container.innerHTML = results.map(result => `
-            <div class="content-item fade-in">
-                <div class="content-item-title">${result.title}</div>
-                <div class="content-item-meta">
-                    <span class="difficulty-badge difficulty-${getDifficultyClass(result.estimated_difficulty || 3)}">
-                        Level ${result.estimated_difficulty || 3}
-                    </span>
-                    <span class="ml-2">${result.source}</span>
-                    ${result.published ? `<span class="ml-2">${new Date(result.published).toLocaleDateString()}</span>` : ''}
-                </div>
-                <div class="content-item-summary">${result.summary}</div>
-                <div class="flex gap-2 mt-3">
-                    <button onclick="extractAndSaveContent('${result.url}', '${result.title.replace(/'/g, "\\'")}')" class="btn bg-green-500 hover:bg-green-600 text-white text-sm">📖 Read & Save</button>
-                    <a href="${result.url}" target="_blank" class="btn bg-gray-500 hover:bg-gray-600 text-white text-sm">🔗 Open Original</a>
-                </div>
-            </div>
-        `).join('');
-    }
-    
-    function displayRecommendations(recommendations) {
-        const container = document.getElementById('contentResults');
-        
-        if (!recommendations || recommendations.length === 0) {
-            container.innerHTML = `
-                <div class="empty-state">
-                    <div class="empty-state-icon">🤖</div>
-                    <div class="empty-state-title">No Recommendations</div>
-                    <div class="empty-state-description">Update your interests in settings to get better recommendations</div>
-                </div>`;
-            return;
-        }
-        
-        container.innerHTML = `
-            <h3 class="text-lg font-semibold mb-4 text-purple-600">✨ AI Recommendations for You</h3>
-        ` + recommendations.map(rec => `
-            <div class="content-item fade-in border-purple-200">
-                <div class="content-item-title text-purple-700">${rec.topic}</div>
-                <div class="content-item-meta">
-                    <span class="difficulty-badge difficulty-${getDifficultyClass(rec.difficulty)}">
-                        ${rec.difficulty}
-                    </span>
-                    <span class="ml-2">AI Recommended</span>
-                </div>
-                <div class="content-item-summary">${rec.reason}</div>
-                <div class="flex gap-2 mt-3">
-                    <button onclick="searchSpecificTopic('${rec.topic.replace(/'/g, "\\'")}')" class="btn bg-purple-500 hover:bg-purple-600 text-white text-sm">🔍 Find Articles</button>
-                </div>
-            </div>
-        `).join('');
-    }
-    
-    function getDifficultyClass(level) {
-        if (level <= 2) return 'easy';
-        if (level <= 4) return 'medium';
-        return 'hard';
-    }
-    
-    async function extractAndSaveContent(url, title) {
-        try {
-            showToast('Extracting content...', 'info', 2000);
-            
-            const extractData = await handleApiRequest('/content/extract', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ url })
-            }, 'Extracting content');
-            
-            if (extractData.success) {
-                const saveData = await handleApiRequest('/content/save', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        title: extractData.title || title,
-                        content: extractData.content,
-                        source_url: url,
-                        source_type: 'web_search'
-                    })
-                }, 'Saving content');
-                
-                showToast('Content saved successfully!', 'success');
-                loadAnalytics(); // Refresh analytics
-            }
-        } catch (error) {
-            // Error already handled by handleApiRequest
-        }
-    }
-    
-    async function saveCustomContent() {
-        if (!currentUser) {
-            showToast('Please log in to save content', 'warning');
-            return;
-        }
-        
-        const title = document.getElementById('customContentTitle').value.trim();
-        const content = document.getElementById('customContentText').value.trim();
-        const url = document.getElementById('customContentUrl').value.trim();
-        
-        if (!title || !content) {
-            showToast('Please provide both title and content', 'warning');
-            return;
-        }
-        
-        try {
-            await handleApiRequest('/content/save', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    title,
-                    content,
-                    source_url: url || null,
-                    source_type: 'manual'
-                })
-            }, 'Saving content');
-            
-            // Clear form
-            document.getElementById('customContentTitle').value = '';
-            document.getElementById('customContentText').value = '';
-            document.getElementById('customContentUrl').value = '';
-            
-            showToast('Content saved successfully!', 'success');
-            loadAnalytics(); // Refresh analytics
-        } catch (error) {
-            // Error already handled
-        }
-    }
-    
-    async function showSavedArticles() {
-        if (!currentUser || isGuestMode) {
-            showToast('Guest mode active — activity will not be persisted server-side.', 'warning', 4000);
-        }
-        
-        try {
-            const data = await handleApiRequest('/content/articles', {}, 'Loading saved articles');
-            
-            const container = document.getElementById('contentResults');
-            
-            if (!data.articles || data.articles.length === 0) {
-                container.innerHTML = `
-                    <div class="empty-state">
-                        <div class="empty-state-icon">📚</div>
-                        <div class="empty-state-title">No Saved Articles</div>
-                        <div class="empty-state-description">Search and save articles to build your personal library</div>
-                    </div>`;
-                return;
-            }
-            
-            container.innerHTML = `
-                <h3 class="text-lg font-semibold mb-4 text-green-600">📚 Your Saved Articles (${data.articles.length})</h3>
-            ` + data.articles.map(article => `
-                <div class="content-item fade-in">
-                    <div class="content-item-title">${article.title}</div>
-                    <div class="content-item-meta">
-                        <span class="difficulty-badge difficulty-medium">${article.word_count} words</span>
-                        <span class="ml-2">${new Date(article.created_at).toLocaleDateString()}</span>
-                        ${article.category ? `<span class="ml-2">${article.category}</span>` : ''}
-                    </div>
-                    <div class="content-item-summary">${article.content.substring(0, 150)}...</div>
-                    <div class="flex gap-2 mt-3">
-                        <button onclick="loadArticleForStudy('${article.id}', '${article.title.replace(/'/g, "\\'")}')" class="btn btn-primary text-sm">📖 Study This</button>
-                        ${article.source_url ? `<a href="${article.source_url}" target="_blank" class="btn bg-gray-500 hover:bg-gray-600 text-white text-sm">🔗 Original</a>` : ''}
-                    </div>
-                </div>
-            `).join('');
-        } catch (error) {
-            // Error already handled
-        }
-    }
-    
-    function loadArticleForStudy(articleId, title) {
-        // Load the article content into the text editor
-        showToast(`Loading "${title}" for study...`, 'info');
-        // This would load the full article content - simplified for now
-        showToast('Article loaded! You can now create flashcards from it.', 'success');
-    }
-    
-    function searchSpecificTopic(topic) {
-        document.getElementById('contentSearchInput').value = topic;
-        searchContent();
-    }
-    
-    // --- ANALYTICS FUNCTIONS ---
-    
-    async function loadAnalytics() {
-        if (!currentUser || isGuestMode) {
-            showToast('Guest mode active — progress may not persist across reloads.', 'warning', 4000);
-        }
-        
-        try {
-            const data = await handleApiRequest('/analytics/dashboard', {}, 'Loading analytics');
-            
-            document.getElementById('totalFlashcards').textContent = data.analytics.total_flashcards || 0;
-            document.getElementById('totalArticles').textContent = data.analytics.total_articles || 0;
-            document.getElementById('currentLevel').textContent = data.analytics.user_level || 'B1';
-        } catch (error) {
-            // Error already handled
-        }
-    }
-    
-    function toggleAnalytics() {
-        const content = document.getElementById('analyticsContent');
-        content.style.display = content.style.display === 'none' ? 'block' : 'none';
-    }
-    
-    // --- STUDY PLANNER FUNCTIONS ---
-    
-    async function generateStudyPlan() {
-        if (!currentUser || isGuestMode) {
-            showToast('Guest mode active — saving flashcards locally only.', 'warning', 4000);
-        }
-        
-        try {
-            const planData = {
-                current_level: currentUser.english_level || 'B1',
-                target_level: document.getElementById('targetLevelSelect')?.value || 'B2',
-                weekly_hours: parseInt(document.getElementById('weeklyHoursSelect')?.value || 5),
-                context_focus: currentUser.context_focus || 'General/Social',
-                study_goals: []
-            };
-
-            showLoading('Generating your personalized study plan...');
-            
-            const response = await fetch('/study-plan/create', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(planData)
-            });
-
-            const result = await response.json();
-            hideLoading();
-
-            if (result.success) {
-                displayStudyPlan(result.plan);
-                showToast('Study plan generated successfully!', 'success');
-            } else {
-                showToast('Failed to generate study plan: ' + result.error, 'error');
-            }
-        } catch (error) {
-            hideLoading();
-            console.error('Error generating study plan:', error);
-            showToast('Error generating study plan', 'error');
-        }
-    }
-
-    async function loadCurrentStudyPlan() {
-        if (!currentUser || isGuestMode) {
-            showToast('Guest mode: operation allowed but not persisted.', 'warning', 4000);
-        }
-        
-        try {
-            const response = await fetch('/study-plan/current');
-            const result = await response.json();
-
-            if (result.success && result.plan) {
-                displayStudyPlan(result.plan);
-                loadStudyProgress();
-            }
-        } catch (error) {
-            console.error('Error loading study plan:', error);
-        }
-    }
-
-    async function loadStudyProgress() {
-        if (!currentUser || isGuestMode) {
-            showToast('Guest mode: operation allowed but not persisted.', 'warning', 4000);
-        }
-        
-        try {
-            const response = await fetch('/study-plan/progress');
-            const result = await response.json();
-
-            if (result.success && result.progress) {
-                displayStudyProgress(result.progress);
-            }
-        } catch (error) {
-            console.error('Error loading study progress:', error);
-        }
-    }
-
-    async function completeActivity(planId, activityId, durationMinutes) {
-        if (!currentUser) return;
-        
-        try {
-            const notes = prompt('Any notes about this activity? (optional)') || '';
-            
-            const response = await fetch('/study-plan/activity/complete', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    plan_id: planId,
-                    activity_id: activityId,
-                    duration_minutes: durationMinutes,
-                    notes: notes
-                })
-            });
-
-            const result = await response.json();
-
-            if (result.success) {
-                showToast('Activity completed successfully!', 'success');
-                
-                // Update the UI
-                const activityCard = document.querySelector(`[data-activity-id="${activityId}"]`);
-                if (activityCard) {
-                    activityCard.classList.add('completed');
-                    const button = activityCard.querySelector('.complete-activity-btn');
-                    if (button) {
-                        button.textContent = '✅ Completed';
-                        button.disabled = true;
-                    }
-                }
-                
-                // Refresh progress
-                loadStudyProgress();
-            } else {
-                showToast('Failed to complete activity', 'error');
-            }
-        } catch (error) {
-            console.error('Error completing activity:', error);
-            showToast('Error completing activity', 'error');
-        }
-    }
-
-    function displayStudyPlan(plan) {
-        const container = document.getElementById('studyPlanResult');
-        if (!container) return;
-
-        container.innerHTML = `
-            <div class="study-plan-container">
-                <div class="study-plan-header">
-                    <h3>📅 Your Personalized Study Plan</h3>
-                    <div class="plan-overview grid grid-cols-2 gap-4 mt-4">
-                        <div class="plan-stat">
-                            <strong>Current Level:</strong> ${plan.current_level}
-                        </div>
-                        <div class="plan-stat">
-                            <strong>Target Level:</strong> ${plan.target_level}
-                        </div>
-                        <div class="plan-stat">
-                            <strong>Weekly Hours:</strong> ${plan.weekly_hours}h
-                        </div>
-                        <div class="plan-stat">
-                            <strong>Duration:</strong> ${plan.estimated_weeks} weeks
-                        </div>
-                    </div>
-                </div>
-
-                <div class="study-tips mt-6">
-                    <h4 class="font-medium mb-2">💡 Personalized Study Tips</h4>
-                    <ul class="space-y-1">
-                        ${plan.study_tips.map(tip => `<li class="text-sm text-gray-600">${tip}</li>`).join('')}
-                    </ul>
-                </div>
-
-                <div class="weekly-activities mt-6">
-                    <h4 class="font-medium mb-3">📚 Weekly Activities</h4>
-                    <div class="activities-grid space-y-3">
-                        ${plan.activities.slice(0, 6).map(activity => `
-                            <div class="activity-card bg-gray-50 p-3 rounded-lg" data-activity-id="${activity.id}">
-                                <div class="activity-header flex items-center gap-2 mb-2">
-                                    <span class="text-lg">${activity.icon}</span>
-                                    <strong class="text-sm">${activity.title}</strong>
-                                </div>
-                                <div class="activity-details text-xs text-gray-600">
-                                    <p><strong>Duration:</strong> ${activity.duration_minutes} minutes</p>
-                                    <p><strong>Day:</strong> ${['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][activity.day_of_week]}</p>
-                                </div>
-                                <button class="complete-activity-btn mt-2 bg-green-500 text-white px-3 py-1 rounded text-xs hover:bg-green-600" 
-                                        onclick="completeActivity('${plan.db_id || plan.id}', '${activity.id}', ${activity.duration_minutes})">
-                                    ✅ Mark Complete
-                                </button>
-                            </div>
-                        `).join('')}
-                    </div>
-                </div>
-
-                <div class="milestones mt-6">
-                    <h4 class="font-medium mb-3">🎯 Study Milestones</h4>
-                    <div class="milestones-list space-y-2">
-                        ${plan.milestones.slice(0, 3).map(milestone => `
-                            <div class="milestone-item flex items-center gap-3 p-2 bg-blue-50 rounded ${milestone.completed ? 'completed opacity-75' : ''}">
-                                <div class="milestone-week bg-blue-500 text-white px-2 py-1 rounded text-xs">Week ${milestone.week}</div>
-                                <div class="milestone-content flex-1">
-                                    <strong class="text-sm">${milestone.title}</strong>
-                                    <p class="text-xs text-gray-600">${milestone.description}</p>
-                                </div>
-                            </div>
-                        `).join('')}
-                    </div>
-                </div>
-            </div>
-        `;
-
-        container.classList.remove('hidden');
-    }
-
-    function displayStudyProgress(progress) {
-        // This would be called to show progress in analytics section
-        console.log('Study progress:', progress);
-    }
-    
-    // --- INICIALIZAÇÃO ---
-    document.addEventListener('DOMContentLoaded', () => {
-        checkDemoMode();
-        checkAuthStatus();
-        populateModelSelector();
-        initializeSpeechRecognition();
-    });
-</script>
-
-<!-- Footer -->
-<footer class="mt-16 py-8 bg-gray-100 border-t border-gray-200">
-    <div class="container mx-auto max-w-5xl px-4">
-        <div class="flex flex-col md:flex-row justify-between items-center gap-4">
-            <div class="text-sm text-gray-600">
-                <p>&copy; 2024 Dynamic English Study Studio - AI Learning Platform</p>
-                <p class="text-xs text-gray-500 mt-1">Powered by AI for enhanced English learning</p>
-            </div>
-            
-            <div class="flex items-center gap-4">
-                <!-- System Links -->
-                <div class="flex items-center gap-2 text-sm">
-                    <span class="text-gray-500">System:</span>
-                    <a href="/admin" class="text-indigo-600 hover:text-indigo-800 font-medium" title="Admin Panel">
-                        👤 Admin
-                    </a>
-                    <span class="text-gray-300">|</span>
-                    <a href="/auth/check" class="text-green-600 hover:text-green-800 font-medium" title="System Status" target="_blank">
-                        ⚕️ Status
-                    </a>
-                    <span class="text-gray-300">|</span>
-                    <a href="/proxy/7860" class="text-purple-600 hover:text-purple-800 font-medium" title="Gradio Dashboard" target="_blank">
-                        📊 Dashboard
-                    </a>
-                </div>
-                
-                <!-- Version Info -->
-                <div class="text-xs text-gray-400 border-l border-gray-300 pl-4">
-                    <div>v2.0.0</div>
-                    <div>Flask + Gradio</div>
-                </div>
-            </div>
-        </div>
-        
-        <!-- Quick Actions for Logged Users -->
-        <div id="footerUserActions" class="mt-4 pt-4 border-t border-gray-200" style="display: none;">
-            <div class="flex flex-wrap justify-center gap-2 text-xs">
-                <button onclick="loadAnalytics()" class="text-blue-600 hover:text-blue-800">📊 Refresh Analytics</button>
-                <span class="text-gray-300">•</span>
-                <button onclick="showUserFlashcards()" class="text-green-600 hover:text-green-800">📚 Load Flashcards</button>
-                <span class="text-gray-300">•</span>
-                <button onclick="generateStudyPlan()" class="text-purple-600 hover:text-purple-800">🎯 New Study Plan</button>
-                <span class="text-gray-300">•</span>
-                <button onclick="showUserSettings()" class="text-gray-600 hover:text-gray-800">⚙️ Settings</button>
-            </div>
-        </div>
-    </div>
-</footer>
-
-</body>
-</html>
-
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dynamic English Study Studio</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+        body { font-family: 'Inter', sans-serif; background-color: #f7f9fc; }
+        .card { background-color: white; border-radius: 12px; box-shadow: 0 4px_12px rgba(0,0,0,0.08); padding: 24px; }
+        .btn { padding: 0.5rem 1rem; border-radius: 8px; font-weight: 600; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
+        .btn:disabled { cursor: not-allowed; opacity: 0.5; }
+        .btn-primary { background-color: #4f46e5; color: white; }
+        .btn-primary:hover:not(:disabled) { background-color: #4338ca; }
+        .spinner { border: 2px solid rgba(255,255,255,0.3); width: 20px; height: 20px; border-radius: 50%; border-left-color: #fff; animation: spin 1s ease infinite; }
+        @keyframes spin { to { transform: rotate(360deg); } }
+        .flashcard-container { perspective: 1000px; position: relative; }
+        .flashcard-inner { position: relative; width: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
+        .flashcard-container.flipped .flashcard-inner { transform: rotateY(180deg); }
+        .flashcard-front, .flashcard-back { position: absolute; width: 100%; height:100%; backface-visibility: hidden; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
+        .flashcard-front { background-color: #f9fafb; }
+        .flashcard-back { background-color: #ffffff; transform: rotateY(180deg); }
+        .audio-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #4f46e5; padding: 0; }
+        .delete-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #9ca3af; z-index: 10; }
+        .delete-btn:hover { color: #ef4444; }
+        #activityChatDisplay { border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; min-height: 150px; background-color: #f9fafb; }
+        .ai-prompt { border-bottom: 2px dashed #d1d5db; padding-bottom: 1rem; margin-bottom: 1rem; }
+        .user-response-display { background-color: #eef2ff; border-left: 4px solid #4f46e5; padding: 0.75rem; margin-bottom: 1rem; font-style: italic; }
+        .ai-feedback { background-color: #f0fdf4; border-left: 4px solid #22c55e; padding: 0.75rem; }
+        .ai-feedback h3 { font-weight: 700; }
+        
+        /* Toast Notifications */
+        .toast-container { position: fixed; top: 20px; right: 20px; z-index: 1000; max-width: 400px; }
+        .toast { background: white; border-left: 4px solid #4f46e5; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); padding: 1rem; margin-bottom: 0.5rem; opacity: 0; transform: translateX(100%); transition: all 0.3s ease; }
+        .toast.show { opacity: 1; transform: translateX(0); }
+        .toast.error { border-left-color: #ef4444; }
+        .toast.success { border-left-color: #10b981; }
+        .toast.warning { border-left-color: #f59e0b; }
+        .toast-close { float: right; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #9ca3af; }
+        
+        /* Loading States & Skeleton */
+        .loading-skeleton { 
+            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); 
+            background-size: 200% 100%; 
+            animation: loading 1.5s infinite; 
+            border-radius: 4px;
+        }
+        @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+        
+        .skeleton-text { height: 1rem; margin: 0.25rem 0; }
+        .skeleton-text.large { height: 1.5rem; }
+        .skeleton-text.small { height: 0.75rem; }
+        .skeleton-box { height: 100px; border-radius: 8px; }
+        
+        /* Enhanced Loading Spinner */
+        .spinner-container { display: flex; align-items: center; justify-content: center; padding: 2rem; }
+        .spinner-large { width: 40px; height: 40px; border-width: 4px; }
+        
+        /* Fade in animations */
+        .fade-in { animation: fadeIn 0.5s ease-in; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+        
+        /* Slide in animations */
+        .slide-in { animation: slideIn 0.3s ease-out; }
+        @keyframes slideIn { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+        
+        /* Empty states */
+        .empty-state { 
+            text-align: center; padding: 3rem 1rem; color: #6b7280; 
+            background: #f9fafb; border: 2px dashed #d1d5db; border-radius: 12px; margin: 1rem 0;
+        }
+        .empty-state-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
+        .empty-state-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #374151; }
+        .empty-state-description { font-size: 0.875rem; line-height: 1.5; }
+        
+        /* Enhanced Flashcards - Responsive */
+        .flashcard-container { perspective: 1000px; position: relative; }
+        .flashcard-inner { position: relative; width: 100%; min-height: 280px; transition: transform 0.6s; transform-style: preserve-3d; }
+        .flashcard-container.flipped .flashcard-inner { transform: rotateY(180deg); }
+        .flashcard-front, .flashcard-back { 
+            position: absolute; width: 100%; height: 100%; min-height: 280px; backface-visibility: hidden; 
+            border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; 
+            justify-content: space-between; word-wrap: break-word; overflow-wrap: break-word; 
+        }
+        .flashcard-front { background-color: #f9fafb; }
+        .flashcard-back { background-color: #ffffff; transform: rotateY(180deg); }
+        
+        /* Responsive text handling */
+        .flashcard-text { 
+            font-size: 1rem; line-height: 1.5; max-height: 150px; overflow-y: auto; 
+            word-break: break-word; hyphens: auto; padding: 0.25rem 0;
+        }
+        
+        /* Mobile responsiveness */
+        @media (max-width: 768px) {
+            .flashcard-text { font-size: 0.9rem; max-height: 120px; line-height: 1.4; }
+            .flashcard-container { margin-bottom: 1rem; }
+            .flashcard-inner { min-height: 250px; }
+            .flashcard-front, .flashcard-back { min-height: 250px; padding: 16px; }
+            .card { padding: 16px; }
+            body { padding: 0.5rem; }
+            .container { padding: 0; }
+            
+            /* Adjust grid for mobile */
+            .grid.grid-cols-1.md\\:grid-cols-3 { grid-template-columns: 1fr; }
+            .grid.grid-cols-1.lg\\:grid-cols-2 { grid-template-columns: 1fr; }
+        }
+        
+        @media (max-width: 480px) {
+            .flashcard-text { font-size: 0.85rem; max-height: 100px; }
+            .flashcard-inner { min-height: 220px; }
+            .flashcard-front, .flashcard-back { min-height: 220px; padding: 12px; }
+            
+            /* Make buttons more touch-friendly */
+            .btn { padding: 0.75rem 1rem; min-height: 44px; }
+            .audio-btn { font-size: 1.25rem; padding: 0.5rem; }
+            .delete-btn { font-size: 1rem; padding: 0.5rem; }
+        }
+        
+        /* Text overflow handling */
+        .text-truncate { 
+            overflow: hidden; 
+            text-overflow: ellipsis; 
+            white-space: nowrap; 
+        }
+        
+        .text-wrap { 
+            white-space: normal; 
+            word-wrap: break-word; 
+            overflow-wrap: break-word; 
+        }
+        
+        /* Form Validation */
+        .form-error { border-color: #ef4444 !important; }
+        .error-message { color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem; }
+        
+        /* Enhanced buttons */
+        .btn { position: relative; overflow: hidden; }
+        .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,0.3); transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s; }
+        .btn:active::after { width: 300px; height: 300px; }
+        
+        /* Pulse animation for mic button */
+        .mic-button.is-recording { animation: pulse 1.5s infinite; }
+        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
+        
+        /* Auth Modal */
+        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
+        .modal.show { display: block; }
+        .modal-content { 
+            background-color: white; margin: 5% auto; padding: 0; width: 90%; max-width: 400px; 
+            border-radius: 12px; position: relative; animation: modalSlideIn 0.3s ease;
+        }
+        @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
+        .modal-header { padding: 1.5rem; border-bottom: 1px solid #e5e7eb; }
+        .modal-body { padding: 1.5rem; }
+        .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; gap: 0.5rem; }
+        .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
+        .close:hover { color: #000; }
+        
+        /* Auth Form */
+        .auth-form { display: none; }
+        .auth-form.active { display: block; }
+        .form-group { margin-bottom: 1rem; }
+        .form-group label { display: block; margin-bottom: 0.25rem; font-weight: 500; color: #374151; }
+        .form-group input { width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.875rem; }
+        .form-group input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
+        
+        /* User Menu */
+        .user-menu { position: relative; display: inline-block; }
+        .user-menu-content { display: none; position: absolute; right: 0; background-color: white; min-width: 200px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); border-radius: 8px; z-index: 1; border: 1px solid #e5e7eb; }
+        .user-menu.show .user-menu-content { display: block; }
+        .user-menu-item { padding: 0.75rem 1rem; display: block; color: #374151; text-decoration: none; border-bottom: 1px solid #f3f4f6; }
+        .user-menu-item:hover { background-color: #f9fafb; }
+        .user-menu-item:last-child { border-bottom: none; }
+        
+        /* Header Auth Section */
+        .auth-section { display: flex; align-items: center; gap: 0.5rem; }
+        .user-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: #4f46e5; color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; cursor: pointer; }
+        
+        /* Content Curation Styles */
+        .content-item { 
+            border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; margin-bottom: 1rem;
+            background: white; transition: all 0.2s;
+        }
+        .content-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-color: #4f46e5; }
+        .content-item-title { font-weight: 600; color: #1f2937; margin-bottom: 0.5rem; }
+        .content-item-meta { font-size: 0.75rem; color: #6b7280; margin-bottom: 0.5rem; }
+        .content-item-summary { font-size: 0.875rem; color: #4b5563; line-height: 1.5; }
+        .difficulty-badge { 
+            display: inline-block; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 500;
+        }
+        .difficulty-easy { background-color: #dcfce7; color: #166534; }
+        .difficulty-medium { background-color: #fef3c7; color: #92400e; }
+        .difficulty-hard { background-color: #fee2e2; color: #991b1b; }
+        
+        /* Analytics Styles */
+        .metric-card { 
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+            color: white; border-radius: 12px; padding: 1.5rem; text-align: center; 
+        }
+        .metric-value { font-size: 2rem; font-weight: bold; margin-bottom: 0.5rem; }
+        .metric-label { font-size: 0.875rem; opacity: 0.9; }
+        
+        /* Study Plan Styles */
+        .plan-activity { 
+            display: flex; align-items: center; padding: 0.75rem; border-radius: 6px; 
+            border-left: 4px solid #4f46e5; background-color: #f8fafc; margin-bottom: 0.5rem;
+        }
+        .plan-activity-icon { margin-right: 0.75rem; font-size: 1.25rem; }
+        .plan-activity-text { flex-grow: 1; font-size: 0.875rem; }
+        .plan-activity-time { font-size: 0.75rem; color: #6b7280; }
+    </style>
+</head>
+<body class="p-4 md:p-8">
+    <!-- Toast Container -->
+    <div id="toastContainer" class="toast-container"></div>
+
+    <div class="container mx-auto max-w-5xl">
+        <header class="mb-10">
+            <div class="flex justify-between items-center mb-6">
+                <div>
+                    <h1 class="text-3xl lg:text-4xl font-bold text-gray-800">Dynamic English Study Studio</h1>
+                    <p class="text-gray-500 mt-2">Your study tool with audio, images, and conversation & pronunciation practice.</p>
+                    <div id="demoModeIndicator" class="mt-2" style="display: none;">
+                        <div class="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
+                            🚀 Demo Mode - No email confirmation needed
+                        </div>
+                    </div>
+                </div>
+                <div class="auth-section">
+                    <!-- Navigation: always visible in HF guest mode -->
+                    <nav class="flex items-center gap-3">
+                        <a href="/admin" class="btn bg-gray-100 hover:bg-gray-200 text-gray-800">Admin</a>
+                        <a href="/dashboard" class="btn bg-gray-100 hover:bg-gray-200 text-gray-800">Dashboard</a>
+                        <a href="/status" class="btn bg-gray-100 hover:bg-gray-200 text-gray-800">Status</a>
+                    </nav>
+                </div>
+            </div>
+        </header>
+
+        <div class="card mb-8">
+            <h2 class="text-xl font-semibold mb-4 text-gray-700">Global Session Settings</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div>
+                   <label for="modelSelector" class="block text-sm font-medium text-gray-700">Main AI Model</label>
+                   <select id="modelSelector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 rounded-md shadow-sm">
+                       <option>Loading models...</option>
+                   </select>
+                </div>
+               <div>
+                   <label for="contextSelector" class="block text-sm font-medium text-gray-700">Vocabulary Focus</label>
+                   <select id="contextSelector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 rounded-md shadow-sm">
+                       <option value="General/Social">General/Social</option>
+                       <option value="Professional/Business">Professional/Business</option>
+                       <option value="Technical/IT">Technical/IT</option>
+                   </select>
+               </div>
+               <div>
+                   <label for="voiceSelector" class="block text-sm font-medium text-gray-700">Voice Accent (TTS)</label>
+                   <select id="voiceSelector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 rounded-md shadow-sm">
+                       <option value="co.uk">British (Female)</option>
+                       <option value="com">American (Female)</option>
+                       <option value="com.au">Australian (Female)</option>
+                   </select>
+               </div>
+           </div>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <!-- Coluna da Esquerda: Inputs -->
+            <div class="flex flex-col gap-6">
+                <div class="card">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-700">1. Study from Text</h2>
+                    <div id="textEditor" contenteditable="true" spellcheck="true" lang="en" class="w-full p-4 border rounded-md min-h-[150px]"></div>
+                    <p class="text-sm text-right text-gray-500 mt-2">Characters: <span id="charCount">0</span>/10000</p>
+                    <div class="mt-4 border-t pt-4 flex flex-wrap gap-2 justify-between items-center">
+                        <button id="createCardButton" onclick="createFlashcardFromSelection()" class="btn btn-primary bg-green-600 hover:bg-green-700 disabled:opacity-50" disabled>+ Create Flashcard</button>
+                        <button id="playButton" onclick="handlePlay()" class="btn btn-primary" disabled>
+                            <span id="playText">Listen to Text</span>
+                            <div id="playSpinner" class="spinner ml-2 hidden"></div>
+                        </button>
+                    </div>
+                    <audio id="audioPlayer" controls class="w-full mt-4 hidden"></audio>
+                </div>
+
+                <div class="card">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-700">2. Study from Image (Analysis)</h2>
+                    <input type="file" id="imageUploader" accept="image/*" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100"/>
+                    <img id="imagePreview" src="" class="mt-4 rounded-lg hidden max-h-60 mx-auto" alt="Preview"/>
+                    <div id="imageAnalysisResult" class="mt-4"></div>
+                </div>
+                
+                 <div class="card">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-700">3. Conversation Practice</h2>
+                    <div id="chatDisplay" class="flex flex-col space-y-2 mb-4"></div>
+                    <div class="flex gap-2">
+                        <input type="text" id="chatInput" class="flex-grow border rounded-lg px-3 py-2" placeholder="Type or use the microphone...">
+                        <button onclick="handleTextInput()" class="btn btn-primary bg-gray-500 hover:bg-gray-600">Send</button>
+                        <button id="micButton" onclick="handleVoiceInput()" class="btn btn-primary mic-button w-12 h-12 rounded-full">🎙️</button>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-700">4. Image Generator (Nano Banana)</h2>
+                    <p class="text-sm text-gray-600 mb-2">Describe a scene in English for the AI to draw.</p>
+                    <div class="flex gap-2">
+                        <input type="text" id="imagePromptInput" class="flex-grow border rounded-lg px-3 py-2" placeholder="Ex: a blue cat reading a book on the moon">
+                        <button id="generateImageBtn" onclick="generateImage()" class="btn btn-primary">Generate</button>
+                    </div>
+                    <div id="imageResultContainer" class="mt-4 p-4 border rounded-lg bg-gray-50 min-h-[200px] flex items-center justify-center">
+                        <p class="text-gray-500 italic">Your image will appear here.</p>
+                    </div>
+                </div>
+                
+                <div class="card">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-700">5. Content Discovery & Curation</h2>
+                    <div id="contentCuration" style="display: none;">
+                        <div class="mb-4">
+                            <h3 class="text-lg font-medium mb-2">🔍 Find Relevant Content</h3>
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700 mb-1">Search Topic</label>
+                                    <input type="text" id="contentSearchInput" class="w-full border rounded-lg px-3 py-2" placeholder="e.g., cybersecurity, product management">
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
+                                    <select id="contentCategorySelect" class="w-full border rounded-lg px-3 py-2">
+                                        <option value="">All Categories</option>
+                                        <option value="technology">Technology</option>
+                                        <option value="business">Business</option>
+                                        <option value="automotive">Automotive</option>
+                                        <option value="cybersecurity">Cybersecurity</option>
+                                        <option value="science">Science</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="flex gap-2 mb-4">
+                                <button onclick="searchContent()" class="btn btn-primary">🔍 Search Articles</button>
+                                <button onclick="getRecommendations()" class="btn bg-purple-500 hover:bg-purple-600 text-white">✨ AI Recommendations</button>
+                                <button onclick="showSavedArticles()" class="btn bg-green-500 hover:bg-green-600 text-white">📚 Saved Articles</button>
+                            </div>
+                        </div>
+                        
+                        <div id="contentResults" class="space-y-4">
+                            <div class="empty-state">
+                                <div class="empty-state-icon">🔍</div>
+                                <div class="empty-state-title">Discover Personalized Content</div>
+                                <div class="empty-state-description">Search for articles or get AI recommendations based on your interests and English level</div>
+                            </div>
+                        </div>
+                        
+                        <div class="mt-6 pt-4 border-t">
+                            <h3 class="text-lg font-medium mb-2">📝 Add Your Own Content</h3>
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                                <input type="text" id="customContentTitle" class="border rounded-lg px-3 py-2" placeholder="Article Title">
+                                <input type="url" id="customContentUrl" class="border rounded-lg px-3 py-2" placeholder="URL (optional)">
+                            </div>
+                            <textarea id="customContentText" rows="4" class="w-full border rounded-lg px-3 py-2 mb-4" placeholder="Paste your text content here..."></textarea>
+                            <button onclick="saveCustomContent()" class="btn btn-primary">💾 Save Content</button>
+                        </div>
+                    </div>
+                    <!-- In guest mode content curation is available but saving is local-only -->
+                    <div id="contentCurationLogin" class="text-center py-8" style="display:none;">
+                        <!-- hidden in HF guest mode -->
+                    </div>
+                </div>
+
+                <div class="card">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-700">6. Interactive Writing Practice</h2>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                       <div>
+                           <label for="activityTypeSelector" class="block text-sm font-medium text-gray-700">Activity Type</label>
+                           <select id="activityTypeSelector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 rounded-md shadow-sm">
+                               <option value="translate_pt_en">Translate (PT to EN)</option>
+                               <option value="email_writing">Write Formal Email</option>
+                               <option value="summary_writing">Summarize Main Text</option>
+                               <option value="professional_conversation">Simulate Professional Conversation</option>
+                           </select>
+                       </div>
+                        <div class="flex items-end">
+                             <button id="generateActivityButton" onclick="generateActivity()" class="btn btn-primary w-full">Generate Activity</button>
+                        </div>
+                    </div>
+                    
+                    <div id="activityChatContainer" class="mt-4 border-t pt-4">
+                        <div id="activityChatDisplay">
+                            <p class="text-gray-500 italic">Your interactive exercise will appear here.</p>
+                        </div>
+                        <div id="activityResponseArea" class="mt-4 hidden">
+                            <label for="activityInput" class="block text-sm font-medium text-gray-700 mb-1">Your Answer:</label>
+                            <textarea id="activityInput" rows="4" class="w-full p-2 border rounded-md"></textarea>
+                            <button id="submitActivityBtn" onclick="submitActivityResponse()" class="btn btn-primary mt-2">Submit Answer</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Coluna da Direita: Painel Dinâmico -->
+            <div class="flex flex-col gap-6">
+                <!-- Study Analytics Panel (for logged users) -->
+                <div id="analyticsPanel" class="card" style="display: none;">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-xl font-semibold text-gray-700">📊 Your Progress</h2>
+                        <button onclick="toggleAnalytics()" class="text-gray-500 hover:text-gray-700">↕️</button>
+                    </div>
+                    <div id="analyticsContent">
+                        <div class="grid grid-cols-2 gap-4 mb-4">
+                            <div class="text-center p-4 bg-blue-50 rounded-lg">
+                                <div class="text-2xl font-bold text-blue-600" id="totalFlashcards">0</div>
+                                <div class="text-sm text-gray-600">Flashcards</div>
+                            </div>
+                            <div class="text-center p-4 bg-green-50 rounded-lg">
+                                <div class="text-2xl font-bold text-green-600" id="totalArticles">0</div>
+                                <div class="text-sm text-gray-600">Articles</div>
+                            </div>
+                        </div>
+                        <div class="text-center p-3 bg-purple-50 rounded-lg">
+                            <div class="text-lg font-semibold text-purple-600" id="currentLevel">B1</div>
+                            <div class="text-sm text-gray-600">Current Level</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Study Planner Panel (for logged users) -->
+                <div id="studyPlannerPanel" class="card" style="display: none;">
+                    <h2 class="text-xl font-semibold mb-4 text-gray-700">🎯 Study Planner</h2>
+                    <div id="studyPlanContent">
+                        <div class="mb-4">
+                            <h3 class="font-medium mb-2">Quick Plan Generator</h3>
+                            <div class="grid grid-cols-1 gap-2 mb-3">
+                                <select id="targetLevelSelect" class="border rounded-lg px-3 py-2 text-sm">
+                                    <option value="A2">Target: A2 (Elementary)</option>
+                                    <option value="B1">Target: B1 (Intermediate)</option>
+                                    <option value="B2" selected>Target: B2 (Upper-Intermediate)</option>
+                                    <option value="C1">Target: C1 (Advanced)</option>
+                                    <option value="C2">Target: C2 (Proficient)</option>
+                                </select>
+                                <select id="weeklyHoursSelect" class="border rounded-lg px-3 py-2 text-sm">
+                                    <option value="3">3 hours/week</option>
+                                    <option value="5" selected>5 hours/week</option>
+                                    <option value="7">7 hours/week</option>
+                                    <option value="10">10 hours/week</option>
+                                </select>
+                            </div>
+                            <button onclick="generateStudyPlan()" class="btn btn-primary w-full text-sm">🚀 Generate Plan</button>
+                        </div>
+                        <div id="studyPlanResult" class="text-sm text-gray-600">
+                            Your personalized study plan will appear here
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Flashcards Panel -->
+                <div id="flashcardsPanel" class="card">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-xl font-semibold text-gray-700">Your Study Session</h2>
+                        <div class="flex items-center gap-2">
+                            <button id="loadFlashcardsBtn" onclick="showUserFlashcards()" class="btn bg-blue-100 text-blue-700 hover:bg-blue-200 text-sm" style="display: none;" title="Load your saved flashcards">📚 Load Saved</button>
+                            <div id="sessionStatus" class="text-sm">
+                                <span id="guestStatus" class="text-gray-500">Guest Mode - Progress not saved</span>
+                                <span id="userStatus" class="text-green-600" style="display: none;">✓ Progress being saved</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="flashcardList" class="space-y-6">
+                        <div id="noCardsMessage" class="empty-state">
+                            <div class="empty-state-icon">📚</div>
+                            <div class="empty-state-title">No flashcards yet</div>
+                            <div class="empty-state-description">
+                                Select text from the editor or analyze an image to create your first flashcard!
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Auth Modal -->
+    <div id="authModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 id="authModalTitle">Login</h2>
+                <span class="close" onclick="hideAuthModal()">&times;</span>
+            </div>
+            <div class="modal-body">
+                <!-- Login Form -->
+                <form id="loginForm" class="auth-form active">
+                    <div class="form-group">
+                        <label for="loginEmail">Email</label>
+                        <input type="email" id="loginEmail" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="loginPassword">Password</label>
+                        <input type="password" id="loginPassword" required>
+                    </div>
+                    <button type="submit" class="btn btn-primary w-full">Login</button>
+                    <p class="text-center mt-4 text-sm text-gray-600">
+                        Don't have an account? 
+                        <a href="#" onclick="switchAuthForm('register')" class="text-indigo-600 hover:text-indigo-800">Sign up</a>
+                    </p>
+                </form>
+                
+                <!-- Register Form -->
+                <form id="registerForm" class="auth-form">
+                    <div class="form-group">
+                        <label for="registerEmail">Email</label>
+                        <input type="email" id="registerEmail" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="registerPassword">Password</label>
+                        <input type="password" id="registerPassword" required minlength="8">
+                        <small class="text-gray-500">At least 8 characters</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="confirmPassword">Confirm Password</label>
+                        <input type="password" id="confirmPassword" required>
+                    </div>
+                    <button type="submit" class="btn btn-primary w-full">Create Account</button>
+                    <p class="text-center mt-4 text-sm text-gray-600">
+                        Already have an account? 
+                        <a href="#" onclick="switchAuthForm('login')" class="text-indigo-600 hover:text-indigo-800">Login</a>
+                    </p>
+                </form>
+            </div>
+        </div>
+    </div>
+
+<script>
+    // --- ELEMENTOS GLOBAIS ---
+    const modelSelector = document.getElementById('modelSelector');
+    const contextSelector = document.getElementById('contextSelector');
+    const voiceSelector = document.getElementById('voiceSelector');
+    const textEditor = document.getElementById('textEditor');
+    const createCardButton = document.getElementById('createCardButton');
+    const playButton = document.getElementById('playButton');
+    const audioPlayer = document.getElementById('audioPlayer');
+    const flashcardList = document.getElementById('flashcardList');
+    const noCardsMessage = document.getElementById('noCardsMessage');
+    const imageUploader = document.getElementById('imageUploader');
+    const imagePreview = document.getElementById('imagePreview');
+    const imageAnalysisResult = document.getElementById('imageAnalysisResult');
+    const chatDisplay = document.getElementById('chatDisplay');
+    const chatInput = document.getElementById('chatInput');
+    const micButton = document.getElementById('micButton');
+    const imagePromptInput = document.getElementById('imagePromptInput');
+    const generateImageBtn = document.getElementById('generateImageBtn');
+    const imageResultContainer = document.getElementById('imageResultContainer');
+    const activityTypeSelector = document.getElementById('activityTypeSelector');
+    const generateActivityButton = document.getElementById('generateActivityButton');
+    const activityChatDisplay = document.getElementById('activityChatDisplay');
+    const activityResponseArea = document.getElementById('activityResponseArea');
+    const activityInput = document.getElementById('activityInput');
+    const submitActivityBtn = document.getElementById('submitActivityBtn');
+    const toastContainer = document.getElementById('toastContainer');
+    
+    let chatHistory = [];
+    let recognition;
+    let isRecording = false;
+    let currentActivityPrompt = "";
+    // Default to guest mode for HF Spaces (no-login)
+    let currentUser = 'guest';
+    let isGuestMode = true;
+    
+    // Detectar ambiente HF Spaces
+    function checkDemoMode() {
+        const isHFSpaces = window.location.hostname.includes('hf.space') || 
+                          window.location.hostname.includes('huggingface.co');
+        
+        if (isHFSpaces) {
+            document.getElementById('demoModeIndicator').style.display = 'block';
+        }
+    }
+
+    // --- SISTEMA DE TOAST NOTIFICATIONS ---
+    function showToast(message, type = 'info', duration = 5000) {
+        const toast = document.createElement('div');
+        toast.className = `toast ${type}`;
+        toast.innerHTML = `
+            <button class="toast-close" onclick="this.parentElement.remove()">&times;</button>
+            <div class="font-medium">${getToastTitle(type)}</div>
+            <div class="text-sm mt-1">${message}</div>
+        `;
+        
+        toastContainer.appendChild(toast);
+        
+        // Show animation
+        setTimeout(() => toast.classList.add('show'), 100);
+        
+        // Auto remove
+        setTimeout(() => {
+            toast.classList.remove('show');
+            setTimeout(() => toast.remove(), 300);
+        }, duration);
+    }
+    
+    function getToastTitle(type) {
+        const titles = {
+            'success': '✅ Success',
+            'error': '❌ Error', 
+            'warning': '⚠️ Warning',
+            'info': 'ℹ️ Info'
+        };
+        return titles[type] || 'Info';
+    }
+    
+    // --- ENHANCED ERROR HANDLING ---
+    async function handleApiRequest(url, options, errorContext = 'Request') {
+        try {
+            const response = await fetch(url, options);
+            
+            if (!response.ok) {
+                let errorMessage = `HTTP ${response.status}`;
+                try {
+                    const errorData = await response.json();
+                    errorMessage = errorData.error || errorMessage;
+                } catch (e) {
+                    // Use default HTTP error
+                }
+                throw new Error(errorMessage);
+            }
+            
+            return await response.json();
+        } catch (error) {
+            console.error(`${errorContext} failed:`, error);
+            
+            if (error.name === 'TypeError' && error.message.includes('fetch')) {
+                showToast('Network connection error. Please check your internet connection.', 'error');
+            } else if (error.message.includes('503')) {
+                showToast('Service temporarily unavailable. Please check API configuration.', 'warning');
+            } else {
+                showToast(`${errorContext} failed: ${error.message}`, 'error');
+            }
+            
+            throw error;
+        }
+    }
+    
+    // --- LOADING STATE MANAGEMENT ---
+    function setButtonLoading(button, loading, originalText = null) {
+        if (loading) {
+            button.disabled = true;
+            button.dataset.originalText = button.innerHTML;
+            button.innerHTML = '<div class="spinner mr-2"></div> Loading...';
+        } else {
+            button.disabled = false;
+            button.innerHTML = originalText || button.dataset.originalText || button.innerHTML;
+        }
+    }
+    
+    // --- INPUT VALIDATION ---
+    function validateInput(input, errorMessage) {
+        const value = input.value?.trim() || '';
+        const errorElement = input.parentNode.querySelector('.error-message');
+        
+        if (!value) {
+            input.classList.add('form-error');
+            if (!errorElement) {
+                const error = document.createElement('div');
+                error.className = 'error-message';
+                error.textContent = errorMessage;
+                input.parentNode.appendChild(error);
+            }
+            return false;
+        } else {
+            input.classList.remove('form-error');
+            if (errorElement) errorElement.remove();
+            return true;
+        }
+    }
+
+    // --- CARREGAMENTO DINÂMICO DE MODELOS ---
+    async function populateModelSelector() {
+        try {
+            const models = await handleApiRequest('/list-models', {}, 'Loading models');
+            modelSelector.innerHTML = '';
+            
+            const geminiGroup = document.createElement('optgroup');
+            geminiGroup.label = 'Google Gemini';
+            const groqGroup = document.createElement('optgroup');
+            groqGroup.label = 'Groq (Ultra Fast)';
+            
+            models.forEach(model => {
+                const option = document.createElement('option');
+                option.value = model.value;
+                option.textContent = model.name;
+                if (model.value.startsWith('gemini:')) {
+                    geminiGroup.appendChild(option);
+                } else if (model.value.startsWith('groq:')) {
+                    groqGroup.appendChild(option);
+                }
+            });
+            
+            modelSelector.appendChild(geminiGroup);
+            modelSelector.appendChild(groqGroup);
+            showToast('Models loaded successfully', 'success', 2000);
+        } catch (error) {
+            modelSelector.innerHTML = '<option>Error loading models</option>';
+        }
+    }
+
+    // --- FUNÇÕES DE ÁUDIO ---
+    
+    // Cache para armazenar áudios gerados
+    const audioCache = new Map();
+    
+    // Função para gerar uma chave de cache baseada no texto e voice
+    function getAudioCacheKey(text, tld) {
+        return `${text.substring(0, 100)}_${tld}_${text.length}`;
+    }
+    
+    // Função para limpar cache de áudio (útil quando muda o texto significativamente)
+    function clearAudioCache() {
+        audioCache.forEach(blob => {
+            if (blob && blob.url) {
+                URL.revokeObjectURL(blob.url);
+            }
+        });
+        audioCache.clear();
+        if (currentAudioUrl) {
+            URL.revokeObjectURL(currentAudioUrl);
+            currentAudioUrl = null;
+        }
+        console.log('Audio cache cleared');
+    }
+    
+    async function fetchAudioBlob(text) {
+        const selectedTld = voiceSelector.value;
+        const cacheKey = getAudioCacheKey(text, selectedTld);
+        
+        // Verificar se já temos esse áudio no cache
+        if (audioCache.has(cacheKey)) {
+            return audioCache.get(cacheKey);
+        }
+        
+        const response = await fetch('/tts-proxy', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ text: text, tld: selectedTld })
+        });
+        if (!response.ok) {
+            const err = await response.json();
+            throw new Error(err.error || `HTTP error! status: ${response.status}`);
+        }
+        
+        const blob = await response.blob();
+        
+        // Armazenar no cache (limitar a 10 áudios para não usar muita memória)
+        if (audioCache.size >= 10) {
+            const firstKey = audioCache.keys().next().value;
+            // Revogar URL do áudio mais antigo
+            const oldBlob = audioCache.get(firstKey);
+            if (oldBlob && oldBlob.url) {
+                URL.revokeObjectURL(oldBlob.url);
+            }
+            audioCache.delete(firstKey);
+        }
+        
+        audioCache.set(cacheKey, blob);
+        return blob;
+    }
+    
+    async function playAudio(text, event) {
+        if(event) event.stopPropagation();
+        if (!text || !text.trim()) {
+            showToast('No text to play', 'warning', 2000);
+            return;
+        }
+        
+        try {
+            const audioBlob = await fetchAudioBlob(text);
+            const audioUrl = URL.createObjectURL(audioBlob);
+            const audio = new Audio(audioUrl);
+            
+            audio.onplay = () => showToast('Playing audio...', 'info', 1000);
+            audio.onended = () => URL.revokeObjectURL(audioUrl);
+            audio.onerror = () => showToast('Failed to play audio', 'error');
+            
+            await audio.play();
+        } catch (error) { 
+            console.error('Error playing audio:', error);
+            showToast('Failed to generate audio. Please try again.', 'error');
+        }
+    }
+
+    // --- LÓGICA DO EDITOR ---
+    const charCount = document.getElementById('charCount');
+    const playText = document.getElementById('playText');
+    const playSpinner = document.getElementById('playSpinner');
+    
+    let lastTextForCache = '';
+    
+    textEditor.addEventListener('input', () => {
+        const len = textEditor.innerText.length;
+        const currentText = textEditor.innerText.trim();
+        
+        // Atualizar contador
+        charCount.textContent = `${len}/10000`;
+        playButton.disabled = len === 0;
+        
+        // Limpar cache se o texto mudou significativamente (mais de 50 caracteres de diferença)
+        if (Math.abs(currentText.length - lastTextForCache.length) > 50 || 
+            (currentText.length > 100 && currentText.substring(0, 100) !== lastTextForCache.substring(0, 100))) {
+            if (currentAudioUrl) {
+                audioPlayer.src = '';
+                audioPlayer.classList.add('hidden');
+            }
+            lastTextForCache = currentText;
+        }
+        
+        // Mudança de cor baseada no limite
+        if (len > 10000) {
+            charCount.classList.add('text-red-500');
+            charCount.classList.remove('text-gray-500');
+        } else if (len > 8000) {
+            charCount.classList.remove('text-red-500', 'text-gray-500');
+            charCount.classList.add('text-yellow-500');
+        } else {
+            charCount.classList.remove('text-red-500', 'text-yellow-500');
+            charCount.classList.add('text-gray-500');
+        }
+    });
+    
+    // Controle de seleção de texto para flashcards e áudio
+    textEditor.addEventListener('mouseup', () => {
+        createCardButton.disabled = !window.getSelection().toString().trim();
+        handleTextSelection();
+    });
+    
+    textEditor.addEventListener('keyup', () => {
+        handleTextSelection();
+    });
+    
+    function handleTextSelection() {
+        const selectedText = window.getSelection().toString().trim();
+        const playSelectionBtn = document.getElementById('playSelectionBtn');
+        
+        if (selectedText && selectedText.length > 0) {
+            if (!playSelectionBtn) {
+                // Criar botão de tocar seleção se não existir
+                const selectionBtn = document.createElement('button');
+                selectionBtn.id = 'playSelectionBtn';
+                selectionBtn.className = 'btn bg-blue-500 hover:bg-blue-600 text-white ml-2';
+                selectionBtn.innerHTML = '🎵 Play Selection';
+                selectionBtn.onclick = () => playSelectedText();
+                
+                // Inserir próximo ao botão Play principal
+                playButton.parentNode.insertBefore(selectionBtn, playButton.nextSibling);
+            }
+            playSelectionBtn.style.display = 'inline-block';
+            playSelectionBtn.disabled = false;
+        } else if (playSelectionBtn) {
+            playSelectionBtn.style.display = 'none';
+        }
+    }
+    
+    async function playSelectedText() {
+        const selectedText = window.getSelection().toString().trim();
+        if (!selectedText) {
+            showToast('Please select some text first', 'warning');
+            return;
+        }
+        
+        if (selectedText.length > 1000) {
+            showToast('Selected text is too long. Please select less than 1000 characters.', 'warning');
+            return;
+        }
+        
+        const selectionBtn = document.getElementById('playSelectionBtn');
+        setButtonLoading(selectionBtn, true, '🎵 Play Selection');
+        
+        try {
+            await playAudio(selectedText);
+            showToast(`Playing selected text (${selectedText.length} chars)`, 'success', 2000);
+        } catch (error) {
+            showToast('Failed to play selected text', 'error');
+        } finally {
+            setButtonLoading(selectionBtn, false, '🎵 Play Selection');
+        }
+    }
+    
+    // Variável para armazenar o URL atual do áudio
+    let currentAudioUrl = null;
+    
+    async function handlePlay() {
+        const text = textEditor.innerText.trim();
+        if (!text) {
+            showToast('Please enter some text first', 'warning');
+            return;
+        }
+        
+        if (text.length > 10000) { // Aumentado de 5000 para 10000
+            showToast('Text is too long for audio generation. Please use shorter text.', 'warning');
+            return;
+        }
+        
+        const selectedTld = voiceSelector.value;
+        const cacheKey = getAudioCacheKey(text, selectedTld);
+        
+        // Se já temos um áudio carregado para este texto, apenas reproduzir
+        if (currentAudioUrl && audioPlayer.src && getAudioCacheKey(audioPlayer.dataset.lastText || '', audioPlayer.dataset.lastTld || '') === cacheKey) {
+            try {
+                await audioPlayer.play();
+                showToast('Playing cached audio...', 'success', 1000);
+                return;
+            } catch (error) {
+                console.log('Cached audio failed, regenerating...');
+            }
+        }
+        
+        setButtonLoading(playButton, true);
+        playText.textContent = 'Generating...';
+        playSpinner.classList.remove('hidden');
+        
+        try {
+            const audioBlob = await fetchAudioBlob(text);
+            
+            // Limpar URL anterior se existir
+            if (currentAudioUrl) {
+                URL.revokeObjectURL(currentAudioUrl);
+            }
+            
+            currentAudioUrl = URL.createObjectURL(audioBlob);
+            audioPlayer.src = currentAudioUrl;
+            audioPlayer.dataset.lastText = text;
+            audioPlayer.dataset.lastTld = selectedTld;
+            audioPlayer.classList.remove('hidden');
+            
+            // Remover listener anterior para evitar duplicatas
+            audioPlayer.onplay = () => showToast('Audio ready! Playing...', 'success', 1000);
+            audioPlayer.onended = () => {
+                // NÃO revogar o URL aqui, manter para permitir replay
+                showToast('Audio finished', 'info', 1000);
+            };
+            audioPlayer.onerror = () => showToast('Failed to play audio', 'error');
+            
+            await audioPlayer.play();
+            showToast(`Audio generated successfully! (${text.length} characters)`, 'success', 2000);
+        } catch (error) {
+            console.error('Audio generation error:', error);
+            showToast('Failed to generate audio. Please check your connection and try again.', 'error');
+        } finally {
+            setButtonLoading(playButton, false);
+            playText.textContent = 'Listen to Text';
+            playSpinner.classList.add('hidden');
+        }
+    }
+
+    // --- TODAS AS OUTRAS FUNÇÕES ---
+    
+    // ATIVIDADES
+    async function generateActivity() {
+        const activityType = activityTypeSelector.value;
+        const context = contextSelector.value;
+        const sourceText = textEditor.innerText;
+        generateActivityButton.disabled = true;
+        generateActivityButton.innerHTML = '<div class="spinner mr-2"></div> Generating...';
+        activityChatDisplay.innerHTML = '<p class="text-gray-500 italic">Generating your exercise...</p>';
+        activityResponseArea.classList.add('hidden');
+        let prompt = "";
+        if (activityType === 'translate_pt_en') {
+            prompt = `Based on the '${context}' context, create one single sentence in Portuguese for me to translate into English.`;
+        } else if (activityType === 'email_writing') {
+            prompt = `Create a scenario for me to write a formal email, related to the '${context}' context. Give me clear instructions on what to write.`;
+        } else if (activityType === 'summary_writing') {
+            if (!sourceText) {
+                alert("Please paste text in the main editor to generate a summary activity.");
+                activityChatDisplay.innerHTML = '<p class="text-red-500">Please paste text in the editor in card #1 first.</p>';
+                generateActivityButton.disabled = false;
+                generateActivityButton.textContent = 'Generate Activity';
+                return;
+            }
+            prompt = `Your task is to summarize the following text in 2 or 3 sentences: "${sourceText}"`;
+        } else if (activityType === 'professional_conversation') {
+             prompt = `Start a professional role-playing conversation with me related to '${context}'. Ask me an open-ended question to begin.`;
+        }
+        try {
+            const response = await fetch('/explain-proxy', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    model: modelSelector.value,
+                    context_focus: context,
+                    custom_prompt: prompt
+                })
+            });
+            if (!response.ok) throw new Error((await response.json()).error);
+            const data = await response.json();
+            currentActivityPrompt = data.explanation;
+            activityChatDisplay.innerHTML = `<div class="ai-prompt"><strong>Your Task:</strong><p>${currentActivityPrompt}</p></div>`;
+            activityResponseArea.classList.remove('hidden');
+        } catch (error) {
+            activityChatDisplay.innerHTML = `<p class="text-red-600 font-semibold">Failed to generate activity: ${error.message}</p>`;
+        } finally {
+            generateActivityButton.disabled = false;
+            generateActivityButton.textContent = 'Generate Activity';
+        }
+    }
+    async function submitActivityResponse() {
+        const userResponse = activityInput.value.trim();
+        if (!userResponse) {
+            alert("Please write a response.");
+            return;
+        }
+        submitActivityBtn.disabled = true;
+        submitActivityBtn.innerHTML = '<div class="spinner mr-2"></div> Getting Feedback...';
+        const oldFeedback = activityChatDisplay.querySelector('.ai-feedback');
+        if(oldFeedback) oldFeedback.remove();
+        const oldResponse = activityChatDisplay.querySelector('.user-response-display');
+        if(oldResponse) oldResponse.remove();
+        const userResponseDiv = document.createElement('div');
+        userResponseDiv.className = 'user-response-display';
+        userResponseDiv.innerHTML = `<strong>Your Response:</strong><p>${userResponse}</p>`;
+        activityChatDisplay.appendChild(userResponseDiv);
+        try {
+            const response = await fetch('/activity-feedback', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    model: modelSelector.value,
+                    context_focus: contextSelector.value,
+                    original_prompt: currentActivityPrompt,
+                    user_response: userResponse
+                })
+            });
+            if (!response.ok) throw new Error((await response.json()).error);
+            const data = await response.json();
+            const feedbackDiv = document.createElement('div');
+            feedbackDiv.className = 'ai-feedback';
+            feedbackDiv.innerHTML = `<strong>Feedback:</strong><div class="prose prose-sm max-w-none">${marked.parse(data.feedback)}</div>`;
+            activityChatDisplay.appendChild(feedbackDiv);
+            activityInput.value = '';
+        } catch (error) {
+            const errorDiv = document.createElement('div');
+            errorDiv.className = 'ai-feedback';
+            errorDiv.innerHTML = `<p class="text-red-600 font-semibold">Failed to get feedback: ${error.message}</p>`;
+            activityChatDisplay.appendChild(errorDiv);
+        } finally {
+            submitActivityBtn.disabled = false;
+            submitActivityBtn.textContent = 'Submit Answer';
+        }
+    }
+    
+    // CONVERSAÇÃO
+    function initializeSpeechRecognition() {
+        window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        if (!window.SpeechRecognition) {
+            micButton.disabled = true;
+            micButton.textContent = '❌';
+            alert('Voice recognition API is not supported in this browser.');
+            return;
+        }
+        recognition = new SpeechRecognition();
+        recognition.lang = 'en-US';
+        recognition.interimResults = false;
+        recognition.continuous = false;
+        recognition.onresult = (event) => {
+            const transcript = event.results[0][0].transcript;
+            chatInput.value = transcript;
+            sendMessage(transcript);
+        };
+        recognition.onerror = (event) => { console.error('Voice recognition error:', event.error); };
+        recognition.onend = () => {
+            isRecording = false;
+            micButton.classList.remove('is-recording');
+            micButton.innerHTML = '🎙️';
+        };
+    }
+    function handleVoiceInput() {
+        if (isRecording) {
+            recognition.stop();
+        } else {
+            isRecording = true;
+            micButton.classList.add('is-recording');
+            micButton.innerHTML = '<div class="spinner"></div>';
+            recognition.start();
+        }
+    }
+    function handleTextInput() {
+        const message = chatInput.value.trim();
+        sendMessage(message);
+        chatInput.value = '';
+    }
+    chatInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') handleTextInput(); });
+    async function sendMessage(message) {
+        if (!message) return;
+        appendMessage(message, 'user');
+        chatHistory.push({ role: 'user', content: message });
+        try {
+            const response = await fetch('/chat-with-ai', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ history: chatHistory, message: message })
+            });
+            if (!response.ok) throw new Error((await response.json()).error);
+            const data = await response.json();
+            appendMessage(data.response, 'ai');
+            chatHistory.push({ role: 'assistant', content: data.response });
+            playAudio(data.response);
+        } catch (error) {
+            appendMessage(`Chat error: ${error.message}`, 'ai');
+        }
+    }
+    function appendMessage(text, sender) {
+        const msg = document.createElement('div');
+        msg.className = `chat-message ${sender}-message`;
+        msg.textContent = text;
+        chatDisplay.appendChild(msg);
+        chatDisplay.scrollTop = chatDisplay.scrollHeight;
+    }
+    
+    // IMAGEM
+    imageUploader.addEventListener('change', (event) => {
+        const file = event.target.files[0];
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            imagePreview.src = e.target.result;
+            imagePreview.classList.remove('hidden');
+            analyzeImage(e.target.result);
+        };
+        reader.readAsDataURL(file);
+    });
+    async function analyzeImage(base64Image) {
+        // Show skeleton loading
+        imageAnalysisResult.innerHTML = `
+            <div class="spinner-container">
+                <div class="spinner spinner-large !border-l-indigo-500 !border-gray-200"></div>
+                <p class="ml-3 text-gray-600">Analyzing image with AI...</p>
+            </div>
+            <div class="mt-4">
+                <div class="skeleton-text loading-skeleton mb-2"></div>
+                <div class="flex gap-2">
+                    <div class="skeleton-box loading-skeleton" style="width: 80px; height: 32px;"></div>
+                    <div class="skeleton-box loading-skeleton" style="width: 100px; height: 32px;"></div>
+                    <div class="skeleton-box loading-skeleton" style="width: 90px; height: 32px;"></div>
+                </div>
+            </div>`;
+            
+        try {
+            const vocabulary = await handleApiRequest('/analyze-image', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ 
+                    image: base64Image,
+                    model: modelSelector.value
+                })
+            }, 'Analyzing image');
+            
+            displayImageVocabulary(vocabulary);
+            showToast(`Found ${vocabulary.length} vocabulary items in the image!`, 'success');
+        } catch (error) {
+            imageAnalysisResult.innerHTML = `
+                <div class="empty-state">
+                    <div class="empty-state-icon">❌</div>
+                    <div class="empty-state-title">Analysis Failed</div>
+                    <div class="empty-state-description">Please try uploading the image again or check your connection.</div>
+                </div>`;
+        }
+    }
+    function displayImageVocabulary(vocabulary) {
+        imageAnalysisResult.innerHTML = `
+            <div class="fade-in">
+                <h3 class="font-semibold mb-3 text-gray-700">🎯 Suggested Vocabulary (${vocabulary.length} items)</h3>
+                <div class="flex flex-wrap gap-2" id="vocabularyButtons"></div>
+                <p class="text-xs text-gray-500 mt-3">Click any term to create a flashcard</p>
+            </div>`;
+            
+        const buttonContainer = document.getElementById('vocabularyButtons');
+        vocabulary.forEach(({ term, definition }, index) => {
+            const btn = document.createElement('button');
+            btn.className = 'btn bg-violet-100 text-violet-700 hover:bg-violet-200 text-sm slide-in';
+            btn.style.animationDelay = `${index * 0.1}s`;
+            btn.innerHTML = `${term} <span class="text-violet-500 ml-1">+</span>`;
+            btn.title = `${term}: ${definition}`;
+            btn.onclick = () => {
+                btn.disabled = true;
+                btn.innerHTML = '<div class="spinner mr-1"></div> Creating...';
+                createFlashcardFromSuggestion(term, definition);
+            };
+            buttonContainer.appendChild(btn);
+        });
+    }
+    async function generateImage() {
+        const prompt = imagePromptInput.value.trim();
+        if (!prompt) {
+            alert('Please enter a description for the image.');
+            return;
+        }
+        generateImageBtn.disabled = true;
+        generateImageBtn.innerHTML = '<div class="spinner mr-2"></div> Generating...';
+        imageResultContainer.innerHTML = `<div class="flex items-center justify-center p-4"><div class="spinner !border-l-indigo-500 !border-gray-200"></div><p class="ml-3 text-gray-600">Creating your image...</p></div>`;
+        try {
+            const response = await fetch('/generate-image', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ prompt: prompt })
+            });
+            if (!response.ok) throw new Error((await response.json()).error);
+            const data = await response.json();
+            imageResultContainer.innerHTML = `<img src="data:image/png;base64,${data.image_base64}" class="rounded-lg max-h-60 mx-auto" alt="AI-generated image"/>`;
+        } catch (error) {
+            imageResultContainer.innerHTML = `<p class="text-red-600 font-semibold">Failed to generate image: ${error.message}</p>`;
+        } finally {
+            generateImageBtn.disabled = false;
+            generateImageBtn.textContent = 'Generate';
+        }
+    }
+    
+    // FLASHCARDS
+    function createSkeletonFlashcard() {
+        const cardId = `skeleton-${Date.now()}`;
+        const container = document.createElement('div');
+        container.className = 'flashcard-container fade-in';
+        container.id = cardId;
+        container.innerHTML = `
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    <div>
+                        <div class="skeleton-text small loading-skeleton"></div>
+                        <div class="skeleton-text large loading-skeleton mt-4"></div>
+                        <div class="skeleton-text loading-skeleton"></div>
+                    </div>
+                    <div class="border-t pt-3 mt-3">
+                        <div class="skeleton-text loading-skeleton"></div>
+                        <div class="skeleton-text small loading-skeleton mt-2"></div>
+                    </div>
+                </div>
+            </div>`;
+        return container;
+    }
+    
+    async function createFlashcard(word, context, definition = null) {
+        if (!word || !word.trim()) {
+            showToast('Please select a word first', 'warning');
+            return;
+        }
+        
+        // Hide empty state and show skeleton
+        noCardsMessage.classList.add('hidden');
+        const skeletonCard = createSkeletonFlashcard();
+        flashcardList.prepend(skeletonCard);
+        
+        const btn = definition ? null : createCardButton;
+        if (btn) setButtonLoading(btn, true);
+        
+        try {
+            const cardData = await handleApiRequest('/explain-proxy', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    word: word.trim(),
+                    context: context || 'General context',
+                    for_flashcard: true,
+                    model: modelSelector.value,
+                    context_focus: contextSelector.value
+                })
+            }, 'Creating flashcard');
+            
+            if(definition && !cardData.definition) cardData.definition = definition;
+            
+            // Remove skeleton and add real card
+            skeletonCard.remove();
+            renderFlashcard(cardData);
+            
+            // Show appropriate message based on auth status
+            if (currentUser) {
+                showToast(`Flashcard for "${word}" created and saved to your account!`, 'success');
+            } else {
+                showToast(`Flashcard for "${word}" created! Login to save your progress.`, 'success');
+            }
+        } catch (error) {
+            // Remove skeleton on error
+            skeletonCard.remove();
+            // Show empty state if no cards left
+            if (flashcardList.children.length === 1) {
+                noCardsMessage.classList.remove('hidden');
+            }
+        } finally {
+            if (btn) setButtonLoading(btn, false);
+        }
+    }
+    function createFlashcardFromSelection() {
+        const selection = window.getSelection().toString().trim();
+        if (selection) createFlashcard(selection, textEditor.innerText);
+    }
+    function createFlashcardFromSuggestion(term, definition) {
+        createFlashcard(term, `(From image analysis) A visual representation of ${term}.`, definition);
+    }
+    function renderFlashcard(data) {
+        noCardsMessage.classList.add('hidden');
+        const cardId = `card-${Date.now()}`;
+        const container = document.createElement('div');
+        container.className = 'flashcard-container';
+        container.id = cardId;
+        
+        // Calculate dynamic height based on content length
+        const totalLength = (data.gapped_sentence?.length || 0) + 
+                           (data.translation?.length || 0) + 
+                           (data.definition?.length || 0) + 
+                           (data.context_sentence?.length || 0);
+        
+        let minHeight = 280;
+        if (totalLength > 300) minHeight = 350;  
+        if (totalLength > 500) minHeight = 420;  
+        if (totalLength > 800) minHeight = 500;  
+        
+        // Responsive height adjustment
+        if (window.innerWidth <= 768) {
+            minHeight = Math.max(250, minHeight * 0.85);
+        }
+        if (window.innerWidth <= 480) {
+            minHeight = Math.max(220, minHeight * 0.75);
+        }
+        
+        container.style.minHeight = `${minHeight}px`;
+        const fallback = 'Info not generated';
+        container.innerHTML = `
+            <button class="delete-btn" onclick="deleteFlashcard('${cardId}', event)" title="Delete flashcard">🗑️</button>
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                     <div>
+                        <div class="text-sm text-gray-600 mb-2">Context Sentence:</div>
+                        <div class="flashcard-text text-lg text-center text-gray-800">${data.gapped_sentence || fallback}</div>
+                    </div>
+                    <div class="border-t pt-3 mt-3 text-center">
+                        <strong class="text-indigo-600">Hint (PT):</strong> 
+                        <div class="flashcard-text mt-1">${data.translation || fallback}</div>
+                    </div>
+                    <div class="text-xs text-center text-gray-400 mt-4">👆 Click to see the answer</div>
+                </div>
+                <div class="flashcard-back">
+                    <div>
+                        <h3 class="text-xl font-bold text-center text-indigo-600 mb-2">${data.term || 'Term'}</h3>
+                        <div class="flex items-center justify-center gap-2 text-gray-600 italic mb-3">
+                            <button class="audio-btn" onclick="playAudio('${(data.context_sentence || '').replace(/'/g, "\\'")}', event)" title="Listen to pronunciation">🔊</button>
+                            <span class="flashcard-text">${data.context_sentence || fallback}</span>
+                        </div>
+                        <div class="text-sm text-gray-800"><strong class="font-semibold">Definition:</strong> 
+                            <div class="flashcard-text mt-1">${data.definition || fallback}</div>
+                        </div>
+                    </div>
+                    <div class="border-t mt-3 pt-3">
+                        <h4 class="text-sm font-semibold text-center">Practice Your Pronunciation</h4>
+                        <div class="flex justify-center items-center gap-2 mt-2">
+                            <button class="btn btn-primary w-12 h-12 rounded-full mic-button" onclick="handlePronunciationPractice(this, '${(data.context_sentence || '').replace(/'/g, "\\'")}', event)" title="Record your pronunciation">🎙️</button>
+                        </div>
+                        <div class="text-xs text-gray-600 p-2 mt-2 bg-gray-50 rounded-md min-h-[40px] flashcard-text" data-feedback-area>Click the microphone to practice pronunciation</div>
+                    </div>
+                </div>
+            </div>`;
+        container.classList.add('fade-in');
+        flashcardList.prepend(container);
+        
+        container.addEventListener('click', (e) => {
+            if(e.target.tagName !== 'BUTTON' && !e.target.closest('button')) {
+                 container.classList.toggle('flipped');
+            }
+        });
+    }
+    function deleteFlashcard(cardId, event) {
+        event.stopPropagation();
+        const cardToDelete = document.getElementById(cardId);
+        if (cardToDelete) {
+            cardToDelete.remove();
+        }
+        if (flashcardList.children.length === 1) {
+            noCardsMessage.classList.remove('hidden');
+        }
+    }
+    async function handlePronunciationPractice(button, targetText, event) {
+        event.stopPropagation();
+        const feedbackArea = button.closest('.flashcard-back').querySelector('[data-feedback-area]');
+        const practiceRecognition = new SpeechRecognition();
+        practiceRecognition.lang = 'en-US';
+        button.innerHTML = '<div class="spinner"></div>';
+        button.disabled = true;
+        feedbackArea.textContent = 'Listening...';
+        practiceRecognition.start();
+        practiceRecognition.onresult = async (e) => {
+            const userText = e.results[0][0].transcript;
+            feedbackArea.textContent = `You said: "${userText}". Analyzing...`;
+            try {
+                const response = await fetch('/pronunciation-feedback', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ target_text: targetText, user_text: userText })
+                });
+                if (!response.ok) throw new Error((await response.json()).error);
+                const data = await response.json();
+                feedbackArea.innerHTML = `<strong>Feedback:</strong> ${data.feedback}`;
+            } catch (error) {
+                feedbackArea.textContent = `Analysis error: ${error.message}`;
+            } finally {
+                button.innerHTML = '🎙️';
+                button.disabled = false;
+            }
+        };
+        practiceRecognition.onerror = (e) => {
+            feedbackArea.textContent = `Recording error: ${e.error}`;
+            button.innerHTML = '🎙️';
+            button.disabled = false;
+        };
+    }
+    
+    // --- AUTHENTICATION FUNCTIONS ---
+    
+    async function checkAuthStatus() {
+        // For HF Spaces we default to guest/demo mode and skip server auth checks
+        try {
+            const isHF = window.location.hostname.includes('hf.space') || window.location.hostname.includes('huggingface.co');
+            if (isHF) {
+                // Guest mode
+                isGuestMode = true;
+                currentUser = 'guest';
+                showGuestState();
+                return;
+            }
+
+            const response = await fetch('/auth/check');
+            const data = await response.json();
+            
+            if (data.authenticated) {
+                currentUser = data.user;
+                isGuestMode = false;
+                showAuthenticatedState();
+                // Load user settings into selectors
+                if (data.user.settings) {
+                    loadUserSettings(data.user.settings);
+                }
+            } else {
+                showGuestState();
+            }
+        } catch (error) {
+            console.error('Auth check failed:', error);
+            showGuestState();
+        }
+    }
+    
+    function showAuthenticatedState() {
+        document.getElementById('guestAuth').style.display = 'none';
+        document.getElementById('userAuth').style.display = 'block';
+        document.getElementById('userEmail').textContent = currentUser.email;
+        document.getElementById('userAvatar').textContent = currentUser.email.charAt(0).toUpperCase();
+        
+        // Update session status
+        document.getElementById('guestStatus').style.display = 'none';
+        document.getElementById('userStatus').style.display = 'inline';
+        document.getElementById('loadFlashcardsBtn').style.display = 'inline-block';
+        
+    // Show advanced panels
+    document.getElementById('contentCuration').style.display = 'block';
+    document.getElementById('contentCurationLogin').style.display = 'none';
+    document.getElementById('analyticsPanel').style.display = 'block';
+    document.getElementById('studyPlannerPanel').style.display = 'block';
+        
+        // Show footer user actions
+        document.getElementById('footerUserActions').style.display = 'block';
+        
+        // Load analytics and study plan
+        loadAnalytics();
+        loadCurrentStudyPlan();
+        
+        showToast(`Welcome back, ${currentUser.email}!`, 'success', 3000);
+    }
+    
+    function showGuestState() {
+        document.getElementById('guestAuth').style.display = 'flex';
+        document.getElementById('userAuth').style.display = 'none';
+        
+        // Update session status
+        document.getElementById('guestStatus').style.display = 'inline';
+        document.getElementById('userStatus').style.display = 'none';
+        document.getElementById('loadFlashcardsBtn').style.display = 'none';
+        
+    // In HF guest mode, keep content curation visible but indicate limited persistence
+    document.getElementById('contentCuration').style.display = 'block';
+    document.getElementById('contentCurationLogin').style.display = 'none';
+    document.getElementById('analyticsPanel').style.display = 'block';
+    document.getElementById('studyPlannerPanel').style.display = 'block';
+        
+        // Hide footer user actions
+        document.getElementById('footerUserActions').style.display = 'none';
+        
+    currentUser = 'guest';
+    isGuestMode = true;
+    }
+    
+    function loadUserSettings(settings) {
+        if (settings.preferred_model) modelSelector.value = settings.preferred_model;
+        if (settings.context_focus) contextSelector.value = settings.context_focus;
+        if (settings.voice_accent) voiceSelector.value = settings.voice_accent;
+    }
+    
+    function showAuthModal(type = 'login') {
+        // In HF Spaces we run in guest/demo mode. Show guidance instead of a modal.
+        showToast('Guest mode active: no login required. Use Admin/Dashboard links for more tools.', 'info', 5000);
+    }
+    
+    function hideAuthModal() {
+        // No-op in guest mode
+    }
+    
+    function switchAuthForm(type) {
+        const loginForm = document.getElementById('loginForm');
+        const registerForm = document.getElementById('registerForm');
+        const title = document.getElementById('authModalTitle');
+        
+        if (type === 'login') {
+            loginForm.classList.add('active');
+            registerForm.classList.remove('active');
+            title.textContent = 'Login';
+        } else {
+            registerForm.classList.add('active');
+            loginForm.classList.remove('active');
+            title.textContent = 'Create Account';
+        }
+    }
+    
+    function toggleUserMenu() {
+        document.getElementById('userAuth').classList.toggle('show');
+    }
+    
+    // Close user menu when clicking outside
+    document.addEventListener('click', (e) => {
+        if (!e.target.closest('.user-menu')) {
+            document.getElementById('userAuth').classList.remove('show');
+        }
+    });
+    
+    // Login form submission
+    document.getElementById('loginForm').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const email = document.getElementById('loginEmail').value;
+        const password = document.getElementById('loginPassword').value;
+        
+        const submitBtn = e.target.querySelector('button[type="submit"]');
+        setButtonLoading(submitBtn, true);
+        
+        try {
+            const data = await handleApiRequest('/login', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email, password })
+            }, 'Logging in');
+            
+            currentUser = data.user;
+            hideAuthModal();
+            showAuthenticatedState();
+            
+            if (data.user.settings) {
+                loadUserSettings(data.user.settings);
+            }
+            
+        } catch (error) {
+            // Error already handled by handleApiRequest
+        } finally {
+            setButtonLoading(submitBtn, false);
+        }
+    });
+    
+    // Register form submission
+    document.getElementById('registerForm').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const email = document.getElementById('registerEmail').value;
+        const password = document.getElementById('registerPassword').value;
+        const confirmPassword = document.getElementById('confirmPassword').value;
+        
+        if (password !== confirmPassword) {
+            showToast('Passwords do not match', 'error');
+            return;
+        }
+        
+        const submitBtn = e.target.querySelector('button[type="submit"]');
+        setButtonLoading(submitBtn, true);
+        
+        try {
+            const data = await handleApiRequest('/register', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email, password })
+            }, 'Creating account');
+            
+            hideAuthModal();
+            
+            // Mostrar mensagem baseada na resposta do servidor
+            if (data.auto_confirmed) {
+                showToast(data.message || 'Account created and ready to use! (Demo mode)', 'success', 5000);
+                // Se auto-confirmado, pode logar automaticamente
+                setTimeout(() => {
+                    showToast('You can now login with your credentials', 'info', 3000);
+                }, 2000);
+            } else {
+                showToast(data.message || 'Account created! Please check your email to confirm.', 'success', 8000);
+            }
+            
+        } catch (error) {
+            // Error already handled by handleApiRequest
+        } finally {
+            setButtonLoading(submitBtn, false);
+        }
+    });
+    
+    async function logout() {
+        try {
+            await handleApiRequest('/logout', {
+                method: 'POST'
+            }, 'Logging out');
+            
+            showGuestState();
+            showToast('Logged out successfully', 'info');
+            
+        } catch (error) {
+            // Error already handled by handleApiRequest
+        }
+    }
+    
+    async function showUserSettings() {
+        // Allow guest mode: warn that some features won't persist
+        if (!currentUser || isGuestMode) {
+            showToast('Using guest mode — data may not be saved between sessions.', 'warning', 4000);
+            // continue in guest mode
+        }
+        
+        document.getElementById('userAuth').classList.remove('show');
+        
+        // Simple settings update using current form values
+        const settings = {
+            preferred_model: modelSelector.value,
+            context_focus: contextSelector.value,
+            voice_accent: voiceSelector.value,
+            daily_goal: 10, // Default
+            notification_enabled: true // Default
+        };
+        
+        try {
+            await handleApiRequest('/user/settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(settings)
+            }, 'Saving settings');
+            
+            showToast('Settings saved successfully!', 'success');
+        } catch (error) {
+            // Error already handled
+        }
+    }
+    
+    async function showUserFlashcards() {
+        if (!currentUser || isGuestMode) {
+            showToast('Using guest mode — conversations are local-only in HF Spaces.', 'warning', 4000);
+        }
+        
+        document.getElementById('userAuth').classList.remove('show');
+        
+        try {
+            const data = await handleApiRequest('/user/flashcards', {}, 'Loading your flashcards');
+            
+            // Clear current flashcards
+            flashcardList.innerHTML = '';
+            
+            if (data.flashcards && data.flashcards.length > 0) {
+                data.flashcards.forEach(card => {
+                    const flashcardData = {
+                        term: card.term,
+                        translation: card.translation,
+                        context_sentence: card.context_sentence,
+                        gapped_sentence: card.gapped_sentence,
+                        definition: card.definition
+                    };
+                    renderFlashcard(flashcardData);
+                });
+                showToast(`Loaded ${data.flashcards.length} saved flashcards`, 'success');
+            } else {
+                noCardsMessage.classList.remove('hidden');
+                showToast('No saved flashcards found', 'info');
+            }
+            
+        } catch (error) {
+            noCardsMessage.classList.remove('hidden');
+        }
+    }
+    
+    // --- CONTENT CURATION FUNCTIONS ---
+    
+    async function searchContent() {
+        if (!currentUser) {
+            showToast('Please log in to search content', 'warning');
+            return;
+        }
+        
+        const query = document.getElementById('contentSearchInput').value.trim();
+        const category = document.getElementById('contentCategorySelect').value;
+        
+        if (!query) {
+            showToast('Please enter a search topic', 'warning');
+            return;
+        }
+        
+        const resultsContainer = document.getElementById('contentResults');
+        resultsContainer.innerHTML = '<div class="spinner-container"><div class="spinner spinner-large"></div><p class="ml-3">Searching for relevant content...</p></div>';
+        
+        try {
+            const data = await handleApiRequest('/content/search', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ query, category })
+            }, 'Searching content');
+            
+            displayContentResults(data.results);
+        } catch (error) {
+            resultsContainer.innerHTML = '<div class="text-red-600">Failed to search content. Please try again.</div>';
+        }
+    }
+    
+    async function getRecommendations() {
+        if (!currentUser) {
+            showToast('Please log in to get recommendations', 'warning');
+            return;
+        }
+        
+        const resultsContainer = document.getElementById('contentResults');
+        resultsContainer.innerHTML = '<div class="spinner-container"><div class="spinner spinner-large"></div><p class="ml-3">Generating AI recommendations...</p></div>';
+        
+        try {
+            const data = await handleApiRequest('/content/recommendations', {}, 'Getting recommendations');
+            displayRecommendations(data.recommendations);
+        } catch (error) {
+            resultsContainer.innerHTML = '<div class="text-red-600">Failed to get recommendations. Please try again.</div>';
+        }
+    }
+    
+    function displayContentResults(results) {
+        const container = document.getElementById('contentResults');
+        
+        if (!results || results.length === 0) {
+            container.innerHTML = `
+                <div class="empty-state">
+                    <div class="empty-state-icon">🔍</div>
+                    <div class="empty-state-title">No Content Found</div>
+                    <div class="empty-state-description">Try different search terms or check your interests settings</div>
+                </div>`;
+            return;
+        }
+        
+        container.innerHTML = results.map(result => `
+            <div class="content-item fade-in">
+                <div class="content-item-title">${result.title}</div>
+                <div class="content-item-meta">
+                    <span class="difficulty-badge difficulty-${getDifficultyClass(result.estimated_difficulty || 3)}">
+                        Level ${result.estimated_difficulty || 3}
+                    </span>
+                    <span class="ml-2">${result.source}</span>
+                    ${result.published ? `<span class="ml-2">${new Date(result.published).toLocaleDateString()}</span>` : ''}
+                </div>
+                <div class="content-item-summary">${result.summary}</div>
+                <div class="flex gap-2 mt-3">
+                    <button onclick="extractAndSaveContent('${result.url}', '${result.title.replace(/'/g, "\\'")}')" class="btn bg-green-500 hover:bg-green-600 text-white text-sm">📖 Read & Save</button>
+                    <a href="${result.url}" target="_blank" class="btn bg-gray-500 hover:bg-gray-600 text-white text-sm">🔗 Open Original</a>
+                </div>
+            </div>
+        `).join('');
+    }
+    
+    function displayRecommendations(recommendations) {
+        const container = document.getElementById('contentResults');
+        
+        if (!recommendations || recommendations.length === 0) {
+            container.innerHTML = `
+                <div class="empty-state">
+                    <div class="empty-state-icon">🤖</div>
+                    <div class="empty-state-title">No Recommendations</div>
+                    <div class="empty-state-description">Update your interests in settings to get better recommendations</div>
+                </div>`;
+            return;
+        }
+        
+        container.innerHTML = `
+            <h3 class="text-lg font-semibold mb-4 text-purple-600">✨ AI Recommendations for You</h3>
+        ` + recommendations.map(rec => `
+            <div class="content-item fade-in border-purple-200">
+                <div class="content-item-title text-purple-700">${rec.topic}</div>
+                <div class="content-item-meta">
+                    <span class="difficulty-badge difficulty-${getDifficultyClass(rec.difficulty)}">
+                        ${rec.difficulty}
+                    </span>
+                    <span class="ml-2">AI Recommended</span>
+                </div>
+                <div class="content-item-summary">${rec.reason}</div>
+                <div class="flex gap-2 mt-3">
+                    <button onclick="searchSpecificTopic('${rec.topic.replace(/'/g, "\\'")}')" class="btn bg-purple-500 hover:bg-purple-600 text-white text-sm">🔍 Find Articles</button>
+                </div>
+            </div>
+        `).join('');
+    }
+    
+    function getDifficultyClass(level) {
+        if (level <= 2) return 'easy';
+        if (level <= 4) return 'medium';
+        return 'hard';
+    }
+    
+    async function extractAndSaveContent(url, title) {
+        try {
+            showToast('Extracting content...', 'info', 2000);
+            
+            const extractData = await handleApiRequest('/content/extract', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ url })
+            }, 'Extracting content');
+            
+            if (extractData.success) {
+                const saveData = await handleApiRequest('/content/save', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        title: extractData.title || title,
+                        content: extractData.content,
+                        source_url: url,
+                        source_type: 'web_search'
+                    })
+                }, 'Saving content');
+                
+                showToast('Content saved successfully!', 'success');
+                loadAnalytics(); // Refresh analytics
+            }
+        } catch (error) {
+            // Error already handled by handleApiRequest
+        }
+    }
+    
+    async function saveCustomContent() {
+        if (!currentUser) {
+            showToast('Please log in to save content', 'warning');
+            return;
+        }
+        
+        const title = document.getElementById('customContentTitle').value.trim();
+        const content = document.getElementById('customContentText').value.trim();
+        const url = document.getElementById('customContentUrl').value.trim();
+        
+        if (!title || !content) {
+            showToast('Please provide both title and content', 'warning');
+            return;
+        }
+        
+        try {
+            await handleApiRequest('/content/save', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    title,
+                    content,
+                    source_url: url || null,
+                    source_type: 'manual'
+                })
+            }, 'Saving content');
+            
+            // Clear form
+            document.getElementById('customContentTitle').value = '';
+            document.getElementById('customContentText').value = '';
+            document.getElementById('customContentUrl').value = '';
+            
+            showToast('Content saved successfully!', 'success');
+            loadAnalytics(); // Refresh analytics
+        } catch (error) {
+            // Error already handled
+        }
+    }
+    
+    async function showSavedArticles() {
+        if (!currentUser || isGuestMode) {
+            showToast('Guest mode active — activity will not be persisted server-side.', 'warning', 4000);
+        }
+        
+        try {
+            const data = await handleApiRequest('/content/articles', {}, 'Loading saved articles');
+            
+            const container = document.getElementById('contentResults');
+            
+            if (!data.articles || data.articles.length === 0) {
+                container.innerHTML = `
+                    <div class="empty-state">
+                        <div class="empty-state-icon">📚</div>
+                        <div class="empty-state-title">No Saved Articles</div>
+                        <div class="empty-state-description">Search and save articles to build your personal library</div>
+                    </div>`;
+                return;
+            }
+            
+            container.innerHTML = `
+                <h3 class="text-lg font-semibold mb-4 text-green-600">📚 Your Saved Articles (${data.articles.length})</h3>
+            ` + data.articles.map(article => `
+                <div class="content-item fade-in">
+                    <div class="content-item-title">${article.title}</div>
+                    <div class="content-item-meta">
+                        <span class="difficulty-badge difficulty-medium">${article.word_count} words</span>
+                        <span class="ml-2">${new Date(article.created_at).toLocaleDateString()}</span>
+                        ${article.category ? `<span class="ml-2">${article.category}</span>` : ''}
+                    </div>
+                    <div class="content-item-summary">${article.content.substring(0, 150)}...</div>
+                    <div class="flex gap-2 mt-3">
+                        <button onclick="loadArticleForStudy('${article.id}', '${article.title.replace(/'/g, "\\'")}')" class="btn btn-primary text-sm">📖 Study This</button>
+                        ${article.source_url ? `<a href="${article.source_url}" target="_blank" class="btn bg-gray-500 hover:bg-gray-600 text-white text-sm">🔗 Original</a>` : ''}
+                    </div>
+                </div>
+            `).join('');
+        } catch (error) {
+            // Error already handled
+        }
+    }
+    
+    function loadArticleForStudy(articleId, title) {
+        // Load the article content into the text editor
+        showToast(`Loading "${title}" for study...`, 'info');
+        // This would load the full article content - simplified for now
+        showToast('Article loaded! You can now create flashcards from it.', 'success');
+    }
+    
+    function searchSpecificTopic(topic) {
+        document.getElementById('contentSearchInput').value = topic;
+        searchContent();
+    }
+    
+    // --- ANALYTICS FUNCTIONS ---
+    
+    async function loadAnalytics() {
+        if (!currentUser || isGuestMode) {
+            showToast('Guest mode active — progress may not persist across reloads.', 'warning', 4000);
+        }
+        
+        try {
+            const data = await handleApiRequest('/analytics/dashboard', {}, 'Loading analytics');
+            
+            document.getElementById('totalFlashcards').textContent = data.analytics.total_flashcards || 0;
+            document.getElementById('totalArticles').textContent = data.analytics.total_articles || 0;
+            document.getElementById('currentLevel').textContent = data.analytics.user_level || 'B1';
+        } catch (error) {
+            // Error already handled
+        }
+    }
+    
+    function toggleAnalytics() {
+        const content = document.getElementById('analyticsContent');
+        content.style.display = content.style.display === 'none' ? 'block' : 'none';
+    }
+    
+    // --- STUDY PLANNER FUNCTIONS ---
+    
+    async function generateStudyPlan() {
+        if (!currentUser || isGuestMode) {
+            showToast('Guest mode active — saving flashcards locally only.', 'warning', 4000);
+        }
+        
+        try {
+            const planData = {
+                current_level: currentUser.english_level || 'B1',
+                target_level: document.getElementById('targetLevelSelect')?.value || 'B2',
+                weekly_hours: parseInt(document.getElementById('weeklyHoursSelect')?.value || 5),
+                context_focus: currentUser.context_focus || 'General/Social',
+                study_goals: []
+            };
+
+            showLoading('Generating your personalized study plan...');
+            
+            const response = await fetch('/study-plan/create', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(planData)
+            });
+
+            const result = await response.json();
+            hideLoading();
+
+            if (result.success) {
+                displayStudyPlan(result.plan);
+                showToast('Study plan generated successfully!', 'success');
+            } else {
+                showToast('Failed to generate study plan: ' + result.error, 'error');
+            }
+        } catch (error) {
+            hideLoading();
+            console.error('Error generating study plan:', error);
+            showToast('Error generating study plan', 'error');
+        }
+    }
+
+    async function loadCurrentStudyPlan() {
+        if (!currentUser || isGuestMode) {
+            showToast('Guest mode: operation allowed but not persisted.', 'warning', 4000);
+        }
+        
+        try {
+            const response = await fetch('/study-plan/current');
+            const result = await response.json();
+
+            if (result.success && result.plan) {
+                displayStudyPlan(result.plan);
+                loadStudyProgress();
+            }
+        } catch (error) {
+            console.error('Error loading study plan:', error);
+        }
+    }
+
+    async function loadStudyProgress() {
+        if (!currentUser || isGuestMode) {
+            showToast('Guest mode: operation allowed but not persisted.', 'warning', 4000);
+        }
+        
+        try {
+            const response = await fetch('/study-plan/progress');
+            const result = await response.json();
+
+            if (result.success && result.progress) {
+                displayStudyProgress(result.progress);
+            }
+        } catch (error) {
+            console.error('Error loading study progress:', error);
+        }
+    }
+
+    async function completeActivity(planId, activityId, durationMinutes) {
+        if (!currentUser) return;
+        
+        try {
+            const notes = prompt('Any notes about this activity? (optional)') || '';
+            
+            const response = await fetch('/study-plan/activity/complete', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    plan_id: planId,
+                    activity_id: activityId,
+                    duration_minutes: durationMinutes,
+                    notes: notes
+                })
+            });
+
+            const result = await response.json();
+
+            if (result.success) {
+                showToast('Activity completed successfully!', 'success');
+                
+                // Update the UI
+                const activityCard = document.querySelector(`[data-activity-id="${activityId}"]`);
+                if (activityCard) {
+                    activityCard.classList.add('completed');
+                    const button = activityCard.querySelector('.complete-activity-btn');
+                    if (button) {
+                        button.textContent = '✅ Completed';
+                        button.disabled = true;
+                    }
+                }
+                
+                // Refresh progress
+                loadStudyProgress();
+            } else {
+                showToast('Failed to complete activity', 'error');
+            }
+        } catch (error) {
+            console.error('Error completing activity:', error);
+            showToast('Error completing activity', 'error');
+        }
+    }
+
+    function displayStudyPlan(plan) {
+        const container = document.getElementById('studyPlanResult');
+        if (!container) return;
+
+        container.innerHTML = `
+            <div class="study-plan-container">
+                <div class="study-plan-header">
+                    <h3>📅 Your Personalized Study Plan</h3>
+                    <div class="plan-overview grid grid-cols-2 gap-4 mt-4">
+                        <div class="plan-stat">
+                            <strong>Current Level:</strong> ${plan.current_level}
+                        </div>
+                        <div class="plan-stat">
+                            <strong>Target Level:</strong> ${plan.target_level}
+                        </div>
+                        <div class="plan-stat">
+                            <strong>Weekly Hours:</strong> ${plan.weekly_hours}h
+                        </div>
+                        <div class="plan-stat">
+                            <strong>Duration:</strong> ${plan.estimated_weeks} weeks
+                        </div>
+                    </div>
+                </div>
+
+                <div class="study-tips mt-6">
+                    <h4 class="font-medium mb-2">💡 Personalized Study Tips</h4>
+                    <ul class="space-y-1">
+                        ${plan.study_tips.map(tip => `<li class="text-sm text-gray-600">${tip}</li>`).join('')}
+                    </ul>
+                </div>
+
+                <div class="weekly-activities mt-6">
+                    <h4 class="font-medium mb-3">📚 Weekly Activities</h4>
+                    <div class="activities-grid space-y-3">
+                        ${plan.activities.slice(0, 6).map(activity => `
+                            <div class="activity-card bg-gray-50 p-3 rounded-lg" data-activity-id="${activity.id}">
+                                <div class="activity-header flex items-center gap-2 mb-2">
+                                    <span class="text-lg">${activity.icon}</span>
+                                    <strong class="text-sm">${activity.title}</strong>
+                                </div>
+                                <div class="activity-details text-xs text-gray-600">
+                                    <p><strong>Duration:</strong> ${activity.duration_minutes} minutes</p>
+                                    <p><strong>Day:</strong> ${['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][activity.day_of_week]}</p>
+                                </div>
+                                <button class="complete-activity-btn mt-2 bg-green-500 text-white px-3 py-1 rounded text-xs hover:bg-green-600" 
+                                        onclick="completeActivity('${plan.db_id || plan.id}', '${activity.id}', ${activity.duration_minutes})">
+                                    ✅ Mark Complete
+                                </button>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+
+                <div class="milestones mt-6">
+                    <h4 class="font-medium mb-3">🎯 Study Milestones</h4>
+                    <div class="milestones-list space-y-2">
+                        ${plan.milestones.slice(0, 3).map(milestone => `
+                            <div class="milestone-item flex items-center gap-3 p-2 bg-blue-50 rounded ${milestone.completed ? 'completed opacity-75' : ''}">
+                                <div class="milestone-week bg-blue-500 text-white px-2 py-1 rounded text-xs">Week ${milestone.week}</div>
+                                <div class="milestone-content flex-1">
+                                    <strong class="text-sm">${milestone.title}</strong>
+                                    <p class="text-xs text-gray-600">${milestone.description}</p>
+                                </div>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+            </div>
+        `;
+
+        container.classList.remove('hidden');
+    }
+
+    function displayStudyProgress(progress) {
+        // This would be called to show progress in analytics section
+        console.log('Study progress:', progress);
+    }
+    
+    // --- INICIALIZAÇÃO ---
+    document.addEventListener('DOMContentLoaded', () => {
+        checkDemoMode();
+        checkAuthStatus();
+        populateModelSelector();
+        initializeSpeechRecognition();
+    });
+</script>
+
+<!-- Footer -->
+<footer class="mt-16 py-8 bg-gray-100 border-t border-gray-200">
+    <div class="container mx-auto max-w-5xl px-4">
+        <div class="flex flex-col md:flex-row justify-between items-center gap-4">
+            <div class="text-sm text-gray-600">
+                <p>&copy; 2024 Dynamic English Study Studio - AI Learning Platform</p>
+                <p class="text-xs text-gray-500 mt-1">Powered by AI for enhanced English learning</p>
+            </div>
+            
+            <div class="flex items-center gap-4">
+                <!-- System Links -->
+                <div class="flex items-center gap-2 text-sm">
+                    <span class="text-gray-500">System:</span>
+                    <a href="/admin" class="text-indigo-600 hover:text-indigo-800 font-medium" title="Admin Panel">
+                        👤 Admin
+                    </a>
+                    <span class="text-gray-300">|</span>
+                    <a href="/auth/check" class="text-green-600 hover:text-green-800 font-medium" title="System Status" target="_blank">
+                        ⚕️ Status
+                    </a>
+                    <span class="text-gray-300">|</span>
+                    <a href="/proxy/7860" class="text-purple-600 hover:text-purple-800 font-medium" title="Gradio Dashboard" target="_blank">
+                        📊 Dashboard
+                    </a>
+                </div>
+                
+                <!-- Version Info -->
+                <div class="text-xs text-gray-400 border-l border-gray-300 pl-4">
+                    <div>v2.0.0</div>
+                    <div>Flask + Gradio</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Quick Actions for Logged Users -->
+        <div id="footerUserActions" class="mt-4 pt-4 border-t border-gray-200" style="display: none;">
+            <div class="flex flex-wrap justify-center gap-2 text-xs">
+                <button onclick="loadAnalytics()" class="text-blue-600 hover:text-blue-800">📊 Refresh Analytics</button>
+                <span class="text-gray-300">•</span>
+                <button onclick="showUserFlashcards()" class="text-green-600 hover:text-green-800">📚 Load Flashcards</button>
+                <span class="text-gray-300">•</span>
+                <button onclick="generateStudyPlan()" class="text-purple-600 hover:text-purple-800">🎯 New Study Plan</button>
+                <span class="text-gray-300">•</span>
+                <button onclick="showUserSettings()" class="text-gray-600 hover:text-gray-800">⚙️ Settings</button>
+            </div>
+        </div>
+    </div>
+</footer>
+
+</body>
+</html>
+
