stenodojo

app.js (55655B)

---

 (function(){var m=document.cookie.match(/(?:^| )theme=([^;]+)/);document.documentElement.setAttribute('data-theme',m?m[1]:'dark')})();
 
 function getCookie(name) {
     const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
     return match ? match[2] : null;
 }
 
 function setCookie(name, value, days) {
     const d = new Date();
     d.setTime(d.getTime() + (days * 86400000));
     document.cookie = name + '=' + value + ';expires=' + d.toUTCString() + ';path=/;SameSite=Lax';
 }
 
 function getCSSVar(name) {
     return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
 }
 
 /* ===== UTILITY FUNCTIONS ===== */
 
 function escapeHtml(str) {
     if (typeof str !== 'string') return '';
     const div = document.createElement('div');
     div.textContent = str;
     return div.innerHTML;
 }
 
 function formatTime(ms) {
     if (ms < 1000) return ms + 'ms';
     if (ms < 60000) return (ms / 1000).toFixed(1) + 's';
     const minutes = Math.floor(ms / 60000);
     const seconds = Math.floor((ms % 60000) / 1000);
     return minutes + ':' + String(seconds).padStart(2, '0');
 }
 
 function formatWpm(wpm) {
     if (typeof wpm !== 'number' || isNaN(wpm)) return '0.0';
     return wpm.toFixed(1);
 }
 
 function formatAccuracy(pct) {
     if (typeof pct !== 'number' || isNaN(pct)) return '0%';
     return Math.round(pct) + '%';
 }
 
 function formatDuration(seconds) {
     if (!seconds || seconds < 60) return (seconds || 0) + 's';
     const minutes = Math.floor(seconds / 60);
     if (minutes < 60) return minutes + 'm';
     const hours = Math.floor(minutes / 60);
     const remainMin = minutes % 60;
     return hours + 'h ' + remainMin + 'm';
 }
 
 function accuracyClass(pct) {
     if (pct >= 90) return 'good';
     if (pct >= 70) return 'mid';
     return 'low';
 }
 
 
 /* ===== MONKEYTYPE-STYLE PRACTICE SESSION ===== */
 
 class PracticeSession {
     constructor(mode, lessonId) {
         this.mode = mode;
         this.lessonId = lessonId;
         this.sentenceCount = 10;
         this.sessionId = null;
         this.words = [];
         this.wordIndex = 0;
         this.typedChars = '';
         this._expectsSpace = false;
         this._spaceOk = null;
         this._activeSpaceEl = null;
         this._punctSpaceEl = null;
         this._expectedBuf = '';
         this._expectedBufStack = [];
         this._missedSpaces = new Set();
         this.consumedLength = 0;
         this.consumedStack = [];
         this.wordStartTime = null;
         this.sessionStartTime = null;
         this.timerInterval = null;
         this.ended = false;
 
         this.stats = {
             attempted: 0,
             correct: 0,
             streak: 0,
             bestStreak: 0,
             totalTimeMs: 0,
             results: [],
         };
 
         this.els = {
             loading: document.getElementById('loading'),
             area: document.getElementById('practice-area'),
             typingDisplay: document.getElementById('typing-display'),
             typingWords: document.getElementById('typing-words'),
             typingInput: document.getElementById('typing-input'),
             stenoHint: document.getElementById('steno-hint'),
             stenoStrokeText: document.getElementById('steno-stroke-text'),
             hintsPanel: document.getElementById('hints-panel'),
             hintsList: document.getElementById('hints-list'),
             phraseHints: document.getElementById('phrase-hints'),
             phraseHintsList: document.getElementById('phrase-hints-list'),
             typedTextDisplay: document.getElementById('typed-text-display'),
             stenoKeyboards: document.getElementById('steno-keyboards'),
             statTime: document.getElementById('stat-time'),
             statAccuracy: document.getElementById('stat-accuracy'),
             statStreak: document.getElementById('stat-streak'),
             statWpm: document.getElementById('stat-wpm'),
             statProgress: document.getElementById('stat-progress'),
             summary: document.getElementById('session-summary'),
             summaryAccuracy: document.getElementById('summary-accuracy'),
             summaryWords: document.getElementById('summary-words'),
             summaryWpm: document.getElementById('summary-wpm'),
             summaryStreak: document.getElementById('summary-streak'),
             summaryWeakWords: document.getElementById('summary-weak-words'),
             endBtn: document.getElementById('end-session-btn'),
         };
 
         this._bindEvents();
         this._setupConfig();
     }
 
     _bindEvents() {
         // The hidden input captures all keystrokes
         this.els.typingInput.addEventListener('input', () => this._onInput());
 
         this.els.typingInput.addEventListener('keydown', (e) => {
             if (e.key === 'Tab' || e.key === 'Escape') {
                 e.preventDefault();
             }
         });
 
         // Click on the typing display focuses the input
         this.els.typingDisplay.addEventListener('click', () => {
             this.els.typingInput.focus();
         });
 
         this.els.typingInput.addEventListener('focus', () => {
             this.els.typingDisplay.classList.add('typing-display--focused');
         });
         this.els.typingInput.addEventListener('blur', () => {
             this.els.typingDisplay.classList.remove('typing-display--focused');
         });
 
         this.els.endBtn.addEventListener('click', () => this.end());
 
         // Keep input focused
         document.addEventListener('keydown', (e) => {
             if (this.ended) return;
             if (e.target.tagName === 'INPUT' && e.target !== this.els.typingInput) return;
             if (document.activeElement !== this.els.typingInput) {
                 this.els.typingInput.focus();
             }
         });
     }
 
     _setupConfig() {
         const configEl = document.getElementById('session-config');
         const startBtn = document.getElementById('start-session-btn');
         if (!configEl || !startBtn) {
             this.start();
             return;
         }
 
         const btns = configEl.querySelectorAll('.session-config__btn');
         btns.forEach(btn => {
             btn.addEventListener('click', () => {
                 btns.forEach(b => b.classList.remove('session-config__btn--active'));
                 btn.classList.add('session-config__btn--active');
                 this.sentenceCount = parseInt(btn.dataset.count) || 10;
             });
         });
 
         startBtn.addEventListener('click', () => {
             configEl.innerHTML = '<div class="spinner"></div><p>Loading session...</p>';
             this.start();
         });
     }
 
     async start() {
         try {
             const body = { mode: this.mode };
             if (this.lessonId) {
                 body.lesson_id = this.lessonId;
                 body.sentence_count = this.sentenceCount;
             }
 
             const resp = await fetch('/api/session/start', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(body),
             });
             const data = await resp.json();
 
             if (data.error) {
                 this.els.loading.innerHTML = '<p style="color: var(--error);">' + escapeHtml(data.error) + '</p>';
                 return;
             }
 
             this.sessionId = data.session_id;
             this.words = data.words || [];
             this.isSentence = !!data.is_sentence;
 
             this.els.loading.style.display = 'none';
             this.els.area.style.display = 'flex';
 
             if (typeof gsap !== 'undefined') {
                 const tl = gsap.timeline({ defaults: { ease: 'power2.out', clearProps: 'all' } });
                 tl.from('.typing-display', { y: 20, opacity: 0, duration: 0.4 })
                   .from('.steno-hint', { y: 20, opacity: 0, duration: 0.4 }, '-=0.25')
                   .from('.hints-panel', { x: 20, opacity: 0, duration: 0.4 }, '-=0.2')
                   .from('.session-stats', { y: 15, opacity: 0, duration: 0.35 }, '-=0.15');
             }
 
             this._renderWords();
             this._updateHints();
             this._updateStats();
 
             this.els.typingInput.focus();
         } catch (err) {
             this.els.loading.innerHTML = '<p style="color: var(--error);">Failed to start session.</p>';
         }
     }
 
     _renderWords() {
         const container = this.els.typingWords;
         container.innerHTML = '';
         this._activeSpaceEl = null;
         this._punctSpaceEl = null;
 
         // Determine which upcoming words are covered by phrase hints
         const phraseSet = new Set();
         const currentWord = this.words[this.wordIndex];
         if (currentWord && currentWord.phrase_hints) {
             currentWord.phrase_hints.forEach(ph => {
                 for (let j = 0; j < ph.words_covered; j++) {
                     phraseSet.add(this.wordIndex + j);
                 }
             });
         }
 
         this.words.forEach((w, i) => {
             const wordEl = document.createElement('span');
             wordEl.className = 'tw-word';
             wordEl.dataset.index = i;
 
             if (i < this.wordIndex) {
                 const result = this.stats.results[i];
                 if (result && result.correct) {
                     wordEl.classList.add('tw-word--correct');
                 } else {
                     wordEl.classList.add('tw-word--incorrect');
                 }
                 wordEl.textContent = w.word;
             } else if (i === this.wordIndex) {
                 wordEl.classList.add('tw-word--active');
                 this._renderActiveWord(wordEl, w.word);
             } else {
                 wordEl.textContent = w.word;
                 if (phraseSet.has(i)) {
                     wordEl.classList.add('tw-word--phrase');
                 }
             }
 
             if (w.is_punct) wordEl.classList.add('tw-word--punct');
             container.appendChild(wordEl);
 
             if (i < this.words.length - 1) {
                 const next = this.words[i + 1];
                 if (!next.is_punct) {
                     if (this.isSentence) {
                         const spaceEl = document.createElement('span');
                         if (i + 1 < this.wordIndex && this._missedSpaces.has(i + 1)) {
                             spaceEl.className = 'tw-space-sep tw-space-sep--missed';
                         } else if (i + 1 < this.wordIndex) {
                             spaceEl.className = 'tw-space-sep tw-space-sep--done';
                         } else {
                             spaceEl.className = 'tw-space-sep';
                         }
                         spaceEl.textContent = '␣';
                         if (i + 1 === this.wordIndex) {
                             this._activeSpaceEl = spaceEl;
                         }
                         // Track space after active punct token
                         if (i === this.wordIndex && w.is_punct) {
                             this._punctSpaceEl = spaceEl;
                         }
                         container.appendChild(spaceEl);
                     } else {
                         container.appendChild(document.createTextNode(' '));
                     }
                 }
             }
         });
 
         this._scrollToActive();
     }
 
     _renderActiveWord(wordEl, expectedWord) {
         wordEl.innerHTML = '';
         const typed = this.typedChars;
 
         for (let i = 0; i < expectedWord.length; i++) {
             // Insert cursor before the next untyped character
             if (i === typed.length) {
                 const cursor = document.createElement('span');
                 cursor.className = 'tw-cursor';
                 wordEl.appendChild(cursor);
             }
 
             const charSpan = document.createElement('span');
             if (i < typed.length) {
                 if (typed[i] === expectedWord[i]) {
                     charSpan.className = 'tw-char tw-char--correct';
                 } else {
                     charSpan.className = 'tw-char tw-char--incorrect';
                 }
                 charSpan.textContent = expectedWord[i];
             } else {
                 charSpan.className = 'tw-char';
                 charSpan.textContent = expectedWord[i];
             }
             wordEl.appendChild(charSpan);
         }
 
         // Extra typed characters beyond the word length
         if (typed.length > expectedWord.length) {
             for (let i = expectedWord.length; i < typed.length; i++) {
                 const charSpan = document.createElement('span');
                 charSpan.className = 'tw-char tw-char--extra';
                 charSpan.textContent = typed[i];
                 wordEl.appendChild(charSpan);
             }
             const cursor = document.createElement('span');
             cursor.className = 'tw-cursor';
             wordEl.appendChild(cursor);
         }
     }
 
     _scrollToActive() {
         const active = this.els.typingWords.querySelector('.tw-word--active');
         if (!active) return;
 
         const container = this.els.typingDisplay;
         const padding = parseFloat(getComputedStyle(container).paddingTop) || 0;
         container.scrollTop = Math.max(0, active.offsetTop - padding);
     }
 
     _onInput() {
         if (this.ended) return;
         if (this.isSentence) return this._onInputSentence();
 
         const raw = this.els.typingInput.value;
 
         // Undo: Plover's * sends backspaces — if input shrank past consumed boundary, revert words
         let didUndo = false;
         while (raw.length < this.consumedLength && this.wordIndex > 0) {
             this.wordIndex--;
             this.consumedLength = this.consumedStack.pop() || 0;
             const last = this.stats.results.pop();
             if (last) {
                 this.stats.attempted--;
                 this.stats.totalTimeMs -= last.timeMs;
                 if (last.correct) this.stats.correct--;
             }
             this.stats.streak = 0;
             for (let i = this.stats.results.length - 1; i >= 0; i--) {
                 if (this.stats.results[i].correct) this.stats.streak++;
                 else break;
             }
             didUndo = true;
         }
         if (didUndo) {
             this.wordStartTime = performance.now();
             this._renderWords();
             this._updateHints();
             this._updateStats();
         }
 
         if (this.wordIndex >= this.words.length) return;
 
         // Current word's text = everything past consumed, with leading whitespace stripped
         let current = raw.substring(this.consumedLength);
         const trimmed = current.replace(/^\s+/, '');
 
         // Ignore empty input before session starts (Plover focus noise)
         if (!trimmed && !this.sessionStartTime) return;
 
         if (!this.sessionStartTime && trimmed) {
             this.sessionStartTime = performance.now();
             this.wordStartTime = performance.now();
             this.timerInterval = setInterval(() => {
                 if (this.sessionStartTime && !this.ended) {
                     const elapsed = performance.now() - this.sessionStartTime;
                     this.els.statTime.textContent = formatTime(Math.round(elapsed));
                 }
             }, 200);
         }
 
         this.typedChars = trimmed;
         if (this.els.typedTextDisplay) {
             this.els.typedTextDisplay.textContent = trimmed || ' ';
         }
         const expected = this.words[this.wordIndex].word;
 
         // Multi-word output: typed text contains expected word + space + more
         if (trimmed.length > expected.length) {
             const head = trimmed.substring(0, expected.length);
             const tail = trimmed.substring(expected.length);
             if (head === expected && /^\s/.test(tail)) {
                 this.typedChars = head;
                 this.consumedStack.push(this.consumedLength);
                 this.consumedLength = raw.length - tail.replace(/^\s+/, '').length;
                 this._submitCurrentWord();
                 this._onInput();
                 return;
             }
         }
 
         // Auto-match: exact match (case matters for steno capitalization)
         if (trimmed === expected) {
             this.consumedStack.push(this.consumedLength);
             this.consumedLength = raw.length;
             this._submitCurrentWord();
             return;
         }
 
         // Update character feedback on active word
         const activeEl = this.els.typingWords.querySelector('.tw-word--active');
         if (activeEl) {
             this._renderActiveWord(activeEl, expected);
         }
         this._updateStats();
     }
 
     _onInputSentence() {
         const raw = this.els.typingInput.value;
         const buf = raw.trimStart();
 
         if (!buf && !this.sessionStartTime) return;
 
         if (!this.sessionStartTime && buf) {
             this.sessionStartTime = performance.now();
             this.wordStartTime = performance.now();
             this.timerInterval = setInterval(() => {
                 if (this.sessionStartTime && !this.ended) {
                     const elapsed = performance.now() - this.sessionStartTime;
                     this.els.statTime.textContent = formatTime(Math.round(elapsed));
                 }
             }, 200);
         }
 
         if (this.wordIndex >= this.words.length) return;
 
         // Undo detection: buffer no longer matches our tracked expected prefix
         while (this.wordIndex > 0 && this._expectedBufStack.length > 0) {
             if (buf.length < this._expectedBuf.length ||
                 buf.substring(0, this._expectedBuf.length) !== this._expectedBuf) {
                 this._expectedBuf = this._expectedBufStack.pop();
                 this.wordIndex--;
                 this._missedSpaces.delete(this.wordIndex);
                 const last = this.stats.results.pop();
                 if (last) {
                     this.stats.attempted--;
                     this.stats.totalTimeMs -= last.timeMs;
                     if (last.correct) this.stats.correct--;
                 }
                 this.stats.streak = 0;
                 for (let i = this.stats.results.length - 1; i >= 0; i--) {
                     if (this.stats.results[i].correct) this.stats.streak++;
                     else break;
                 }
                 this.wordStartTime = performance.now();
                 this._renderWords();
                 this._updateHints();
                 this._updateStats();
             } else {
                 break;
             }
         }
 
         // Advance through tokens, tolerating missed spaces
         let advanced = false;
         while (this.wordIndex < this.words.length) {
             const token = this.words[this.wordIndex];
             const needsSpace = !token.is_punct && this._expectedBuf.length > 0;
             const withSpace = this._expectedBuf + (needsSpace ? ' ' : '') + token.word;
             const noSpace = needsSpace ? (this._expectedBuf + token.word) : null;
 
             if (buf.length >= withSpace.length &&
                 buf.substring(0, withSpace.length) === withSpace) {
                 this._expectedBufStack.push(this._expectedBuf);
                 this._expectedBuf = withSpace;
                 this.typedChars = token.word;
                 this._submitCurrentWord();
                 advanced = true;
             } else if (noSpace && buf.length >= noSpace.length &&
                        buf.substring(0, noSpace.length) === noSpace) {
                 this._expectedBufStack.push(this._expectedBuf);
                 this._expectedBuf = noSpace;
                 this._missedSpaces.add(this.wordIndex);
                 this.typedChars = token.word;
                 this._submitCurrentWord();
                 advanced = true;
             } else {
                 break;
             }
         }
 
         if (advanced) return;
 
         // Show partial-typing feedback on the active token
         const token = this.words[this.wordIndex];
         const afterPrev = buf.substring(this._expectedBuf.length);
 
         const expectsSpace = !token.is_punct && this._expectedBuf.length > 0;
         this._expectsSpace = expectsSpace;
         if (expectsSpace) {
             this._spaceOk = afterPrev.length > 0 ? afterPrev[0] === ' ' : null;
             this.typedChars = afterPrev.replace(/^\s?/, '');
         } else {
             this._spaceOk = null;
             this.typedChars = token.is_punct ? afterPrev : afterPrev.replace(/^\s+/, '');
         }
 
         if (this.els.typedTextDisplay) {
             this.els.typedTextDisplay.textContent = this.typedChars || ' ';
         }
 
         // Update space separator colors
         if (this._activeSpaceEl) {
             if (this._spaceOk === true) {
                 this._activeSpaceEl.className = 'tw-space-sep tw-space-sep--correct';
             } else if (this._spaceOk === false) {
                 this._activeSpaceEl.className = 'tw-space-sep tw-space-sep--incorrect';
             } else {
                 this._activeSpaceEl.className = 'tw-space-sep';
             }
         }
         // Highlight space after active punct to show the stroke includes it
         if (this._punctSpaceEl && token.is_punct && this.typedChars.length > 0) {
             this._punctSpaceEl.className = 'tw-space-sep tw-space-sep--pending';
         }
 
         const activeEl = this.els.typingWords.querySelector('.tw-word--active');
         if (activeEl) {
             this._renderActiveWord(activeEl, token.word);
         }
         this._updateStats();
     }
 
     async _submitCurrentWord() {
         if (this.wordIndex >= this.words.length) return;
 
         const word = this.words[this.wordIndex];
         const typed = this.typedChars;
         const timeMs = Math.round(performance.now() - this.wordStartTime);
         const correct = typed === word.word;
 
         this.stats.attempted++;
         this.stats.totalTimeMs += timeMs;
 
         if (correct) {
             this.stats.correct++;
             this.stats.streak++;
             if (this.stats.streak > this.stats.bestStreak) {
                 this.stats.bestStreak = this.stats.streak;
             }
         } else {
             this.stats.streak = 0;
         }
 
         this.stats.results.push({
             word: word.word,
             typed: typed,
             correct: correct,
             timeMs: timeMs,
             strokes: word.word_hints && word.word_hints[0] ? word.word_hints[0].stroke : '',
         });
 
         // Submit to server (fire and forget for speed)
         fetch('/api/word/submit', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({
                 session_id: this.sessionId,
                 word: word.word,
                 typed: typed,
                 time_ms: timeMs,
                 word_index: this.wordIndex,
             }),
         }).catch(() => {});
 
         // Advance (don't clear input — Plover manages the text buffer)
         this.wordIndex++;
         this.typedChars = '';
         if (this.els.typedTextDisplay) {
             this.els.typedTextDisplay.textContent = ' ';
         }
         this.wordStartTime = performance.now();
 
         this._updateStats();
 
         if (this.wordIndex >= this.words.length) {
             this.end();
             return;
         }
 
         this._renderWords();
         this._updateHints();
     }
 
     _updateHints() {
         if (this.wordIndex >= this.words.length) return;
 
         const word = this.words[this.wordIndex];
         const wordHints = word.word_hints || [];
         const phraseHints = word.phrase_hints || [];
 
         // Phrase hints in side panel (already sorted longest-first by server)
         if (phraseHints.length > 0 && this.els.phraseHintsList) {
             this.els.phraseHints.style.display = 'block';
             let html = '';
             phraseHints.forEach(ph => {
                 const strokesStr = ph.strokes.join(' or ');
                 html += '<div class="phrase-hint-item' + (ph.is_single_stroke ? ' phrase-hint-item--single' : '') + '">';
                 html += '<span class="phrase-hint-item__phrase">"' + escapeHtml(ph.phrase) + '"</span>';
                 html += '<span class="phrase-hint-item__words">' + ph.words_covered + ' words</span>';
                 if (strokesStr) {
                     html += '<span class="phrase-hint-item__stroke">' + escapeHtml(strokesStr) + '</span>';
                 }
                 html += '</div>';
             });
             this.els.phraseHintsList.innerHTML = html;
         } else if (this.els.phraseHints) {
             this.els.phraseHints.style.display = 'none';
         }
 
         // Build keyboard visualizations
         this._renderKeyboards(phraseHints, wordHints, word);
 
         // Word-level strokes in side panel
         if (wordHints.length > 0) {
             let html = '';
             wordHints.forEach((hint, i) => {
                 const cls = i === 0 ? 'hint-item hint-item--best' : 'hint-item';
                 const strokeLabel = hint.stroke_count === 1 ? '1 stroke' : hint.stroke_count + ' strokes';
                 html += '<div class="' + cls + '" data-hint-index="' + i + '">';
                 html += '<span class="hint-item__stroke">' + escapeHtml(hint.stroke) + '</span>';
                 const labelTag = hint.label ? ' <span class="hint-item__label">' + escapeHtml(hint.label) + '</span>' : '';
                 html += '<span class="hint-item__meta">' + strokeLabel + ', ' + hint.key_count + ' keys' + labelTag + '</span>';
                 html += '</div>';
             });
             this.els.hintsList.innerHTML = html;
 
             this.els.hintsList.querySelectorAll('.hint-item').forEach(el => {
                 el.addEventListener('click', () => {
                     const idx = parseInt(el.dataset.hintIndex);
                     if (wordHints[idx] && wordHints[idx].keys) {
                         this._renderKeyboards(phraseHints, wordHints, word, idx);
                     }
                 });
             });
         } else if (word.fingerspell) {
             this.els.hintsList.innerHTML = '<div class="hint-item hint-item--empty">Fingerspell: spell out each letter</div>';
         } else {
             this.els.hintsList.innerHTML = '<div class="hint-item hint-item--empty">No strokes found</div>';
         }
 
         // Punctuation hints below word strokes
         const punctHints = word.punct_hints || [];
         if (punctHints.length > 0) {
             let punctHtml = '';
             punctHints.forEach(ph => {
                 punctHtml += '<div class="hint-item hint-item--punct">';
                 punctHtml += '<span class="hint-item__stroke">' + escapeHtml(ph.char) + ' → ' + escapeHtml(ph.stroke) + '</span>';
                 punctHtml += '</div>';
             });
             this.els.hintsList.innerHTML += punctHtml;
         }
 
         // Capitalization hints
         const capHints = word.cap_hints || [];
         if (capHints.length > 0) {
             const capLabels = {
                 'cap_next': 'Capitalize',
                 'cap_next_attach': 'Cap (no space)',
                 'cap_retro': 'Retro cap',
                 'upper_next': 'ALL CAPS',
                 'upper_next_attach': 'ALL CAPS (no space)',
                 'upper_retro': 'Retro ALL CAPS',
                 'lower_next': 'Lowercase',
                 'lower_retro': 'Retro lowercase',
             };
             let capHtml = '';
             capHints.forEach(ch => {
                 const label = capLabels[ch.type] || ch.type;
                 capHtml += '<div class="hint-item hint-item--cap">';
                 capHtml += '<span class="hint-item__stroke">' + escapeHtml(label) + ' → ' + escapeHtml(ch.stroke) + '</span>';
                 capHtml += '</div>';
             });
             this.els.hintsList.innerHTML += capHtml;
         }
     }
 
     _renderKeyboards(phraseHints, wordHints, word, wordHintIdx) {
         const container = this.els.stenoKeyboards;
         container.innerHTML = '';
         if (wordHintIdx === undefined) wordHintIdx = 0;
 
         const bestPhrase = phraseHints.length > 0 ? phraseHints[0] : null;
         const bestWord = wordHints.length > 0 ? wordHints[wordHintIdx] : null;
 
         if (bestPhrase && bestPhrase.keys && bestPhrase.keys.length > 0) {
             const strokeParts = (bestPhrase.strokes[0] || '').split('/');
             this._appendKeyboardGroup(container, 'Phrase', bestPhrase.strokes[0], bestPhrase.keys, 'phrase', strokeParts);
         }
 
         if (bestWord && bestWord.keys && bestWord.keys.length > 0) {
             const strokeParts = bestWord.stroke.split('/');
             this._appendKeyboardGroup(container, 'Word', bestWord.stroke, bestWord.keys, 'word', strokeParts);
         } else if (word.fingerspell) {
             const section = document.createElement('div');
             section.className = 'steno-keyboard-section';
             section.innerHTML = '<div class="steno-hint__header">'
                 + '<span class="steno-hint__title">Word</span>'
                 + '<span class="steno-stroke">fingerspell</span>'
                 + '</div>';
             container.appendChild(section);
         }
     }
 
     _appendKeyboardGroup(container, label, strokeText, keyGroups, type, strokeParts) {
         const isPhrase = type === 'phrase';
         const titleClass = isPhrase ? ' steno-hint__title--phrase' : '';
         const strokeClass = isPhrase ? ' steno-stroke--phrase' : '';
 
         if (keyGroups.length === 1) {
             const section = document.createElement('div');
             section.className = 'steno-keyboard-section';
             section.innerHTML = '<div class="steno-hint__header">'
                 + '<span class="steno-hint__title' + titleClass + '">' + escapeHtml(label) + '</span>'
                 + '<span class="steno-stroke' + strokeClass + '">' + escapeHtml(strokeText) + '</span>'
                 + '</div>';
             const kbWrap = document.createElement('div');
             kbWrap.className = 'steno-hint__keyboard';
             const svg = this._createKeyboardSVG(isPhrase);
             this._highlightKeysOn(svg, keyGroups[0]);
             kbWrap.appendChild(svg);
             section.appendChild(kbWrap);
             container.appendChild(section);
         } else {
             const section = document.createElement('div');
             section.className = 'steno-keyboard-section steno-keyboard-section--multi';
             section.innerHTML = '<div class="steno-hint__header">'
                 + '<span class="steno-hint__title' + titleClass + '">' + escapeHtml(label) + '</span>'
                 + '<span class="steno-stroke' + strokeClass + '">' + escapeHtml(strokeText) + '</span>'
                 + '</div>';
             const row = document.createElement('div');
             row.className = 'steno-keyboards-row';
             keyGroups.forEach((keys, i) => {
                 const cell = document.createElement('div');
                 cell.className = 'steno-keyboard-cell';
                 if (strokeParts && strokeParts[i]) {
                     const partLabel = document.createElement('div');
                     partLabel.className = 'steno-keyboard-cell__label' + (isPhrase ? ' steno-keyboard-cell__label--phrase' : '');
                     partLabel.textContent = strokeParts[i];
                     cell.appendChild(partLabel);
                 }
                 const svg = this._createKeyboardSVG(isPhrase);
                 this._highlightKeysOn(svg, keys);
                 cell.appendChild(svg);
                 row.appendChild(cell);
             });
             section.appendChild(row);
             container.appendChild(section);
         }
     }
 
     _createKeyboardSVG(isPhrase) {
         const ns = 'http://www.w3.org/2000/svg';
         const svg = document.createElementNS(ns, 'svg');
         svg.setAttribute('class', 'steno-keyboard' + (isPhrase ? ' steno-keyboard--phrase' : ''));
         svg.setAttribute('viewBox', '0 0 520 170');
         const keys = [
             { x: 10, y: 5, w: 500, h: 28, key: '#', lx: 260, ly: 24, small: true },
             { x: 10, y: 40, w: 44, h: 72, key: 'S-', lx: 32, ly: 80 },
             { x: 58, y: 40, w: 44, h: 34, key: 'T-', lx: 80, ly: 62 },
             { x: 106, y: 40, w: 44, h: 34, key: 'P-', lx: 128, ly: 62 },
             { x: 154, y: 40, w: 44, h: 34, key: 'H-', lx: 176, ly: 62 },
             { x: 210, y: 40, w: 44, h: 72, key: '*', lx: 232, ly: 80 },
             { x: 266, y: 40, w: 44, h: 34, key: '-F', lx: 288, ly: 62 },
             { x: 314, y: 40, w: 44, h: 34, key: '-P', lx: 336, ly: 62 },
             { x: 362, y: 40, w: 44, h: 34, key: '-L', lx: 384, ly: 62 },
             { x: 410, y: 40, w: 44, h: 34, key: '-T', lx: 432, ly: 62 },
             { x: 458, y: 40, w: 44, h: 34, key: '-D', lx: 480, ly: 62 },
             { x: 58, y: 78, w: 44, h: 34, key: 'K-', lx: 80, ly: 100 },
             { x: 106, y: 78, w: 44, h: 34, key: 'W-', lx: 128, ly: 100 },
             { x: 154, y: 78, w: 44, h: 34, key: 'R-', lx: 176, ly: 100 },
             { x: 266, y: 78, w: 44, h: 34, key: '-R', lx: 288, ly: 100 },
             { x: 314, y: 78, w: 44, h: 34, key: '-B', lx: 336, ly: 100 },
             { x: 362, y: 78, w: 44, h: 34, key: '-G', lx: 384, ly: 100 },
             { x: 410, y: 78, w: 44, h: 34, key: '-S', lx: 432, ly: 100 },
             { x: 458, y: 78, w: 44, h: 34, key: '-Z', lx: 480, ly: 100 },
             { x: 130, y: 120, w: 52, h: 34, key: 'A', lx: 156, ly: 142 },
             { x: 186, y: 120, w: 52, h: 34, key: 'O', lx: 212, ly: 142 },
             { x: 282, y: 120, w: 52, h: 34, key: 'E', lx: 308, ly: 142 },
             { x: 338, y: 120, w: 52, h: 34, key: 'U', lx: 364, ly: 142 },
         ];
         const labelMap = {
             '#': '#', 'S-': 'S', 'T-': 'T', 'P-': 'P', 'H-': 'H', '*': '*',
             '-F': 'F', '-P': 'P', '-L': 'L', '-T': 'T', '-D': 'D',
             'K-': 'K', 'W-': 'W', 'R-': 'R',
             '-R': 'R', '-B': 'B', '-G': 'G', '-S': 'S', '-Z': 'Z',
             'A': 'A', 'O': 'O', 'E': 'E', 'U': 'U',
         };
         keys.forEach(k => {
             const rect = document.createElementNS(ns, 'rect');
             rect.setAttribute('x', k.x);
             rect.setAttribute('y', k.y);
             rect.setAttribute('width', k.w);
             rect.setAttribute('height', k.h);
             rect.setAttribute('rx', '4');
             rect.setAttribute('class', 'steno-key');
             rect.setAttribute('data-key', k.key);
             svg.appendChild(rect);
             const text = document.createElementNS(ns, 'text');
             text.setAttribute('x', k.lx);
             text.setAttribute('y', k.ly);
             text.setAttribute('class', 'steno-key-label' + (k.small ? ' steno-key-label--small' : ''));
             text.textContent = labelMap[k.key] || k.key;
             svg.appendChild(text);
         });
         return svg;
     }
 
     _highlightKeysOn(svgEl, keys) {
         if (!keys || !svgEl) return;
         keys.forEach(key => {
             const el = svgEl.querySelector('.steno-key[data-key="' + CSS.escape(key) + '"]');
             if (el) {
                 el.classList.add('active');
                 const nextText = el.nextElementSibling;
                 if (nextText && nextText.tagName === 'text') {
                     nextText.style.fill = getCSSVar('--text-on-color');
                 }
             }
         });
     }
 
     _updateStats() {
         const elapsed = performance.now() - (this.sessionStartTime || performance.now());
         this.els.statTime.textContent = formatTime(Math.round(elapsed));
 
         const accuracy = this.stats.attempted > 0
             ? (this.stats.correct / this.stats.attempted) * 100
             : 0;
         this.els.statAccuracy.textContent = formatAccuracy(accuracy);
         this.els.statStreak.textContent = this.stats.streak;
 
         const avgWpm = this.stats.totalTimeMs > 0 && this.stats.attempted > 0
             ? (this.stats.attempted / (this.stats.totalTimeMs / 60000))
             : 0;
         this.els.statWpm.textContent = formatWpm(avgWpm) + ' WPM';
 
         this.els.statProgress.textContent = this.wordIndex + '/' + this.words.length;
     }
 
     async end() {
         if (this.ended) return;
         this.ended = true;
         if (this.timerInterval) {
             clearInterval(this.timerInterval);
             this.timerInterval = null;
         }
 
         try {
             const resp = await fetch('/api/session/end', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ session_id: this.sessionId }),
             });
             await resp.json();
         } catch (err) {}
 
         this._showSummary();
     }
 
     _showSummary() {
         const accuracy = this.stats.attempted > 0
             ? (this.stats.correct / this.stats.attempted) * 100
             : 0;
         const avgWpm = this.stats.totalTimeMs > 0 && this.stats.attempted > 0
             ? (this.stats.attempted / (this.stats.totalTimeMs / 60000))
             : 0;
 
         const accClass = accuracyClass(accuracy);
         this.els.summaryAccuracy.textContent = formatAccuracy(accuracy);
         this.els.summaryAccuracy.className = 'summary-accuracy summary-accuracy--' + accClass;
 
         this.els.summaryWords.textContent = this.stats.correct + ' / ' + this.stats.attempted;
         this.els.summaryWpm.textContent = formatWpm(avgWpm);
         this.els.summaryStreak.textContent = this.stats.bestStreak;
 
         const errors = this.stats.results.filter(r => !r.correct);
         const slowest = this.stats.results
             .filter(r => r.correct)
             .sort((a, b) => b.timeMs - a.timeMs)
             .slice(0, 5);
 
         if (errors.length > 0) {
             let html = '<div class="summary-weak-words__title">Errors (' + errors.length + ')</div>';
             html += '<div class="summary-errors__list">';
             errors.slice(0, 15).forEach(w => {
                 html += '<div class="error-detail">';
                 html += '<div class="error-detail__words">';
                 html += '<span class="error-detail__expected">' + escapeHtml(w.word) + '</span>';
                 html += '<span class="error-detail__arrow">&rarr;</span>';
                 html += '<span class="error-detail__typed">' + escapeHtml(w.typed || '(empty)') + '</span>';
                 html += '</div>';
                 if (w.strokes) {
                     html += '<span class="error-detail__stroke">' + escapeHtml(w.strokes) + '</span>';
                 }
                 html += '</div>';
             });
             html += '</div>';
             if (slowest.length > 0) {
                 html += '<div class="summary-weak-words__title" style="margin-top:1rem;">Slowest Correct</div>';
                 html += '<div class="summary-weak-words__list">';
                 slowest.forEach(w => {
                     html += '<span class="weak-word-chip">';
                     html += '<span class="weak-word-chip__word">' + escapeHtml(w.word) + '</span>';
                     html += '<span class="weak-word-chip__stroke">' + formatTime(w.timeMs) + '</span>';
                     html += '</span>';
                 });
                 html += '</div>';
             }
             this.els.summaryWeakWords.innerHTML = html;
         } else {
             this.els.summaryWeakWords.innerHTML = '<p style="text-align:center;color:var(--success);font-weight:600;">Perfect session!</p>';
         }
 
         this.els.summary.style.display = 'flex';
 
         if (typeof gsap !== 'undefined') {
             const stl = gsap.timeline({ defaults: { clearProps: 'all' } });
             stl.from('.modal', { y: 30, scale: 0.95, opacity: 0, duration: 0.35, ease: 'back.out(1.2)' })
                .from('.summary-accuracy', { scale: 0.5, opacity: 0, duration: 0.5, ease: 'back.out(1.5)' }, '-=0.1')
                .from('.summary-stats .summary-stat', { y: 15, opacity: 0, duration: 0.3, stagger: 0.08, ease: 'power2.out' }, '-=0.2');
         }
     }
 }
 
 
 /* ===== STATS PAGE ===== */
 
 async function loadStats() {
     let overview, daily, heatmap, words, sessions;
 
     try {
         const results = await Promise.allSettled([
             fetch('/api/stats/overview').then(r => r.json()),
             fetch('/api/stats/daily?days=30').then(r => r.json()),
             fetch('/api/stats/heatmap').then(r => r.json()),
             fetch('/api/stats/words?sort=accuracy&order=asc&limit=50').then(r => r.json()),
             fetch('/api/stats/sessions?limit=20').then(r => r.json())
         ]);
 
         overview = results[0].status === 'fulfilled' ? results[0].value : null;
         daily = results[1].status === 'fulfilled' ? results[1].value : null;
         heatmap = results[2].status === 'fulfilled' ? results[2].value : null;
         words = results[3].status === 'fulfilled' ? results[3].value : null;
         sessions = results[4].status === 'fulfilled' ? results[4].value : null;
     } catch (err) {
         console.error('Failed to load stats:', err);
         return;
     }
 
     if (overview) renderOverview(overview);
     if (daily) {
         renderWpmChart(daily);
         renderDailyChart(daily);
     }
     if (heatmap) renderHeatmap(heatmap);
     if (words) renderWordTable(words);
     if (sessions) renderSessionTable(sessions);
 }
 
 function renderOverview(data) {
     const setEl = (id, val) => {
         const el = document.getElementById(id);
         if (el) el.textContent = val;
     };
 
     setEl('overview-sessions', data.total_sessions || 0);
     setEl('overview-words', data.total_words || 0);
     setEl('overview-mastered', data.words_mastered || 0);
     setEl('overview-accuracy', formatAccuracy(data.avg_accuracy || 0));
     setEl('overview-wpm', formatWpm(data.avg_wpm || 0));
     setEl('overview-time', formatDuration(data.total_time_seconds || 0));
     setEl('overview-streak', data.best_streak || 0);
 }
 
 function renderWpmChart(daily) {
     const ctx = document.getElementById('wpm-chart');
     if (!ctx) return;
 
     const labels = daily.map(d => d.date);
     const wpmData = daily.map(d => d.avg_wpm || 0);
     const accData = daily.map(d => d.accuracy || 0);
 
     new Chart(ctx, {
         type: 'line',
         data: {
             labels: labels,
             datasets: [
                 {
                     label: 'WPM',
                     data: wpmData,
                     borderColor: getCSSVar('--chart-blue'),
                     backgroundColor: getCSSVar('--accent-glow'),
                     borderWidth: 2,
                     fill: true,
                     tension: 0.3,
                     yAxisID: 'y',
                     pointRadius: 3,
                     pointBackgroundColor: getCSSVar('--chart-blue')
                 },
                 {
                     label: 'Accuracy %',
                     data: accData,
                     borderColor: getCSSVar('--chart-green'),
                     backgroundColor: getCSSVar('--success-glow'),
                     borderWidth: 2,
                     fill: false,
                     tension: 0.3,
                     yAxisID: 'y1',
                     pointRadius: 3,
                     pointBackgroundColor: getCSSVar('--chart-green'),
                     borderDash: [5, 5]
                 }
             ]
         },
         options: {
             responsive: true,
             maintainAspectRatio: false,
             interaction: { mode: 'index', intersect: false },
             plugins: { legend: { labels: { color: getCSSVar('--text-secondary'), font: { size: 12 } } } },
             scales: {
                 x: { ticks: { color: getCSSVar('--text-muted'), maxRotation: 45, font: { size: 10 } }, grid: { color: getCSSVar('--border-light') } },
                 y: { type: 'linear', position: 'left', title: { display: true, text: 'WPM', color: getCSSVar('--chart-blue') }, ticks: { color: getCSSVar('--chart-blue') }, grid: { color: getCSSVar('--border-light') }, beginAtZero: true },
                 y1: { type: 'linear', position: 'right', title: { display: true, text: 'Accuracy %', color: getCSSVar('--chart-green') }, ticks: { color: getCSSVar('--chart-green') }, grid: { drawOnChartArea: false }, min: 0, max: 100 }
             }
         }
     });
 }
 
 function renderDailyChart(daily) {
     const ctx = document.getElementById('daily-chart');
     if (!ctx) return;
 
     const labels = daily.map(d => d.date);
     const correctData = daily.map(d => d.words_correct || 0);
     const incorrectData = daily.map(d => (d.words_total || 0) - (d.words_correct || 0));
 
     new Chart(ctx, {
         type: 'bar',
         data: {
             labels: labels,
             datasets: [
                 { label: 'Correct', data: correctData, backgroundColor: getCSSVar('--chart-green'), borderRadius: 3 },
                 { label: 'Incorrect', data: incorrectData, backgroundColor: getCSSVar('--chart-red'), borderRadius: 3 }
             ]
         },
         options: {
             responsive: true,
             maintainAspectRatio: false,
             plugins: { legend: { labels: { color: getCSSVar('--text-secondary'), font: { size: 12 } } } },
             scales: {
                 x: { stacked: true, ticks: { color: getCSSVar('--text-muted'), maxRotation: 45, font: { size: 10 } }, grid: { color: getCSSVar('--border-light') } },
                 y: { stacked: true, ticks: { color: getCSSVar('--text-secondary') }, grid: { color: getCSSVar('--border-light') }, beginAtZero: true, title: { display: true, text: 'Words', color: getCSSVar('--text-secondary') } }
             }
         }
     });
 }
 
 function renderHeatmap(data) {
     const container = document.getElementById('heatmap-container');
     if (!container) return;
 
     const days = Array.isArray(data) ? data : (data.days || []);
     const countMap = {};
     let maxCount = 1;
     days.forEach(d => {
         countMap[d.date] = d.count || 0;
         if (d.count > maxCount) maxCount = d.count;
     });
 
     const today = new Date();
     const oneDay = 86400000;
     const startDate = new Date(today.getTime() - 364 * oneDay);
     const startDow = startDate.getDay();
     const alignedStart = new Date(startDate.getTime() - startDow * oneDay);
     const totalDays = Math.ceil((today.getTime() - alignedStart.getTime()) / oneDay) + 1;
     const totalWeeks = Math.ceil(totalDays / 7);
 
     const months = [];
     let lastMonth = -1;
     for (let w = 0; w < totalWeeks; w++) {
         const d = new Date(alignedStart.getTime() + w * 7 * oneDay);
         const m = d.getMonth();
         if (m !== lastMonth) {
             lastMonth = m;
             months.push({ week: w, label: d.toLocaleDateString('en-US', { month: 'short' }) });
         }
     }
 
     let html = '<div class="heatmap-months" style="padding-left:0;">';
     months.forEach((m, i) => {
         const nextWeek = (i + 1 < months.length) ? months[i + 1].week : totalWeeks;
         const colSpan = nextWeek - m.week;
         html += '<span class="heatmap-month" style="width:' + (colSpan * 17) + 'px;">' + escapeHtml(m.label) + '</span>';
     });
     html += '</div><div class="heatmap">';
 
     for (let w = 0; w < totalWeeks; w++) {
         for (let d = 0; d < 7; d++) {
             const date = new Date(alignedStart.getTime() + (w * 7 + d) * oneDay);
             const dateStr = date.toISOString().split('T')[0];
             const count = countMap[dateStr] || 0;
             let level = 0;
             if (count > 0) {
                 const ratio = count / maxCount;
                 if (ratio <= 0.25) level = 1;
                 else if (ratio <= 0.5) level = 2;
                 else if (ratio <= 0.75) level = 3;
                 else level = 4;
             }
             const isFuture = date > today;
             html += '<div class="heatmap-cell' + (isFuture ? ' heatmap-cell--future' : '') + '" data-level="' + (isFuture ? 0 : level) + '" title="' + escapeHtml(dateStr + ': ' + count + ' words') + '"></div>';
         }
     }
     html += '</div>';
     html += '<div class="heatmap-legend"><span>Less</span>';
     for (let i = 0; i <= 4; i++) {
         html += '<div class="heatmap-legend__cell heatmap-cell" data-level="' + i + '" style="display:inline-block;"></div>';
     }
     html += '<span>More</span></div>';
     container.innerHTML = html;
 }
 
 function renderWordTable(data) {
     const tbody = document.getElementById('word-table-body');
     if (!tbody) return;
     const words = Array.isArray(data) ? data : (data.words || []);
     if (words.length === 0) {
         tbody.innerHTML = '<tr><td colspan="5" class="table-empty">No word data yet. Start practicing!</td></tr>';
         return;
     }
     let html = '';
     words.forEach(w => {
         const accCls = accuracyClass(w.accuracy || 0);
         html += '<tr><td><strong>' + escapeHtml(w.word) + '</strong></td>';
         html += '<td class="steno-stroke">' + escapeHtml(w.strokes || '--') + '</td>';
         html += '<td>' + (w.attempts || 0) + '</td>';
         html += '<td class="accuracy-cell accuracy--' + accCls + '">' + formatAccuracy(w.accuracy || 0) + '</td>';
         html += '<td>' + formatTime(w.avg_time || 0) + '</td></tr>';
     });
     tbody.innerHTML = html;
     _setupTableSort('word-table', words);
 }
 
 function _setupTableSort(tableId, data) {
     const table = document.getElementById(tableId);
     if (!table) return;
     const headers = table.querySelectorAll('th[data-sort]');
     let currentSort = null;
     let currentOrder = 'asc';
 
     headers.forEach(th => {
         th.addEventListener('click', () => {
             const field = th.dataset.sort;
             if (currentSort === field) {
                 currentOrder = currentOrder === 'asc' ? 'desc' : 'asc';
             } else {
                 currentSort = field;
                 currentOrder = 'asc';
             }
             const sorted = [...data].sort((a, b) => {
                 let va = a[field], vb = b[field];
                 if (typeof va === 'string') va = va.toLowerCase();
                 if (typeof vb === 'string') vb = vb.toLowerCase();
                 if (va < vb) return currentOrder === 'asc' ? -1 : 1;
                 if (va > vb) return currentOrder === 'asc' ? 1 : -1;
                 return 0;
             });
             const tbody = table.querySelector('tbody');
             let html = '';
             sorted.forEach(w => {
                 const accCls = accuracyClass(w.accuracy || 0);
                 html += '<tr><td><strong>' + escapeHtml(w.word) + '</strong></td>';
                 html += '<td class="steno-stroke">' + escapeHtml(w.strokes || '--') + '</td>';
                 html += '<td>' + (w.attempts || 0) + '</td>';
                 html += '<td class="accuracy-cell accuracy--' + accCls + '">' + formatAccuracy(w.accuracy || 0) + '</td>';
                 html += '<td>' + formatTime(w.avg_time || 0) + '</td></tr>';
             });
             tbody.innerHTML = html;
         });
     });
 }
 
 function renderSessionTable(data) {
     const tbody = document.getElementById('session-table-body');
     if (!tbody) return;
     const sessions = Array.isArray(data) ? data : (data.sessions || []);
     if (sessions.length === 0) {
         tbody.innerHTML = '<tr><td colspan="6" class="table-empty">No sessions yet.</td></tr>';
         return;
     }
     let html = '';
     sessions.forEach(s => {
         const accCls = accuracyClass(s.accuracy || 0);
         html += '<tr>';
         html += '<td>' + escapeHtml(s.date || s.date_str || '--') + '</td>';
         html += '<td><span class="badge badge--' + escapeHtml(s.mode || '') + '">' + escapeHtml(s.mode || '--') + '</span></td>';
         html += '<td>' + (s.words_correct || 0) + ' / ' + (s.words_attempted || 0) + '</td>';
         html += '<td class="accuracy-cell accuracy--' + accCls + '">' + formatAccuracy(s.accuracy || 0) + '</td>';
         html += '<td>' + formatWpm(s.wpm || 0) + '</td>';
         html += '<td>' + formatDuration(s.duration_seconds || 0) + '</td>';
         html += '</tr>';
     });
     tbody.innerHTML = html;
 }
 
 
 /* ===== PAGE INITIALIZATION ===== */
 
 document.addEventListener('DOMContentLoaded', () => {
     const practiceEl = document.getElementById('practice-container');
     if (practiceEl) {
         const mode = practiceEl.dataset.mode;
         const lessonId = practiceEl.dataset.lesson || null;
         new PracticeSession(mode, lessonId);
     }
 
     const statsEl = document.getElementById('stats-container');
     if (statsEl) {
         loadStats();
     }
 
     // Mobile nav hamburger
     const hamburger = document.getElementById('nav-hamburger');
     const navLinks = document.getElementById('nav-links');
     if (hamburger && navLinks) {
         hamburger.addEventListener('click', () => {
             navLinks.classList.toggle('open');
             hamburger.classList.toggle('active');
         });
         navLinks.querySelectorAll('.nav-link').forEach(link => {
             link.addEventListener('click', () => {
                 navLinks.classList.remove('open');
                 hamburger.classList.remove('active');
             });
         });
     }
 
     // Theme toggle
     const themeToggle = document.getElementById('theme-toggle');
     const themeIcon = document.getElementById('theme-icon');
     function updateThemeIcon() {
         if (!themeIcon) return;
         const t = document.documentElement.getAttribute('data-theme') || 'dark';
         themeIcon.textContent = t === 'dark' ? '☀' : '☽';
     }
     if (themeToggle) {
         updateThemeIcon();
         themeToggle.addEventListener('click', () => {
             const cur = document.documentElement.getAttribute('data-theme') || 'dark';
             const next = cur === 'dark' ? 'light' : 'dark';
             document.documentElement.setAttribute('data-theme', next);
             setCookie('theme', next, 365);
             updateThemeIcon();
         });
     }
 
     // GSAP page entrance animations
     if (typeof gsap !== 'undefined') {
         gsap.from('.nav-brand', { x: -10, opacity: 0, duration: 0.3, ease: 'power2.out', clearProps: 'all' });
         gsap.from('.nav-links li', { y: -8, opacity: 0, duration: 0.25, stagger: 0.05, delay: 0.1, ease: 'power2.out', clearProps: 'all' });
 
         if (document.querySelector('.dashboard')) {
             const tl = gsap.timeline({ defaults: { ease: 'power2.out', clearProps: 'all' } });
             tl.from('.hero-stats .stat-card', { y: 10, opacity: 0, duration: 0.35, stagger: 0.03 }, 0)
               .from('.dashboard .section-title', { opacity: 0, duration: 0.35 }, 0)
               .from('.lesson-grid', { opacity: 0, duration: 0.35 }, 0)
               .from('.lesson-card', { y: 6, opacity: 0, duration: 0.35, stagger: 0.02 }, 0)
               .from('.mode-grid', { opacity: 0, duration: 0.35 }, 0)
               .from('.mode-card', { y: 6, opacity: 0, duration: 0.35, stagger: 0.02 }, 0)
               .from('.today-progress, .recent-sessions', { y: 6, opacity: 0, duration: 0.35 }, 0);
         }
 
         if (document.querySelector('.stats-page')) {
             const tl = gsap.timeline({ defaults: { ease: 'power2.out', clearProps: 'all' } });
             tl.from('.stats-page .page-title', { y: -10, opacity: 0, duration: 0.35 })
               .from('.stats-overview .stat-card', { y: 20, opacity: 0, duration: 0.35, stagger: 0.06 }, '-=0.15')
               .from('.stats-section', { y: 25, opacity: 0, duration: 0.4, stagger: 0.1 }, '-=0.1');
         }
 
         if (document.querySelector('.settings-page')) {
             const tl = gsap.timeline({ defaults: { ease: 'power2.out', clearProps: 'all' } });
             tl.from('.settings-page .page-title', { y: -10, opacity: 0, duration: 0.35 })
               .from('.settings-section', { y: 20, opacity: 0, duration: 0.35, stagger: 0.1 }, '-=0.15');
         }
     }
 });