UI: Center the main vocabulary word on preview flashcards while keeping explanations left-aligned; AI: Enhance example generation prompt for specificity

index.html

@@ -51,7 +51,7 @@
 </head>
 <body class="dark-theme in-chat-view">
   
-  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.1.93</div>
+  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.1.94</div>
     
   <!-- SVG Filters for Liquid Glass Refraction -->
   <svg width="0" height="0" style="position: absolute; pointer-events: none;">

src/ai/tools/flashcard-tool.js

@@ -19,7 +19,7 @@ export const flashcardToolDef = {
             front: { type: "string", description: "Vorderseite (Frage/Begriff/Vokabel)" },
             back: { type: "string", description: "Kurze Antwort/Übersetzung" },
             explanation: { type: "string", description: "Erklärung in 1-2 Sätzen (WICHTIG: Zwingend in der Zielsprache der Vokabel / auf der Rückseite!)" },
-            example: { type: "string", description: "Ein passender Beispielsatz (WICHTIG: Zwingend in der Zielsprache der Vokabel / auf der Rückseite!)" },
+            example: { type: "string", description: "Ein aussagekräftiger, anspruchsvoller und spezifischer Beispielsatz, der den typischen Kontext des Wortes zeigt. Keine generischen Sätze wie 'Ich lerne X' (WICHTIG: Zwingend in der Zielsprache!)" },
             search_query: { type: "string", description: "Ein SEHR SIMPLER englischer Suchbegriff für ein Wikipedia-Bild, das GANZ OFFENSICHTLICH zum Wort passt. Füge am Ende 'single photo, clear focus, high quality' hinzu." }
           },
           required: ["front", "back", "explanation", "example", "search_query"]

src/views/learn/learn-view.js

@@ -232,7 +232,16 @@ export class LearnView {
 
     const formatBack = (text) => {
       if (!text) return '';
-      let t = text.replace(/\\n/g, '<br>');
+      let t = text;
+      
+      // Try to center the first line if it's the translation
+      const lines = t.split(/\n/);
+      if (lines.length > 0 && lines[0].trim() !== '' && !lines[0].includes('**')) {
+        lines[0] = `<div class="translation-line" style="text-align: center; font-size: 26px; font-weight: 500; margin-bottom: 8px;">${lines[0]}</div>`;
+        t = lines.join('\n');
+      }
+      
+      t = t.replace(/\\n/g, '<br>');
       t = t.replace(/\n/g, '<br>');
       t = t.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
       return t;
@@ -251,7 +260,7 @@ export class LearnView {
         <div class="flashcard" onclick="this.querySelector('.flashcard-inner').classList.toggle('flipped')" style="width: 100%; height: 400px; margin-bottom: 24px; cursor: pointer;">
           <div class="flashcard-inner" style="width: 100%; height: 100%; position: relative; transition: transform 0.6s; transform-style: preserve-3d;">
             <div class="flashcard-front" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden; background: var(--surface-1); border: 1px solid var(--border); border-radius: 20px; display: flex; align-items: center; justify-content: center; padding: 32px; box-sizing: border-box; box-shadow: 0 10px 30px rgba(0,0,0,0.5);">
-              <div contenteditable="true" spellcheck="false" onblur="window.learnView.updateCardFront('${card.id}', '${deckId}', this.innerText)" onclick="event.stopPropagation()" style="font-size: 32px; font-weight: 500; text-align: left; color: white; outline: none; width: 100%; padding: 10px; border-radius: 8px; border: 1px solid transparent;" onfocus="this.style.border='1px solid rgba(255,255,255,0.2)'; this.style.background='rgba(0,0,0,0.2)'" onfocusout="this.style.border='1px solid transparent'; this.style.background='transparent'">${card.front}</div>
+              <div contenteditable="true" spellcheck="false" onblur="window.learnView.updateCardFront('${card.id}', '${deckId}', this.innerText)" onclick="event.stopPropagation()" style="font-size: 32px; font-weight: 500; text-align: center; color: white; outline: none; width: 100%; padding: 10px; border-radius: 8px; border: 1px solid transparent;" onfocus="this.style.border='1px solid rgba(255,255,255,0.2)'; this.style.background='rgba(0,0,0,0.2)'" onfocusout="this.style.border='1px solid transparent'; this.style.background='transparent'">${card.front}</div>
             </div>
             <div class="flashcard-back" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden; background: var(--surface-1); border: 1px solid var(--border); border-radius: 20px; display: flex; align-items: center; justify-content: flex-start; padding: 32px; box-sizing: border-box; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transform: rotateY(180deg); overflow: hidden;">
               ${card.image_url ? `<img src="${card.image_url}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.15; z-index: 0; pointer-events: none;">` : ''}
@@ -292,8 +301,12 @@ export class LearnView {
     
     // Convert HTML back to markdown
     let newBack = html;
+    
+    // Remove the custom translation line div specifically without adding newlines
+    newBack = newBack.replace(/<div class="translation-line"[^>]*>(.*?)<\/div>/gi, '$1');
+    
     newBack = newBack.replace(/<div><br><\/div>/gi, '\n');
-    newBack = newBack.replace(/<div>/gi, '\n');
+    newBack = newBack.replace(/<div[^>]*>/gi, '\n');
     newBack = newBack.replace(/<\/div>/gi, '');
     newBack = newBack.replace(/<br\s*\/?>/gi, '\n');