fix(ui): fix invisible text on book back and modal in dark mode

Author: devanshi14malhotra

frontend/css/style.css

@@ -1170,6 +1170,36 @@ main {
     color: var(--text-main);
 }
 
+/* Theme-safe modal sub-elements */
+.modal-section-title,
+.purchase-header,
+.purchase-links-box,
+.emotion-tagging-section {
+    color: var(--text-main);
+}
+
+.emotion-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 5px 12px;
+    border-radius: 20px;
+    font-size: 0.82rem;
+    cursor: pointer;
+    border: 1px solid var(--control-border);
+    background: var(--surface-soft);
+    color: var(--text-main);
+    transition: all 0.2s ease;
+    margin: 3px 2px;
+}
+
+.emotion-tag:hover,
+.emotion-tag.active {
+    background: var(--accent-gold);
+    color: #2c2420;
+    border-color: var(--accent-gold);
+}
+
 .modal-actions {
     margin-top: auto;
     display: flex;

frontend/js/app.js

@@ -683,8 +683,8 @@ class BookRenderer {
                 <div class="book__face book__face--bottom"></div>
                 <div class="book__face book__face--back">
                     <div style="overflow-y: auto; height: 100%; padding-right: 5px; scrollbar-width: thin;">
-                        <div style="font-weight: bold; font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--text-main);">${safeTitle}</div>
-                        <div class="handwritten-note" style="margin-bottom: 0.8rem; font-style: italic; color: var(--wood-dark);">${safeVibe}</div>
+                        <div style="font-weight: bold; font-size: 0.9rem; margin-bottom: 0.5rem; color: #2c2420;">${safeTitle}</div>
+                        <div class="handwritten-note" style="margin-bottom: 0.8rem; font-style: italic; color: #5d4037;">${safeVibe}</div>
                         ${bookData.moods && bookData.moods.length > 0 ? `
                         <div class="book-mood-tags" style="margin-bottom: 0.8rem; display: flex; flex-wrap: wrap; gap: 4px;">
                             ${bookData.moods.map(m => `<span style="font-size: 0.6rem; background: rgba(0,0,0,0.1); padding: 2px 6px; border-radius: 10px;"><i class="fa-solid ${this.getMoodIcon(m)}"></i> ${m}</span>`).join('')}
@@ -1029,11 +1029,11 @@ class BookRenderer {
         const emotionContainer = document.createElement('div');
         emotionContainer.className = 'emotion-tagging-section';
         emotionContainer.innerHTML = `
-            <h3 class="modal-section-title">How does this book make you feel?</h3>
+            <h3 class="modal-section-title" style="color: var(--text-main); font-family: 'Playfair Display', serif; font-size: 1rem; margin-bottom: 10px;">How does this book make you feel?</h3>
             <div class="emotion-tags-container">
                 ${['Melancholic', 'Cozy', 'Tense', 'Inspiring', 'Whimsical', 'Dark', 'Adventurous'].map(mood => {
             const isActive = book.moods && book.moods.includes(mood);
-            return `<span class="emotion-tag ${isActive ? 'active' : ''}" data-mood="${mood}">
+            return `<span class="emotion-tag ${isActive ? 'active' : ''}" data-mood="${mood}" style="color: var(--text-main); border-color: var(--control-border);">
                         <i class="fa-solid ${this.getMoodIcon(mood)}"></i> ${mood}
                     </span>`;
         }).join('')}