feat(reader): implement FEAT-01 Focus Zen Mode (100% vh/vw, auto-hiding HUD, hotkeys F/Esc, native fullscreen)

app/static/index.html

@@ -768,6 +768,10 @@
                             <span style="font-weight: 700; font-family: serif; font-size: 13px;">Aa</span>
                             <span class="btn-subtext-inline">Шрифт</span>
                         </button>
+                        <button id="reader-zen-btn" class="btn btn-xs btn-outline reader-zen-btn" title="Фокус-режим чтения (Zen Mode, клавиша F)">
+                            <span>🧘</span>
+                            <span class="btn-subtext-inline">Фокус</span>
+                        </button>
                         <button id="reader-toggle-highlight-btn" class="btn btn-xs btn-outline" title="Вкл/Выкл подсветку изучаемых слов">✨ Подсветка</button>
                         <button id="reader-train-btn" class="btn btn-xs btn-trainer" title="Тренировать слова из этой книги">🎓 Слова книги</button>
                     </div>
@@ -777,6 +781,18 @@
                     </div>
                 </header>
 
+                <!-- Floating Zen HUD (Discreet, auto-fading, fixed in top-right) -->
+                <div id="reader-zen-hud" class="reader-zen-hud hidden">
+                    <div class="zen-hud-content">
+                        <span id="zen-hud-title" class="zen-hud-title">Книга</span>
+                        <span class="zen-hud-sep">•</span>
+                        <span id="zen-hud-chapter" class="zen-hud-chapter">Глава 1</span>
+                        <span class="zen-hud-sep">•</span>
+                        <span id="zen-hud-progress" class="zen-hud-progress">0%</span>
+                        <button type="button" id="zen-hud-exit-btn" class="zen-hud-exit-btn" title="Выйти из фокус-режима (Esc или F)">✕</button>
+                    </div>
+                </div>
+
                 <!-- Reading Container -->
                 <div class="reader-scroll-area" id="reader-scroll-area">
                     <div class="reader-content-body" id="reader-content-body">
@@ -946,6 +962,18 @@
                             <p id="grammar-lesson-sub" class="lesson-sub-title">Unit Subtitle</p>
                         </div>
 
+                        <!-- Cheatsheet Markdown Table -->
+                        <div id="grammar-cheatsheet-section" class="grammar-section-block">
+                            <h3 class="section-title"><span class="title-icon">📊</span> Наглядная шпаргалка и правила (Таблица)</h3>
+                            <div id="grammar-cheatsheet-content"></div>
+                        </div>
+
+                        <!-- Detailed Murphy Notes -->
+                        <div id="grammar-detailed-notes-section" class="grammar-section-block">
+                            <h3 class="section-title"><span class="title-icon">📖</span> Подробный конспект темы (Raymond Murphy)</h3>
+                            <div id="grammar-detailed-notes-content"></div>
+                        </div>
+
                         <!-- Contrast Explanation Cards -->
                         <div class="grammar-section-block">
                             <h3 class="section-title"><span class="title-icon">⚖️</span> Метод контрастов (В чём суть и когда применять)</h3>
@@ -999,6 +1027,15 @@
                                 <div id="grammar-practice-dots" class="practice-dots"></div>
                             </div>
 
+                            <!-- Practice Mode Cheatsheet Toggle & Drawer -->
+                            <div class="practice-cheatsheet-toggle-wrap">
+                                <button type="button" id="grammar-practice-cheatsheet-toggle" class="btn btn-sm btn-ghost practice-cheatsheet-btn">
+                                    <span>📋 Шпаргалка по теме</span>
+                                    <i class="ph-caret-down"></i>
+                                </button>
+                                <div id="grammar-practice-cheatsheet-drawer" class="practice-cheatsheet-drawer hidden"></div>
+                            </div>
+
                             <div class="grammar-cloze-box">
                                 <div id="grammar-cloze-sentence" class="cloze-sentence-display"></div>
                                 <div id="grammar-cloze-clue" class="cloze-clue-display"></div>