diff --git a/.claude/settings.json b/.claude/settings.json
index ebe9fdd..2d45084 100644
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -154,7 +154,31 @@
       "Bash(powershell -Command \"Stop-Process -Id 69696 -Force\")",
       "Bash(powershell -Command \"Start-Sleep 1\")",
       "Bash(powershell -Command \"\\(Get-NetTCPConnection -LocalPort 3000 -State Listen -ErrorAction SilentlyContinue\\).OwningProcess\")",
-      "Bash(powershell -Command \"Stop-Process -Id 10880 -Force\")"
+      "Bash(powershell -Command \"Stop-Process -Id 10880 -Force\")",
+      "Bash(grep -v '\\\\.js$')",
+      "Bash(curl -s -X POST http://localhost:3000/api/auth/login -H \"Content-Type: application/json\" -d '{\"login\":\"admin\",\"password\":\"admin123\"}')",
+      "Bash(curl -s -w '\\\\nHTTP_STATUS:%{http_code}' -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6Miwicm9sZSI6ImFkbWluIiwidmVyc2lvbiI6MCwiaWF0IjoxNzc1OTgyNzc2LCJleHAiOjE3NzYwNjkxNzZ9.FJ3Ya9X_Qg5fEUagPc1l8KrDnj2BaKrXarA-KRVr_QM' http://localhost:3000/api/classroom/6/pages)",
+      "Bash(curl -s -w '\\\\nHTTP:%{http_code}' -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6Miwicm9sZSI6ImFkbWluIiwidmVyc2lvbiI6MCwiaWF0IjoxNzc1OTgyNzc2LCJleHAiOjE3NzYwNjkxNzZ9.FJ3Ya9X_Qg5fEUagPc1l8KrDnj2BaKrXarA-KRVr_QM' 'http://localhost:3000/api/classroom/6/strokes?page_num=1')",
+      "Bash(wmic process:*)",
+      "Bash(taskkill /F /PID 67276)",
+      "Bash(cmd /c \"taskkill /F /PID 67276\")",
+      "Bash(cmd /c \"taskkill /F /PID 67276 && echo killed\")",
+      "Bash(cmd /c \"wmic process where ProcessId=67276 delete\")",
+      "Bash(powershell -Command \"Stop-Process -Id 67276 -Force\")",
+      "Bash(powershell -Command \"Start-Sleep -Milliseconds 1500; \\(Invoke-WebRequest -Uri 'http://localhost:3000/api/health' -UseBasicParsing\\).Content\")",
+      "Bash(curl -s -o /dev/null -w \"%{http_code}\" http://localhost:3000/lesson-history)",
+      "Bash(curl -s http://localhost:3000/api/classroom/my/history -H \"Authorization: Bearer test\")",
+      "Bash(curl -s -X DELETE http://localhost:3000/api/classroom/999/history -H \"Authorization: Bearer bad\")",
+      "Bash(pkill -f \"node.*server\")",
+      "Bash(grep -n \"</div>.*app-layout\\\\|<!-- app-layout\\\\|^</div>$\" frontend/classroom.html)",
+      "Bash(taskkill /PID 1336 /F)",
+      "Bash(taskkill /PID 55392 /F)",
+      "Bash(taskkill /PID 60564 /F)",
+      "Bash(ping -n 3 127.0.0.1)",
+      "Bash(cmd /c \"taskkill /PID 60564 /F\")",
+      "Bash(cmd /c \"taskkill /F /PID 60564 2>&1\")",
+      "Bash(kill -9 60564)",
+      "Bash(kill -9 9313)"
     ],
     "additionalDirectories": [
       "\\tmp"
diff --git a/backend/package-lock.json b/backend/package-lock.json
index c6666b2..fe31dfd 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -15,7 +15,8 @@
         "express": "^4.18.3",
         "jsonwebtoken": "^9.0.2",
         "multer": "^2.1.1",
-        "sharp": "^0.34.5"
+        "sharp": "^0.34.5",
+        "ws": "^8.20.0"
       },
       "devDependencies": {
         "nodemon": "^3.1.0"
@@ -2038,6 +2039,27 @@
       "engines": {
         "node": ">= 0.8"
       }
+    },
+    "node_modules/ws": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.20.0.tgz",
+      "integrity": "sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/backend/package.json b/backend/package.json
index 5bd74dc..434b6b5 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -12,13 +12,14 @@
   },
   "dependencies": {
     "bcryptjs": "^2.4.3",
-"compression": "^1.8.1",
+    "compression": "^1.8.1",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "express": "^4.18.3",
     "jsonwebtoken": "^9.0.2",
     "multer": "^2.1.1",
-    "sharp": "^0.34.5"
+    "sharp": "^0.34.5",
+    "ws": "^8.20.0"
   },
   "devDependencies": {
     "nodemon": "^3.1.0"
diff --git a/backend/src/controllers/adminController.js b/backend/src/controllers/adminController.js
index ac848d6..1c71967 100644
--- a/backend/src/controllers/adminController.js
+++ b/backend/src/controllers/adminController.js
@@ -324,7 +324,7 @@ function getFeatures(_req, res) {
 /* ── PATCH /api/admin/features ──────────────────────────────────────── */
 function updateFeatures(req, res) {
   const allowed = ['crossword', 'hangman', 'pet', 'red_book', 'collection',
-                   'flashcards', 'knowledge_map', 'board', 'biochem', 'live_quiz'];
+                   'flashcards', 'knowledge_map', 'board', 'biochem', 'live_quiz', 'classroom'];
   const updates = req.body;
   const stmt = db.prepare("INSERT OR REPLACE INTO app_settings (key, value) VALUES (?, ?)");
   const changed = [];
diff --git a/backend/src/controllers/classroomController.js b/backend/src/controllers/classroomController.js
index 6ec38c2..cb3ca22 100644
--- a/backend/src/controllers/classroomController.js
+++ b/backend/src/controllers/classroomController.js
@@ -1,7 +1,8 @@
 const db   = require('../db/db');
 const path = require('path');
 const fs   = require('fs');
-const { emit, emitToClass, getOnlineUserIds } = require('../sse');
+const crypto = require('crypto');
+const { emit, emitToClass, getOnlineUserIds, emitToGuests } = require('../sse');
 
 /* ── chat attachment uploads dir ─────────────────────────────────────── */
 const CHAT_UPLOADS_DIR = path.join(__dirname, '../../uploads/chat');
@@ -15,6 +16,14 @@ function canDraw(sessionId, userId, session) {
   ).get(sessionId, userId);
 }
 
+/* Events forwarded to read-only guest viewers (whiteboard + lifecycle only) */
+const GUEST_EVENTS = new Set([
+  'classroom_strokes', 'classroom_stroke_preview', 'classroom_stroke_deleted',
+  'classroom_stroke_updated', 'classroom_page_added', 'classroom_page_changed',
+  'classroom_template_changed', 'classroom_page_cleared', 'classroom_page_renamed',
+  'classroom_page_duplicated', 'classroom_page_deleted', 'classroom_ended',
+]);
+
 /* ── Helper: broadcast to all session participants ─────────────────────── */
 function emitToSession(sessionId, data) {
   const session = db.prepare('SELECT class_id, teacher_id FROM classroom_sessions WHERE id=?').get(sessionId);
@@ -29,6 +38,9 @@ function emitToSession(sessionId, data) {
     const invites = db.prepare('SELECT user_id FROM classroom_invites WHERE session_id=?').all(sessionId);
     for (const { user_id } of invites) emit(user_id, data);
   }
+
+  // Forward whitelisted events to guest viewers
+  if (GUEST_EVENTS.has(data.type)) emitToGuests(sessionId, data);
 }
 
 /* ── Helper: check if user has access to session ──────────────────────── */
@@ -50,6 +62,12 @@ function createSession(req, res) {
   const { class_id, user_ids, title = '' } = req.body;
   const teacher = req.user;
 
+  // Check if classroom module is enabled
+  const classroomEnabled = db.prepare("SELECT value FROM app_settings WHERE key='feature_classroom_enabled'").get();
+  if (classroomEnabled?.value === '0') {
+    return res.status(403).json({ error: 'Модуль онлайн-уроков отключён администратором' });
+  }
+
   if (!class_id && (!user_ids || !user_ids.length)) {
     return res.status(400).json({ error: 'Укажите class_id или user_ids' });
   }
@@ -585,10 +603,11 @@ function getStrokes(req, res) {
 
   const strokes = rows.map(r => ({ ...r, data: JSON.parse(r.data) }));
 
-  const pageRow = db.prepare('SELECT template FROM classroom_pages WHERE session_id=? AND page_num=?').get(sessionId, pageNum);
+  const pageRow = db.prepare('SELECT template, name FROM classroom_pages WHERE session_id=? AND page_num=?').get(sessionId, pageNum);
   const template = pageRow?.template || 'blank';
+  const name     = pageRow?.name || null;
 
-  res.json({ strokes, template });
+  res.json({ strokes, template, name });
 }
 
 /* PATCH /api/classroom/:id/strokes/:strokeId — update image position/size */
@@ -656,6 +675,103 @@ function clearPage(req, res) {
   res.json({ ok: true });
 }
 
+/* GET /api/classroom/:id/pages — list all pages with names/templates */
+function getPages(req, res) {
+  const sessionId = Number(req.params.id);
+  const session   = db.prepare('SELECT * FROM classroom_sessions WHERE id=?').get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Не найдено' });
+  if (!hasAccess(session, req.user.id, req.user.role))
+    return res.status(403).json({ error: 'Нет доступа' });
+
+  const maxS = db.prepare('SELECT COALESCE(MAX(page_num),0) AS m FROM classroom_strokes WHERE session_id=?').get(sessionId).m;
+  const maxP = db.prepare('SELECT COALESCE(MAX(page_num),0) AS m FROM classroom_pages WHERE session_id=?').get(sessionId).m;
+  const total = Math.max(session.current_page, maxS, maxP, 1);
+
+  const rows = db.prepare('SELECT page_num, template, name FROM classroom_pages WHERE session_id=?').all(sessionId);
+  const map  = {};
+  rows.forEach(r => { map[r.page_num] = r; });
+
+  const pages = [];
+  for (let i = 1; i <= total; i++) {
+    pages.push({ page_num: i, template: map[i]?.template || 'blank', name: map[i]?.name || null });
+  }
+  res.json({ pages, currentPage: session.current_page });
+}
+
+/* PATCH /api/classroom/:id/pages/:pageNum/name — rename page */
+function renamePage(req, res) {
+  const sessionId = Number(req.params.id);
+  const pageNum   = Number(req.params.pageNum);
+  const { name }  = req.body;
+
+  const session = db.prepare(`SELECT * FROM classroom_sessions WHERE id=? AND status='active'`).get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Сессия не активна' });
+  if (session.teacher_id !== req.user.id && req.user.role !== 'admin')
+    return res.status(403).json({ error: 'Нет доступа' });
+
+  db.prepare('INSERT OR IGNORE INTO classroom_pages (session_id, page_num, template) VALUES (?,?,?)').run(sessionId, pageNum, 'blank');
+  db.prepare('UPDATE classroom_pages SET name=? WHERE session_id=? AND page_num=?').run(name || null, sessionId, pageNum);
+  emitToSession(sessionId, { type: 'classroom_page_renamed', sessionId, pageNum, name: name || null });
+  res.json({ ok: true, pageNum, name: name || null });
+}
+
+/* POST /api/classroom/:id/pages/:pageNum/duplicate — duplicate a page */
+function duplicatePage(req, res) {
+  const sessionId = Number(req.params.id);
+  const srcPage   = Number(req.params.pageNum);
+
+  const session = db.prepare(`SELECT * FROM classroom_sessions WHERE id=? AND status='active'`).get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Сессия не активна' });
+  if (session.teacher_id !== req.user.id && req.user.role !== 'admin')
+    return res.status(403).json({ error: 'Нет доступа' });
+
+  const srcRow     = db.prepare('SELECT template, name FROM classroom_pages WHERE session_id=? AND page_num=?').get(sessionId, srcPage);
+  const srcTpl     = srcRow?.template || 'blank';
+  const newName    = srcRow?.name ? srcRow.name + ' (копия)' : null;
+
+  const maxS = db.prepare('SELECT COALESCE(MAX(page_num),0) AS m FROM classroom_strokes WHERE session_id=?').get(sessionId).m;
+  const maxP = db.prepare('SELECT COALESCE(MAX(page_num),0) AS m FROM classroom_pages WHERE session_id=?').get(sessionId).m;
+  const newPage = Math.max(session.current_page, maxS, maxP) + 1;
+
+  db.prepare('INSERT OR IGNORE INTO classroom_pages (session_id, page_num, template, name) VALUES (?,?,?,?)').run(sessionId, newPage, srcTpl, newName);
+
+  const strokes = db.prepare('SELECT tool, data FROM classroom_strokes WHERE session_id=? AND page_num=? ORDER BY seq').all(sessionId, srcPage);
+  const ins     = db.prepare('INSERT INTO classroom_strokes (session_id, page_num, tool, data) VALUES (?,?,?,?)');
+  db.transaction(() => { strokes.forEach(s => ins.run(sessionId, newPage, s.tool, s.data)); })();
+
+  db.prepare('UPDATE classroom_sessions SET current_page=? WHERE id=?').run(newPage, sessionId);
+  emitToSession(sessionId, { type: 'classroom_page_duplicated', sessionId, srcPage, newPage, template: srcTpl, name: newName });
+  res.json({ ok: true, newPage, template: srcTpl, name: newName });
+}
+
+/* DELETE /api/classroom/:id/pages/:pageNum — delete a page */
+function deletePage(req, res) {
+  const sessionId = Number(req.params.id);
+  const pageNum   = Number(req.params.pageNum);
+
+  const session = db.prepare(`SELECT * FROM classroom_sessions WHERE id=? AND status='active'`).get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Сессия не активна' });
+  if (session.teacher_id !== req.user.id && req.user.role !== 'admin')
+    return res.status(403).json({ error: 'Нет доступа' });
+
+  const maxS = db.prepare('SELECT COALESCE(MAX(page_num),0) AS m FROM classroom_strokes WHERE session_id=?').get(sessionId).m;
+  const maxP = db.prepare('SELECT COALESCE(MAX(page_num),0) AS m FROM classroom_pages WHERE session_id=?').get(sessionId).m;
+  const total = Math.max(session.current_page, maxS, maxP, 1);
+  if (total <= 1) return res.status(400).json({ error: 'Нельзя удалить единственную страницу' });
+
+  db.prepare('DELETE FROM classroom_strokes WHERE session_id=? AND page_num=?').run(sessionId, pageNum);
+  db.prepare('DELETE FROM classroom_pages WHERE session_id=? AND page_num=?').run(sessionId, pageNum);
+  db.prepare('UPDATE classroom_strokes SET page_num=page_num-1 WHERE session_id=? AND page_num>?').run(sessionId, pageNum);
+  db.prepare('UPDATE classroom_pages    SET page_num=page_num-1 WHERE session_id=? AND page_num>?').run(sessionId, pageNum);
+
+  let newCurrent = session.current_page;
+  if (newCurrent > pageNum)      newCurrent--;
+  else if (newCurrent === pageNum) newCurrent = Math.max(1, pageNum - 1);
+  db.prepare('UPDATE classroom_sessions SET current_page=? WHERE id=?').run(newCurrent, sessionId);
+  emitToSession(sessionId, { type: 'classroom_page_deleted', sessionId, pageNum, newCurrent });
+  res.json({ ok: true, pageNum, newCurrent });
+}
+
 /* POST /api/classroom/:id/mute — teacher mutes a student */
 function mutePeer(req, res) {
   const sessionId = Number(req.params.id);
@@ -797,6 +913,66 @@ function screenStop(req, res) {
   res.json({ ok: true });
 }
 
+/* ── Simulation integration ──────────────────────────────────────────────── */
+
+/* POST /api/classroom/:id/sim — teacher opens simulation for everyone */
+function simOpen(req, res) {
+  const sessionId = Number(req.params.id);
+  const session = db.prepare(`SELECT * FROM classroom_sessions WHERE id=? AND status='active'`).get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Сессия не активна' });
+  if (session.teacher_id !== req.user.id && req.user.role !== 'admin')
+    return res.status(403).json({ error: 'Нет доступа' });
+
+  const { simId, title } = req.body;
+  if (!simId || typeof simId !== 'string' || !/^[a-z0-9_-]{1,40}$/.test(simId))
+    return res.status(400).json({ error: 'Неверный simId' });
+
+  emitToSession(sessionId, { type: 'classroom_sim_open', sessionId, simId, title: (title || simId).slice(0, 80) });
+  res.json({ ok: true });
+}
+
+/* POST /api/classroom/:id/sim/state — teacher relays sim state to students */
+function simState(req, res) {
+  const sessionId = Number(req.params.id);
+  const session = db.prepare(`SELECT * FROM classroom_sessions WHERE id=? AND status='active'`).get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Сессия не активна' });
+  if (session.teacher_id !== req.user.id && req.user.role !== 'admin')
+    return res.status(403).json({ error: 'Нет доступа' });
+
+  const { state } = req.body;
+  if (!state || typeof state !== 'object') return res.status(400).json({ error: 'Нет state' });
+
+  emitToSession(sessionId, { type: 'classroom_sim_state', sessionId, state });
+  res.json({ ok: true });
+}
+
+/* POST /api/classroom/:id/sim/mode — teacher sets sim mode (demo/free) */
+function simMode(req, res) {
+  const sessionId = Number(req.params.id);
+  const session = db.prepare(`SELECT * FROM classroom_sessions WHERE id=? AND status='active'`).get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Сессия не активна' });
+  if (session.teacher_id !== req.user.id && req.user.role !== 'admin')
+    return res.status(403).json({ error: 'Нет доступа' });
+
+  const { mode } = req.body;
+  if (mode !== 'demo' && mode !== 'free') return res.status(400).json({ error: 'mode must be demo|free' });
+
+  emitToSession(sessionId, { type: 'classroom_sim_mode', sessionId, mode });
+  res.json({ ok: true });
+}
+
+/* DELETE /api/classroom/:id/sim — teacher closes simulation */
+function simClose(req, res) {
+  const sessionId = Number(req.params.id);
+  const session = db.prepare(`SELECT * FROM classroom_sessions WHERE id=? AND status='active'`).get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Сессия не активна' });
+  if (session.teacher_id !== req.user.id && req.user.role !== 'admin')
+    return res.status(403).json({ error: 'Нет доступа' });
+
+  emitToSession(sessionId, { type: 'classroom_sim_close', sessionId });
+  res.json({ ok: true });
+}
+
 /* ── Chat: upload image attachment ──────────────────────────────────────── */
 function uploadChatAttachment(req, res) {
   if (!req.file) return res.status(400).json({ error: 'Файл не получен' });
@@ -870,7 +1046,341 @@ function saveNotes(req, res) {
   res.json({ ok: true });
 }
 
+/* ── Lesson history ─────────────────────────────────────────────────────── */
+
+/* GET /api/classroom/class/:classId/history */
+function getClassHistory(req, res) {
+  const classId = Number(req.params.classId);
+  const page    = Math.max(1, Number(req.query.page)  || 1);
+  const limit   = Math.min(50, Number(req.query.limit) || 20);
+  const search  = (req.query.search || '').trim();
+  const offset  = (page - 1) * limit;
+
+  // Access check: admin sees all; teacher must own the class; student must be member
+  const cls = db.prepare('SELECT * FROM classes WHERE id=?').get(classId);
+  if (!cls) return res.status(404).json({ error: 'Класс не найден' });
+  if (req.user.role === 'teacher') {
+    if (cls.teacher_id !== req.user.id) return res.status(403).json({ error: 'Нет доступа' });
+  } else if (req.user.role === 'student' || req.user.role === 'free_student') {
+    const member = db.prepare('SELECT 1 FROM class_members WHERE class_id=? AND user_id=?').get(classId, req.user.id);
+    if (!member) return res.status(403).json({ error: 'Нет доступа' });
+  }
+
+  const whereSearch = search ? `AND (s.title LIKE '%'||?||'%')` : '';
+  const params      = search ? [classId, search] : [classId];
+
+  const total = db.prepare(`
+    SELECT COUNT(*) AS n FROM classroom_sessions s
+    WHERE s.class_id=? AND s.status='ended' ${whereSearch}
+  `).get(...params).n;
+
+  const sessions = db.prepare(`
+    SELECT s.id, s.title, s.created_at, s.ended_at, s.teacher_id,
+           u.name AS teacher_name,
+           (SELECT COUNT(*) FROM classroom_attendance WHERE session_id=s.id) AS participant_count,
+           (SELECT COUNT(*) FROM classroom_chat WHERE session_id=s.id) AS message_count,
+           (COALESCE((SELECT MAX(page_num) FROM classroom_pages WHERE session_id=s.id),1)) AS page_count,
+           (SELECT COUNT(*) FROM classroom_strokes WHERE session_id=s.id) AS stroke_count
+    FROM classroom_sessions s
+    JOIN users u ON u.id = s.teacher_id
+    WHERE s.class_id=? AND s.status='ended' ${whereSearch}
+    ORDER BY s.ended_at DESC
+    LIMIT ? OFFSET ?
+  `).all(...params, limit, offset);
+
+  res.json({ sessions, total, page, pages: Math.ceil(total / limit) });
+}
+
+/* GET /api/classroom/my/history */
+function getMyHistory(req, res) {
+  const page   = Math.max(1, Number(req.query.page)  || 1);
+  const limit  = Math.min(50, Number(req.query.limit) || 20);
+  const offset = (page - 1) * limit;
+
+  let sessions, total;
+  if (req.user.role === 'teacher' || req.user.role === 'admin') {
+    total = db.prepare(`SELECT COUNT(*) AS n FROM classroom_sessions WHERE teacher_id=? AND status='ended'`).get(req.user.id).n;
+    sessions = db.prepare(`
+      SELECT s.id, s.title, s.created_at, s.ended_at, s.class_id, s.teacher_id,
+             u.name AS teacher_name,
+             c.name AS class_name,
+             (SELECT COUNT(*) FROM classroom_attendance WHERE session_id=s.id) AS participant_count,
+             (SELECT COUNT(*) FROM classroom_chat WHERE session_id=s.id) AS message_count,
+             (COALESCE((SELECT MAX(page_num) FROM classroom_pages WHERE session_id=s.id),1)) AS page_count
+      FROM classroom_sessions s
+      JOIN users u ON u.id = s.teacher_id
+      LEFT JOIN classes c ON c.id = s.class_id
+      WHERE s.teacher_id=? AND s.status='ended'
+      ORDER BY s.ended_at DESC LIMIT ? OFFSET ?
+    `).all(req.user.id, limit, offset);
+  } else {
+    // student: sessions they have attendance records for
+    total = db.prepare(`
+      SELECT COUNT(DISTINCT s.id) AS n FROM classroom_sessions s
+      JOIN classroom_attendance a ON a.session_id=s.id
+      WHERE a.user_id=? AND s.status='ended'
+    `).get(req.user.id).n;
+    sessions = db.prepare(`
+      SELECT s.id, s.title, s.created_at, s.ended_at, s.class_id,
+             u.name AS teacher_name,
+             c.name AS class_name,
+             (SELECT COUNT(*) FROM classroom_attendance WHERE session_id=s.id) AS participant_count,
+             (SELECT COUNT(*) FROM classroom_chat WHERE session_id=s.id) AS message_count,
+             (COALESCE((SELECT MAX(page_num) FROM classroom_pages WHERE session_id=s.id),1)) AS page_count
+      FROM classroom_sessions s
+      JOIN users u ON u.id = s.teacher_id
+      LEFT JOIN classes c ON c.id = s.class_id
+      JOIN classroom_attendance a ON a.session_id=s.id
+      WHERE a.user_id=? AND s.status='ended'
+      GROUP BY s.id ORDER BY s.ended_at DESC LIMIT ? OFFSET ?
+    `).all(req.user.id, limit, offset);
+  }
+
+  res.json({ sessions, total, page, pages: Math.ceil(total / limit) });
+}
+
+/* GET /api/classroom/:id/summary */
+function getSessionSummary(req, res) {
+  const sessionId = Number(req.params.id);
+  const session   = db.prepare('SELECT * FROM classroom_sessions WHERE id=?').get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Не найдено' });
+  if (!hasAccess(session, req.user.id, req.user.role))
+    return res.status(403).json({ error: 'Нет доступа' });
+
+  const teacherName = db.prepare('SELECT name FROM users WHERE id=?').get(session.teacher_id)?.name || '';
+  const className   = session.class_id
+    ? db.prepare('SELECT name FROM classes WHERE id=?').get(session.class_id)?.name || null
+    : null;
+
+  const durationSec = session.ended_at
+    ? Math.round((new Date(session.ended_at) - new Date(session.created_at)) / 1000)
+    : null;
+
+  const stats = {
+    duration_sec:      durationSec,
+    participant_count: db.prepare('SELECT COUNT(*) AS n FROM classroom_attendance WHERE session_id=?').get(sessionId).n,
+    message_count:     db.prepare('SELECT COUNT(*) AS n FROM classroom_chat WHERE session_id=?').get(sessionId).n,
+    page_count:        db.prepare('SELECT COALESCE(MAX(page_num),1) AS n FROM classroom_pages WHERE session_id=?').get(sessionId).n,
+    stroke_count:      db.prepare('SELECT COUNT(*) AS n FROM classroom_strokes WHERE session_id=?').get(sessionId).n,
+  };
+
+  const attendance = db.prepare(`
+    SELECT a.user_id, u.name AS user_name, a.joined_at, a.left_at
+    FROM classroom_attendance a
+    JOIN users u ON u.id = a.user_id
+    WHERE a.session_id=? ORDER BY a.joined_at
+  `).all(sessionId).map(r => ({
+    ...r,
+    duration_sec: (r.joined_at && r.left_at)
+      ? Math.round((new Date(r.left_at) - new Date(r.joined_at)) / 1000)
+      : null,
+  }));
+
+  const pages = db.prepare(`
+    SELECT p.page_num, p.template, p.name,
+           (SELECT COUNT(*) FROM classroom_strokes WHERE session_id=p.session_id AND page_num=p.page_num) AS stroke_count
+    FROM classroom_pages p
+    WHERE p.session_id=? ORDER BY p.page_num
+  `).all(sessionId);
+
+  // Ensure at least page 1 appears if no pages row exists
+  if (!pages.length) pages.push({ page_num: 1, template: 'blank', name: null, stroke_count: stats.stroke_count });
+
+  res.json({
+    session: { ...session, teacher_name: teacherName, class_name: className },
+    stats,
+    attendance,
+    pages,
+  });
+}
+
+/* GET /api/classroom/:id/chat/export — plaintext chat transcript (teacher/admin) */
+function exportChat(req, res) {
+  const sessionId = Number(req.params.id);
+  const session   = db.prepare('SELECT * FROM classroom_sessions WHERE id=?').get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Не найдено' });
+  if (session.teacher_id !== req.user.id && req.user.role !== 'admin')
+    return res.status(403).json({ error: 'Нет доступа' });
+
+  const messages = db.prepare(`
+    SELECT c.created_at, u.name AS user_name, c.message, c.attachment_url
+    FROM classroom_chat c
+    JOIN users u ON u.id = c.user_id
+    WHERE c.session_id=? ORDER BY c.id ASC
+  `).all(sessionId);
+
+  const title = session.title || `Урок #${sessionId}`;
+  const date  = session.created_at ? new Date(session.created_at).toLocaleDateString('ru-RU') : '';
+  let text    = `Чат урока: ${title}\nДата: ${date}\n${'─'.repeat(50)}\n\n`;
+
+  messages.forEach(m => {
+    const ts = m.created_at ? new Date(m.created_at).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' }) : '';
+    text += `[${ts}] ${m.user_name}: ${m.message || ''}`;
+    if (m.attachment_url) text += ` [вложение]`;
+    text += '\n';
+  });
+
+  const filename = `chat_${sessionId}_${date.replace(/\./g, '-')}.txt`;
+  res.setHeader('Content-Type', 'text/plain; charset=utf-8');
+  res.setHeader('Content-Disposition', `attachment; filename="${filename}"`);
+  res.send(text);
+}
+
+/* GET /api/classroom/:id/notes/all — all student notes (teacher/admin) */
+function getAllNotes(req, res) {
+  const sessionId = Number(req.params.id);
+  const session   = db.prepare('SELECT * FROM classroom_sessions WHERE id=?').get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Не найдено' });
+  if (session.teacher_id !== req.user.id && req.user.role !== 'admin')
+    return res.status(403).json({ error: 'Нет доступа' });
+
+  const notes = db.prepare(`
+    SELECT n.content, n.updated_at, u.name AS user_name, u.id AS user_id
+    FROM classroom_notes n
+    JOIN users u ON u.id = n.user_id
+    WHERE n.session_id=? AND n.content != '' ORDER BY u.name
+  `).all(sessionId);
+
+  res.json({ notes });
+}
+
 /* ── Lesson templates ───────────────────────────────────────────────────── */
+/* DELETE /api/classroom/:id/history — permanently delete an ended session record */
+function deleteHistorySession(req, res) {
+  const sessionId = Number(req.params.id);
+  const session = db.prepare('SELECT * FROM classroom_sessions WHERE id=?').get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Не найдено' });
+  if (session.status !== 'ended') return res.status(400).json({ error: 'Можно удалять только завершённые сессии' });
+  if (session.teacher_id !== req.user.id && req.user.role !== 'admin')
+    return res.status(403).json({ error: 'Нет доступа' });
+
+  db.prepare('DELETE FROM classroom_chat_reactions WHERE chat_id IN (SELECT id FROM classroom_chat WHERE session_id=?)').run(sessionId);
+  db.prepare('DELETE FROM classroom_chat WHERE session_id=?').run(sessionId);
+  db.prepare('DELETE FROM classroom_strokes WHERE session_id=?').run(sessionId);
+  db.prepare('DELETE FROM classroom_pages WHERE session_id=?').run(sessionId);
+  db.prepare('DELETE FROM classroom_attendance WHERE session_id=?').run(sessionId);
+  db.prepare('DELETE FROM classroom_notes WHERE session_id=?').run(sessionId);
+  db.prepare('DELETE FROM classroom_draw_permissions WHERE session_id=?').run(sessionId);
+  db.prepare('DELETE FROM classroom_sessions WHERE id=?').run(sessionId);
+
+  res.json({ ok: true });
+}
+
+/* GET /api/classroom/admin/active — all currently active sessions (admin only) */
+function adminGetActiveSessions(req, res) {
+  if (req.user.role !== 'admin') return res.status(403).json({ error: 'Нет доступа' });
+
+  const sessions = db.prepare(`
+    SELECT s.id, s.title, s.created_at, s.class_id, s.teacher_id,
+           u.name AS teacher_name,
+           c.name AS class_name,
+           (SELECT COUNT(*) FROM classroom_attendance WHERE session_id=s.id AND left_at IS NULL) AS online_count,
+           (SELECT COUNT(*) FROM classroom_attendance WHERE session_id=s.id) AS total_joined,
+           (SELECT COUNT(*) FROM classroom_chat WHERE session_id=s.id) AS message_count
+    FROM classroom_sessions s
+    JOIN users u ON u.id = s.teacher_id
+    LEFT JOIN classes c ON c.id = s.class_id
+    WHERE s.status='active'
+    ORDER BY s.created_at DESC
+  `).all();
+
+  res.json({ sessions });
+}
+
+/* GET /api/classroom/admin/sessions — all sessions paginated (admin only) */
+function adminGetAllSessions(req, res) {
+  if (req.user.role !== 'admin') return res.status(403).json({ error: 'Нет доступа' });
+
+  const page      = Math.max(1, Number(req.query.page)  || 1);
+  const limit     = Math.min(50, Number(req.query.limit) || 20);
+  const search    = (req.query.search   || '').trim();
+  const teacherId = (req.query.teacher  || '').trim();
+  const classId   = (req.query.class_id || '').trim();
+  const dateFrom  = (req.query.date_from || '').trim();
+  const dateTo    = (req.query.date_to   || '').trim();
+  const sort      = req.query.sort || 'newest';
+  const offset    = (page - 1) * limit;
+
+  let where = "s.status='ended'";
+  const params = [];
+  if (search)    { where += ` AND (s.title LIKE '%'||?||'%' OR u.name LIKE '%'||?||'%' OR c.name LIKE '%'||?||'%')`; params.push(search, search, search); }
+  if (teacherId) { where += ` AND s.teacher_id=?`;        params.push(Number(teacherId)); }
+  if (classId)   { where += ` AND s.class_id=?`;          params.push(Number(classId)); }
+  if (dateFrom)  { where += ` AND date(s.created_at)>=?`; params.push(dateFrom); }
+  if (dateTo)    { where += ` AND date(s.created_at)<=?`; params.push(dateTo); }
+
+  const orderBy = sort === 'oldest'        ? 's.ended_at ASC'
+                : sort === 'longest'       ? '(julianday(s.ended_at)-julianday(s.created_at)) DESC'
+                : sort === 'most_students' ? 'participant_count DESC'
+                :                            's.ended_at DESC';
+
+  const total = db.prepare(`
+    SELECT COUNT(*) AS n FROM classroom_sessions s
+    JOIN users u ON u.id = s.teacher_id
+    LEFT JOIN classes c ON c.id = s.class_id
+    WHERE ${where}
+  `).get(...params).n;
+
+  const sessions = db.prepare(`
+    SELECT s.id, s.title, s.created_at, s.ended_at, s.class_id, s.teacher_id,
+           u.name AS teacher_name,
+           c.name AS class_name,
+           (SELECT COUNT(*) FROM classroom_attendance WHERE session_id=s.id) AS participant_count,
+           (SELECT COUNT(*) FROM classroom_chat WHERE session_id=s.id) AS message_count,
+           COALESCE((SELECT MAX(page_num) FROM classroom_pages WHERE session_id=s.id),1) AS page_count,
+           (SELECT COUNT(*) FROM classroom_strokes WHERE session_id=s.id) AS stroke_count
+    FROM classroom_sessions s
+    JOIN users u ON u.id = s.teacher_id
+    LEFT JOIN classes c ON c.id = s.class_id
+    WHERE ${where}
+    ORDER BY ${orderBy}
+    LIMIT ? OFFSET ?
+  `).all(...params, limit, offset);
+
+  // Server-side aggregates (filtered)
+  const agg = db.prepare(`
+    SELECT COUNT(*) AS total_sessions,
+           COUNT(DISTINCT s.teacher_id) AS total_teachers,
+           COALESCE(SUM(CASE WHEN s.ended_at IS NOT NULL AND s.created_at IS NOT NULL
+               THEN CAST((julianday(s.ended_at) - julianday(s.created_at)) * 86400 AS INTEGER)
+               ELSE 0 END), 0) AS total_duration_sec
+    FROM classroom_sessions s
+    JOIN users u ON u.id = s.teacher_id
+    LEFT JOIN classes c ON c.id = s.class_id
+    WHERE ${where}
+  `).get(...params);
+
+  const aggPart = db.prepare(`
+    SELECT COALESCE(SUM(sub.pc),0) AS total_participants,
+           COALESCE(SUM(sub.mc),0) AS total_messages
+    FROM (
+      SELECT s.id,
+             (SELECT COUNT(*) FROM classroom_attendance WHERE session_id=s.id) AS pc,
+             (SELECT COUNT(*) FROM classroom_chat WHERE session_id=s.id) AS mc
+      FROM classroom_sessions s
+      JOIN users u ON u.id = s.teacher_id
+      LEFT JOIN classes c ON c.id = s.class_id
+      WHERE ${where}
+    ) sub
+  `).get(...params);
+
+  res.json({ sessions, total, page, pages: Math.ceil(total / limit),
+             agg: { ...agg, ...aggPart } });
+}
+
+/* GET /api/classroom/admin/teachers-list — teachers who have sessions (admin only) */
+function adminGetTeachersList(req, res) {
+  if (req.user.role !== 'admin') return res.status(403).json({ error: 'Нет доступа' });
+  const teachers = db.prepare(`
+    SELECT DISTINCT u.id, u.name
+    FROM classroom_sessions s
+    JOIN users u ON u.id = s.teacher_id
+    WHERE s.status='ended'
+    ORDER BY u.name
+  `).all();
+  res.json({ teachers });
+}
+
 function getTemplates(req, res) {
   const templates = db.prepare(
     'SELECT id, title, description, created_at FROM classroom_templates WHERE teacher_id=? ORDER BY created_at DESC'
@@ -953,6 +1463,41 @@ function loadTemplate(req, res) {
   res.json({ ok: true, pages: pagesData.length });
 }
 
+/* ── Guest token: generate / revoke ───────────────────────────────────── */
+function generateGuestToken(req, res) {
+  const sessionId = Number(req.params.id);
+  const session = db.prepare('SELECT id, teacher_id FROM classroom_sessions WHERE id=?').get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Not found' });
+  if (session.teacher_id !== req.user.id && req.user.role !== 'admin')
+    return res.status(403).json({ error: 'Forbidden' });
+
+  const token = crypto.randomBytes(24).toString('base64url');
+  db.prepare('UPDATE classroom_sessions SET guest_token=? WHERE id=?').run(token, sessionId);
+  res.json({ token, url: `/guest-board.html?token=${token}` });
+}
+
+function revokeGuestToken(req, res) {
+  const sessionId = Number(req.params.id);
+  const session = db.prepare('SELECT id, teacher_id FROM classroom_sessions WHERE id=?').get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Not found' });
+  if (session.teacher_id !== req.user.id && req.user.role !== 'admin')
+    return res.status(403).json({ error: 'Forbidden' });
+
+  db.prepare('UPDATE classroom_sessions SET guest_token=NULL WHERE id=?').run(sessionId);
+  res.json({ ok: true });
+}
+
+function getGuestToken(req, res) {
+  const sessionId = Number(req.params.id);
+  const session = db.prepare('SELECT id, teacher_id, guest_token FROM classroom_sessions WHERE id=?').get(sessionId);
+  if (!session) return res.status(404).json({ error: 'Not found' });
+  if (session.teacher_id !== req.user.id && req.user.role !== 'admin')
+    return res.status(403).json({ error: 'Forbidden' });
+
+  if (!session.guest_token) return res.json({ token: null, url: null });
+  res.json({ token: session.guest_token, url: `/guest-board.html?token=${session.guest_token}` });
+}
+
 module.exports = {
   createSession,
   getSession,
@@ -975,12 +1520,20 @@ module.exports = {
   addPage,
   changePage,
   updatePageTemplate,
+  getPages,
+  renamePage,
+  duplicatePage,
+  deletePage,
   raiseHand,
   lowerHand,
   getHands,
   mutePeer,
   screenStart,
   screenStop,
+  simOpen,
+  simClose,
+  simState,
+  simMode,
   clearPage,
   previewStroke,
   broadcastCursor,
@@ -995,4 +1548,16 @@ module.exports = {
   saveTemplate,
   deleteTemplate,
   loadTemplate,
+  getClassHistory,
+  getMyHistory,
+  getSessionSummary,
+  exportChat,
+  getAllNotes,
+  deleteHistorySession,
+  adminGetActiveSessions,
+  adminGetAllSessions,
+  adminGetTeachersList,
+  generateGuestToken,
+  revokeGuestToken,
+  getGuestToken,
 };
diff --git a/backend/src/db/migrate.js b/backend/src/db/migrate.js
index e8a2c5d..a757ff3 100644
--- a/backend/src/db/migrate.js
+++ b/backend/src/db/migrate.js
@@ -862,7 +862,8 @@ db.exec(`
     ('feature_knowledge_map_enabled', '1'),
     ('feature_board_enabled',         '1'),
     ('feature_biochem_enabled',       '1'),
-    ('feature_live_quiz_enabled',     '1');
+    ('feature_live_quiz_enabled',     '1'),
+    ('feature_classroom_enabled',     '1');
 `);
 
 /* ── Performance indexes ───────────────────────────────────────────────── */
@@ -2773,8 +2774,9 @@ db.exec(`
     UNIQUE(session_id, page_num)
   )
 `);
-// Add template column to existing classroom_pages tables (idempotent)
+// Add template + name columns to existing classroom_pages tables (idempotent)
 try { db.exec(`ALTER TABLE classroom_pages ADD COLUMN template TEXT NOT NULL DEFAULT 'blank'`); } catch (_) { /* already exists */ }
+try { db.exec(`ALTER TABLE classroom_pages ADD COLUMN name TEXT`); } catch (_) { /* already exists */ }
 
 db.exec(`
   CREATE TABLE IF NOT EXISTS classroom_strokes (
@@ -2854,6 +2856,9 @@ db.exec(`
   )
 `);
 
+// Guest token for classroom sessions (public read-only whiteboard access)
+try { db.exec("ALTER TABLE classroom_sessions ADD COLUMN guest_token TEXT UNIQUE"); } catch {}
+
 // Persistent draw permissions (survives server restart)
 db.exec(`
   CREATE TABLE IF NOT EXISTS classroom_draw_permissions (
diff --git a/backend/src/routes/classroom.js b/backend/src/routes/classroom.js
index 91f6e96..b54f187 100644
--- a/backend/src/routes/classroom.js
+++ b/backend/src/routes/classroom.js
@@ -30,9 +30,16 @@ const auth    = [authMiddleware];
 const chatLimiter = rateLimit({ windowMs: 5_000, max: 5, message: 'Слишком много сообщений, подождите' });
 
 // Template library — MUST be before /:id to avoid shadowing
+router.get('/admin/active',               ...teacher, c.adminGetActiveSessions);
+router.get('/admin/sessions',             ...teacher, c.adminGetAllSessions);
+router.get('/admin/teachers-list',        ...teacher, c.adminGetTeachersList);
 router.get('/templates',                  ...teacher, c.getTemplates);
 router.delete('/templates/:tid',          ...teacher, c.deleteTemplate);
 
+// History — MUST be before /:id to avoid shadowing
+router.get('/my/history',                 ...auth,    c.getMyHistory);
+router.get('/class/:classId/history',     ...auth,    c.getClassHistory);
+
 // Session lifecycle
 router.post('/',                          ...teacher, c.createSession);
 router.get('/online-students',            ...teacher, c.getOnlineStudents);
@@ -65,9 +72,13 @@ router.patch('/:id/strokes/:strokeId',    ...auth,    c.updateStroke);
 router.post('/:id/stroke-preview',        ...auth,    c.previewStroke);
 
 // Multi-page
-router.post('/:id/pages',                 ...teacher, c.addPage);
-router.put('/:id/page',                   ...teacher, c.changePage);
-router.patch('/:id/page-template',        ...teacher, c.updatePageTemplate);
+router.get('/:id/pages',                          ...auth,    c.getPages);
+router.post('/:id/pages',                         ...teacher, c.addPage);
+router.put('/:id/page',                           ...teacher, c.changePage);
+router.patch('/:id/page-template',                ...teacher, c.updatePageTemplate);
+router.patch('/:id/pages/:pageNum/name',          ...teacher, c.renamePage);
+router.post('/:id/pages/:pageNum/duplicate',      ...teacher, c.duplicatePage);
+router.delete('/:id/pages/:pageNum',              ...teacher, c.deletePage);
 
 // Hand raise
 router.post('/:id/hand',                  ...auth,    c.raiseHand);
@@ -82,6 +93,12 @@ router.post('/:id/mute',                  ...teacher, c.mutePeer);
 router.post('/:id/screen',                ...teacher, c.screenStart);
 router.delete('/:id/screen',              ...teacher, c.screenStop);
 
+// Simulation: open/close/state/mode for all participants
+router.post('/:id/sim',                   ...teacher, c.simOpen);
+router.delete('/:id/sim',                 ...teacher, c.simClose);
+router.post('/:id/sim/state',             ...teacher, c.simState);
+router.post('/:id/sim/mode',              ...teacher, c.simMode);
+
 // Cursor broadcast (all participants)
 router.post('/:id/cursor',                ...auth,    c.broadcastCursor);
 
@@ -95,10 +112,21 @@ router.delete('/:id/allow-draw/:userId',  ...teacher, c.revokeDraw);
 // Session notes (per user)
 router.get('/:id/notes',                  ...auth,    c.getNotes);
 router.put('/:id/notes',                  ...auth,    c.saveNotes);
+router.get('/:id/notes/all',              ...teacher, c.getAllNotes);
+
+// Session summary & history detail
+router.get('/:id/summary',                ...auth,    c.getSessionSummary);
+router.get('/:id/chat/export',            ...teacher, c.exportChat);
+router.delete('/:id/history',             ...teacher, c.deleteHistorySession);
 
 // Save current session as template
 router.post('/:id/save-template',         ...teacher, c.saveTemplate);
 // Load template into current session
 router.post('/:id/load-template',         ...teacher, c.loadTemplate);
 
+// Guest token (generate/revoke/get)
+router.get('/:id/guest-token',            ...teacher, c.getGuestToken);
+router.post('/:id/guest-token',           ...teacher, c.generateGuestToken);
+router.delete('/:id/guest-token',         ...teacher, c.revokeGuestToken);
+
 module.exports = router;
diff --git a/backend/src/routes/guestClassroom.js b/backend/src/routes/guestClassroom.js
new file mode 100644
index 0000000..45497ef
--- /dev/null
+++ b/backend/src/routes/guestClassroom.js
@@ -0,0 +1,168 @@
+/**
+ * Public (no-auth) guest classroom routes.
+ * Guests access the whiteboard read-only via a token in the URL.
+ *
+ *  GET  /api/classroom/guest/:token           — session info (pre-join)
+ *  POST /api/classroom/guest/:token/join      — choose display name, get guestId
+ *  GET  /api/classroom/guest/:token/strokes   — strokes for ?page_num=N
+ *  GET  /api/classroom/guest/:token/stream    — SSE stream (?guestId=X)
+ *  POST /api/classroom/guest/:token/leave     — notify departure (optional)
+ */
+
+const router  = require('express').Router();
+const crypto  = require('crypto');
+const db      = require('../db/db');
+const { addGuestClient, removeGuestClient, emitToGuests, emit } = require('../sse');
+
+/* ── In-memory guest registry (cleared on server restart — fine for guests) */
+const guests = new Map(); // guestId → { name, sessionId, connectedAt }
+
+/* Helper: look up session by token (active only) */
+function sessionByToken(token) {
+  return db.prepare(
+    "SELECT id, title, status, current_page, teacher_id FROM classroom_sessions WHERE guest_token=?"
+  ).get(token);
+}
+
+/* Helper: emit guest-joined/left to the real participants of the session */
+function notifySession(sessionId, data) {
+  const session = db.prepare('SELECT class_id, teacher_id FROM classroom_sessions WHERE id=?').get(sessionId);
+  if (!session) return;
+  const { emit: _emit, emitToClass } = require('../sse');
+  if (session.class_id) {
+    emitToClass(session.class_id, data);
+    _emit(session.teacher_id, data);
+  } else {
+    _emit(session.teacher_id, data);
+    const invites = db.prepare('SELECT user_id FROM classroom_invites WHERE session_id=?').all(sessionId);
+    for (const { user_id } of invites) _emit(user_id, data);
+  }
+}
+
+/* ── GET /api/classroom/guest/:token ─── session info (pre-join screen) */
+router.get('/:token', (req, res) => {
+  const session = sessionByToken(req.params.token);
+  if (!session) return res.status(404).json({ error: 'Ссылка недействительна' });
+
+  const pageCount = db.prepare(
+    'SELECT COUNT(*) AS c FROM classroom_pages WHERE session_id=?'
+  ).get(session.id).c || 1;
+
+  res.json({
+    id:           session.id,
+    title:        session.title || 'Онлайн-урок',
+    status:       session.status,
+    current_page: session.current_page || 1,
+    page_count:   pageCount,
+  });
+});
+
+/* ── POST /api/classroom/guest/:token/join ─── choose name, get guestId */
+router.post('/:token/join', (req, res) => {
+  const session = sessionByToken(req.params.token);
+  if (!session) return res.status(404).json({ error: 'Ссылка недействительна' });
+  if (session.status !== 'active')
+    return res.status(403).json({ error: 'Урок ещё не начался или уже завершён' });
+
+  const rawName = (req.body?.name || '').trim().slice(0, 40);
+  const name    = rawName || 'Гость';
+
+  const guestId = 'g_' + crypto.randomBytes(12).toString('base64url');
+  guests.set(guestId, { name, sessionId: session.id, connectedAt: Date.now() });
+
+  // Notify real participants that a guest joined
+  notifySession(session.id, {
+    type:       'classroom_guest_joined',
+    sessionId:  session.id,
+    guestId,
+    guestName:  name,
+  });
+
+  const pageCount = db.prepare(
+    'SELECT COUNT(*) AS c FROM classroom_pages WHERE session_id=?'
+  ).get(session.id).c || 1;
+
+  res.json({
+    guestId,
+    sessionId:    session.id,
+    title:        session.title || 'Онлайн-урок',
+    current_page: session.current_page || 1,
+    page_count:   pageCount,
+  });
+});
+
+/* ── GET /api/classroom/guest/:token/strokes ─── whiteboard strokes */
+router.get('/:token/strokes', (req, res) => {
+  const session = sessionByToken(req.params.token);
+  if (!session) return res.status(404).json({ error: 'Ссылка недействительна' });
+  if (session.status !== 'active')
+    return res.status(403).json({ error: 'Урок не активен' });
+
+  const pageNum  = Math.max(1, Number(req.query.page_num) || 1);
+  const sinceSeq = Number(req.query.since_seq) || 0;
+
+  const strokes = sinceSeq > 0
+    ? db.prepare(
+        'SELECT id, tool, data, seq FROM classroom_strokes WHERE session_id=? AND page_num=? AND seq > ? ORDER BY seq'
+      ).all(session.id, pageNum, sinceSeq)
+    : db.prepare(
+        'SELECT id, tool, data, seq FROM classroom_strokes WHERE session_id=? AND page_num=? ORDER BY seq'
+      ).all(session.id, pageNum);
+
+  const pageRow = db.prepare(
+    'SELECT template, name FROM classroom_pages WHERE session_id=? AND page_num=?'
+  ).get(session.id, pageNum);
+
+  const parsed = strokes.map(s => ({ ...s, data: JSON.parse(s.data || '{}') }));
+  res.json({ strokes: parsed, template: pageRow?.template || 'blank', seq: parsed.at(-1)?.seq || 0 });
+});
+
+/* ── GET /api/classroom/guest/:token/stream ─── SSE */
+router.get('/:token/stream', (req, res) => {
+  const session = sessionByToken(req.params.token);
+  if (!session) return res.status(404).end();
+  if (session.status !== 'active') return res.status(403).end();
+
+  const guestId = req.query.guestId;
+  const guest   = guestId ? guests.get(guestId) : null;
+
+  res.setHeader('Content-Type',  'text/event-stream');
+  res.setHeader('Cache-Control', 'no-cache');
+  res.setHeader('Connection',    'keep-alive');
+  res.setHeader('X-Accel-Buffering', 'no'); // nginx: disable buffering
+  res.flushHeaders();
+  res.write(`data: ${JSON.stringify({ type: 'connected' })}\n\n`);
+
+  addGuestClient(session.id, res);
+
+  req.on('close', () => {
+    removeGuestClient(session.id, res);
+    if (guest) {
+      guests.delete(guestId);
+      notifySession(session.id, {
+        type:      'classroom_guest_left',
+        sessionId: session.id,
+        guestId,
+        guestName: guest.name,
+      });
+    }
+  });
+});
+
+/* ── POST /api/classroom/guest/:token/leave ─── explicit goodbye */
+router.post('/:token/leave', (req, res) => {
+  const guestId = req.body?.guestId;
+  const guest   = guestId ? guests.get(guestId) : null;
+  if (guest) {
+    guests.delete(guestId);
+    notifySession(guest.sessionId, {
+      type:      'classroom_guest_left',
+      sessionId: guest.sessionId,
+      guestId,
+      guestName: guest.name,
+    });
+  }
+  res.json({ ok: true });
+});
+
+module.exports = router;
diff --git a/backend/src/server.js b/backend/src/server.js
index 5350549..781c167 100644
--- a/backend/src/server.js
+++ b/backend/src/server.js
@@ -32,8 +32,9 @@ const flashcardRoutes     = require('./routes/flashcards');
 const settingsRoutes      = require('./routes/settings');
 const analyticsRoutes     = require('./routes/analytics');
 const liveRoutes          = require('./routes/live');
-const classroomRoutes     = require('./routes/classroom');
-const gamesRoutes         = require('./routes/games');
+const classroomRoutes      = require('./routes/classroom');
+const guestClassroomRoutes = require('./routes/guestClassroom');
+const gamesRoutes          = require('./routes/games');
 const knowledgeMapRoutes  = require('./routes/knowledgeMap');
 const petRoutes           = require('./routes/pet');
 const collectionRoutes    = require('./routes/collection');
@@ -77,8 +78,8 @@ app.use((_req, res, next) => {
     "font-src 'self' https://fonts.gstatic.com https://cdn.jsdelivr.net; " +
     "img-src 'self' data: blob: https:; " +
     "connect-src 'self' https://cdn.jsdelivr.net https://stun.l.google.com; " +
-    "frame-src https://www.youtube.com https://rutube.ru https://player.vimeo.com; " +
-    "frame-ancestors 'none'" +
+    "frame-src 'self' https://www.youtube.com https://rutube.ru https://player.vimeo.com; " +
+    "frame-ancestors 'self'" +
     (isProd ? "; upgrade-insecure-requests" : "")
   );
   if (isProd) res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains');
@@ -143,8 +144,9 @@ app.use('/api/search',       searchRoutes);
 app.use('/api/flashcards',   flashcardRoutes);
 app.use('/api/settings',    settingsRoutes);
 app.use('/api/analytics',   analyticsRoutes);
-app.use('/api/live',         liveRoutes);
-app.use('/api/classroom',    classroomRoutes);
+app.use('/api/live',              liveRoutes);
+app.use('/api/classroom/guest',   guestClassroomRoutes); // public — MUST be before /api/classroom
+app.use('/api/classroom',         classroomRoutes);
 app.use('/api/games',        gamesRoutes);
 app.use('/api/knowledge-map', knowledgeMapRoutes);
 app.use('/api/pet',          petRoutes);
@@ -308,6 +310,9 @@ app.use((_req, res) => res.status(404).sendFile(path.join(frontendDir, '404.html
 
 const server = app.listen(PORT, () => logger.info(`Server running on port ${PORT}`, { env: config.NODE_ENV }));
 
+/* ── WebSocket server for low-latency classroom events (cursor + preview) ── */
+require('./ws-server').attach(server);
+
 /* ── Graceful shutdown ── */
 function shutdown(signal) {
   logger.info(`${signal} received — shutting down gracefully`);
diff --git a/backend/src/sse.js b/backend/src/sse.js
index 4c1307e..7234839 100644
--- a/backend/src/sse.js
+++ b/backend/src/sse.js
@@ -1,5 +1,6 @@
 /* ── SSE registry — shared between controllers ─────────────────────────── */
-const clients = new Map(); // userId -> Set<res>
+const clients      = new Map(); // userId   -> Set<res>
+const guestClients = new Map(); // sessionId -> Set<res>
 const db = require('./db/db');
 
 function addClient(userId, res) {
@@ -34,6 +35,15 @@ setInterval(() => {
     }
     if (conns.size === 0) clients.delete(userId);
   }
+  for (const [sessionId, conns] of guestClients) {
+    for (const res of conns) {
+      try {
+        if (res.writableEnded || res.destroyed) { conns.delete(res); continue; }
+        res.write(': heartbeat\n\n');
+      } catch { conns.delete(res); }
+    }
+    if (conns.size === 0) guestClients.delete(sessionId);
+  }
 }, 30_000).unref();
 
 /* Broadcast to all members of a class */
@@ -42,9 +52,34 @@ function emitToClass(classId, data) {
   for (const { user_id } of members) emit(user_id, data);
 }
 
+/* ── Guest SSE (session-scoped, no userId) ── */
+function addGuestClient(sessionId, res) {
+  if (!guestClients.has(sessionId)) guestClients.set(sessionId, new Set());
+  guestClients.get(sessionId).add(res);
+}
+
+function removeGuestClient(sessionId, res) {
+  const set = guestClients.get(sessionId);
+  if (!set) return;
+  set.delete(res);
+  if (set.size === 0) guestClients.delete(sessionId);
+}
+
+function emitToGuests(sessionId, data) {
+  const set = guestClients.get(sessionId);
+  if (!set?.size) return;
+  const payload = `data: ${JSON.stringify(data)}\n\n`;
+  for (const res of set) {
+    try { res.write(payload); } catch {}
+  }
+}
+
 /* Returns array of user IDs currently connected via SSE */
 function getOnlineUserIds() {
   return [...clients.keys()];
 }
 
-module.exports = { addClient, removeClient, emit, emitToClass, getOnlineUserIds };
+module.exports = {
+  addClient, removeClient, emit, emitToClass, getOnlineUserIds,
+  addGuestClient, removeGuestClient, emitToGuests,
+};
diff --git a/backend/src/ws-server.js b/backend/src/ws-server.js
new file mode 100644
index 0000000..ea33510
--- /dev/null
+++ b/backend/src/ws-server.js
@@ -0,0 +1,159 @@
+/**
+ * WebSocket server for low-latency real-time classroom events.
+ *
+ * Handles two message types from clients:
+ *   { type:'cursor',  sessionId, x, y, pageNum }
+ *   { type:'preview', sessionId, liveId, tool, data, pageNum, cancel }
+ *
+ * Auth: JWT token in ?token= query param on upgrade request.
+ * Forwards events via SSE to session participants (no DB write).
+ *
+ * This replaces the HTTP POST /cursor and /stroke-preview endpoints
+ * for connected clients, reducing per-event latency from ~50-120ms to ~2-5ms.
+ */
+const { WebSocketServer } = require('ws');
+const jwt = require('jsonwebtoken');
+const db  = require('./db/db');
+const { emit, emitToGuests } = require('./sse');
+
+/* ── Session member cache (avoids DB query per WS message) ────────────── */
+const _cache = new Map(); // sessionId → { teacherId, classId, userIds, ts }
+const CACHE_TTL = 30_000;
+
+function _getMembers(sessionId) {
+  const c = _cache.get(sessionId);
+  if (c && Date.now() - c.ts < CACHE_TTL) return c;
+
+  const session = db.prepare(
+    "SELECT class_id, teacher_id FROM classroom_sessions WHERE id=? AND status='active'"
+  ).get(sessionId);
+  if (!session) { _cache.delete(sessionId); return null; }
+
+  let userIds;
+  if (session.class_id) {
+    const members = db.prepare('SELECT user_id FROM class_members WHERE class_id=?').all(session.class_id);
+    userIds = [session.teacher_id, ...members.map(m => m.user_id)];
+  } else {
+    const invites = db.prepare('SELECT user_id FROM classroom_invites WHERE session_id=?').all(sessionId);
+    userIds = [session.teacher_id, ...invites.map(i => i.user_id)];
+  }
+
+  const entry = { teacherId: session.teacher_id, classId: session.class_id, userIds, ts: Date.now() };
+  _cache.set(sessionId, entry);
+  return entry;
+}
+
+function _invalidateSession(sessionId) {
+  _cache.delete(sessionId);
+}
+
+/* Forward serialized SSE payload to all session members */
+function _broadcast(sessionId, data, includeGuests) {
+  const members = _getMembers(sessionId);
+  if (!members) return;
+  for (const uid of members.userIds) emit(uid, data);
+  if (includeGuests) emitToGuests(sessionId, data);
+}
+
+/* Check draw permissions (teacher always can; students need explicit grant) */
+const _drawCache = new Map(); // `${sessionId}:${userId}` → { allowed, ts }
+const DRAW_TTL = 10_000;
+
+function _canDraw(sessionId, userId, members) {
+  if (!members) return false;
+  if (members.teacherId === userId) return true;
+  const key = `${sessionId}:${userId}`;
+  const c = _drawCache.get(key);
+  if (c && Date.now() - c.ts < DRAW_TTL) return c.allowed;
+  const allowed = !!db.prepare(
+    'SELECT 1 FROM classroom_draw_permissions WHERE session_id=? AND user_id=?'
+  ).get(sessionId, userId);
+  _drawCache.set(key, { allowed, ts: Date.now() });
+  return allowed;
+}
+
+/* ── WebSocket server ──────────────────────────────────────────────────── */
+function attach(httpServer) {
+  const wss = new WebSocketServer({ server: httpServer, path: '/ws' });
+
+  wss.on('connection', (ws, req) => {
+    /* ── Auth ── */
+    let user = null;
+    try {
+      const url   = new URL(req.url, 'http://localhost');
+      const token = url.searchParams.get('token') || '';
+      user = jwt.verify(token, process.env.JWT_SECRET, { algorithms: ['HS256'] });
+    } catch {
+      ws.close(4001, 'Unauthorized');
+      return;
+    }
+
+    ws.userId   = user.id;
+    ws.userName = user.name || user.email || '';
+    ws.isAlive  = true;
+
+    ws.on('pong', () => { ws.isAlive = true; });
+
+    ws.on('message', raw => {
+      let msg;
+      try { msg = JSON.parse(raw); } catch { return; }
+
+      const { type, sessionId } = msg;
+      if (!sessionId || typeof sessionId !== 'number') return;
+
+      /* ── cursor broadcast ── */
+      if (type === 'cursor') {
+        const members = _getMembers(sessionId);
+        if (!members || !members.userIds.includes(ws.userId)) return;
+
+        _broadcast(sessionId, {
+          type:      'classroom_cursor',
+          sessionId,
+          x:         msg.x,
+          y:         msg.y,
+          pageNum:   msg.pageNum || 1,
+          userId:    ws.userId,
+          userName:  ws.userName,
+        }, true);
+
+      /* ── stroke preview broadcast ── */
+      } else if (type === 'preview') {
+        const members = _getMembers(sessionId);
+        if (!members) return;
+        if (!_canDraw(sessionId, ws.userId, members)) return;
+
+        const liveId = msg.liveId;
+        if (!liveId && !msg.cancel) return;
+
+        _broadcast(sessionId, {
+          type:      'classroom_stroke_preview',
+          sessionId,
+          pageNum:   msg.pageNum || 1,
+          liveId,
+          tool:      msg.tool,
+          data:      msg.data,
+          cancel:    msg.cancel || false,
+          userId:    ws.userId,
+          userName:  ws.userName,
+        }, true);
+      }
+    });
+
+    ws.on('error', () => {});
+    ws.on('close', () => {});
+  });
+
+  /* ── Ping/pong keepalive ── */
+  const pingTimer = setInterval(() => {
+    for (const ws of wss.clients) {
+      if (!ws.isAlive) { ws.terminate(); continue; }
+      ws.isAlive = false;
+      try { ws.ping(); } catch {}
+    }
+  }, 30_000);
+  wss.on('close', () => clearInterval(pingTimer));
+
+  return wss;
+}
+
+module.exports = { attach, invalidateSession: _invalidateSession };
diff --git a/frontend/admin.html b/frontend/admin.html
index ebf548a..4d8d988 100644
--- a/frontend/admin.html
+++ b/frontend/admin.html
@@ -709,6 +709,124 @@
     }
     .sl-filter-select:focus { border-color: var(--violet); outline: none; }
     .sl-count { font-size: 0.78rem; color: #8898AA; font-weight: 600; }
+
+    /* ══════════ CLASSROOM ADMIN TAB ══════════ */
+    .cr-admin-section { margin-bottom: 40px; }
+    .cr-admin-section-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800;
+      color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em;
+      margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
+    }
+    .cr-admin-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
+
+    /* Active session card */
+    .cr-live-list { display: flex; flex-direction: column; gap: 10px; }
+    .cr-live-card {
+      display: flex; align-items: center; gap: 14px;
+      background: var(--surface); border: 1.5px solid var(--border);
+      border-left: 4px solid #EF4444; border-radius: 16px;
+      padding: 14px 18px; transition: box-shadow 0.15s, transform 0.15s;
+    }
+    .cr-live-card:hover { box-shadow: 0 4px 20px rgba(15,23,42,0.1); transform: translateX(2px); }
+    .cr-live-pulse {
+      width: 10px; height: 10px; border-radius: 50%; background: #EF4444; flex-shrink: 0;
+      animation: pulse-live 1.4s ease-in-out infinite;
+    }
+    @keyframes pulse-live {
+      0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
+      50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
+    }
+    .cr-live-info { flex: 1; min-width: 0; }
+    .cr-live-title { font-size: 0.96rem; font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .cr-live-meta  { font-size: 0.81rem; color: var(--text-3); }
+    .cr-live-badges { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
+    .cr-badge {
+      display: inline-flex; align-items: center; gap: 5px;
+      padding: 4px 10px; border-radius: 99px; font-size: 0.76rem; font-weight: 700;
+    }
+    .cr-badge-online { background: rgba(6,214,100,0.12); color: #059652; }
+    .cr-badge-msgs   { background: rgba(6,214,224,0.12); color: #05aab3; }
+    .cr-badge-dur    { background: rgba(155,93,229,0.1);  color: var(--violet); }
+    .cr-live-actions { display: flex; gap: 6px; flex-shrink: 0; }
+
+    /* History session row */
+    .cr-hist-list { display: flex; flex-direction: column; gap: 8px; }
+    .cr-hist-row {
+      display: flex; align-items: center; gap: 14px;
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: 14px; padding: 12px 16px; cursor: pointer;
+      transition: border-color 0.15s, box-shadow 0.15s;
+    }
+    .cr-hist-row:hover { border-color: var(--violet); box-shadow: 0 2px 12px rgba(109,40,217,0.07); }
+    .cr-hist-row.open  { border-color: var(--violet); background: rgba(155,93,229,0.03); border-radius: 14px 14px 0 0; border-bottom: none; }
+    .cr-hist-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(155,93,229,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+    .cr-hist-main { flex: 1; min-width: 0; }
+    .cr-hist-title { font-size: 0.94rem; font-weight: 700; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .cr-hist-meta  { font-size: 0.79rem; color: var(--text-3); }
+    .cr-hist-chips { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
+    .cr-hist-chevron { width: 18px; height: 18px; color: var(--text-3); transition: transform 0.2s; flex-shrink: 0; }
+    .cr-hist-row.open .cr-hist-chevron { transform: rotate(180deg); color: var(--violet); }
+
+    /* Session detail drawer */
+    .cr-detail-drawer {
+      overflow: hidden; max-height: 0; transition: max-height 0.35s ease;
+      border: 1px solid var(--violet); border-top: none;
+      border-radius: 0 0 14px 14px; background: rgba(238,242,255,0.5);
+      margin-bottom: 0;
+    }
+    .cr-detail-drawer.open { max-height: 3000px; margin-bottom: 8px; }
+    .cr-detail-inner { padding: 20px 24px; }
+    .cr-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
+    @media(max-width:700px) { .cr-detail-grid { grid-template-columns: repeat(2, 1fr); } }
+    .cr-detail-stat {
+      background: #fff; border: 1px solid var(--border); border-radius: 12px;
+      padding: 14px 16px; text-align: center;
+    }
+    .cr-detail-val   { font-family: 'Unbounded', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--violet); margin-bottom: 4px; }
+    .cr-detail-label { font-size: 0.72rem; color: var(--text-3); font-weight: 700; text-transform: uppercase; }
+    .cr-attend-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
+    .cr-attend-row {
+      display: flex; align-items: center; gap: 12px; padding: 8px 12px;
+      border: 1px solid var(--border); border-radius: 10px; background: #fff;
+      font-size: 0.88rem;
+    }
+    .cr-attend-name { flex: 1; font-weight: 600; }
+    .cr-attend-time { color: var(--text-3); font-size: 0.8rem; }
+    .cr-attend-dur  { color: var(--cyan); font-weight: 700; font-size: 0.8rem; min-width: 60px; text-align: right; }
+    .cr-pages-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 8px; margin-top: 10px; }
+    .cr-page-chip {
+      display: flex; align-items: center; justify-content: space-between;
+      background: #fff; border: 1px solid var(--border); border-radius: 8px;
+      padding: 8px 12px; font-size: 0.82rem;
+    }
+    .cr-page-num  { font-weight: 700; color: var(--violet); }
+    .cr-page-cnt  { color: var(--text-3); font-size: 0.76rem; }
+    .cr-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
+    .btn-cr-export { padding: 8px 18px; border: 1.5px solid var(--cyan); border-radius: 99px; background: rgba(6,214,224,0.06); color: #05aab3; font-family:'Manrope',sans-serif; font-size:0.82rem; font-weight:700; cursor:pointer; transition: all 0.15s; }
+    .btn-cr-export:hover { background: rgba(6,214,224,0.15); }
+    .btn-cr-del   { padding: 8px 18px; border: 1.5px solid rgba(241,91,181,0.4); border-radius: 99px; background: transparent; color: var(--pink); font-family:'Manrope',sans-serif; font-size:0.82rem; font-weight:700; cursor:pointer; transition: all 0.15s; }
+    .btn-cr-del:hover { background: rgba(241,91,181,0.08); border-color: var(--pink); }
+    .btn-cr-end   { padding: 8px 18px; border: none; border-radius: 99px; background: #EF4444; color: #fff; font-family:'Manrope',sans-serif; font-size:0.82rem; font-weight:700; cursor:pointer; transition: opacity 0.15s; }
+    .btn-cr-end:hover { opacity: 0.85; }
+
+    /* Pagination */
+    .cr-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
+    .cr-page-btn {
+      min-width: 36px; height: 36px; padding: 0 12px; border: 1.5px solid var(--border);
+      border-radius: 10px; background: var(--surface); font-family:'Manrope',sans-serif;
+      font-size:0.85rem; font-weight:700; color:var(--text-2); cursor:pointer; transition:all 0.14s;
+      display:flex; align-items:center; justify-content:center;
+    }
+    .cr-page-btn:hover:not(:disabled) { border-color:var(--violet); color:var(--violet); }
+    .cr-page-btn.active { background:var(--violet); border-color:var(--violet); color:#fff; }
+    .cr-page-btn:disabled { opacity:0.4; cursor:default; }
+    .cr-page-info { font-size:0.82rem; color:var(--text-3); font-weight:600; }
+
+    /* toolbar for classroom history */
+    .cr-hist-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
+    .cr-hist-search { flex: 1; min-width: 180px; padding: 9px 14px; border: 1.5px solid var(--border-h); border-radius: var(--r-pill); font-family:'Manrope',sans-serif; font-size:0.88rem; background:var(--surface); color:var(--text); }
+    .cr-hist-search:focus { outline:none; border-color:var(--violet); }
+    .cr-hist-count { font-size:0.85rem; color:var(--text-3); font-weight:600; white-space:nowrap; }
   </style>
 </head>
 <body>
@@ -733,6 +851,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"    class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html"           class="sb-link"><i data-lucide="leaf"     class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom" class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <span class="sb-link active"><i data-lucide="settings" class="sb-icon"></i><span class="sb-lbl">Управление</span></span>
     </nav>
@@ -762,6 +881,9 @@
       <button class="admin-nav-item" data-tab="sessions" onclick="switchTab(this)">
         <i data-lucide="clock" style="width:15px;height:15px"></i> История сессий
       </button>
+      <button class="admin-nav-item" data-tab="classroom" onclick="switchTab(this)">
+        <i data-lucide="video" style="width:15px;height:15px"></i> Онлайн-уроки
+      </button>
 
       <div class="admin-nav-sep"></div>
       <div class="admin-nav-label">Контент</div>
@@ -967,6 +1089,51 @@
       <div id="t-body"><div class="spinner"></div></div>
     </div>
 
+    <!-- ── Онлайн-уроки ── -->
+    <div class="tab-pane" id="tab-classroom">
+
+      <!-- Module master toggle -->
+      <div style="display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1.5px solid var(--border-h);border-radius:var(--r-lg);padding:20px 24px;margin-bottom:32px">
+        <div>
+          <div style="font-size:0.97rem;font-weight:700;margin-bottom:4px">Модуль онлайн-уроков</div>
+          <div class="perm-desc" style="margin:0">Если отключить, учителя не смогут создавать новые уроки. Уже активные сессии продолжат работу до завершения.</div>
+        </div>
+        <label class="perm-toggle" id="cr-master-lbl" title="Включить / выключить модуль" style="margin-left:24px;flex-shrink:0">
+          <input type="checkbox" id="cr-master-chk" onchange="crMasterToggle(this.checked)" checked />
+          <span class="perm-track"></span>
+          <span class="perm-thumb"></span>
+        </label>
+      </div>
+
+      <!-- Active sessions -->
+      <div class="cr-admin-section">
+        <div class="cr-admin-section-title">
+          <svg class="ic" viewBox="0 0 24 24" style="width:14px;height:14px"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
+          Активные уроки
+          <span id="cr-live-refresh-btn" style="font-size:0.76rem;font-weight:600;color:var(--violet);cursor:pointer;text-transform:none;letter-spacing:0;margin-left:-4px" onclick="loadCrActiveSessions()">
+            <svg class="ic" viewBox="0 0 24 24" style="width:12px;height:12px;vertical-align:-2px"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
+            Обновить
+          </span>
+        </div>
+        <div id="cr-live-list"><div class="spinner"></div></div>
+      </div>
+
+      <!-- Session history -->
+      <div class="cr-admin-section">
+        <div class="cr-admin-section-title">
+          <svg class="ic" viewBox="0 0 24 24" style="width:14px;height:14px"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+          История уроков
+        </div>
+        <div class="cr-hist-toolbar">
+          <input class="cr-hist-search" id="cr-hist-q" type="text" placeholder="Поиск по теме или учителю…" oninput="crHistDebounce()">
+          <span class="cr-hist-count" id="cr-hist-count"></span>
+        </div>
+        <div id="cr-hist-list"><div class="spinner"></div></div>
+        <div id="cr-hist-pagination"></div>
+      </div>
+
+    </div>
+
     <!-- ── Права доступа ── -->
     <div class="tab-pane" id="tab-permissions">
       <div class="perm-header">
@@ -4321,9 +4488,13 @@
       { id: 'magnetic',       cat: 'Физика',     title: 'Магнитное поле токов' },
       { id: 'circuit',        cat: 'Физика',     title: 'Электрические цепи' },
       { id: 'coulomb',        cat: 'Физика',     title: 'Закон Кулона' },
+      { id: 'hydrostatics',   cat: 'Физика',     title: 'Гидростатика' },
       { id: 'dynamics',       cat: 'Физика',     title: 'Динамика' },
       { id: 'thinlens',       cat: 'Физика',     title: 'Тонкая линза' },
       { id: 'refraction',     cat: 'Физика',     title: 'Преломление света' },
+      { id: 'mirrors',        cat: 'Физика',     title: 'Зеркала' },
+      { id: 'isoprocess',     cat: 'Физика',     title: 'Изопроцессы' },
+      { id: 'waves',          cat: 'Физика',     title: 'Волны и звук' },
       { id: 'molphys',        cat: 'Химия',      title: 'Молекулярная физика' },
       { id: 'chemistry',      cat: 'Химия',      title: 'Химические реакции' },
       { id: 'equilibrium',    cat: 'Химия',      title: 'Химическое равновесие' },
@@ -4814,6 +4985,260 @@
       } catch (e) { el.innerHTML = `<div style="color:var(--pink)">${esc(e.message)}</div>`; }
     }
 
+    /* ════════════════════════════════════════════════
+       ОНЛАЙН-УРОКИ (classroom admin)
+    ════════════════════════════════════════════════ */
+    let _crHistPage = 1, _crHistTotal = 0, _crHistPages = 0, _crHistSearch = '';
+    let _crOpenDetailId = null, _crHistDebTimer = null;
+
+    async function loadCrModuleState() {
+      try {
+        const features = await LS.api('/api/admin/features');
+        const chk = document.getElementById('cr-master-chk');
+        if (chk) chk.checked = features.classroom !== false;
+      } catch(e) { /* silent */ }
+    }
+
+    async function crMasterToggle(enabled) {
+      try {
+        await LS.api('/api/admin/features', { method: 'PATCH', body: JSON.stringify({ classroom: enabled }) });
+        LS.toast(enabled ? 'Модуль онлайн-уроков включён' : 'Модуль онлайн-уроков отключён', enabled ? 'success' : 'warning', 3000);
+      } catch(e) {
+        LS.toast('Ошибка: ' + e.message, 'error');
+        // revert checkbox
+        const chk = document.getElementById('cr-master-chk');
+        if (chk) chk.checked = !enabled;
+      }
+    }
+
+    function fmtDuration(sec) {
+      if (!sec || sec < 0) return '—';
+      const h = Math.floor(sec / 3600), m = Math.floor((sec % 3600) / 60), s = sec % 60;
+      if (h) return `${h}ч ${m}м`;
+      if (m) return `${m} мин ${s} сек`;
+      return `${s} сек`;
+    }
+    function fmtLiveDuration(createdAt) {
+      const sec = Math.round((Date.now() - new Date(createdAt).getTime()) / 1000);
+      return fmtDuration(sec);
+    }
+
+    async function loadCrActiveSessions() {
+      const el = document.getElementById('cr-live-list');
+      try {
+        const { sessions } = await LS.api('/api/classroom/admin/active');
+        if (!sessions.length) {
+          el.innerHTML = '<div class="empty">Нет активных уроков</div>';
+          return;
+        }
+        el.innerHTML = sessions.map(s => {
+          const dur = fmtLiveDuration(s.created_at);
+          const title = s.title || `Урок #${s.id}`;
+          const cls   = s.class_name ? `Класс: ${esc(s.class_name)}` : 'Личный урок';
+          return `<div class="cr-live-card">
+            <div class="cr-live-pulse"></div>
+            <div class="cr-live-info">
+              <div class="cr-live-title">${esc(title)}</div>
+              <div class="cr-live-meta">${esc(s.teacher_name)} · ${cls}</div>
+            </div>
+            <div class="cr-live-badges">
+              <span class="cr-badge cr-badge-online">
+                <svg class="ic" viewBox="0 0 24 24" style="width:11px;height:11px"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+                ${s.online_count}
+              </span>
+              <span class="cr-badge cr-badge-msgs">
+                <svg class="ic" viewBox="0 0 24 24" style="width:11px;height:11px"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+                ${s.message_count}
+              </span>
+              <span class="cr-badge cr-badge-dur">
+                <svg class="ic" viewBox="0 0 24 24" style="width:11px;height:11px"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+                ${dur}
+              </span>
+            </div>
+            <div class="cr-live-actions">
+              <button class="btn-cr-end" onclick="adminEndSession(${s.id})">Завершить</button>
+            </div>
+          </div>`;
+        }).join('');
+      } catch(e) {
+        el.innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`;
+      }
+      if (window.lucide) lucide.createIcons();
+    }
+
+    async function adminEndSession(id) {
+      if (!await LS.confirm(`Завершить урок #${id}? Все участники будут отключены.`, { title: 'Завершить урок', confirmText: 'Завершить' })) return;
+      try {
+        await LS.api(`/api/classroom/${id}`, { method: 'DELETE' });
+        LS.toast('Урок завершён', 'success', 2500);
+        loadCrActiveSessions();
+      } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
+    function crHistDebounce() {
+      clearTimeout(_crHistDebTimer);
+      _crHistDebTimer = setTimeout(() => { _crHistPage = 1; loadCrHistory(); }, 350);
+    }
+
+    async function loadCrHistory(page) {
+      if (page) _crHistPage = page;
+      _crHistSearch = (document.getElementById('cr-hist-q')?.value || '').trim();
+      const el = document.getElementById('cr-hist-list');
+      el.innerHTML = '<div class="spinner"></div>';
+      try {
+        const params = new URLSearchParams({ page: _crHistPage, limit: 20 });
+        if (_crHistSearch) params.set('search', _crHistSearch);
+        const { sessions, total, pages } = await LS.api('/api/classroom/admin/sessions?' + params);
+        _crHistTotal = total; _crHistPages = pages;
+        document.getElementById('cr-hist-count').textContent = `${total} уроков`;
+        if (!sessions.length) {
+          el.innerHTML = '<div class="empty">Нет завершённых уроков</div>';
+          renderCrPagination();
+          return;
+        }
+        el.innerHTML = sessions.map(s => {
+          const title = s.title || `Урок #${s.id}`;
+          const cls   = s.class_name ? `Класс: ${esc(s.class_name)}` : 'Личный урок';
+          const dur   = fmtDuration(s.ended_at ? Math.round((new Date(s.ended_at)-new Date(s.created_at))/1000) : null);
+          return `<div>
+            <div class="cr-hist-row${_crOpenDetailId===s.id?' open':''}" onclick="toggleCrDetail(${s.id},this)">
+              <div class="cr-hist-icon">
+                <svg class="ic" viewBox="0 0 24 24" style="width:18px;height:18px;color:var(--violet)"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+              </div>
+              <div class="cr-hist-main">
+                <div class="cr-hist-title">${esc(title)}</div>
+                <div class="cr-hist-meta">${esc(s.teacher_name)} · ${cls} · ${fmtDate(s.ended_at || s.created_at)}</div>
+              </div>
+              <div class="cr-hist-chips">
+                <span class="cr-badge cr-badge-online">${s.participant_count} уч.</span>
+                <span class="cr-badge cr-badge-msgs">${s.message_count} сообщ.</span>
+                <span class="cr-badge cr-badge-dur">${dur}</span>
+              </div>
+              <svg class="cr-hist-chevron ic" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
+            </div>
+            <div class="cr-detail-drawer${_crOpenDetailId===s.id?' open':''}" id="cr-detail-${s.id}">
+              <div class="cr-detail-inner" id="cr-detail-inner-${s.id}">
+                <div class="spinner"></div>
+              </div>
+            </div>
+          </div>`;
+        }).join('');
+        if (_crOpenDetailId) {
+          const dr = document.getElementById(`cr-detail-${_crOpenDetailId}`);
+          if (dr) loadCrSessionDetail(_crOpenDetailId);
+        }
+        renderCrPagination();
+      } catch(e) {
+        el.innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`;
+      }
+      if (window.lucide) lucide.createIcons();
+    }
+
+    function renderCrPagination() {
+      const el = document.getElementById('cr-hist-pagination');
+      if (_crHistPages <= 1) { el.innerHTML = ''; return; }
+      const p = _crHistPage, total = _crHistPages;
+      let html = '<div class="cr-pagination">';
+      html += `<button class="cr-page-btn" onclick="loadCrHistory(${p-1})" ${p<=1?'disabled':''}>
+        <svg class="ic" viewBox="0 0 24 24" style="width:14px;height:14px"><polyline points="15 18 9 12 15 6"/></svg>
+      </button>`;
+      const range = [];
+      for (let i=1;i<=total;i++) {
+        if (i===1||i===total||Math.abs(i-p)<=1) range.push(i);
+        else if (range[range.length-1]!=='…') range.push('…');
+      }
+      range.forEach(r => {
+        if (r==='…') html += `<span class="cr-page-info">…</span>`;
+        else html += `<button class="cr-page-btn${r===p?' active':''}" onclick="loadCrHistory(${r})">${r}</button>`;
+      });
+      html += `<button class="cr-page-btn" onclick="loadCrHistory(${p+1})" ${p>=total?'disabled':''}>
+        <svg class="ic" viewBox="0 0 24 24" style="width:14px;height:14px"><polyline points="9 18 15 12 9 6"/></svg>
+      </button></div>`;
+      el.innerHTML = html;
+    }
+
+    async function toggleCrDetail(id, rowEl) {
+      const wasOpen = _crOpenDetailId === id;
+      // close all
+      document.querySelectorAll('.cr-hist-row.open').forEach(r => r.classList.remove('open'));
+      document.querySelectorAll('.cr-detail-drawer.open').forEach(d => { d.classList.remove('open'); d.style.maxHeight=''; });
+      _crOpenDetailId = null;
+      if (wasOpen) return;
+      // open this one
+      rowEl.classList.add('open');
+      const dr = document.getElementById(`cr-detail-${id}`);
+      if (dr) { dr.classList.add('open'); }
+      _crOpenDetailId = id;
+      await loadCrSessionDetail(id);
+    }
+
+    async function loadCrSessionDetail(id) {
+      const inner = document.getElementById(`cr-detail-inner-${id}`);
+      if (!inner) return;
+      inner.innerHTML = '<div class="spinner"></div>';
+      try {
+        const { session, stats, attendance, pages } = await LS.api(`/api/classroom/${id}/summary`);
+        const dur = fmtDuration(stats.duration_sec);
+        inner.innerHTML = `
+          <div class="cr-detail-grid">
+            <div class="cr-detail-stat"><div class="cr-detail-val">${stats.participant_count}</div><div class="cr-detail-label">Участников</div></div>
+            <div class="cr-detail-stat"><div class="cr-detail-val">${stats.message_count}</div><div class="cr-detail-label">Сообщений</div></div>
+            <div class="cr-detail-stat"><div class="cr-detail-val">${stats.page_count}</div><div class="cr-detail-label">Страниц</div></div>
+            <div class="cr-detail-stat"><div class="cr-detail-val" style="font-size:1rem">${dur}</div><div class="cr-detail-label">Длительность</div></div>
+          </div>
+          ${attendance.length ? `
+            <div class="section-title" style="font-size:0.72rem;margin-bottom:8px">Посещаемость</div>
+            <div class="cr-attend-list">
+              ${attendance.map(a => `
+                <div class="cr-attend-row">
+                  <svg class="ic" viewBox="0 0 24 24" style="width:15px;height:15px;flex-shrink:0;color:var(--violet)"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+                  <span class="cr-attend-name">${esc(a.user_name)}</span>
+                  <span class="cr-attend-time">${a.joined_at ? new Date(a.joined_at).toLocaleTimeString('ru-RU',{hour:'2-digit',minute:'2-digit'}) : '—'}</span>
+                  <span class="cr-attend-dur">${a.duration_sec ? fmtDuration(a.duration_sec) : (a.left_at ? '—' : '<span style="color:var(--green)">онлайн</span>')}</span>
+                </div>
+              `).join('')}
+            </div>
+          ` : ''}
+          ${pages.length > 1 ? `
+            <div class="section-title" style="font-size:0.72rem;margin:16px 0 8px">Страницы доски</div>
+            <div class="cr-pages-list">
+              ${pages.map(p => `
+                <div class="cr-page-chip">
+                  <span class="cr-page-num">Стр. ${p.page_num}</span>
+                  <span class="cr-page-cnt">${p.stroke_count} штр.</span>
+                </div>
+              `).join('')}
+            </div>
+          ` : ''}
+          <div class="cr-detail-actions">
+            <button class="btn-cr-export" onclick="adminExportChat(${id})">
+              <svg class="ic" viewBox="0 0 24 24" style="width:13px;height:13px;vertical-align:-2px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+              Экспорт чата
+            </button>
+            <button class="btn-cr-del" onclick="adminDeleteSession(${id})">
+              <svg class="ic" viewBox="0 0 24 24" style="width:13px;height:13px;vertical-align:-2px"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>
+              Удалить запись
+            </button>
+          </div>`;
+      } catch(e) {
+        inner.innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`;
+      }
+    }
+
+    function adminExportChat(id) {
+      window.open(`/api/classroom/${id}/chat/export`, '_blank');
+    }
+
+    async function adminDeleteSession(id) {
+      if (!await LS.confirm('Удалить всю запись об этом уроке? Данные нельзя восстановить.', { title: 'Удалить урок', confirmText: 'Удалить', dangerous: true })) return;
+      try {
+        await LS.api(`/api/classroom/${id}/history`, { method: 'DELETE' });
+        LS.toast('Урок удалён', 'success', 2500);
+        _crOpenDetailId = null;
+        loadCrHistory();
+      } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
+    }
+
     /* ─── wire tab loading ─── */
     const _origSwitchTab = window.switchTab;
     window.switchTab = function(btn) {
@@ -4823,6 +5248,7 @@
       else if (tab === 'audit') loadAuditLog();
       else if (tab === 'errors') loadErrorLog();
       else if (tab === 'health') loadHealth();
+      else if (tab === 'classroom') { loadCrModuleState(); loadCrActiveSessions(); loadCrHistory(); }
     };
 
     /* ─── init ─── */
diff --git a/frontend/analytics.html b/frontend/analytics.html
index ea7521a..a322aa3 100644
--- a/frontend/analytics.html
+++ b/frontend/analytics.html
@@ -262,6 +262,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"          class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html" class="sb-link"><i data-lucide="leaf"             class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom"     class="sb-link"><i data-lucide="presentation"     class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link nav-active"><i data-lucide="bar-chart-2" class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/biochem-library.html b/frontend/biochem-library.html
index c83a284..830da3f 100644
--- a/frontend/biochem-library.html
+++ b/frontend/biochem-library.html
@@ -287,6 +287,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"          class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html" class="sb-link"><i data-lucide="leaf"             class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom"     class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/biochem-pathways.html b/frontend/biochem-pathways.html
index 846c015..927034b 100644
--- a/frontend/biochem-pathways.html
+++ b/frontend/biochem-pathways.html
@@ -367,6 +367,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"          class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html" class="sb-link"><i data-lucide="leaf"             class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom"     class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/biochem-properties.html b/frontend/biochem-properties.html
index 29619f2..18e9948 100644
--- a/frontend/biochem-properties.html
+++ b/frontend/biochem-properties.html
@@ -200,6 +200,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"          class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html" class="sb-link"><i data-lucide="leaf"             class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom"     class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/biochem-reactions.html b/frontend/biochem-reactions.html
index 098dccb..f6ab0d8 100644
--- a/frontend/biochem-reactions.html
+++ b/frontend/biochem-reactions.html
@@ -323,6 +323,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"          class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html" class="sb-link"><i data-lucide="leaf"             class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom"     class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/biochem.html b/frontend/biochem.html
index 2822617..b82df3a 100644
--- a/frontend/biochem.html
+++ b/frontend/biochem.html
@@ -341,6 +341,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"          class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html" class="sb-link"><i data-lucide="leaf"             class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom"     class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/board.html b/frontend/board.html
index 74d1171..42bcc8d 100644
--- a/frontend/board.html
+++ b/frontend/board.html
@@ -277,6 +277,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"    class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html"           class="sb-link"><i data-lucide="leaf"     class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom" class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/classes.html b/frontend/classes.html
index 93522eb..9ce81c7 100644
--- a/frontend/classes.html
+++ b/frontend/classes.html
@@ -567,6 +567,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"    class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html"           class="sb-link"><i data-lucide="leaf"     class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom" class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/classroom.html b/frontend/classroom.html
index 953b5b9..7204d06 100644
--- a/frontend/classroom.html
+++ b/frontend/classroom.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Онлайн-урок — LearnSpace</title>
   <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-  <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;800&family=Manrope:wght@400;500;600;700&family=Caveat:wght@400;600;700&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="/css/ls.css" />
   <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
   <style>
@@ -97,7 +97,7 @@
     }
     .cr-board-area {
       flex: 1; display: flex; flex-direction: row;
-      overflow: hidden; min-height: 0;
+      overflow: hidden; min-height: 0; position: relative;
     }
     .cr-board-wrap {
       flex: 1; position: relative; overflow: hidden;
@@ -173,6 +173,38 @@
       transition: all .12s;
     }
     .wb-thumbs-add-btn:hover { background: rgba(155,93,229,0.22); color: #fff; }
+    .wb-thumb-label {
+      position: absolute; bottom: 14px; left: 0; right: 0;
+      font-size: 9px; color: rgba(255,255,255,0.55);
+      font-family: 'Manrope', sans-serif; text-align: center;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+      padding: 0 3px; pointer-events: none;
+    }
+    .wb-thumb-rename {
+      position: absolute; bottom: 10px; left: 3px; right: 3px; z-index: 10;
+      font-size: 9px; font-family: 'Manrope', sans-serif;
+      background: #1a1030; border: 1px solid #9B5DE5;
+      color: #fff; border-radius: 3px; padding: 1px 3px;
+      outline: none; width: calc(100% - 6px);
+    }
+    /* Page context menu */
+    .wb-page-menu {
+      position: fixed; z-index: 9999;
+      background: #1c1030; border: 1px solid rgba(155,93,229,0.35);
+      border-radius: 6px; padding: 4px 0;
+      box-shadow: 0 6px 20px rgba(0,0,0,0.55);
+      min-width: 140px; display: none;
+    }
+    .wb-page-menu.open { display: block; }
+    .wb-page-menu button {
+      display: block; width: 100%; padding: 6px 12px;
+      background: none; border: none; color: rgba(255,255,255,0.8);
+      font-size: 11px; font-family: 'Manrope', sans-serif;
+      text-align: left; cursor: pointer; transition: background .1s;
+    }
+    .wb-page-menu button:hover { background: rgba(155,93,229,0.2); color: #fff; }
+    .wb-page-menu button.danger:hover { background: rgba(255,80,80,0.18); color: #ff8080; }
+    .wb-page-menu hr { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 3px 0; }
     /* Template picker */
     .wb-tpl-picker {
       display: flex; align-items: center; gap: 4px; flex-shrink: 0;
@@ -286,6 +318,147 @@
     }
     .wb-ov-props input[type=number]::-webkit-inner-spin-button { opacity: 0.4; }
     .wb-ov-props-type { font-size: 0.68rem; font-weight: 700; color: rgba(155,93,229,0.8); }
+
+    /* ── toolbar dropdown popups (shapes / utils) ──────────────────────── */
+    .cr-drop { position: relative; display: inline-flex; flex-shrink: 0; }
+    .cr-drop > .cr-tool-btn { position: relative; }
+    .cr-drop-chevron {
+      position: absolute; bottom: 3px; right: 2px; pointer-events: none;
+      width: 6px; height: 4px; fill: rgba(255,200,100,0.32);
+    }
+    .cr-drop-popup {
+      position: fixed;
+      background: linear-gradient(180deg, #2c1e10 0%, #1e1509 100%);
+      border: 1.5px solid #4a2e18; border-radius: 10px; padding: 5px;
+      z-index: 9999; display: none; gap: 3px;
+      box-shadow: 0 -6px 28px rgba(0,0,0,0.65);
+    }
+    .cr-drop-popup.open { display: grid; }
+    .cr-shape-popup-grid { grid-template-columns: repeat(5, 32px); }
+    .cr-utils-popup-grid { grid-template-columns: repeat(3, 32px); }
+    .cr-pop-sep {
+      grid-column: 1 / -1; height: 1px;
+      background: rgba(255,180,60,0.12); margin: 2px 0;
+    }
+    .cr-pop-full { grid-column: 1 / -1; display: flex; justify-content: center; }
+    .cr-pop-fill-btn {
+      display: flex; align-items: center; gap: 5px; padding: 0 10px;
+      height: 28px; border-radius: 7px; border: 1.5px solid transparent;
+      background: transparent; cursor: pointer; color: rgba(255,230,180,0.6);
+      font-family: 'Manrope',sans-serif; font-size: 11px; font-weight: 600;
+      transition: all .12s; white-space: nowrap;
+    }
+    .cr-pop-fill-btn:hover { background: rgba(255,200,100,0.1); color: rgba(255,230,180,0.95); }
+    .cr-pop-fill-btn.active { background: rgba(255,180,60,0.15); border-color: rgba(255,180,60,0.45); color: #f5b942; }
+    .cr-pop-fill-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
+
+    /* ── text options row ────────────────────────────────────────────────── */
+    .cr-text-row {
+      height: 38px; flex-shrink: 0;
+      display: none; align-items: center; gap: 4px; padding: 0 10px;
+      border-top: 1px solid rgba(255,180,60,0.12);
+      background: rgba(0,0,0,0.18);
+    }
+    .cr-text-row.visible { display: flex; }
+    .cr-text-row label {
+      font-family: 'Manrope',sans-serif; font-size: 10px;
+      color: rgba(255,230,180,0.4); white-space: nowrap;
+    }
+    .cr-text-font-sel {
+      height: 26px; padding: 0 6px;
+      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,180,60,0.2);
+      border-radius: 6px; color: rgba(255,230,180,0.85);
+      font-family: 'Manrope',sans-serif; font-size: 11px; cursor: pointer;
+      outline: none;
+    }
+    .cr-text-size-inp {
+      width: 44px; height: 26px; text-align: center;
+      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,180,60,0.2);
+      border-radius: 6px; color: rgba(255,230,180,0.85);
+      font-family: 'Manrope',sans-serif; font-size: 12px; font-weight: 700;
+      outline: none; -moz-appearance: textfield;
+    }
+    .cr-text-size-inp::-webkit-inner-spin-button { opacity: 0.4; }
+    .cr-text-fmt-btn {
+      width: 28px; height: 26px; border-radius: 6px; border: 1.5px solid transparent;
+      background: transparent; cursor: pointer; color: rgba(255,230,180,0.55);
+      font-family: Georgia,serif; font-size: 14px; font-weight: bold;
+      display: flex; align-items: center; justify-content: center;
+      transition: all .12s; flex-shrink: 0;
+    }
+    .cr-text-fmt-btn:hover { background: rgba(255,200,100,0.1); color: rgba(255,230,180,0.95); }
+    .cr-text-fmt-btn.active { background: rgba(255,180,60,0.15); border-color: rgba(255,180,60,0.45); color: #f5b942; }
+
+    /* ── context rows (connector / sticky / multi-align) ──────────────── */
+    .wb-ctx-row {
+      height: 38px; flex-shrink: 0;
+      display: none; align-items: center; gap: 4px; padding: 0 10px;
+      border-top: 1px solid rgba(255,180,60,0.12);
+      background: rgba(0,0,0,0.18);
+      font-family: 'Manrope',sans-serif;
+    }
+    .wb-ctx-row.visible { display: flex; }
+    .wb-ctx-lbl {
+      font-size: 10px; color: rgba(255,230,180,0.4);
+      white-space: nowrap; margin-right: 2px;
+    }
+    /* sticky color swatches */
+    .wb-sticky-col {
+      width: 22px; height: 22px; border-radius: 50%;
+      border: 2.5px solid transparent; cursor: pointer;
+      transition: transform .12s; outline: none; flex-shrink: 0;
+    }
+    .wb-sticky-col:hover { transform: scale(1.15); }
+    .wb-sticky-col.active { border-color: #fff; transform: scale(1.15); }
+    /* table grid picker popup */
+    .wb-tbl-drop { position: relative; display: inline-flex; flex-shrink: 0; }
+    .wb-tbl-popup {
+      position: fixed; z-index: 9999;
+      background: linear-gradient(180deg, #2c1e10 0%, #1e1509 100%);
+      border: 1.5px solid #4a2e18; border-radius: 10px; padding: 8px 8px 6px;
+      display: none; flex-direction: column; gap: 2px; align-items: center;
+      box-shadow: 0 -6px 28px rgba(0,0,0,0.65);
+    }
+    .wb-tbl-popup.open { display: flex; }
+    .wb-tbl-grid { display: flex; flex-direction: column; gap: 2px; }
+    .wb-tbl-row  { display: flex; gap: 2px; }
+    .wb-tbl-cell {
+      width: 20px; height: 20px; border: 1px solid rgba(255,180,60,0.18);
+      border-radius: 3px; background: transparent; cursor: pointer;
+      transition: background 0.08s, border-color 0.08s;
+    }
+    .wb-tbl-cell.hl { background: rgba(255,180,60,0.38); border-color: rgba(255,180,60,0.7); }
+    .wb-tbl-label {
+      font-family: 'Manrope',sans-serif; font-size: 10px;
+      color: rgba(255,230,180,0.5); margin-top: 2px;
+    }
+
+    /* template & bg-image picker popup */
+    .wb-tpl-popup-grid {
+      position: fixed; z-index: 9999;
+      background: linear-gradient(180deg, #1e1530 0%, #140e26 100%);
+      border: 1.5px solid rgba(155,93,229,0.35); border-radius: 10px;
+      padding: 8px; display: none; flex-direction: column; gap: 2px;
+      box-shadow: 0 -6px 28px rgba(0,0,0,0.65);
+    }
+    .wb-tpl-popup-grid.open { display: flex; }
+    .wb-tpl-popup-grid .tpl-grid { display: grid; grid-template-columns: repeat(3, 68px); gap: 5px; }
+    .wb-tpl-item {
+      display: flex; flex-direction: column; align-items: center; gap: 4px;
+      padding: 6px 4px; border-radius: 7px; cursor: pointer;
+      border: 1.5px solid rgba(155,93,229,0.2); background: rgba(155,93,229,0.06);
+      font-family: 'Manrope',sans-serif; font-size: 10px; color: rgba(230,220,255,0.7);
+      transition: all .15s; white-space: nowrap;
+    }
+    .wb-tpl-item:hover { background: rgba(155,93,229,0.18); border-color: rgba(155,93,229,0.5); color: #e8e0f7; }
+    .wb-tpl-item svg { width: 40px; height: 28px; }
+    .wb-bg-section { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 0; border-top: 1px solid rgba(155,93,229,0.15); }
+    .wb-bg-row { display: flex; gap: 4px; }
+    .wb-bg-btn { flex: 1; padding: 5px 6px; border-radius: 5px; font-size: 10px; font-family: 'Manrope',sans-serif; cursor: pointer; border: 1px solid rgba(155,93,229,0.3); background: rgba(155,93,229,0.08); color: rgba(200,185,240,0.85); transition: all .15s; }
+    .wb-bg-btn:hover { background: rgba(155,93,229,0.2); color: #e8e0f7; }
+    .wb-bg-btn.danger { border-color: rgba(241,91,181,0.3); background: rgba(241,91,181,0.06); color: rgba(241,91,181,0.8); }
+    .wb-bg-btn.danger:hover { background: rgba(241,91,181,0.18); color: #F15BB5; }
+
     /* read-only overlay label */
     .cr-board-readonly {
       position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
@@ -314,6 +487,41 @@
     .cr-hand-btn:hover { border-color: #FFB347; color: #FFB347; }
     .cr-hand-btn.raised { background: rgba(255,179,71,0.15); border-color: #FFB347; color: #FFB347; }
     .cr-hand-btn svg { width: 14px; height: 14px; }
+    /* student fullscreen button */
+    .cr-fullscreen-btn {
+      display: flex; align-items: center; gap: 7px;
+      padding: 6px 18px; border-radius: 99px; cursor: pointer;
+      border: 1.5px solid rgba(155,93,229,0.5);
+      background: rgba(155,93,229,0.12);
+      color: rgba(200,185,255,0.9);
+      font-family: 'Manrope',sans-serif; font-size: 0.8rem; font-weight: 700;
+      transition: all .15s; white-space: nowrap; margin-left: auto;
+    }
+    .cr-fullscreen-btn:hover {
+      background: rgba(155,93,229,0.28); border-color: #9B5DE5;
+      color: #fff; box-shadow: 0 0 12px rgba(155,93,229,0.35);
+    }
+    .cr-fullscreen-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
+    /* nav fullscreen btn: update icon in fullscreen */
+    :fullscreen #cr-student-fs-btn svg.fs-exit { display: inline; }
+    :fullscreen #cr-student-fs-btn svg.fs-enter { display: none; }
+    #cr-student-fs-btn svg.fs-exit { display: none; }
+    /* floating exit-fullscreen button (inside board, touch-friendly) */
+    #cr-fs-exit-overlay {
+      position: absolute; top: 14px; right: 14px; z-index: 500;
+      display: none;
+      align-items: center; gap: 7px;
+      padding: 9px 16px; border-radius: 99px;
+      background: rgba(20,14,30,0.72); backdrop-filter: blur(8px);
+      border: 1.5px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.75);
+      font-family: 'Manrope',sans-serif; font-size: 0.75rem; font-weight: 700;
+      cursor: pointer; transition: all .15s; user-select: none;
+      min-width: 44px; min-height: 44px; box-shadow: 0 4px 20px rgba(0,0,0,0.45);
+    }
+    #cr-fs-exit-overlay:hover,
+    #cr-fs-exit-overlay:active { background: rgba(155,93,229,0.35); border-color: #9B5DE5; color: #fff; }
+    :fullscreen #cr-fs-exit-overlay { display: flex; }
+    :-webkit-full-screen #cr-fs-exit-overlay { display: flex; }
     /* raised hands section in participants panel */
     .cr-hands-section {
       padding: 8px 8px 0; flex-shrink: 0;
@@ -334,71 +542,192 @@
 
     /* ── right panel ── */
     .cr-right {
-      width: 300px; flex-shrink: 0;
-      background: #12161f; border-left: 1.5px solid rgba(255,255,255,0.06);
+      width: 310px; flex-shrink: 0;
+      background: linear-gradient(180deg, #0f1220 0%, #0c0e1a 100%);
+      border-left: 1px solid rgba(155,93,229,0.13);
       display: flex; flex-direction: column;
+      transition: width 0.22s cubic-bezier(0.4,0,0.2,1);
     }
+    .cr-right.collapsed { width: 36px; }
+    .cr-panel-content { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
+    .cr-right.collapsed .cr-panel-tabs-inner,
+    .cr-right.collapsed .cr-panel-content { display: none; }
 
-    /* participants */
+    /* ── Panel header with tabs ── */
     .cr-panel-tabs {
-      display: flex; border-bottom: 1.5px solid rgba(255,255,255,0.06); flex-shrink: 0;
+      display: flex; flex-direction: row; align-items: center;
+      padding: 10px 10px 0; gap: 4px; flex-shrink: 0;
+      background: transparent;
+    }
+    .cr-panel-collapse-btn {
+      width: 26px; height: 26px; flex-shrink: 0; align-self: flex-start; margin-left: 2px; margin-top: 2px;
+      display: flex; align-items: center; justify-content: center;
+      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 7px; cursor: pointer; color: rgba(255,255,255,0.4);
+      transition: color .15s, background .15s, border-color .15s;
+    }
+    .cr-panel-collapse-btn:hover { color: #9B5DE5; background: rgba(155,93,229,0.12); border-color: rgba(155,93,229,0.35); }
+    .cr-panel-collapse-btn svg { width: 12px; height: 12px; transition: transform 0.22s; transform: rotate(180deg); }
+    .cr-right.collapsed .cr-panel-collapse-btn { margin: 8px auto 0; }
+    .cr-right.collapsed .cr-panel-collapse-btn svg { transform: rotate(0deg); }
+
+    /* ── Pill tabs ── */
+    .cr-panel-tabs-inner {
+      display: flex; flex: 1; min-width: 0;
+      background: rgba(255,255,255,0.04);
+      border: 1px solid rgba(255,255,255,0.07);
+      border-radius: 10px; padding: 3px; gap: 2px;
     }
     .cr-tab {
-      flex: 1; padding: 11px 8px; font-family: 'Manrope',sans-serif;
-      font-size: 0.75rem; font-weight: 700; color: #8898AA;
-      background: transparent; border: none; cursor: pointer;
-      border-bottom: 2px solid transparent; transition: all .15s;
-      display: flex; align-items: center; justify-content: center; gap: 5px;
+      flex: 1; padding: 6px 6px; font-family: 'Manrope',sans-serif;
+      font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.4);
+      background: transparent; border: none; cursor: pointer; border-radius: 7px;
+      transition: all .15s; display: flex; align-items: center; justify-content: center; gap: 4px;
+      white-space: nowrap;
     }
-    .cr-tab.active { color: #9B5DE5; border-bottom-color: #9B5DE5; }
-    .cr-tab svg { width: 13px; height: 13px; }
+    .cr-tab:hover { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.05); }
+    .cr-tab.active {
+      color: #e8e0f7; background: rgba(155,93,229,0.22);
+      box-shadow: 0 1px 6px rgba(155,93,229,0.18);
+    }
+    .cr-tab svg, .cr-tab i { width: 12px; height: 12px; flex-shrink: 0; }
     .cr-tab-badge {
       background: #F15BB5; color: #fff; border-radius: 99px;
-      font-size: 0.65rem; font-weight: 800; padding: 1px 5px; min-width: 16px; text-align: center;
+      font-size: 0.6rem; font-weight: 800; padding: 1px 4px; min-width: 15px; text-align: center;
+      line-height: 1.4;
     }
+    /* 4-tab compact mode: hide labels, icons only */
+    .cr-panel-tabs-inner.tabs-4 .cr-tab-label { display: none; }
+    .cr-panel-tabs-inner.tabs-4 .cr-tab { padding: 7px 6px; }
+    .cr-panel-tabs-inner.tabs-4 .cr-tab svg,
+    .cr-panel-tabs-inner.tabs-4 .cr-tab i { width: 15px; height: 15px; }
+    /* divider below tabs */
+    .cr-panel-tabs::after {
+      content: ''; display: block; position: absolute; left: 0; right: 0;
+      height: 1px; background: rgba(255,255,255,0.05);
+    }
+    .cr-panel-tabs { position: relative; padding-bottom: 10px; }
 
-    /* participants list */
+    /* ── Participants list ── */
     .cr-participants {
-      flex: 1; overflow-y: auto; padding: 8px;
-      display: flex; flex-direction: column; gap: 4px;
+      flex: 1; overflow-y: auto; padding: 6px 8px;
+      display: flex; flex-direction: column; gap: 2px;
     }
-    .cr-participants::-webkit-scrollbar { width: 4px; }
+    .cr-participants::-webkit-scrollbar { width: 3px; }
     .cr-participants::-webkit-scrollbar-track { background: transparent; }
-    .cr-participants::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
+    .cr-participants::-webkit-scrollbar-thumb { background: rgba(155,93,229,0.2); border-radius: 2px; }
 
     .cr-participant {
-      display: flex; align-items: center; gap: 8px;
-      padding: 8px 10px; border-radius: 10px;
-      transition: background .15s;
+      display: flex; align-items: center; gap: 9px;
+      padding: 7px 10px; border-radius: 10px;
+      border: 1px solid transparent;
+      transition: background .15s, border-color .15s;
+      position: relative;
     }
-    .cr-participant:hover { background: rgba(255,255,255,0.04); }
+    .cr-participant:hover { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.05); }
+    .cr-participant.speaking { background: rgba(6,214,160,0.05); border-color: rgba(6,214,160,0.18); }
+
+    /* avatar with online ring */
+    .cr-p-avatar-wrap { position: relative; flex-shrink: 0; }
     .cr-p-avatar {
-      width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
+      width: 32px; height: 32px; border-radius: 50%;
       background: linear-gradient(135deg, #9B5DE5, #06D6E0);
       display: flex; align-items: center; justify-content: center;
-      font-size: 0.7rem; font-weight: 800; color: #fff;
+      font-size: 0.68rem; font-weight: 800; color: #fff;
       font-family: 'Unbounded', sans-serif;
       transition: box-shadow .15s;
     }
+    .cr-p-online-dot {
+      position: absolute; bottom: 1px; right: 1px;
+      width: 8px; height: 8px; border-radius: 50%;
+      background: #22c55e; border: 2px solid #0c0e1a;
+    }
     .cr-p-avatar.speaking {
-      box-shadow: 0 0 0 3px #06D6A0, 0 0 10px rgba(6,214,160,.5);
+      box-shadow: 0 0 0 2.5px #06D6A0, 0 0 10px rgba(6,214,160,.4);
       animation: speaking-pulse 0.8s ease-in-out infinite;
     }
     @keyframes speaking-pulse {
-      0%, 100% { box-shadow: 0 0 0 2px #06D6A0, 0 0 8px rgba(6,214,160,.4); }
-      50%       { box-shadow: 0 0 0 4px #06D6A0, 0 0 14px rgba(6,214,160,.7); }
+      0%, 100% { box-shadow: 0 0 0 2px #06D6A0, 0 0 8px rgba(6,214,160,.35); }
+      50%       { box-shadow: 0 0 0 3.5px #06D6A0, 0 0 14px rgba(6,214,160,.6); }
     }
-    .cr-p-name { flex: 1; font-size: 0.8rem; font-weight: 600; color: #d1d5db; }
-    .cr-p-you { font-size: 0.65rem; color: #9B5DE5; font-weight: 700; }
-    .cr-p-status { display: flex; gap: 5px; align-items: center; }
+    .cr-p-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    .cr-p-name {
+      font-size: 0.8rem; font-weight: 600; color: #d1d5db;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .cr-p-sub { display: flex; align-items: center; gap: 4px; }
+    .cr-p-you {
+      font-size: 0.62rem; color: rgba(155,93,229,0.8); font-weight: 700;
+      background: rgba(155,93,229,0.1); border: 1px solid rgba(155,93,229,0.25);
+      border-radius: 4px; padding: 0px 4px;
+    }
+    .cr-p-role-tag {
+      font-size: 0.6rem; font-weight: 700; border-radius: 4px; padding: 0px 4px;
+    }
+    .cr-p-role-tag.teacher { color: #06D6A0; background: rgba(6,214,160,0.1); border: 1px solid rgba(6,214,160,0.2); }
+    .cr-p-role-tag.student { color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
+    .cr-p-status { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
     .cr-p-status svg { width: 13px; height: 13px; }
     .mic-on { color: #06D6A0; }
-    .mic-off { color: #8898AA; }
+    .mic-off { color: rgba(255,255,255,0.18); }
     .cr-p-mute-btn {
       background: none; border: none; cursor: pointer; padding: 2px; border-radius: 4px;
       color: #8898AA; display: flex; align-items: center; opacity: 0; transition: opacity .15s, color .15s;
     }
     .cr-participant:hover .cr-p-mute-btn { opacity: 1; }
+
+    /* ── Audio level bars ─────────────────────────────────────────────────── */
+    .cr-audio-bars {
+      display: none; align-items: flex-end; gap: 2px;
+      height: 14px; width: 16px; flex-shrink: 0;
+    }
+    .cr-participant.speaking .cr-audio-bars { display: flex; }
+    .cr-audio-bars span {
+      width: 3px; background: rgba(136,152,170,0.35); border-radius: 2px;
+      height: 2px; transition: height 0.1s ease, background 0.1s ease;
+    }
+    .cr-participant.speaking .cr-audio-bars span { background: #06D6A0; }
+
+    /* ── Floating speaker chip on board ──────────────────────────────────── */
+    .cr-speaker-chip {
+      position: absolute; bottom: 14px; left: 14px; z-index: 20;
+      display: flex; align-items: center; gap: 8px;
+      background: rgba(10,6,25,0.82); backdrop-filter: blur(12px);
+      border: 1px solid rgba(6,214,160,0.35); border-radius: 22px;
+      padding: 5px 13px 5px 5px;
+      pointer-events: none;
+      opacity: 0; transform: translateY(6px);
+      transition: opacity .22s ease, transform .22s ease;
+    }
+    .cr-speaker-chip.visible { opacity: 1; transform: translateY(0); }
+    .cr-speaker-chip-avatar {
+      width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
+      background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 0.6rem; font-weight: 800; color: #fff;
+      font-family: 'Unbounded', sans-serif;
+      box-shadow: 0 0 0 2px #06D6A0, 0 0 10px rgba(6,214,160,0.5);
+      animation: speaking-pulse 0.8s ease-in-out infinite;
+    }
+    .cr-speaker-chip-name {
+      font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 600;
+      color: #e2e8f0; max-width: 160px; overflow: hidden;
+      text-overflow: ellipsis; white-space: nowrap;
+    }
+    .cr-speaker-chip-wave {
+      display: flex; align-items: flex-end; gap: 2px; height: 14px;
+    }
+    .cr-speaker-chip-wave span {
+      width: 3px; background: #06D6A0; border-radius: 2px;
+      animation: wave-bar 0.7s ease-in-out infinite;
+    }
+    .cr-speaker-chip-wave span:nth-child(1) { animation-delay: 0s; }
+    .cr-speaker-chip-wave span:nth-child(2) { animation-delay: 0.12s; }
+    .cr-speaker-chip-wave span:nth-child(3) { animation-delay: 0.24s; }
+    @keyframes wave-bar {
+      0%, 100% { height: 3px; }
+      50%       { height: 12px; }
+    }
     /* Draw permission toggle — always visible for teacher */
     .cr-p-draw-toggle {
       display: flex; align-items: center; gap: 4px;
@@ -421,22 +750,46 @@
       gap: 3px;
     }
 
-    /* chat area */
+    /* ── chat area ── */
     .cr-chat-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
     .cr-messages {
-      flex: 1; overflow-y: auto; padding: 12px 10px;
-      display: flex; flex-direction: column; gap: 8px;
+      flex: 1; overflow-y: auto; padding: 10px 10px 6px;
+      display: flex; flex-direction: column; gap: 4px;
     }
-    .cr-messages::-webkit-scrollbar { width: 4px; }
+    .cr-messages::-webkit-scrollbar { width: 3px; }
     .cr-messages::-webkit-scrollbar-track { background: transparent; }
-    .cr-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
+    .cr-messages::-webkit-scrollbar-thumb { background: rgba(155,93,229,0.2); border-radius: 2px; }
 
-    .cr-msg { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px; border-radius: 8px; }
-    .cr-msg-pinned { background: rgba(155,93,229,.08); border-left: 2px solid #9B5DE5; }
+    /* ── message row (wrapper for alignment) ── */
+    .cr-msg-row { display: flex; flex-direction: column; gap: 1px; }
+    .cr-msg-row.mine { align-items: flex-end; }
+    .cr-msg-row.theirs { align-items: flex-start; }
+
+    /* ── bubble ── */
+    .cr-msg {
+      display: flex; flex-direction: column; gap: 3px;
+      padding: 7px 10px; border-radius: 12px;
+      max-width: 88%; position: relative;
+    }
+    .cr-msg-row.mine .cr-msg {
+      background: rgba(155,93,229,0.22);
+      border: 1px solid rgba(155,93,229,0.3);
+      border-bottom-right-radius: 4px;
+    }
+    .cr-msg-row.theirs .cr-msg {
+      background: rgba(255,255,255,0.05);
+      border: 1px solid rgba(255,255,255,0.07);
+      border-bottom-left-radius: 4px;
+    }
+    .cr-msg-pinned {
+      background: rgba(155,93,229,.12) !important;
+      border-color: rgba(155,93,229,0.4) !important;
+    }
     .cr-msg-header { display: flex; align-items: center; gap: 5px; }
-    .cr-msg-name { font-size: 0.72rem; font-weight: 700; color: #9B5DE5; }
+    .cr-msg-name { font-size: 0.7rem; font-weight: 700; color: #9B5DE5; }
     .cr-msg-name.teacher-name { color: #06D6A0; }
-    .cr-msg-time { font-size: 0.65rem; color: #8898AA; flex: 1; }
+    .cr-msg-time { font-size: 0.63rem; color: rgba(255,255,255,0.28); flex: 1; }
+    .cr-msg-row.mine .cr-msg-time { text-align: right; }
     .cr-msg-pin-badge { color: #9B5DE5; opacity: 0.8; display: flex; align-items: center; }
     .cr-msg-pin-btn {
       background: none; border: none; cursor: pointer; color: #8898AA;
@@ -446,7 +799,8 @@
     .cr-msg:hover .cr-msg-pin-btn { opacity: 1; }
     .cr-msg-pin-btn.active { color: #9B5DE5; opacity: 1; }
     .cr-msg-pin-btn:hover { color: #9B5DE5; }
-    .cr-msg-text { font-size: 0.82rem; color: #d1d5db; line-height: 1.5; word-break: break-word; }
+    .cr-msg-text { font-size: 0.81rem; color: #d1d5db; line-height: 1.5; word-break: break-word; }
+    .cr-msg-row.mine .cr-msg-text { color: #e8e0f7; }
     /* chat attachment */
     .cr-msg-img { max-width: 100%; border-radius: 8px; margin-top: 4px; cursor: zoom-in; display: block; max-height: 200px; object-fit: contain; }
     /* chat reactions */
@@ -491,20 +845,115 @@
       display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .12s;
     }
     .cr-attach-btn:hover { background: rgba(155,93,229,0.18); color: #c4b5fd; border-color: rgba(155,93,229,0.4); }
-    /* notes panel */
-    .cr-notes-panel { flex: 1; display: flex; flex-direction: column; padding: 10px; gap: 6px; overflow: hidden; }
-    .cr-notes-header { display: flex; align-items: center; justify-content: space-between; }
-    .cr-notes-label { font-size: 0.72rem; color: rgba(255,255,255,0.35); }
-    .cr-notes-status { font-size: 0.68rem; color: rgba(6,214,224,0.5); }
+    /* ── share library file button ── */
+    .cr-share-lib-btn {
+      width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,0.1);
+      background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.45); cursor: pointer;
+      display: none; align-items: center; justify-content: center; flex-shrink: 0; transition: all .12s;
+    }
+    .cr-share-lib-btn:hover { background: rgba(6,214,224,0.14); color: #06D6E0; border-color: rgba(6,214,224,0.35); }
+    /* ── file picker modal ── */
+    .cr-file-picker-overlay {
+      position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.65);
+      display: flex; align-items: center; justify-content: center;
+      opacity: 0; pointer-events: none; transition: opacity .18s;
+    }
+    .cr-file-picker-overlay.open { opacity: 1; pointer-events: all; }
+    .cr-file-picker {
+      background: #1a1628; border: 1px solid rgba(155,93,229,0.25); border-radius: 16px;
+      padding: 0; width: 480px; max-width: calc(100vw - 24px); max-height: 70vh;
+      display: flex; flex-direction: column; overflow: hidden;
+      transform: translateY(14px); transition: transform .18s;
+    }
+    .cr-file-picker-overlay.open .cr-file-picker { transform: translateY(0); }
+    .cr-file-picker-head {
+      padding: 18px 20px 0; display: flex; align-items: center; gap: 10px; flex-shrink: 0;
+    }
+    .cr-file-picker-title { flex: 1; font-size: 0.92rem; font-weight: 700; color: #fff; }
+    .cr-file-picker-close {
+      background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.4);
+      padding: 4px; border-radius: 6px; transition: color .12s; display: flex;
+    }
+    .cr-file-picker-close:hover { color: #fff; }
+    .cr-file-picker-search {
+      margin: 12px 20px 0; padding: 8px 12px; border-radius: 10px;
+      border: 1.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
+      color: #fff; font-size: 0.78rem; width: calc(100% - 40px); box-sizing: border-box;
+      outline: none; transition: border-color .12s;
+    }
+    .cr-file-picker-search::placeholder { color: rgba(255,255,255,0.25); }
+    .cr-file-picker-search:focus { border-color: rgba(155,93,229,0.45); }
+    .cr-file-picker-list {
+      flex: 1; overflow-y: auto; padding: 10px 12px 14px;
+      display: flex; flex-direction: column; gap: 4px;
+    }
+    .cr-file-picker-list::-webkit-scrollbar { width: 4px; }
+    .cr-file-picker-list::-webkit-scrollbar-track { background: transparent; }
+    .cr-file-picker-list::-webkit-scrollbar-thumb { background: rgba(155,93,229,0.3); border-radius: 2px; }
+    .cr-file-picker-empty { text-align: center; color: rgba(255,255,255,0.3); font-size: 0.75rem; padding: 24px 0; }
+    .cr-file-item {
+      display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
+      cursor: default; transition: background .12s;
+    }
+    .cr-file-item:hover { background: rgba(255,255,255,0.05); }
+    .cr-file-icon {
+      width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 0.58rem; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase;
+    }
+    .cr-file-icon.pdf  { background: rgba(239,71,111,0.18); color: #EF476F; }
+    .cr-file-icon.img  { background: rgba(6,214,160,0.18); color: #06D6A0; }
+    .cr-file-icon.doc  { background: rgba(67,97,238,0.2); color: #7B9FFF; }
+    .cr-file-icon.xls  { background: rgba(6,214,160,0.15); color: #06D6A0; }
+    .cr-file-icon.ppt  { background: rgba(255,159,67,0.2); color: #FF9F43; }
+    .cr-file-icon.vid  { background: rgba(155,93,229,0.2); color: #c4b5fd; }
+    .cr-file-icon.other { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.45); }
+    .cr-file-info { flex: 1; min-width: 0; }
+    .cr-file-name { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .cr-file-meta { font-size: 0.66rem; color: rgba(255,255,255,0.3); margin-top: 1px; }
+    .cr-file-pick-btn {
+      flex-shrink: 0; padding: 5px 12px; border-radius: 8px; font-size: 0.7rem; font-weight: 700;
+      border: 1.5px solid rgba(6,214,224,0.35); background: rgba(6,214,224,0.08); color: #06D6E0;
+      cursor: pointer; transition: all .12s; white-space: nowrap;
+    }
+    .cr-file-pick-btn:hover { background: rgba(6,214,224,0.18); }
+    /* ── library file message card ── */
+    .cr-msg-file-card {
+      display: flex; align-items: center; gap: 10px; margin-top: 4px;
+      padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,0.05);
+      border: 1px solid rgba(255,255,255,0.09); cursor: pointer; transition: background .12s;
+      max-width: 260px;
+    }
+    .cr-msg-file-card:hover { background: rgba(6,214,224,0.1); border-color: rgba(6,214,224,0.25); }
+    .cr-msg-file-card .cr-file-icon { width: 30px; height: 30px; border-radius: 7px; }
+    .cr-msg-file-card .cr-file-name { font-size: 0.74rem; }
+    .cr-msg-file-card .cr-file-meta { font-size: 0.62rem; }
+    .cr-msg-shared-label {
+      font-size: 0.6rem; color: rgba(6,214,224,0.55); font-weight: 600;
+      letter-spacing: 0.04em; text-transform: uppercase; margin-top: 3px;
+    }
+    /* ── notes panel ── */
+    .cr-notes-panel { flex: 1; display: flex; flex-direction: column; padding: 10px; gap: 8px; overflow: hidden; }
+    .cr-notes-header { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
+    .cr-notes-label {
+      font-size: 0.7rem; color: rgba(255,255,255,0.3); display: flex; align-items: center; gap: 5px;
+    }
+    .cr-notes-label svg { width: 12px; height: 12px; color: rgba(155,93,229,0.5); }
+    .cr-notes-status { font-size: 0.65rem; color: rgba(6,214,224,0.45); display: flex; align-items: center; gap: 3px; }
+    .cr-notes-wordcount { font-size: 0.63rem; color: rgba(255,255,255,0.2); }
     .cr-notes-ta {
       flex: 1; resize: none; outline: none;
-      background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.08);
-      border-radius: 10px; padding: 10px 12px; color: #e8e0f7;
-      font-size: 0.82rem; font-family: 'Manrope',sans-serif; line-height: 1.55;
-      caret-color: #9B5DE5; transition: border-color .15s;
+      background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
+      border-radius: 12px; padding: 12px 13px; color: #e8e0f7;
+      font-size: 0.82rem; font-family: 'Manrope',sans-serif; line-height: 1.6;
+      caret-color: #9B5DE5; transition: border-color .15s, background .15s;
+      scrollbar-width: thin; scrollbar-color: rgba(155,93,229,0.2) transparent;
     }
-    .cr-notes-ta:focus { border-color: rgba(155,93,229,0.5); }
-    .cr-notes-ta::placeholder { color: rgba(255,255,255,0.2); }
+    .cr-notes-ta:focus {
+      border-color: rgba(155,93,229,0.35);
+      background: rgba(155,93,229,0.04);
+    }
+    .cr-notes-ta::placeholder { color: rgba(255,255,255,0.15); }
     /* templates modal */
     .cr-tpl-modal-overlay {
       display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.7);
@@ -546,24 +995,32 @@
     .cr-tpl-empty { font-size:0.8rem;color:rgba(255,255,255,0.25);text-align:center;padding:16px; }
 
     .cr-chat-input-wrap {
-      padding: 10px; border-top: 1.5px solid rgba(255,255,255,0.06);
-      display: flex; gap: 7px; align-items: flex-end; flex-shrink: 0;
+      padding: 8px 10px 10px; border-top: 1px solid rgba(255,255,255,0.05);
+      background: rgba(0,0,0,0.15);
+      display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
     }
+    .cr-chat-input-row { display: flex; gap: 6px; align-items: flex-end; }
     .cr-chat-input {
-      flex: 1; background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.1);
-      border-radius: 10px; padding: 8px 12px; color: #fff; font-family: 'Manrope',sans-serif;
-      font-size: 0.82rem; resize: none; outline: none; min-height: 36px; max-height: 100px;
-      transition: border-color .15s;
+      flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
+      border-radius: 12px; padding: 8px 12px; color: #fff; font-family: 'Manrope',sans-serif;
+      font-size: 0.82rem; resize: none; outline: none; min-height: 36px; max-height: 90px;
+      transition: border-color .15s, background .15s; line-height: 1.45;
     }
-    .cr-chat-input:focus { border-color: rgba(155,93,229,0.5); }
-    .cr-chat-input::placeholder { color: #8898AA; }
+    .cr-chat-input:focus {
+      border-color: rgba(155,93,229,0.45);
+      background: rgba(155,93,229,0.04);
+    }
+    .cr-chat-input::placeholder { color: rgba(255,255,255,0.25); }
     .cr-chat-send {
       width: 34px; height: 34px; border-radius: 10px;
-      background: #9B5DE5; border: none; cursor: pointer;
+      background: linear-gradient(135deg, #9B5DE5, #7B3FC5);
+      border: none; cursor: pointer;
       display: flex; align-items: center; justify-content: center;
       color: #fff; transition: all .15s; flex-shrink: 0;
+      box-shadow: 0 2px 10px rgba(155,93,229,0.3);
     }
-    .cr-chat-send:hover { background: #7B3FC5; }
+    .cr-chat-send:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(155,93,229,0.5); }
+    .cr-chat-send:active { transform: translateY(0); }
     .cr-chat-send svg { width: 14px; height: 14px; }
 
     /* no session placeholder in chat */
@@ -691,6 +1148,46 @@
     .cr-modal-confirm:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(155,93,229,0.4); }
     .cr-modal-confirm:disabled { opacity: .5; cursor: not-allowed; transform: none; }
 
+    /* ── guest link modal ── */
+    .cr-guest-link-wrap {
+      display: flex; align-items: center; gap: 8px;
+      background: rgba(255,255,255,0.04); border: 1px solid rgba(155,93,229,0.2);
+      border-radius: 10px; padding: 10px 12px; margin: 16px 0 8px;
+    }
+    .cr-guest-link-url {
+      flex: 1; font-size: 0.72rem; color: rgba(232,224,247,0.75);
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+      font-family: 'Manrope', monospace;
+    }
+    .cr-guest-copy-btn {
+      flex-shrink: 0; padding: 5px 12px; border: 1px solid rgba(155,93,229,0.35);
+      border-radius: 7px; background: none; color: #c4a8f5; font-size: 0.7rem;
+      font-weight: 700; cursor: pointer; transition: all .15s; white-space: nowrap;
+    }
+    .cr-guest-copy-btn:hover { background: rgba(155,93,229,0.12); color: #fff; }
+    .cr-guest-copy-btn.copied { color: #06D6A0; border-color: rgba(6,214,160,0.4); }
+    .cr-guest-note { font-size: 0.7rem; color: rgba(255,255,255,0.3); line-height: 1.6; }
+    .cr-guest-actions { display: flex; gap: 8px; margin-top: 16px; }
+    .cr-guest-create-btn {
+      flex: 1; padding: 10px; border: none; border-radius: 10px;
+      background: linear-gradient(135deg, #9B5DE5, #5e2fb5); color: #fff;
+      font-family: 'Unbounded', sans-serif; font-size: 0.7rem; font-weight: 800;
+      cursor: pointer; transition: opacity .15s;
+    }
+    .cr-guest-create-btn:hover { opacity: .88; }
+    .cr-guest-revoke-btn {
+      padding: 10px 14px; border: 1px solid rgba(239,71,111,0.3); border-radius: 10px;
+      background: none; color: #EF476F; font-size: 0.72rem; font-weight: 700;
+      cursor: pointer; transition: all .15s; white-space: nowrap;
+    }
+    .cr-guest-revoke-btn:hover { background: rgba(239,71,111,0.08); border-color: rgba(239,71,111,0.55); }
+    /* guest badge in participants list */
+    .cr-p-guest-badge {
+      font-size: 0.55rem; font-weight: 800; padding: 1px 5px; border-radius: 4px;
+      background: rgba(155,93,229,0.15); color: #c4a8f5; border: 1px solid rgba(155,93,229,0.25);
+      text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0;
+    }
+
     /* join banner (student) */
     .cr-join-banner {
       background: linear-gradient(135deg, rgba(155,93,229,0.15), rgba(6,214,224,0.08));
@@ -766,6 +1263,182 @@
     .cr-header-btn.cr-btn-sharing {
       background: rgba(155,93,229,0.18); border-color: rgba(155,93,229,0.5); color: #c4b5fd;
     }
+    /* ── screen picker modal v2 (Discord-style with live preview) ── */
+    .cr-screen-picker-overlay {
+      position: fixed; inset: 0; z-index: 10000;
+      background: rgba(0,0,0,0.75); backdrop-filter: blur(8px);
+      display: flex; align-items: center; justify-content: center;
+      opacity: 0; pointer-events: none; transition: opacity .18s;
+    }
+    .cr-screen-picker-overlay.open { opacity: 1; pointer-events: all; }
+    .cr-screen-picker {
+      background: #18131f; border: 1px solid rgba(155,93,229,0.22);
+      border-radius: 20px; width: 580px; max-width: calc(100vw - 24px);
+      max-height: 92vh; overflow-y: auto; overflow-x: hidden;
+      transform: scale(.95) translateY(16px);
+      transition: transform .24s cubic-bezier(.34,1.35,.64,1);
+      box-shadow: 0 40px 100px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);
+    }
+    .cr-screen-picker::-webkit-scrollbar { width: 4px; }
+    .cr-screen-picker::-webkit-scrollbar-track { background: transparent; }
+    .cr-screen-picker::-webkit-scrollbar-thumb { background: rgba(155,93,229,0.3); border-radius: 2px; }
+    .cr-screen-picker-overlay.open .cr-screen-picker { transform: scale(1) translateY(0); }
+    /* header */
+    .cr-sp-head { padding: 20px 22px 0; display: flex; align-items: center; gap: 12px; }
+    .cr-sp-icon {
+      width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
+      background: rgba(155,93,229,0.2); display: flex; align-items: center; justify-content: center; color: #c4b5fd;
+    }
+    .cr-sp-titles { flex: 1; }
+    .cr-sp-title { font-size: 0.96rem; font-weight: 800; color: #fff; line-height: 1.2; }
+    .cr-sp-sub { font-size: 0.68rem; color: rgba(255,255,255,0.32); margin-top: 2px; }
+    .cr-sp-close {
+      background: rgba(255,255,255,0.06); border: none; cursor: pointer;
+      color: rgba(255,255,255,0.4); width: 30px; height: 30px; border-radius: 8px;
+      display: flex; align-items: center; justify-content: center; transition: all .12s; flex-shrink: 0;
+    }
+    .cr-sp-close:hover { background: rgba(239,71,111,0.15); color: #EF476F; }
+    /* ── tab bar ── */
+    .cr-sp-tabs {
+      display: flex; margin: 16px 22px 0; gap: 4px;
+      background: rgba(255,255,255,0.04); border-radius: 12px; padding: 4px;
+    }
+    .cr-sp-tab {
+      flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
+      padding: 8px 10px; border-radius: 9px; border: none; cursor: pointer;
+      font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.4);
+      background: none; transition: all .14s; white-space: nowrap;
+    }
+    .cr-sp-tab svg { flex-shrink: 0; transition: color .14s; }
+    .cr-sp-tab:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); }
+    .cr-sp-tab.active { background: rgba(155,93,229,0.2); color: #c4b5fd; }
+    .cr-sp-tab.active svg { color: #9B5DE5; }
+    /* ── preview area ── */
+    .cr-sp-preview-wrap {
+      margin: 14px 22px 0; border-radius: 14px; overflow: hidden;
+      background: #0d0a12; border: 1px solid rgba(255,255,255,0.08);
+      position: relative;
+    }
+    .cr-sp-preview-wrap::before { content: ''; display: block; padding-top: 56.25%; } /* 16:9 */
+    .cr-sp-preview-inner {
+      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+    }
+    /* empty state */
+    .cr-sp-empty {
+      display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px;
+      animation: crSpFadeIn .2s ease;
+    }
+    @keyframes crSpFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+    .cr-sp-empty-icon {
+      width: 60px; height: 60px; border-radius: 16px;
+      background: rgba(155,93,229,0.1); border: 1px solid rgba(155,93,229,0.2);
+      display: flex; align-items: center; justify-content: center; color: rgba(155,93,229,0.6);
+    }
+    .cr-sp-empty-title { font-size: 0.82rem; font-weight: 700; color: rgba(255,255,255,0.5); }
+    .cr-sp-empty-hint { font-size: 0.66rem; color: rgba(255,255,255,0.25); text-align: center; max-width: 220px; line-height: 1.5; }
+    .cr-sp-pick-btn {
+      margin-top: 4px; padding: 9px 20px; border-radius: 10px; font-size: 0.76rem; font-weight: 800;
+      border: 1.5px solid rgba(155,93,229,0.45); background: rgba(155,93,229,0.12); color: #c4b5fd;
+      cursor: pointer; transition: all .14s; display: flex; align-items: center; gap: 7px;
+    }
+    .cr-sp-pick-btn:hover { background: rgba(155,93,229,0.22); border-color: rgba(155,93,229,0.7); color: #fff; }
+    /* live video preview */
+    .cr-sp-video-wrap {
+      position: absolute; inset: 0; display: none;
+      flex-direction: column; animation: crSpFadeIn .2s ease;
+    }
+    .cr-sp-video-wrap.visible { display: flex; }
+    .cr-sp-video {
+      width: 100%; height: 100%; object-fit: contain;
+      background: #000;
+    }
+    .cr-sp-preview-bar {
+      position: absolute; bottom: 0; left: 0; right: 0;
+      padding: 20px 14px 12px;
+      background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
+      display: flex; align-items: center; gap: 8px;
+    }
+    .cr-sp-src-icon-sm {
+      width: 22px; height: 22px; border-radius: 6px;
+      background: rgba(155,93,229,0.25); display: flex; align-items: center; justify-content: center;
+      color: #c4b5fd; flex-shrink: 0;
+    }
+    .cr-sp-preview-name {
+      flex: 1; font-size: 0.72rem; font-weight: 700; color: #fff;
+      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    }
+    .cr-sp-res-badge {
+      font-size: 0.58rem; font-weight: 800; padding: 2px 7px; border-radius: 5px;
+      background: rgba(155,93,229,0.3); color: #c4b5fd; flex-shrink: 0; letter-spacing: 0.02em;
+    }
+    .cr-sp-change-btn {
+      padding: 5px 12px; border-radius: 7px; font-size: 0.66rem; font-weight: 700;
+      border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8);
+      cursor: pointer; flex-shrink: 0; transition: all .12s;
+    }
+    .cr-sp-change-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }
+    /* ── divider ── */
+    .cr-sp-divider { margin: 14px 22px 0; border: none; border-top: 1px solid rgba(255,255,255,0.07); }
+    /* ── settings section ── */
+    .cr-sp-settings { padding: 14px 22px; display: flex; flex-direction: column; gap: 12px; }
+    .cr-sp-q-row { display: flex; align-items: center; gap: 10px; }
+    .cr-sp-q-label {
+      font-size: 0.64rem; font-weight: 800; color: rgba(255,255,255,0.35);
+      text-transform: uppercase; letter-spacing: 0.07em; width: 108px; flex-shrink: 0;
+    }
+    .cr-sp-q-opts { display: flex; gap: 5px; flex-wrap: wrap; }
+    .cr-sp-qbtn {
+      padding: 5px 13px; border-radius: 8px; font-size: 0.7rem; font-weight: 700;
+      border: 1.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
+      color: rgba(255,255,255,0.45); cursor: pointer; transition: all .12s;
+    }
+    .cr-sp-qbtn:hover { border-color: rgba(155,93,229,0.4); color: rgba(255,255,255,0.75); }
+    .cr-sp-qbtn.active { border-color: rgba(155,93,229,0.65); background: rgba(155,93,229,0.16); color: #c4b5fd; }
+    /* ── option cards (2-col grid) ── */
+    .cr-sp-opts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+    .cr-sp-opt {
+      display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 11px;
+      background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
+      cursor: pointer; transition: all .12s; user-select: none;
+    }
+    .cr-sp-opt:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
+    .cr-sp-opt.on { background: rgba(6,214,224,0.07); border-color: rgba(6,214,224,0.25); }
+    .cr-sp-opt-ic { color: rgba(255,255,255,0.3); flex-shrink: 0; transition: color .12s; }
+    .cr-sp-opt.on .cr-sp-opt-ic { color: #06D6E0; }
+    .cr-sp-opt-text { flex: 1; min-width: 0; }
+    .cr-sp-opt-title { font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .cr-sp-opt.on .cr-sp-opt-title { color: rgba(255,255,255,0.85); }
+    .cr-sp-opt-hint { font-size: 0.58rem; color: rgba(255,255,255,0.25); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .cr-sp-toggle {
+      width: 34px; height: 18px; border-radius: 9px; border: none; cursor: pointer; flex-shrink: 0;
+      background: rgba(255,255,255,0.1); position: relative; transition: background .15s;
+    }
+    .cr-sp-toggle::after {
+      content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
+      border-radius: 50%; background: rgba(255,255,255,0.5); transition: transform .15s, background .15s;
+    }
+    .cr-sp-opt.on .cr-sp-toggle { background: #06D6E0; }
+    .cr-sp-opt.on .cr-sp-toggle::after { background: #fff; transform: translateX(16px); }
+    /* ── footer ── */
+    .cr-sp-footer {
+      padding: 12px 22px 18px; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
+      border-top: 1px solid rgba(255,255,255,0.07);
+    }
+    .cr-sp-cancel {
+      padding: 9px 18px; border-radius: 10px; font-size: 0.76rem; font-weight: 700;
+      border: 1.5px solid rgba(255,255,255,0.1); background: none; color: rgba(255,255,255,0.45);
+      cursor: pointer; transition: all .12s;
+    }
+    .cr-sp-cancel:hover { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.75); }
+    .cr-sp-start {
+      padding: 9px 22px; border-radius: 10px; font-size: 0.76rem; font-weight: 800;
+      border: none; background: linear-gradient(135deg, #9B5DE5, #7B3DBF); color: #fff;
+      cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 8px;
+      box-shadow: 0 4px 14px rgba(155,93,229,0.35);
+    }
+    .cr-sp-start:hover { box-shadow: 0 6px 20px rgba(155,93,229,0.5); transform: translateY(-1px); }
+    .cr-sp-start:active { transform: translateY(0); }
+    .cr-sp-start:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
     /* ── student status notification bar ── */
     #cr-status-bar {
       position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
@@ -834,6 +1507,123 @@
       background: rgba(6,214,160,.1); border-color: rgba(6,214,160,.4); color: #06D6A0;
     }
 
+    /* ── Quiz panel (teacher) ── */
+    .cr-quiz-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+    .cr-quiz-start-btn {
+      width: 100%; padding: 10px; border: none; border-radius: 10px;
+      background: linear-gradient(135deg, #06D6E0, #9B5DE5);
+      font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800;
+      color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
+      transition: transform 0.12s, box-shadow 0.12s;
+    }
+    .cr-quiz-start-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(155,93,229,0.4); }
+    .cr-quiz-start-btn:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }
+    .cr-quiz-status-bar {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 7px 10px; background: rgba(6,214,160,0.07); border: 1px solid rgba(6,214,160,0.18);
+      border-radius: 10px; margin-bottom: 8px;
+    }
+    .cr-quiz-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #06D6A0; animation: pulse-dot 1.5s ease infinite; flex-shrink: 0; }
+    .cr-quiz-status-text { font-size: 0.7rem; font-weight: 700; color: #059652; }
+    .cr-quiz-end-btn { font-size: 0.66rem; font-weight: 700; color: #EF476F; background: none; border: none; cursor: pointer; padding: 3px 8px; border-radius: 6px; transition: background 0.12s; white-space: nowrap; flex-shrink: 0; }
+    .cr-quiz-end-btn:hover { background: rgba(239,71,111,0.12); }
+    .cr-quiz-active-card { background: rgba(155,93,229,0.08); border: 1px solid rgba(155,93,229,0.22); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
+    .cr-quiz-active-label { font-size: 0.6rem; font-weight: 800; color: #9B5DE5; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
+    .cr-quiz-active-text { font-size: 0.8rem; font-weight: 600; color: #e8e0f7; line-height: 1.5; margin-bottom: 9px; }
+    .cr-quiz-counter-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+    .cr-quiz-counter-val { font-family: 'Unbounded', sans-serif; font-size: 0.96rem; font-weight: 900; color: #9B5DE5; flex-shrink: 0; }
+    .cr-quiz-counter-lbl { font-size: 0.68rem; color: rgba(255,255,255,0.35); font-weight: 600; }
+    .cr-quiz-counter-bar-wrap { flex: 1; height: 5px; background: rgba(155,93,229,0.14); border-radius: 99px; overflow: hidden; }
+    .cr-quiz-counter-bar { height: 100%; background: linear-gradient(90deg, #9B5DE5, #06D6E0); border-radius: 99px; transition: width 0.4s ease; }
+    .cr-quiz-show-results-btn {
+      width: 100%; padding: 7px; border: none; border-radius: 8px;
+      background: linear-gradient(135deg, #06D6E0, #9B5DE5);
+      font-family: 'Unbounded', sans-serif; font-size: 0.66rem; font-weight: 800;
+      color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: transform 0.12s;
+    }
+    .cr-quiz-show-results-btn:hover { transform: translateY(-1px); }
+    .cr-quiz-result-stats { display: flex; flex-direction: column; gap: 5px; margin: 4px 0; overflow-y: auto; max-height: 200px; }
+    .cr-quiz-result-stat { flex: 1; padding: 5px 6px; border-radius: 7px; background: rgba(255,255,255,0.04); text-align: center; }
+    .cr-quiz-result-stat-val { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 900; color: #e8e0f7; }
+    .cr-quiz-result-stat-lbl { font-size: 0.56rem; color: rgba(255,255,255,0.3); font-weight: 700; text-transform: uppercase; }
+    .cr-quiz-result-stat.rs-ok .cr-quiz-result-stat-val { color: #06D6A0; }
+    .cr-quiz-result-stat.rs-bad .cr-quiz-result-stat-val { color: #EF476F; }
+    .cr-quiz-result-bars { display: flex; flex-direction: column; gap: 5px; }
+    .cr-quiz-result-row { display: flex; align-items: center; gap: 6px; }
+    .cr-quiz-result-key { width: 18px; height: 18px; border-radius: 5px; background: rgba(255,255,255,0.07); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.58rem; font-weight: 800; color: rgba(255,255,255,0.4); }
+    .cr-quiz-result-key.correct { background: #06D6A0; color: #0e0824; }
+    .cr-quiz-result-track { flex: 1; height: 12px; background: rgba(255,255,255,0.05); border-radius: 99px; overflow: hidden; }
+    .cr-quiz-result-fill { height: 100%; border-radius: 99px; background: rgba(155,93,229,0.45); transition: width 0.5s ease; }
+    .cr-quiz-result-fill.correct-fill { background: linear-gradient(90deg, #06D6A0, #06D6E0); }
+    .cr-quiz-result-count { font-size: 0.64rem; font-weight: 800; color: rgba(255,255,255,0.5); min-width: 18px; text-align: right; }
+    .cr-quiz-filters { padding: 6px 10px 4px; display: flex; flex-direction: column; gap: 5px; }
+    .cr-quiz-search-wrap { position: relative; }
+    .cr-quiz-search-input { width: 100%; padding: 7px 10px 7px 28px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e8e0f7; font-family: 'Manrope', sans-serif; font-size: 0.76rem; outline: none; box-sizing: border-box; transition: border-color 0.15s; }
+    .cr-quiz-search-input::placeholder { color: rgba(255,255,255,0.22); }
+    .cr-quiz-search-input:focus { border-color: rgba(155,93,229,0.5); }
+    .cr-quiz-search-icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; color: rgba(255,255,255,0.22); pointer-events: none; }
+    .cr-quiz-filter-row { display: flex; gap: 5px; }
+    .cr-quiz-filter-sel { flex: 1; padding: 5px 7px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e8e0f7; font-family: 'Manrope', sans-serif; font-size: 0.72rem; outline: none; cursor: pointer; appearance: none; }
+    .cr-quiz-filter-sel option { background: #1a0a3c; color: #e8e0f7; }
+    .cr-quiz-q-scroll { flex: 1; overflow-y: auto; padding: 2px 0; }
+    .cr-quiz-q-scroll::-webkit-scrollbar { width: 3px; }
+    .cr-quiz-q-scroll::-webkit-scrollbar-thumb { background: rgba(155,93,229,0.22); border-radius: 3px; }
+    .cr-quiz-q-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 9px; border: 1px solid transparent; margin: 1px 2px; transition: background 0.12s; }
+    .cr-quiz-q-item:hover { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
+    .cr-quiz-q-item.launched { background: rgba(6,214,160,0.06); border-color: rgba(6,214,160,0.18); }
+    .cr-quiz-q-body { flex: 1; min-width: 0; }
+    .cr-quiz-q-text { font-size: 0.76rem; font-weight: 600; color: rgba(232,224,247,0.85); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+    .cr-quiz-q-meta { margin-top: 3px; display: flex; gap: 5px; flex-wrap: wrap; }
+    .cr-quiz-launch-btn { padding: 5px 9px; border: none; border-radius: 99px; background: rgba(155,93,229,0.16); color: #c4a8f5; font-family: 'Manrope', sans-serif; font-size: 0.68rem; font-weight: 800; cursor: pointer; flex-shrink: 0; transition: all 0.12s; margin-top: 1px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
+    .cr-quiz-launch-btn:hover { background: rgba(155,93,229,0.32); color: #fff; }
+    .cr-quiz-launch-btn:disabled { opacity: 0.38; cursor: default; }
+    .cr-quiz-count { font-size: 0.62rem; color: rgba(255,255,255,0.22); padding: 2px 10px 3px; }
+    .cr-quiz-load-more { width: calc(100% - 20px); margin: 2px 10px 8px; padding: 7px; background: none; border: 1px dashed rgba(155,93,229,0.22); border-radius: 8px; color: rgba(155,93,229,0.65); font-size: 0.7rem; font-weight: 700; cursor: pointer; transition: all 0.12s; }
+    .cr-quiz-load-more:hover { border-color: rgba(155,93,229,0.45); color: #c4a8f5; }
+    .cr-quiz-load-more:disabled { opacity: 0.38; cursor: default; }
+    .cr-quiz-no-session-msg { text-align: center; padding: 28px 14px; color: rgba(255,255,255,0.22); font-size: 0.78rem; line-height: 1.7; }
+
+    /* ── Student quiz widget ── */
+    #cr-sq-widget { position: fixed; bottom: 24px; right: 24px; z-index: 7500; width: 310px;
+      background: #0e0824; border: 1.5px solid rgba(155,93,229,0.35); border-radius: 20px;
+      box-shadow: 0 16px 48px rgba(0,0,0,0.65); display: none; flex-direction: column; overflow: hidden; }
+    #cr-sq-widget.open { display: flex; animation: crSqIn .28s cubic-bezier(.34,1.56,.64,1); }
+    @keyframes crSqIn { from { opacity:0; transform:translateY(12px) scale(.96) } to { opacity:1; transform:none } }
+    #cr-sq-widget.sq-min .cr-sq-body { display: none; }
+    #cr-sq-widget.sq-min { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
+    .cr-sq-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px 9px; border-bottom: 1px solid rgba(255,255,255,0.06); }
+    .cr-sq-badge { display: flex; align-items: center; gap: 7px; font-size: 0.68rem; font-weight: 800; color: #9B5DE5; text-transform: uppercase; letter-spacing: 0.06em; }
+    .cr-sq-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #9B5DE5; animation: pulse-dot 1.2s ease infinite; flex-shrink: 0; }
+    .cr-sq-collapse { background: none; border: none; color: rgba(255,255,255,0.35); cursor: pointer; padding: 4px; border-radius: 6px; transition: color .15s, background .15s; line-height: 1; }
+    .cr-sq-collapse:hover { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.07); }
+    .cr-sq-body { padding: 12px 14px 14px; overflow-y: auto; max-height: 380px; }
+    .cr-sq-q { font-size: 0.86rem; font-weight: 600; color: #e8e0f7; line-height: 1.6; margin-bottom: 12px; }
+    .cr-sq-opts { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
+    .cr-sq-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid rgba(255,255,255,0.1); border-radius: 11px; cursor: pointer; transition: all .15s; background: transparent; }
+    .cr-sq-opt:hover { border-color: rgba(155,93,229,0.5); background: rgba(155,93,229,0.06); }
+    .cr-sq-opt.selected { border-color: #06D6E0; background: rgba(6,214,224,0.08); }
+    .cr-sq-opt.correct { border-color: #06D6A0 !important; background: rgba(6,214,160,0.1) !important; }
+    .cr-sq-opt.wrong { border-color: #EF476F !important; background: rgba(239,71,111,0.07) !important; }
+    .cr-sq-key { width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,0.07); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.66rem; font-weight: 800; color: rgba(255,255,255,0.45); transition: all .15s; }
+    .cr-sq-opt.selected .cr-sq-key { background: #06D6E0; color: #0e0824; }
+    .cr-sq-opt.correct .cr-sq-key { background: #06D6A0; color: #0e0824; }
+    .cr-sq-opt.wrong .cr-sq-key { background: #EF476F; color: #fff; }
+    .cr-sq-opt-text { font-size: 0.8rem; color: #e8e0f7; flex: 1; line-height: 1.4; }
+    .cr-sq-status { text-align: center; font-size: 0.76rem; color: rgba(255,255,255,0.38); padding: 4px 0 0; }
+    .cr-sq-res-stats { display: flex; gap: 6px; margin-bottom: 9px; }
+    .cr-sq-res-stat { flex: 1; padding: 6px 7px; border-radius: 8px; background: rgba(255,255,255,0.04); text-align: center; }
+    .cr-sq-res-stat-val { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 900; color: #e8e0f7; }
+    .cr-sq-res-stat.ok .cr-sq-res-stat-val { color: #06D6A0; }
+    .cr-sq-res-stat.bad .cr-sq-res-stat-val { color: #EF476F; }
+    .cr-sq-res-stat-lbl { font-size: 0.56rem; color: rgba(255,255,255,0.28); font-weight: 700; text-transform: uppercase; }
+    .cr-sq-res-row { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
+    .cr-sq-res-key { width: 20px; height: 20px; border-radius: 5px; background: rgba(255,255,255,0.07); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 800; color: rgba(255,255,255,0.38); }
+    .cr-sq-res-key.ok { background: #06D6A0; color: #0e0824; }
+    .cr-sq-res-bar { flex: 1; height: 12px; background: rgba(255,255,255,0.06); border-radius: 99px; overflow: hidden; }
+    .cr-sq-res-fill { height: 100%; border-radius: 99px; background: rgba(155,93,229,0.45); transition: width .5s ease; }
+    .cr-sq-res-fill.ok { background: linear-gradient(90deg, #06D6A0, #06D6E0); }
+    .cr-sq-res-cnt { font-size: 0.64rem; font-weight: 800; color: rgba(255,255,255,0.45); min-width: 16px; text-align: right; }
+
     @media (max-width: 768px) {
       .cr-right { width: 100%; border-left: none; border-top: 1.5px solid rgba(255,255,255,0.06); max-height: 260px; }
       .cr-body { flex-direction: column; }
@@ -1066,6 +1856,219 @@
     .cr-dlg-ok.warn:hover   { box-shadow: 0 4px 20px rgba(255,159,67,0.45); transform: translateY(-1px); }
     .cr-dlg-ok.info   { background: linear-gradient(135deg, #9B5DE5, #7B3FC5); }
     .cr-dlg-ok.info:hover   { box-shadow: 0 4px 20px rgba(155,93,229,0.45); transform: translateY(-1px); }
+
+    /* ── Settings side panel ───────────────────────────────────────────────── */
+    .cr-settings-overlay {
+      position: fixed; inset: 0; z-index: 3000;
+      background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
+      display: flex; justify-content: flex-end;
+      opacity: 0; pointer-events: none;
+      transition: opacity .22s ease;
+    }
+    .cr-settings-overlay.open { opacity: 1; pointer-events: all; }
+    .cr-settings-panel {
+      width: 380px; max-width: 100vw;
+      background: #13101e; border-left: 1.5px solid rgba(155,93,229,0.25);
+      display: flex; flex-direction: column;
+      transform: translateX(30px);
+      transition: transform .22s ease;
+      overflow: hidden;
+    }
+    .cr-settings-overlay.open .cr-settings-panel { transform: translateX(0); }
+    .cr-sp-head {
+      padding: 18px 20px 12px; border-bottom: 1px solid rgba(255,255,255,0.07);
+      display: flex; align-items: center; gap: 12px; flex-shrink: 0;
+    }
+    .cr-sp-title {
+      flex: 1; font-family: 'Unbounded',sans-serif; font-size: 0.88rem;
+      font-weight: 800; color: #fff;
+    }
+    .cr-sp-close {
+      background: none; border: none; cursor: pointer; padding: 6px;
+      border-radius: 8px; color: #8898AA; transition: color .15s, background .15s;
+      display: flex; align-items: center;
+    }
+    .cr-sp-close:hover { background: rgba(255,255,255,0.07); color: #fff; }
+    .cr-sp-tabs {
+      display: flex; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0;
+    }
+    .cr-sp-tab {
+      flex: 1; padding: 10px 6px; font-family: 'Manrope',sans-serif;
+      font-size: 0.7rem; font-weight: 700; color: #8898AA;
+      background: none; border: none; cursor: pointer;
+      border-bottom: 2px solid transparent; transition: color .15s;
+    }
+    .cr-sp-tab.active { color: #9B5DE5; border-bottom-color: #9B5DE5; }
+    .cr-sp-body {
+      flex: 1; overflow-y: auto; padding: 20px;
+      scrollbar-width: thin; scrollbar-color: rgba(155,93,229,0.3) transparent;
+    }
+    .cr-sp-pane { display: none; flex-direction: column; gap: 22px; }
+    .cr-sp-pane.active { display: flex; }
+    .cr-sp-section { display: flex; flex-direction: column; gap: 10px; }
+    .cr-sp-section-label {
+      font-family: 'Manrope',sans-serif; font-size: 0.68rem; font-weight: 700;
+      color: #8898AA; text-transform: uppercase; letter-spacing: 0.06em;
+    }
+    .cr-sp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+    .cr-sp-row-lbl { font-family: 'Manrope',sans-serif; font-size: 0.82rem; font-weight: 600; color: #c8d0db; flex: 1; line-height: 1.4; }
+    .cr-sp-row-sub { font-size: 0.69rem; color: #8898AA; margin-top: 2px; }
+    /* Toggle */
+    .cr-toggle { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
+    .cr-toggle input { opacity: 0; width: 0; height: 0; }
+    .cr-toggle-track {
+      position: absolute; inset: 0; cursor: pointer;
+      background: rgba(255,255,255,0.12); border-radius: 22px; transition: background .2s;
+    }
+    .cr-toggle input:checked + .cr-toggle-track { background: #9B5DE5; }
+    .cr-toggle-track::before {
+      content: ''; position: absolute; width: 16px; height: 16px;
+      left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s;
+    }
+    .cr-toggle input:checked + .cr-toggle-track::before { transform: translateX(16px); }
+    /* Segmented control */
+    .cr-seg { display: flex; background: rgba(255,255,255,0.06); border-radius: 8px; overflow: hidden; }
+    .cr-seg button {
+      flex: 1; padding: 7px 8px; border: none; background: none; cursor: pointer;
+      font-family: 'Manrope',sans-serif; font-size: 0.72rem; font-weight: 700;
+      color: #8898AA; transition: all .15s;
+    }
+    .cr-seg button.active { background: #9B5DE5; color: #fff; border-radius: 6px; }
+    /* Mic test */
+    .cr-mic-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
+    .cr-mic-fill { height: 100%; background: linear-gradient(90deg, #06D6A0, #9B5DE5); border-radius: 3px; width: 0%; transition: width 0.08s ease; }
+    .cr-sp-btn {
+      padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(155,93,229,0.4);
+      background: rgba(155,93,229,0.1); color: #9B5DE5; font-family: 'Manrope',sans-serif;
+      font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all .15s; align-self: flex-start;
+    }
+    .cr-sp-btn:hover { background: rgba(155,93,229,0.2); }
+    .cr-sp-btn.cyan  { border-color: rgba(6,214,160,0.4); background: rgba(6,214,160,0.08); color: #06D6A0; }
+    .cr-sp-btn.cyan:hover  { background: rgba(6,214,160,0.16); }
+    .cr-sp-btn.cyan.granted { opacity: 0.6; cursor: default; pointer-events: none; }
+    .cr-sp-note { font-family: 'Manrope',sans-serif; font-size: 0.72rem; color: #8898AA; line-height: 1.5; }
+    /* Chat font size */
+    #cr-messages .cr-msg-text { font-size: 0.82rem; }
+    .cr-chat-fs-small  #cr-messages .cr-msg-text { font-size: 0.74rem; }
+    .cr-chat-fs-large  #cr-messages .cr-msg-text { font-size: 0.92rem; }
+    /* Left-hand mode: sidebar on left */
+    .cr-body.left-hand { flex-direction: row-reverse; }
+
+    /* ── Simulation panel ───────────────────────────────────────────────── */
+    .cr-sim-panel {
+      position: absolute; inset: 0; z-index: 40;
+      display: none; flex-direction: column;
+      background: #0A0814;
+    }
+    .cr-sim-panel.open { display: flex; }
+    .cr-sim-bar {
+      display: flex; align-items: center; gap: 10px;
+      padding: 0 14px; height: 40px; flex-shrink: 0;
+      background: rgba(14,10,28,0.97);
+      border-bottom: 1px solid rgba(155,93,229,0.2);
+    }
+    .cr-sim-bar-icon {
+      width: 22px; height: 22px; flex-shrink: 0;
+      background: linear-gradient(135deg, rgba(155,93,229,.35), rgba(6,214,224,.2));
+      border-radius: 6px; border: 1px solid rgba(155,93,229,0.3);
+      display: flex; align-items: center; justify-content: center;
+    }
+    .cr-sim-bar-icon svg { width: 12px; height: 12px; stroke: #9B5DE5; }
+    .cr-sim-bar-title { font-size: 0.82rem; font-weight: 700; color: var(--text-1, #f0e8ff); flex: 1; }
+    .cr-sim-bar-close {
+      width: 28px; height: 28px; border-radius: 7px; border: none;
+      background: rgba(255,255,255,0.06); color: var(--text-2, #aaa);
+      cursor: pointer; display: flex; align-items: center; justify-content: center;
+      transition: background .15s;
+    }
+    .cr-sim-bar-close:hover { background: rgba(241,91,181,0.18); color: #F15BB5; }
+    .cr-sim-bar-close svg { width: 14px; height: 14px; }
+    /* Mode toggle (teacher only) */
+    .cr-sim-mode {
+      display: flex; gap: 3px; align-items: center; margin-right: 4px;
+    }
+    .cr-sim-mode-btn {
+      padding: 3px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1);
+      background: transparent; color: rgba(255,255,255,0.45);
+      font-family: 'Manrope',sans-serif; font-size: 0.7rem; font-weight: 700;
+      cursor: pointer; transition: all .15s;
+    }
+    .cr-sim-mode-btn:hover { color: rgba(255,255,255,0.7); }
+    .cr-sim-mode-btn.active { background: rgba(155,93,229,0.2); border-color: rgba(155,93,229,0.5); color: #d4b8ff; }
+    /* Student interaction blocker overlay (demo mode) */
+    .cr-sim-blocker {
+      position: absolute; inset: 40px 0 0 0; z-index: 6;
+      background: transparent; cursor: not-allowed;
+      display: none;
+    }
+    .cr-sim-blocker.active { display: block; }
+    .cr-sim-frame {
+      flex: 1; border: none; width: 100%; min-height: 0;
+      background: #0D0D1A;
+    }
+
+    /* ── Simulation picker modal ────────────────────────────────────────── */
+    .cr-sim-picker-overlay {
+      position: fixed; inset: 0; z-index: 200;
+      background: rgba(0,0,0,0.72); backdrop-filter: blur(6px);
+      display: none; align-items: center; justify-content: center;
+    }
+    .cr-sim-picker-overlay.open { display: flex; }
+    .cr-sim-picker-modal {
+      background: #110a20; border-radius: 18px;
+      border: 1.5px solid rgba(155,93,229,0.25);
+      box-shadow: 0 24px 80px rgba(0,0,0,0.7);
+      width: min(720px, 96vw); max-height: 80vh;
+      display: flex; flex-direction: column; overflow: hidden;
+    }
+    .cr-sim-picker-head {
+      display: flex; align-items: center; gap: 12px;
+      padding: 20px 24px 0; flex-shrink: 0;
+    }
+    .cr-sim-picker-head h3 { flex: 1; font-family: 'Unbounded',sans-serif; font-size: 1.05rem; font-weight: 700; margin: 0; }
+    .cr-sim-picker-close {
+      width: 32px; height: 32px; border-radius: 9px; border: none;
+      background: rgba(255,255,255,0.06); color: var(--text-2, #aaa);
+      cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s;
+    }
+    .cr-sim-picker-close:hover { background: rgba(241,91,181,0.18); color: #F15BB5; }
+    .cr-sim-picker-close svg { width: 16px; height: 16px; }
+    .cr-sim-picker-cats {
+      display: flex; gap: 6px; padding: 14px 24px 10px; flex-shrink: 0; flex-wrap: wrap;
+    }
+    .cr-sim-cat-btn {
+      padding: 5px 14px; border-radius: 99px; border: 1.5px solid rgba(255,255,255,0.1);
+      background: transparent; color: rgba(255,255,255,0.55);
+      font-family: 'Manrope',sans-serif; font-size: 0.77rem; font-weight: 700;
+      cursor: pointer; transition: all .15s;
+    }
+    .cr-sim-cat-btn:hover { border-color: rgba(155,93,229,0.4); color: #c9b8ee; }
+    .cr-sim-cat-btn.active { background: rgba(155,93,229,0.15); border-color: rgba(155,93,229,0.5); color: #d4b8ff; }
+    .cr-sim-picker-body { flex: 1; overflow-y: auto; padding: 4px 24px 24px; scrollbar-width: thin; scrollbar-color: rgba(155,93,229,0.3) transparent; }
+    .cr-sim-picker-grid {
+      display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 10px;
+    }
+    .cr-sim-picker-card {
+      border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.08);
+      background: rgba(255,255,255,0.04); padding: 14px 14px 12px;
+      cursor: pointer; transition: border-color .15s, background .15s, transform .15s;
+      display: flex; flex-direction: column; gap: 5px;
+    }
+    .cr-sim-picker-card:hover {
+      border-color: rgba(155,93,229,0.55); background: rgba(155,93,229,0.08);
+      transform: translateY(-1px);
+    }
+    .cr-sim-picker-card-title { font-size: 0.82rem; font-weight: 700; color: #e8e0f7; line-height: 1.3; }
+    .cr-sim-picker-card-cat {
+      font-size: 0.68rem; font-weight: 600;
+      padding: 2px 7px; border-radius: 99px; align-self: flex-start;
+      border: 1px solid transparent;
+    }
+    .cr-sim-picker-card-cat.math  { background: rgba(155,93,229,0.15); border-color: rgba(155,93,229,0.3); color: #c9a0ff; }
+    .cr-sim-picker-card-cat.phys  { background: rgba(6,214,224,0.1);   border-color: rgba(6,214,224,0.3);  color: #06D6E0; }
+    .cr-sim-picker-card-cat.chem  { background: rgba(241,91,181,0.1);  border-color: rgba(241,91,181,0.3); color: #F15BB5; }
+    .cr-sim-picker-card-cat.bio   { background: rgba(168,224,99,0.1);  border-color: rgba(168,224,99,0.3); color: #A8E063; }
+    .cr-sim-picker-card-cat.game  { background: rgba(255,159,67,0.1);  border-color: rgba(255,159,67,0.3); color: #FF9F43; }
   </style>
 </head>
 <body>
@@ -1091,6 +2094,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"          class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html" class="sb-link"><i data-lucide="leaf"             class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom"     class="sb-link nav-active"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
@@ -1138,11 +2142,20 @@
             <i data-lucide="monitor" style="width:14px;height:14px"></i>
             <span>Экран</span>
           </button>
+          <button class="cr-header-btn" id="cr-sim-btn" onclick="crOpenSimPicker()" style="display:none" title="Открыть симуляцию">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/></svg>
+            <span>Симуляция</span>
+          </button>
           <!-- hand raise: student only -->
           <button class="cr-hand-btn" id="cr-hand-btn" onclick="crToggleHand()" style="display:none">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><path d="M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0"/><path d="M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2"/><path d="M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/></svg>
             <span id="cr-hand-label">Поднять руку</span>
           </button>
+          <!-- guest link button: teacher only -->
+          <button class="cr-header-btn" id="cr-guest-btn" onclick="crGuestOpen()" style="display:none" title="Гостевая ссылка">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+            <span>Гостям</span>
+          </button>
           <button class="cr-header-btn danger" id="cr-end-btn" onclick="crEndSession()" style="display:none">
             <i data-lucide="x" style="width:14px;height:14px"></i>
             <span>Завершить</span>
@@ -1152,11 +2165,14 @@
             <span>Покинуть</span>
           </button>
         </div>
+        <button class="cr-header-btn" onclick="openSettings()" title="Настройки урока" style="margin-left:4px">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+        </button>
       </div>
     </div>
 
     <!-- Body -->
-    <div class="cr-body">
+    <div class="cr-body" id="cr-body">
       <!-- Main area -->
       <div class="cr-main" id="cr-main">
         <!-- idle state (teacher) -->
@@ -1211,6 +2227,39 @@
             <div id="cr-status-bar"></div>
             <!-- Teacher cursor overlay (students see teacher's mouse) -->
             <div id="cr-teacher-cursor" style="display:none;"></div>
+            <!-- Active speaker chip -->
+            <div class="cr-speaker-chip" id="cr-speaker-chip">
+              <div class="cr-speaker-chip-avatar" id="cr-speaker-chip-avatar"></div>
+              <span class="cr-speaker-chip-name" id="cr-speaker-chip-name"></span>
+              <div class="cr-speaker-chip-wave">
+                <span></span><span></span><span></span>
+              </div>
+            </div>
+            <!-- Fullscreen exit overlay (visible only when in fullscreen — for touchpad users) -->
+            <button id="cr-fs-exit-overlay" onclick="wbToggleFullscreen()" title="Выйти из полноэкранного режима">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:15px;height:15px"><polyline points="8 3 3 3 3 8"/><polyline points="21 8 21 3 16 3"/><polyline points="3 16 3 21 8 21"/><polyline points="16 21 21 21 21 16"/></svg>
+              Свернуть
+            </button>
+          </div>
+          <!-- Simulation iframe overlay (shown when teacher opens a sim) -->
+          <div class="cr-sim-panel" id="cr-sim-panel">
+            <div class="cr-sim-bar">
+              <div class="cr-sim-bar-icon">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/></svg>
+              </div>
+              <span class="cr-sim-bar-title" id="cr-sim-bar-title">Симуляция</span>
+              <!-- Mode toggle (teacher only) -->
+              <div class="cr-sim-mode" id="cr-sim-mode-toggle" style="display:none">
+                <button class="cr-sim-mode-btn active" id="cr-sim-mode-demo" onclick="crSetSimMode('demo')" title="Все видят одно и то же">Демо</button>
+                <button class="cr-sim-mode-btn" id="cr-sim-mode-free" onclick="crSetSimMode('free')" title="Каждый работает самостоятельно">Свободно</button>
+              </div>
+              <button class="cr-sim-bar-close" id="cr-sim-bar-close" onclick="crTeacherCloseSim()" title="Закрыть симуляцию" style="display:none">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              </button>
+            </div>
+            <iframe class="cr-sim-frame" id="cr-sim-frame" src="about:blank" allow="fullscreen"></iframe>
+            <!-- Blocks student interaction in demo mode -->
+            <div class="cr-sim-blocker" id="cr-sim-blocker"></div>
           </div>
           </div><!-- /.cr-board-area -->
           <!-- student nav: page nav + follow toggle -->
@@ -1226,6 +2275,11 @@
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
               <span id="cr-follow-label">Авто</span>
             </button>
+            <button class="cr-fullscreen-btn" id="cr-student-fs-btn" onclick="wbToggleFullscreen()" title="На весь экран (F11)">
+              <svg class="fs-enter" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
+              <svg class="fs-exit" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="10" y1="14" x2="3" y2="21"/><line x1="21" y1="3" x2="14" y2="10"/></svg>
+              <span id="cr-fs-label">На весь экран</span>
+            </button>
           </div>
           <!-- toolbar: teacher only -->
           <div class="cr-toolbar" id="cr-toolbar" style="display:none">
@@ -1237,47 +2291,75 @@
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3l14 9-7 1-4 7L5 3z"/></svg>
               </button>
               <div class="cr-tool-sep"></div>
-              <!-- draw -->
-              <button class="cr-tool-btn active" id="wb-tool-pencil" onclick="wbSetTool('pencil')" title="Карандаш">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
-              </button>
-              <button class="cr-tool-btn" id="wb-tool-highlighter" onclick="wbSetTool('highlighter')" title="Маркер">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l-6 6v3h3l6-6"/><path d="m22 2-3 3-4-4 3-3 4 4zm-7 3 4 4"/></svg>
-              </button>
-              <button class="cr-tool-btn" id="wb-tool-laser" onclick="wbSetTool('laser')" title="Лазер">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/></svg>
-              </button>
-              <button class="cr-tool-btn" id="wb-tool-eraser" onclick="wbSetTool('eraser')" title="Ластик">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20H7L3 16l11-11 7 7-1 8z"/><path d="M6.0001 13.9999 10 18"/></svg>
-              </button>
+              <!-- draw tools -->
+              <button class="cr-tool-btn active" id="wb-tool-pencil" onclick="wbSetTool('pencil')" title="Карандаш"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></button>
+              <button class="cr-tool-btn" id="wb-tool-highlighter" onclick="wbSetTool('highlighter')" title="Маркер"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l-6 6v3h3l6-6"/><path d="m22 2-3 3-4-4 3-3 4 4zm-7 3 4 4"/></svg></button>
+              <button class="cr-tool-btn" id="wb-tool-laser" onclick="wbSetTool('laser')" title="Лазер"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/></svg></button>
+              <button class="cr-tool-btn" id="wb-tool-eraser" onclick="wbSetTool('eraser')" title="Ластик"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20H7L3 16l11-11 7 7-1 8z"/><path d="M6.0001 13.9999 10 18"/></svg></button>
               <div class="cr-tool-sep"></div>
-              <!-- shapes -->
-              <button class="cr-tool-btn" id="wb-tool-rect"        onclick="wbSetTool('rect')"        title="Прямоугольник"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/></svg></button>
-              <button class="cr-tool-btn" id="wb-tool-ellipse"     onclick="wbSetTool('ellipse')"     title="Эллипс"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="12" rx="10" ry="6"/></svg></button>
-              <button class="cr-tool-btn" id="wb-tool-line"        onclick="wbSetTool('line')"        title="Линия"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="20" x2="20" y2="4"/></svg></button>
-              <button class="cr-tool-btn" id="wb-tool-arrow"       onclick="wbSetTool('arrow')"       title="Стрелка"><svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M3 11h12.5l-4-4 1.5-1.5 6 6-6 6L11.5 16 15.5 12H3z"/></svg></button>
-              <button class="cr-tool-btn" id="wb-tool-triangle"    onclick="wbSetTool('triangle')"    title="Треугольник"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 3 22 21 2 21"/></svg></button>
-              <button class="cr-tool-btn" id="wb-tool-diamond"     onclick="wbSetTool('diamond')"     title="Ромб"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 22 12 12 22 2 12"/></svg></button>
-              <button class="cr-tool-btn" id="wb-tool-hexagon"     onclick="wbSetTool('hexagon')"     title="Шестиугольник"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 20.66 7 20.66 17 12 22 3.34 17 3.34 7"/></svg></button>
-              <button class="cr-tool-btn" id="wb-tool-star"        onclick="wbSetTool('star')"        title="Звезда"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></button>
-              <button class="cr-tool-btn" id="wb-tool-roundedrect" onclick="wbSetTool('roundedrect')" title="Скруглённый прямоугольник"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="5"/></svg></button>
-              <button class="cr-tool-btn" id="wb-tool-callout"     onclick="wbSetTool('callout')"     title="Облачко"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></button>
-              <button class="cr-tool-btn" id="wb-fill-btn"         onclick="wbToggleFill(this)"       title="Заливка"><svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15a1.49 1.49 0 0 0 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10 10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z"/></svg></button>
+              <!-- shapes dropdown -->
+              <div class="cr-drop" id="cr-shape-drop">
+                <button class="cr-tool-btn" id="wb-shape-picker-btn" onclick="wbToggleShapePicker()" title="Фигуры">
+                  <span id="wb-shape-icon-slot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:15px;height:15px"><rect x="3" y="3" width="18" height="18" rx="2"/></svg></span>
+                  <svg class="cr-drop-chevron" viewBox="0 0 8 5"><path d="M0 0l4 5 4-5z"/></svg>
+                </button>
+                <div class="cr-drop-popup cr-shape-popup-grid" id="cr-shape-popup">
+                  <button class="cr-tool-btn" id="wb-tool-rect"        onclick="wbPickShape('rect')"        title="Прямоугольник"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/></svg></button>
+                  <button class="cr-tool-btn" id="wb-tool-ellipse"     onclick="wbPickShape('ellipse')"     title="Эллипс"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="12" rx="10" ry="6"/></svg></button>
+                  <button class="cr-tool-btn" id="wb-tool-line"        onclick="wbPickShape('line')"        title="Линия"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="20" x2="20" y2="4"/></svg></button>
+                  <button class="cr-tool-btn" id="wb-tool-arrow"       onclick="wbPickShape('arrow')"       title="Стрелка"><svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M3 11h12.5l-4-4 1.5-1.5 6 6-6 6L11.5 16 15.5 12H3z"/></svg></button>
+                  <button class="cr-tool-btn" id="wb-tool-triangle"    onclick="wbPickShape('triangle')"    title="Треугольник"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 3 22 21 2 21"/></svg></button>
+                  <button class="cr-tool-btn" id="wb-tool-diamond"     onclick="wbPickShape('diamond')"     title="Ромб"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 22 12 12 22 2 12"/></svg></button>
+                  <button class="cr-tool-btn" id="wb-tool-hexagon"     onclick="wbPickShape('hexagon')"     title="Шестиугольник"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 20.66 7 20.66 17 12 22 3.34 17 3.34 7"/></svg></button>
+                  <button class="cr-tool-btn" id="wb-tool-star"        onclick="wbPickShape('star')"        title="Звезда"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></button>
+                  <button class="cr-tool-btn" id="wb-tool-roundedrect" onclick="wbPickShape('roundedrect')" title="Скруглённый прямоугольник"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="5"/></svg></button>
+                  <button class="cr-tool-btn" id="wb-tool-callout"     onclick="wbPickShape('callout')"     title="Облачко"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></button>
+                  <div class="cr-pop-sep"></div>
+                  <div class="cr-pop-full">
+                    <button class="cr-pop-fill-btn" id="wb-fill-btn" onclick="wbToggleFill(this)" title="Заливка фигур">
+                      <svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15a1.49 1.49 0 0 0 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10 10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z"/></svg>
+                      Заливка
+                    </button>
+                  </div>
+                </div>
+              </div>
               <div class="cr-tool-sep"></div>
               <!-- objects -->
               <button class="cr-tool-btn" id="wb-tool-connector"   onclick="wbSetTool('connector')"   title="Коннектор"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></button>
               <button class="cr-tool-btn" id="wb-tool-sticky"      onclick="wbSetTool('sticky')"      title="Стикер"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8z"/><polyline points="16 3 16 8 21 8"/></svg></button>
               <button class="cr-tool-btn" id="wb-tool-formula"     onclick="wbSetTool('formula')"     title="Формула LaTeX"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19c2 0 3-1 3-3V8c0-2 1-3 3-3"/><path d="M20 19c-2 0-3-1-3-3V8c0-2-1-3-3-3"/></svg></button>
-              <button class="cr-tool-btn" id="wb-tool-table"       onclick="wbSetTool('table')"       title="Таблица"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg></button>
+              <div class="wb-tbl-drop cr-drop" id="wb-tbl-drop">
+                <button class="cr-tool-btn" id="wb-tool-table" onclick="wbToggleTablePicker()" title="Таблица (выбор размера)">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
+                  <svg class="cr-drop-chevron" viewBox="0 0 8 5"><path d="M0 0l4 5 4-5z"/></svg>
+                </button>
+                <div class="wb-tbl-popup" id="wb-tbl-popup">
+                  <div class="wb-tbl-grid" id="wb-tbl-grid"></div>
+                  <div class="wb-tbl-label" id="wb-tbl-label">1 × 1</div>
+                </div>
+              </div>
               <button class="cr-tool-btn" id="wb-tool-coordinate"  onclick="wbSetTool('coordinate')"  title="Система координат"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="12" y1="3" x2="12" y2="21"/><polyline points="18 8 21 12 18 16"/><polyline points="8 18 12 21 16 18"/></svg></button>
-              <button class="cr-tool-btn" id="wb-tool-numberline" onclick="wbSetTool('numberline')" title="Числовая ось"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="12" x2="22" y2="12"/><polyline points="18 8 22 12 18 16"/><line x1="6" y1="9" x2="6" y2="15"/><line x1="10" y1="10" x2="10" y2="14"/><line x1="14" y1="10" x2="14" y2="14"/></svg></button>
-              <button class="cr-tool-btn" id="wb-tool-compass"    onclick="wbSetTool('compass')"    title="Циркуль"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v8"/><path d="m8.93 12.36-5.2 9"/><path d="m15.07 12.36 5.2 9"/><circle cx="12" cy="10" r="2"/></svg></button>
+              <button class="cr-tool-btn" id="wb-tool-numberline"  onclick="wbSetTool('numberline')"  title="Числовая ось"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="12" x2="22" y2="12"/><polyline points="18 8 22 12 18 16"/><line x1="6" y1="9" x2="6" y2="15"/><line x1="10" y1="10" x2="10" y2="14"/><line x1="14" y1="10" x2="14" y2="14"/></svg></button>
+              <button class="cr-tool-btn" id="wb-tool-compass"     onclick="wbSetTool('compass')"     title="Циркуль"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v8"/><path d="m8.93 12.36-5.2 9"/><path d="m15.07 12.36 5.2 9"/><circle cx="12" cy="10" r="2"/></svg></button>
               <button class="cr-tool-btn" id="wb-tool-text"        onclick="wbSetTool('text')"        title="Текст"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg></button>
+              <button class="cr-tool-btn" id="wb-tool-mindmap"     onclick="wbSetTool('mindmap')"     title="Интеллект-карта"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><line x1="12" y1="9" x2="12" y2="3"/><circle cx="12" cy="3" r="1.5"/><line x1="14.6" y1="13.4" x2="19" y2="17"/><circle cx="20" cy="18" r="1.5"/><line x1="9.4" y1="13.4" x2="5" y2="17"/><circle cx="4" cy="18" r="1.5"/><line x1="15" y1="11" x2="21" y2="9"/><circle cx="22" cy="8.5" r="1.5"/><line x1="9" y1="11" x2="3" y2="9"/><circle cx="2" cy="8.5" r="1.5"/></svg></button>
               <button class="cr-tool-btn" id="wb-tool-image"       onclick="wbOpenImagePicker()"      title="Изображение"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg></button>
               <input type="file" id="wb-image-input" accept="image/*" style="display:none" onchange="wbImageSelected(this)">
+              <div class="cr-tool-sep"></div>
+              <!-- undo / redo / clear -->
+              <button class="cr-tool-btn" onclick="wbUndo()"  title="Отменить (Ctrl+Z)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg></button>
+              <button class="cr-tool-btn" onclick="wbRedo()"  title="Повторить (Ctrl+Y)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/></svg></button>
+              <button class="cr-tool-btn" onclick="wbClear()" title="Очистить страницу"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg></button>
+              <!-- page nav pushed right -->
+              <div class="cr-page-nav">
+                <button class="cr-tool-btn" onclick="wbPrevPage()" title="Предыдущая страница"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg></button>
+                <span class="cr-page-label" id="wb-page-label">1/1</span>
+                <button class="cr-tool-btn" onclick="wbNextPage()" title="Следующая страница"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></button>
+                <button class="cr-tool-btn" onclick="wbAddPage()"  title="Добавить страницу"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
+              </div>
             </div>
 
-            <!-- ── ROW 2: options + actions ─────────────────────────────── -->
+            <!-- ── ROW 2: style + actions ───────────────────────────────── -->
             <div class="cr-tb-row">
               <!-- colors (12 + custom) -->
               <button class="cr-color-btn active" data-color="#ffffff" style="background:#ffffff"  onclick="wbSetColor(this)" title="Белый"></button>
@@ -1318,26 +2400,16 @@
               <button class="cr-tool-btn" onclick="wbCopySelected()"  title="Копировать (Ctrl+C)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
               <button class="cr-tool-btn" onclick="wbPasteSelected()" title="Вставить (Ctrl+V)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1"/></svg></button>
               <button class="cr-tool-btn" onclick="wbDeleteSelected()" title="Удалить (Del)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg></button>
-              <button class="cr-tool-btn" onclick="wbBringToFront()"  title="На перед"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M4 16V4h12" opacity=".4"/></svg></button>
-              <button class="cr-tool-btn" onclick="wbSendToBack()"    title="Назад"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="12" height="12" rx="2"/><path d="M8 16v4h12V8h-4" opacity=".4"/></svg></button>
+              <button class="cr-tool-btn" onclick="wbBringToFront()"  title="На передний план"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M4 16V4h12" opacity=".4"/></svg></button>
+              <button class="cr-tool-btn" onclick="wbSendToBack()"    title="На задний план"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="12" height="12" rx="2"/><path d="M8 16v4h12V8h-4" opacity=".4"/></svg></button>
               <div class="cr-tool-sep"></div>
-              <!-- undo / redo / clear / fullscreen / export / overlays -->
-              <button class="cr-tool-btn" onclick="wbUndo()"              title="Отменить (Ctrl+Z)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg></button>
-              <button class="cr-tool-btn" onclick="wbRedo()"              title="Повторить (Ctrl+Y)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/></svg></button>
-              <button class="cr-tool-btn" onclick="wbClear()"             title="Очистить страницу"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg></button>
-              <button class="cr-tool-btn" onclick="wbToggleFullscreen()"  title="Полный экран"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg></button>
-              <button class="cr-tool-btn" id="wb-btn-measurements"       onclick="wbToggleMeasurements(this)" title="Авто-измерения фигур"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 6H3"/><path d="M10 12H3"/><path d="M10 18H3"/><polyline points="15 12 18 15 21 12"/></svg></button>
-              <button class="cr-tool-btn" id="wb-btn-ruler"              onclick="wbToggleRuler()"      title="Линейка"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="8" width="20" height="8" rx="1"/><line x1="6" y1="12" x2="6" y2="16"/><line x1="10" y1="12" x2="10" y2="16"/><line x1="14" y1="12" x2="14" y2="16"/><line x1="18" y1="12" x2="18" y2="16"/></svg></button>
-              <button class="cr-tool-btn" id="wb-btn-protractor"         onclick="wbToggleProtractor()" title="Транспортир"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 20 A9 9 0 0 1 21 20"/><line x1="12" y1="11" x2="12" y2="20"/><line x1="3" y1="20" x2="21" y2="20"/></svg></button>
-              <!-- overlay properties (shown when ruler/protractor is active & clicked) -->
+              <!-- overlay properties (shown when ruler/protractor selected) -->
               <div class="wb-ov-props" id="wb-ov-props">
                 <span class="wb-ov-props-type" id="wb-ov-type">Линейка</span>
                 <label>Угол°<input type="number" id="wb-ov-angle" min="-360" max="360" step="1" oninput="wbOvApply()"></label>
                 <label id="wb-ov-size-lbl">Длина<input type="number" id="wb-ov-size" min="50" max="1800" step="10" oninput="wbOvApply()"></label>
-                <button class="cr-tool-btn" onclick="wbOvHide()" title="Скрыть свойства" style="width:20px;height:20px;font-size:10px;padding:0">✕</button>
+                <button class="cr-tool-btn" onclick="wbOvHide()" title="Скрыть" style="width:20px;height:20px;font-size:10px;padding:0">✕</button>
               </div>
-              <button class="cr-tool-btn" onclick="_wb && _wb.exportPNG()" title="Экспорт PNG"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button>
-              <button class="cr-tool-btn" id="btn-templates" onclick="crShowTemplates()" title="Шаблоны урока" style="display:none"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg></button>
               <div class="cr-tool-sep"></div>
               <!-- zoom controls -->
               <div class="wb-zoom-row">
@@ -1357,13 +2429,148 @@
                   <option value="coordinate">Оси</option>
                 </select>
               </div>
-              <!-- page nav pushed to right -->
-              <div class="cr-page-nav" style="margin-left:auto">
-                <button class="cr-tool-btn" onclick="wbPrevPage()" title="Предыдущая страница"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg></button>
-                <span class="cr-page-label" id="wb-page-label">1/1</span>
-                <button class="cr-tool-btn" onclick="wbNextPage()" title="Следующая страница"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></button>
-                <button class="cr-tool-btn" onclick="wbAddPage()"  title="Добавить страницу"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
+              <div class="cr-tool-sep"></div>
+              <!-- board theme picker -->
+              <div class="wb-tpl-picker">
+                <label>Доска:</label>
+                <select id="wb-theme-select" onchange="wbSetBoardTheme(this.value)" title="Тема доски">
+                  <option value="chalkboard">Мел</option>
+                  <option value="blackboard">Классная</option>
+                  <option value="corkboard">Пробка</option>
+                  <option value="whiteboard">Белая</option>
+                </select>
               </div>
+              <div class="cr-tool-sep"></div>
+              <!-- content templates picker -->
+              <div class="cr-drop" id="cr-tpl-drop">
+                <button class="cr-tool-btn" id="wb-tpl-picker-btn" onclick="wbToggleTplPicker()" title="Готовые шаблоны">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:15px;height:15px"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg>
+                  <svg class="cr-drop-chevron" viewBox="0 0 8 5"><path d="M0 0l4 5 4-5z"/></svg>
+                </button>
+                <div class="wb-tpl-popup-grid" id="wb-content-tpl-popup">
+                  <div class="tpl-grid">
+                    <button class="wb-tpl-item" onclick="wbInsertTemplate('venn2')">
+                      <svg viewBox="0 0 40 28"><ellipse cx="14" cy="14" rx="12" ry="10" fill="none" stroke="#06D6E0" stroke-width="1.5"/><ellipse cx="26" cy="14" rx="12" ry="10" fill="none" stroke="#F15BB5" stroke-width="1.5"/></svg>
+                      Венн 2
+                    </button>
+                    <button class="wb-tpl-item" onclick="wbInsertTemplate('venn3')">
+                      <svg viewBox="0 0 40 28"><ellipse cx="14" cy="10" rx="11" ry="8" fill="none" stroke="#06D6E0" stroke-width="1.5"/><ellipse cx="26" cy="10" rx="11" ry="8" fill="none" stroke="#F15BB5" stroke-width="1.5"/><ellipse cx="20" cy="20" rx="11" ry="8" fill="none" stroke="#FFE066" stroke-width="1.5"/></svg>
+                      Венн 3
+                    </button>
+                    <button class="wb-tpl-item" onclick="wbInsertTemplate('tchart')">
+                      <svg viewBox="0 0 40 28"><rect x="2" y="2" width="36" height="24" fill="none" stroke="#9B5DE5" stroke-width="1.5"/><line x1="20" y1="2" x2="20" y2="26" stroke="#9B5DE5" stroke-width="1.5"/><line x1="2" y1="9" x2="38" y2="9" stroke="#9B5DE5" stroke-width="1.5"/></svg>
+                      T-chart
+                    </button>
+                    <button class="wb-tpl-item" onclick="wbInsertTemplate('timeline')">
+                      <svg viewBox="0 0 40 28"><line x1="3" y1="14" x2="37" y2="14" stroke="#06D6E0" stroke-width="1.5"/><polyline points="34,11 37,14 34,17" fill="none" stroke="#06D6E0" stroke-width="1.5"/><line x1="10" y1="10" x2="10" y2="18" stroke="#06D6E0" stroke-width="1.2"/><line x1="20" y1="10" x2="20" y2="18" stroke="#06D6E0" stroke-width="1.2"/><line x1="30" y1="10" x2="30" y2="18" stroke="#06D6E0" stroke-width="1.2"/></svg>
+                      Шкала
+                    </button>
+                    <button class="wb-tpl-item" onclick="wbInsertTemplate('quadrant')">
+                      <svg viewBox="0 0 40 28"><line x1="2" y1="14" x2="38" y2="14" stroke="#9B5DE5" stroke-width="1.5"/><line x1="20" y1="2" x2="20" y2="26" stroke="#9B5DE5" stroke-width="1.5"/></svg>
+                      Квадрант
+                    </button>
+                    <button class="wb-tpl-item" onclick="wbInsertTemplate('pyramid')">
+                      <svg viewBox="0 0 40 28"><polygon points="20,2 38,26 2,26" fill="none" stroke="#06D6E0" stroke-width="1.5"/><line x1="8" y1="17" x2="32" y2="17" stroke="#06D6E0" stroke-width="1"/><line x1="13" y1="11" x2="27" y2="11" stroke="#06D6E0" stroke-width="1"/></svg>
+                      Пирамида
+                    </button>
+                    <button class="wb-tpl-item" onclick="wbInsertTemplate('swot')">
+                      <svg viewBox="0 0 40 28"><rect x="2" y="2" width="36" height="24" fill="none" stroke="#9B5DE5" stroke-width="1.5"/><line x1="20" y1="2" x2="20" y2="26" stroke="#9B5DE5" stroke-width="1.5"/><line x1="2" y1="14" x2="38" y2="14" stroke="#9B5DE5" stroke-width="1.5"/></svg>
+                      SWOT
+                    </button>
+                  </div>
+                  <div class="wb-bg-section">
+                    <div class="wb-bg-row">
+                      <button class="wb-bg-btn" onclick="wbPickBgImage()" title="Изображение или PDF как фон страницы">
+                        <svg style="width:11px;height:11px;vertical-align:middle;margin-right:3px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+                        Фон страницы
+                      </button>
+                      <button class="wb-bg-btn danger" id="wb-bg-remove-btn" onclick="wbRemoveBgImage()" style="display:none" title="Убрать фон">
+                        <svg style="width:11px;height:11px;vertical-align:middle;margin-right:3px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
+                        Удалить
+                      </button>
+                    </div>
+                    <input type="file" id="wb-bg-file-input" accept="image/*,.pdf" style="display:none" onchange="wbBgFileSelected(this)">
+                  </div>
+                </div>
+              </div>
+              <div class="cr-tool-sep"></div>
+              <!-- utils dropdown: fullscreen, export, templates, ruler, protractor, measurements -->
+              <div class="cr-drop" id="cr-utils-drop">
+                <button class="cr-tool-btn" id="wb-utils-picker-btn" onclick="wbToggleUtilsPicker()" title="Инструменты">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:15px;height:15px"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>
+                  <svg class="cr-drop-chevron" viewBox="0 0 8 5"><path d="M0 0l4 5 4-5z"/></svg>
+                </button>
+                <div class="cr-drop-popup cr-utils-popup-grid" id="cr-utils-popup">
+                  <button class="cr-tool-btn" onclick="wbToggleFullscreen()"  title="Полный экран"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg></button>
+                  <button class="cr-tool-btn" onclick="_wb && _wb.exportPNG()" title="Экспорт PNG"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button>
+                  <button class="cr-tool-btn" id="btn-templates" onclick="crShowTemplates()" title="Шаблоны урока" style="display:none"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg></button>
+                  <div class="cr-pop-sep"></div>
+                  <button class="cr-tool-btn active" id="wb-btn-snap" onclick="wbToggleSnap(this)" title="Полоски выравнивания"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg></button>
+                  <button class="cr-tool-btn" id="wb-btn-measurements" onclick="wbToggleMeasurements(this)" title="Авто-измерения фигур"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 6H3"/><path d="M10 12H3"/><path d="M10 18H3"/><polyline points="15 12 18 15 21 12"/></svg></button>
+                  <button class="cr-tool-btn" id="wb-btn-ruler"        onclick="wbToggleRuler()"      title="Линейка"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="8" width="20" height="8" rx="1"/><line x1="6" y1="12" x2="6" y2="16"/><line x1="10" y1="12" x2="10" y2="16"/><line x1="14" y1="12" x2="14" y2="16"/><line x1="18" y1="12" x2="18" y2="16"/></svg></button>
+                  <button class="cr-tool-btn" id="wb-btn-protractor"   onclick="wbToggleProtractor()" title="Транспортир"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 20 A9 9 0 0 1 21 20"/><line x1="12" y1="11" x2="12" y2="20"/><line x1="3" y1="20" x2="21" y2="20"/></svg></button>
+                </div>
+              </div>
+            </div><!-- /.cr-tb-row row2 -->
+
+            <!-- ── ROW 3: text options (visible only when text tool active) ── -->
+            <div class="cr-text-row" id="cr-text-row">
+              <label>Шрифт</label>
+              <select class="cr-text-font-sel" id="wb-text-font" onchange="wbSetTextFont(this.value)">
+                <option value="Manrope">Manrope</option>
+                <option value="Unbounded">Unbounded</option>
+                <option value="Caveat">Caveat</option>
+                <option value="Georgia">Georgia</option>
+                <option value="Arial">Arial</option>
+                <option value="Courier New">Courier New</option>
+                <option value="Impact">Impact</option>
+              </select>
+              <div class="cr-tool-sep"></div>
+              <label>Размер</label>
+              <input type="number" class="cr-text-size-inp" id="wb-text-size"
+                value="22" min="8" max="120" step="2"
+                onchange="wbSetTextSize(this.value)" oninput="wbSetTextSize(this.value)">
+              <div class="cr-tool-sep"></div>
+              <button class="cr-text-fmt-btn" id="wb-text-bold"   onclick="wbToggleTextBold()"   title="Жирный (Ctrl+B)" style="font-family:Georgia,serif">B</button>
+              <button class="cr-text-fmt-btn" id="wb-text-italic" onclick="wbToggleTextItalic()" title="Курсив (Ctrl+I)"  style="font-family:Georgia,serif;font-style:italic">I</button>
+              <div class="cr-tool-sep"></div>
+              <button class="cr-text-fmt-btn active" id="wb-text-al-left"   onclick="wbSetTextAlign('left')"   title="По левому краю"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="2" y1="4"  x2="14" y2="4"/><line x1="2" y1="8"  x2="10" y2="8"/><line x1="2" y1="12" x2="12" y2="12"/></svg></button>
+              <button class="cr-text-fmt-btn"        id="wb-text-al-center" onclick="wbSetTextAlign('center')" title="По центру">      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="2" y1="4"  x2="14" y2="4"/><line x1="4" y1="8"  x2="12" y2="8"/><line x1="3" y1="12" x2="13" y2="12"/></svg></button>
+              <button class="cr-text-fmt-btn"        id="wb-text-al-right"  onclick="wbSetTextAlign('right')"  title="По правому краю"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="2" y1="4"  x2="14" y2="4"/><line x1="6" y1="8"  x2="14" y2="8"/><line x1="4" y1="12" x2="14" y2="12"/></svg></button>
+            </div>
+
+            <!-- ── Context row: sticky color presets ───────────────────── -->
+            <div class="wb-ctx-row" id="wb-sticky-row">
+              <span class="wb-ctx-lbl">Цвет:</span>
+              <button class="wb-sticky-col active" data-sc="#FFE066" style="background:#FFE066" onclick="wbSetStickyColor(this)" title="Жёлтый"></button>
+              <button class="wb-sticky-col"        data-sc="#FF9F7F" style="background:#FF9F7F" onclick="wbSetStickyColor(this)" title="Персиковый"></button>
+              <button class="wb-sticky-col"        data-sc="#B5EAD7" style="background:#B5EAD7" onclick="wbSetStickyColor(this)" title="Мятный"></button>
+              <button class="wb-sticky-col"        data-sc="#C7CEEA" style="background:#C7CEEA" onclick="wbSetStickyColor(this)" title="Лавандовый"></button>
+              <button class="wb-sticky-col"        data-sc="#FFDAC1" style="background:#FFDAC1" onclick="wbSetStickyColor(this)" title="Персиковый 2"></button>
+              <button class="wb-sticky-col"        data-sc="#E2B7F5" style="background:#E2B7F5" onclick="wbSetStickyColor(this)" title="Сиреневый"></button>
+            </div>
+
+            <!-- ── Context row: connector arrows (shown when connector selected) -->
+            <div class="wb-ctx-row" id="wb-connector-row">
+              <span class="wb-ctx-lbl">Стрелки:</span>
+              <button class="cr-text-fmt-btn" id="wb-arr-start" onclick="wbToggleArrow('arrowStart')" title="Стрелка в начале">
+                <svg viewBox="0 0 20 14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="7" x2="16" y2="7"/><polyline points="8,3 4,7 8,11"/></svg>
+              </button>
+              <button class="cr-text-fmt-btn active" id="wb-arr-end" onclick="wbToggleArrow('arrowEnd')" title="Стрелка в конце">
+                <svg viewBox="0 0 20 14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="7" x2="16" y2="7"/><polyline points="12,3 16,7 12,11"/></svg>
+              </button>
+            </div>
+
+            <!-- ── Context row: multi-select alignment ──────────────────── -->
+            <div class="wb-ctx-row" id="wb-align-row">
+              <span class="wb-ctx-lbl">Выровнять:</span>
+              <button class="cr-tool-btn" onclick="wbAlign('left')"    title="По левому краю">    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="3" x2="4" y2="21"/><rect x="4" y="5"  width="12" height="4" rx="1"/><rect x="4" y="14" width="8"  height="4" rx="1"/></svg></button>
+              <button class="cr-tool-btn" onclick="wbAlign('centerH')" title="По центру (гориз)"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="3" x2="12" y2="21"/><rect x="5"  y="5"  width="14" height="4" rx="1"/><rect x="7"  y="14" width="10" height="4" rx="1"/></svg></button>
+              <button class="cr-tool-btn" onclick="wbAlign('right')"   title="По правому краю">   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="20" y1="3" x2="20" y2="21"/><rect x="8"  y="5"  width="12" height="4" rx="1"/><rect x="12" y="14" width="8"  height="4" rx="1"/></svg></button>
+              <div class="cr-tool-sep"></div>
+              <button class="cr-tool-btn" onclick="wbAlign('top')"     title="По верхнему краю">   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="4" x2="21" y2="4"/><rect x="5"  y="4" width="4"  height="12" rx="1"/><rect x="14" y="4" width="4"  height="8"  rx="1"/></svg></button>
+              <button class="cr-tool-btn" onclick="wbAlign('centerV')" title="По центру (верт)">   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="12" x2="21" y2="12"/><rect x="5"  y="5"  width="4" height="14" rx="1"/><rect x="14" y="7"  width="4" height="10" rx="1"/></svg></button>
+              <button class="cr-tool-btn" onclick="wbAlign('bottom')"  title="По нижнему краю">    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="20" x2="21" y2="20"/><rect x="5"  y="8"  width="4"  height="12" rx="1"/><rect x="14" y="12" width="4"  height="8"  rx="1"/></svg></button>
             </div>
 
           </div>
@@ -1371,24 +2578,35 @@
       </div>
 
       <!-- Right panel -->
-      <div class="cr-right">
+      <div class="cr-right" id="cr-right">
         <div class="cr-panel-tabs">
-          <button class="cr-tab active" id="tab-participants" onclick="crSwitchTab('participants')">
-            <i data-lucide="users" style="width:13px;height:13px"></i>
-            Участники
-            <span class="cr-tab-badge" id="participants-count">0</span>
-          </button>
-          <button class="cr-tab" id="tab-chat" onclick="crSwitchTab('chat')">
-            <i data-lucide="message-circle" style="width:13px;height:13px"></i>
-            Чат
-            <span class="cr-tab-badge" id="chat-unread" style="display:none">0</span>
-          </button>
-          <button class="cr-tab" id="tab-notes" onclick="crSwitchTab('notes')">
-            <i data-lucide="notebook-pen" style="width:13px;height:13px"></i>
-            Заметки
+          <div class="cr-panel-tabs-inner" id="cr-tabs-inner">
+            <button class="cr-tab active" id="tab-participants" onclick="crSwitchTab('participants')" title="Участники">
+              <i data-lucide="users" style="width:13px;height:13px"></i>
+              <span class="cr-tab-label">Участники</span>
+              <span class="cr-tab-badge" id="participants-count">0</span>
+            </button>
+            <button class="cr-tab" id="tab-chat" onclick="crSwitchTab('chat')" title="Чат">
+              <i data-lucide="message-circle" style="width:13px;height:13px"></i>
+              <span class="cr-tab-label">Чат</span>
+              <span class="cr-tab-badge" id="chat-unread" style="display:none">0</span>
+            </button>
+            <button class="cr-tab" id="tab-notes" onclick="crSwitchTab('notes')" title="Заметки">
+              <i data-lucide="notebook-pen" style="width:13px;height:13px"></i>
+              <span class="cr-tab-label">Заметки</span>
+            </button>
+            <button class="cr-tab" id="tab-quiz" onclick="crSwitchTab('quiz')" style="display:none" title="Квиз">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+              <span class="cr-tab-label">Квиз</span>
+              <span class="cr-tab-badge" id="quiz-badge" style="display:none">●</span>
+            </button>
+          </div>
+          <button class="cr-panel-collapse-btn" onclick="crToggleRightPanel()" title="Свернуть панель">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
           </button>
         </div>
 
+        <div class="cr-panel-content" id="cr-panel-content">
         <!-- Participants panel -->
         <div id="panel-participants" style="flex:1;overflow-y:auto;display:flex;flex-direction:column;">
           <!-- raised hands (teacher only) -->
@@ -1411,12 +2629,84 @@
         <div id="panel-notes" style="display:none; flex:1; flex-direction:column; overflow:hidden;">
           <div class="cr-notes-panel">
             <div class="cr-notes-header">
-              <span class="cr-notes-label">Личные заметки (видны только вам)</span>
+              <span class="cr-notes-label">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+                Личные заметки
+              </span>
               <span class="cr-notes-status" id="notes-status"></span>
             </div>
             <textarea class="cr-notes-ta" id="cr-notes-ta"
               placeholder="Пишите заметки по уроку…"
               oninput="crNotesOnInput()"></textarea>
+            <div style="display:flex;align-items:center;justify-content:space-between;padding:0 2px;">
+              <span class="cr-notes-wordcount" id="notes-wordcount">0 слов</span>
+              <span style="font-size:0.6rem;color:rgba(255,255,255,0.15)">Только вам</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Quiz panel (teacher only) -->
+        <div id="panel-quiz" style="display:none; flex:1; flex-direction:column; overflow:hidden;">
+          <!-- No session msg -->
+          <div class="cr-quiz-no-session-msg" id="cr-quiz-no-session">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:32px;height:32px;stroke:#8898AA"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+            <p>Квиз доступен во время урока</p>
+          </div>
+          <!-- Quiz active state -->
+          <div id="cr-quiz-session" style="display:none;flex:1;flex-direction:column;overflow:hidden;">
+            <!-- Personal session warning (no class) -->
+            <div id="cr-quiz-no-class" style="display:none;padding:10px 12px 0">
+              <div style="background:rgba(255,183,0,0.08);border:1px solid rgba(255,183,0,0.2);border-radius:8px;padding:8px 10px;font-size:0.7rem;color:rgba(255,220,100,0.75);line-height:1.5">
+                Квиз доступен только в классных сессиях. Создайте урок с выбором класса.
+              </div>
+            </div>
+            <!-- Start button (no live quiz running) -->
+            <div id="cr-quiz-start-area" style="padding:10px 10px 6px">
+              <button class="cr-quiz-start-btn" id="cr-quiz-start-btn" onclick="crQuizStart()">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+                Запустить квиз
+              </button>
+            </div>
+            <!-- Status bar (quiz running) -->
+            <div class="cr-quiz-status-bar" id="cr-quiz-status-bar" style="display:none">
+              <span class="cr-quiz-status-dot"></span>
+              <span class="cr-quiz-status-text" id="cr-quiz-status-text">Вопрос активен</span>
+              <button class="cr-quiz-end-btn" onclick="crQuizEnd()">Завершить</button>
+            </div>
+            <!-- Active question card -->
+            <div class="cr-quiz-active-card" id="cr-quiz-active-card" style="display:none">
+              <div class="cr-quiz-active-label">Текущий вопрос</div>
+              <div class="cr-quiz-active-text" id="cr-quiz-active-text"></div>
+              <div class="cr-quiz-counter-row">
+                <span class="cr-quiz-counter-val" id="cr-quiz-ans-count">0</span>
+                <span class="cr-quiz-counter-lbl">ответов</span>
+                <button class="cr-quiz-show-results-btn" id="cr-quiz-show-results-btn" onclick="crQuizShowResults()">Результаты</button>
+              </div>
+            </div>
+            <!-- Results display -->
+            <div class="cr-quiz-result-stats" id="cr-quiz-result-stats" style="display:none"></div>
+            <!-- Filters -->
+            <div class="cr-quiz-filters" id="cr-quiz-filters">
+              <div class="cr-quiz-search-wrap">
+                <svg class="cr-quiz-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+                <input class="cr-quiz-search-input" id="cr-quiz-search" type="text" placeholder="Поиск вопросов…" oninput="crQuizOnSearch(this.value)">
+              </div>
+              <div class="cr-quiz-filter-row">
+                <select class="cr-quiz-filter-sel" id="cr-quiz-topic-sel" onchange="crQuizOnTopicFilter()">
+                  <option value="">Все темы</option>
+                </select>
+                <select class="cr-quiz-filter-sel" id="cr-quiz-diff-sel" onchange="crQuizOnDiffFilter()">
+                  <option value="">Любой</option>
+                  <option value="1">Лёгкий</option>
+                  <option value="2">Средний</option>
+                  <option value="3">Сложный</option>
+                </select>
+              </div>
+              <div class="cr-quiz-count" id="cr-quiz-count" style="display:none"></div>
+            </div>
+            <!-- Question list -->
+            <div class="cr-quiz-q-scroll" id="cr-quiz-q-scroll"></div>
+            <button class="cr-quiz-load-more" id="cr-quiz-load-more" style="display:none" onclick="crQuizLoadMore()">Загрузить ещё</button>
           </div>
         </div>
 
@@ -1437,23 +2727,28 @@
               </button>
             </div>
             <div class="cr-chat-input-wrap">
-              <!-- file attach button -->
-              <button class="cr-attach-btn" onclick="document.getElementById('cr-file-input').click()" title="Прикрепить изображение">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:15px;height:15px"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 0 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
-              </button>
-              <input type="file" id="cr-file-input" accept="image/*" style="display:none" onchange="crAttachFile(this)">
-              <textarea class="cr-chat-input" id="cr-chat-input" placeholder="Сообщение..." rows="1"
-                onkeydown="crChatKeyDown(event)"></textarea>
-              <button class="cr-chat-send" onclick="crSendChat()">
-                <i data-lucide="send" style="width:14px;height:14px"></i>
-              </button>
+              <div class="cr-chat-input-row">
+                <button class="cr-attach-btn" onclick="document.getElementById('cr-file-input').click()" title="Прикрепить изображение">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:15px;height:15px"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 0 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+                </button>
+                <input type="file" id="cr-file-input" accept="image/*" style="display:none" onchange="crAttachFile(this)">
+                <button class="cr-share-lib-btn" id="cr-share-lib-btn" onclick="crOpenFilePicker()" title="Поделиться файлом из библиотеки">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:15px;height:15px"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/></svg>
+                </button>
+                <textarea class="cr-chat-input" id="cr-chat-input" placeholder="Сообщение..." rows="1"
+                  onkeydown="crChatKeyDown(event)"></textarea>
+                <button class="cr-chat-send" onclick="crSendChat()">
+                  <i data-lucide="send" style="width:14px;height:14px"></i>
+                </button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </div>
-  </div>
-</div>
+        </div><!-- /.cr-panel-content -->
+      </div><!-- /.cr-right -->
+    </div><!-- /.cr-body -->
+  </div><!-- /.sb-content -->
+</div><!-- /.app-layout -->
 
 <!-- Start Session Modal -->
 <div class="cr-modal-overlay" id="cr-modal">
@@ -1509,12 +2804,336 @@
   </div>
 </div>
 
+<!-- ── Guest link modal ── -->
+<div class="cr-modal-overlay" id="cr-guest-modal" onclick="if(event.target===this)crGuestClose()">
+  <div class="cr-modal" style="max-width:400px">
+    <div class="cr-modal-title">Гостевая ссылка</div>
+    <div class="cr-modal-sub">Поделитесь ссылкой — гость увидит доску без регистрации (только просмотр)</div>
+
+    <!-- state: no token yet -->
+    <div id="cr-guest-no-token">
+      <div class="cr-guest-actions" style="margin-top:20px">
+        <button class="cr-guest-create-btn" onclick="crGuestCreate()">
+          Создать ссылку
+        </button>
+      </div>
+    </div>
+
+    <!-- state: token exists -->
+    <div id="cr-guest-has-token" style="display:none">
+      <div class="cr-guest-link-wrap">
+        <span class="cr-guest-link-url" id="cr-guest-url"></span>
+        <button class="cr-guest-copy-btn" id="cr-guest-copy-btn" onclick="crGuestCopy()">Копировать</button>
+      </div>
+      <div class="cr-guest-note">Гости видят только доску. Чат, квизы и другие функции — недоступны.</div>
+      <div class="cr-guest-actions">
+        <button class="cr-guest-revoke-btn" onclick="crGuestRevoke()">Отозвать ссылку</button>
+      </div>
+    </div>
+
+    <div class="cr-modal-actions" style="margin-top:16px;justify-content:flex-end">
+      <button class="cr-modal-cancel" onclick="crGuestClose()">Закрыть</button>
+    </div>
+  </div>
+</div>
+
+<!-- Screen Picker Modal v2 -->
+<div class="cr-screen-picker-overlay" id="cr-screen-picker-overlay" onclick="if(event.target===this)crCloseScreenPicker()">
+  <div class="cr-screen-picker">
+
+    <!-- Header -->
+    <div class="cr-sp-head">
+      <div class="cr-sp-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+      </div>
+      <div class="cr-sp-titles">
+        <div class="cr-sp-title">Трансляция экрана</div>
+        <div class="cr-sp-sub">Ученики увидят выбранное содержимое в реальном времени</div>
+      </div>
+      <button class="cr-sp-close" onclick="crCloseScreenPicker()">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><path d="M18 6 6 18M6 6l12 12"/></svg>
+      </button>
+    </div>
+
+    <!-- Source type tabs -->
+    <div class="cr-sp-tabs">
+      <button class="cr-sp-tab active" id="cr-sptab-monitor" onclick="crSpSwitchTab('monitor')">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+        Экраны
+      </button>
+      <button class="cr-sp-tab" id="cr-sptab-window" onclick="crSpSwitchTab('window')">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
+        Окна
+      </button>
+      <button class="cr-sp-tab" id="cr-sptab-browser" onclick="crSpSwitchTab('browser')">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+        Вкладки браузера
+      </button>
+    </div>
+
+    <!-- Live preview area -->
+    <div class="cr-sp-preview-wrap">
+      <div class="cr-sp-preview-inner">
+
+        <!-- Empty state -->
+        <div class="cr-sp-empty" id="cr-sp-empty">
+          <div class="cr-sp-empty-icon" id="cr-sp-empty-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:26px;height:26px"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+          </div>
+          <div class="cr-sp-empty-title" id="cr-sp-empty-title">Экран не выбран</div>
+          <div class="cr-sp-empty-hint" id="cr-sp-empty-hint">Нажмите кнопку ниже — откроется диалог выбора источника</div>
+          <button class="cr-sp-pick-btn" id="cr-sp-pick-btn" onclick="crSpPickSource()">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+            Выбрать экран
+          </button>
+        </div>
+
+        <!-- Video preview (shown after source selected) -->
+        <div class="cr-sp-video-wrap" id="cr-sp-video-wrap">
+          <video class="cr-sp-video" id="cr-sp-video" autoplay muted playsinline></video>
+          <div class="cr-sp-preview-bar">
+            <div class="cr-sp-src-icon-sm" id="cr-sp-bar-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:11px;height:11px"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+            </div>
+            <span class="cr-sp-preview-name" id="cr-sp-preview-name">Экран 1</span>
+            <span class="cr-sp-res-badge" id="cr-sp-res-badge"></span>
+            <button class="cr-sp-change-btn" onclick="crSpPickSource()">Сменить</button>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <hr class="cr-sp-divider">
+
+    <!-- Settings -->
+    <div class="cr-sp-settings">
+      <div class="cr-sp-q-row">
+        <span class="cr-sp-q-label">Разрешение</span>
+        <div class="cr-sp-q-opts">
+          <button class="cr-sp-qbtn" data-q="720"  onclick="crSpSetQ(this,'res')">720p</button>
+          <button class="cr-sp-qbtn active" data-q="1080" onclick="crSpSetQ(this,'res')">1080p</button>
+          <button class="cr-sp-qbtn" data-q="0"    onclick="crSpSetQ(this,'res')">Источник</button>
+        </div>
+      </div>
+      <div class="cr-sp-q-row">
+        <span class="cr-sp-q-label">Частота кадров</span>
+        <div class="cr-sp-q-opts">
+          <button class="cr-sp-qbtn" data-q="15" onclick="crSpSetQ(this,'fps')">15 fps</button>
+          <button class="cr-sp-qbtn active" data-q="30" onclick="crSpSetQ(this,'fps')">30 fps</button>
+          <button class="cr-sp-qbtn" data-q="60" onclick="crSpSetQ(this,'fps')">60 fps</button>
+        </div>
+      </div>
+      <!-- Option cards grid -->
+      <div class="cr-sp-opts-grid">
+        <!-- Audio -->
+        <div class="cr-sp-opt" id="cr-sp-opt-audio" onclick="crSpToggleAudio()">
+          <span class="cr-sp-opt-ic">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:15px;height:15px"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
+          </span>
+          <div class="cr-sp-opt-text">
+            <div class="cr-sp-opt-title">Звук системы</div>
+            <div class="cr-sp-opt-hint">Передавать системный звук</div>
+          </div>
+          <button class="cr-sp-toggle" onclick="event.stopPropagation()"></button>
+        </div>
+        <!-- Cursor -->
+        <div class="cr-sp-opt on" id="cr-sp-opt-cursor" onclick="crSpToggleCursor()">
+          <span class="cr-sp-opt-ic">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:15px;height:15px"><path d="m4 4 7.07 17 2.51-7.39L21 11.07z"/></svg>
+          </span>
+          <div class="cr-sp-opt-text">
+            <div class="cr-sp-opt-title">Курсор</div>
+            <div class="cr-sp-opt-hint">Показывать указатель мыши</div>
+          </div>
+          <button class="cr-sp-toggle" onclick="event.stopPropagation()"></button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="cr-sp-footer">
+      <button class="cr-sp-cancel" onclick="crCloseScreenPicker()">Отмена</button>
+      <button class="cr-sp-start" id="cr-sp-start-btn" onclick="crSpStartShare()" disabled>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+        Поделиться
+      </button>
+    </div>
+
+  </div>
+</div>
+
+<!-- File Picker Modal -->
+<div class="cr-file-picker-overlay" id="cr-file-picker-overlay" onclick="if(event.target===this)crCloseFilePicker()">
+  <div class="cr-file-picker">
+    <div class="cr-file-picker-head">
+      <span class="cr-file-picker-title">Файлы из библиотеки</span>
+      <button class="cr-file-picker-close" onclick="crCloseFilePicker()" title="Закрыть">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M18 6 6 18M6 6l12 12"/></svg>
+      </button>
+    </div>
+    <input class="cr-file-picker-search" id="cr-file-picker-search" type="text" placeholder="Поиск по названию..." oninput="crFilePickerSearch(this.value)">
+    <div class="cr-file-picker-list" id="cr-file-picker-list">
+      <div class="cr-file-picker-empty">Загрузка...</div>
+    </div>
+  </div>
+</div>
+
 <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" crossorigin="anonymous" />
 <script src="/js/whiteboard.js"></script>
 <script src="/js/classroom-rtc.js"></script>
 <script src="/js/api.js"></script>
 <script>
+  /* ── User prefs ─────────────────────────────────────────────────────────── */
+  const CR_PREFS_KEY = 'ls_cr_prefs';
+  const CR_PREFS_DEFAULT = {
+    chatFontSize:     'medium',  // 'small' | 'medium' | 'large'
+    mutedOnJoin:      false,
+    vadSensitivity:   'medium',  // 'low' | 'medium' | 'high' → VAD threshold
+    chatSound:        true,
+    handSound:        true,
+    defaultTool:      'pencil',  // 'pencil' | 'select'
+    leftHand:         false,
+    stylusMultiplier: 0,         // 0=off, 0.5, 1.0, 2.0
+    lessonPushNotif:  false,
+  };
+  const VAD_THRESHOLDS = { low: 22, medium: 12, high: 5 };
+  let _prefs = { ...CR_PREFS_DEFAULT };
+
+  function crLoadPrefs() {
+    try { _prefs = { ...CR_PREFS_DEFAULT, ...JSON.parse(localStorage.getItem(CR_PREFS_KEY) || '{}') }; }
+    catch { _prefs = { ...CR_PREFS_DEFAULT }; }
+  }
+  function crSavePrefs() {
+    try { localStorage.setItem(CR_PREFS_KEY, JSON.stringify(_prefs)); } catch {}
+  }
+  function crApplyPrefs() {
+    // Right panel collapsed state
+    if (localStorage.getItem('cr_right_collapsed') === '1')
+      document.getElementById('cr-right')?.classList.add('collapsed');
+    // Chat font size
+    const chatWrap = document.getElementById('chat-active');
+    if (chatWrap) {
+      chatWrap.classList.remove('cr-chat-fs-small','cr-chat-fs-large');
+      if (_prefs.chatFontSize === 'small') chatWrap.classList.add('cr-chat-fs-small');
+      if (_prefs.chatFontSize === 'large') chatWrap.classList.add('cr-chat-fs-large');
+    }
+    // Left-hand mode
+    const bodyEl = document.getElementById('cr-body');
+    if (bodyEl) bodyEl.classList.toggle('left-hand', !!_prefs.leftHand);
+    // Whiteboard
+    if (window._wb) {
+      _wb.setStylusMultiplier(_prefs.stylusMultiplier);
+    }
+  }
+  function crSetPref(key, value) {
+    _prefs[key] = value;
+    crSavePrefs();
+    crApplyPrefs();
+    _crSyncSettingsUI();
+  }
+
+  /* ── Settings modal ───────────────────────────────────────────────────── */
+  let _micTestStream = null, _micTestACtx = null, _micTestTimer = null;
+
+  function openSettings() {
+    document.getElementById('cr-settings-overlay').classList.add('open');
+    _crSyncSettingsUI();
+  }
+  function closeSettings() {
+    document.getElementById('cr-settings-overlay').classList.remove('open');
+    _crMicTestStop();
+  }
+  function settingsTab(name) {
+    document.querySelectorAll('.cr-sp-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === name));
+    document.querySelectorAll('.cr-sp-pane').forEach(p => p.classList.toggle('active', p.id === 'crs-' + name));
+  }
+  function _crSyncSettingsUI() {
+    _crSegActive('crs-chat-size', _prefs.chatFontSize);
+    _crCheckSync('crs-muted-join', _prefs.mutedOnJoin);
+    _crSegActive('crs-vad', _prefs.vadSensitivity);
+    _crCheckSync('crs-chat-sound', _prefs.chatSound);
+    _crCheckSync('crs-hand-sound', _prefs.handSound);
+    _crSegActive('crs-def-tool', _prefs.defaultTool);
+    _crSegActive('crs-hand', _prefs.leftHand ? 'left' : 'right');
+    _crSegActive('crs-stylus', String(_prefs.stylusMultiplier));
+    const pushBtn = document.getElementById('crs-push-btn');
+    if (pushBtn && Notification.permission === 'granted') {
+      pushBtn.textContent = 'Уведомления включены'; pushBtn.classList.add('granted');
+    }
+  }
+  function _crSegActive(id, val) {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.querySelectorAll('button').forEach(b => b.classList.toggle('active', b.dataset.val === String(val)));
+  }
+  function _crCheckSync(id, val) {
+    const el = document.getElementById(id);
+    if (el) el.checked = !!val;
+  }
+
+  /* Mic test */
+  async function crMicTestStart() {
+    _crMicTestStop();
+    const fill = document.getElementById('crs-mic-fill');
+    const status = document.getElementById('crs-mic-status');
+    const btn = document.getElementById('crs-mic-btn');
+    try {
+      _micTestStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
+      _micTestACtx = new AudioContext();
+      const src = _micTestACtx.createMediaStreamSource(_micTestStream);
+      const analyser = _micTestACtx.createAnalyser();
+      analyser.fftSize = 256;
+      src.connect(analyser);
+      const buf = new Uint8Array(analyser.frequencyBinCount);
+      if (status) status.textContent = 'Говорите в микрофон…';
+      if (btn)    { btn.textContent = 'Остановить'; btn.onclick = _crMicTestStop; }
+      _micTestTimer = setInterval(() => {
+        analyser.getByteFrequencyData(buf);
+        const avg = buf.reduce((a,b) => a+b, 0) / buf.length;
+        if (fill) fill.style.width = Math.min(100, Math.round((avg/64)*100)) + '%';
+      }, 80);
+    } catch {
+      if (status) status.textContent = 'Нет доступа к микрофону';
+    }
+  }
+  function _crMicTestStop() {
+    if (_micTestTimer)  { clearInterval(_micTestTimer); _micTestTimer = null; }
+    if (_micTestACtx)   { try { _micTestACtx.close(); } catch {} _micTestACtx = null; }
+    if (_micTestStream) { _micTestStream.getTracks().forEach(t => t.stop()); _micTestStream = null; }
+    const fill = document.getElementById('crs-mic-fill');
+    const status = document.getElementById('crs-mic-status');
+    const btn = document.getElementById('crs-mic-btn');
+    if (fill)   fill.style.width = '0%';
+    if (status) status.textContent = '';
+    if (btn)    { btn.textContent = 'Начать тест'; btn.onclick = crMicTestStart; }
+  }
+
+  /* Push notifications */
+  async function crRequestPush() {
+    if (!('Notification' in window)) return;
+    const perm = await Notification.requestPermission();
+    if (perm === 'granted') {
+      _prefs.lessonPushNotif = true; crSavePrefs();
+      const btn = document.getElementById('crs-push-btn');
+      if (btn) { btn.textContent = 'Уведомления включены'; btn.classList.add('granted'); }
+    }
+  }
+
+  /* Notification sounds (AudioContext beep) */
+  function _crBeep(freq = 880, dur = 120, vol = 0.18) {
+    try {
+      const ctx = new AudioContext();
+      const osc = ctx.createOscillator();
+      const gain = ctx.createGain();
+      osc.connect(gain); gain.connect(ctx.destination);
+      osc.frequency.value = freq; gain.gain.value = vol;
+      osc.start(); osc.stop(ctx.currentTime + dur / 1000);
+      osc.onended = () => ctx.close();
+    } catch {}
+  }
+
   /* ── state ── */
   let _me = null;
   let _session = null;
@@ -1524,6 +3143,8 @@
   let _raisedHands  = {};   // userId -> userName
   let _handRaised   = false;// student: own hand state
   let _totalPages   = 1;    // total page count for current session
+  let _pageNames    = {};   // {pageNum: name|null}
+  let _wbMenuPage   = 1;   // page targeted by context menu (global for onclick in menu HTML)
   let _followTeacher = true; // student: follow teacher's page
   let _mode = 'class';
   let _selectedUsers = [];  // [{id, name}] for personal session
@@ -1537,6 +3158,10 @@
   let _wbPendingSSE = [];            // SSE strokes buffered during initialization
   const _wbOwnIds = new Set();       // server-assigned IDs of our own sent strokes (to skip in SSE)
 
+  /* ── WebSocket (low-latency cursor + preview) ── */
+  let _crWs = null;                  // WebSocket instance
+  let _crWsReady = false;            // true when WS is open
+
   /* ── WebRTC state ── */
   let _rtc = null;                   // ClassroomRTC instance
 
@@ -1544,6 +3169,9 @@
   let _chatUnread = 0;               // unread messages (when chat tab not active)
   let _activeTab  = 'participants';  // current right panel tab
   let _timerHandle = null;           // session timer interval
+  let _simActive  = null;            // simId of currently open simulation (null = none)
+  let _simMode    = 'demo';          // 'demo' (teacher controls, students watch) | 'free' (independent)
+  let _simStateThrottle = null;      // timer for state relay throttle
   let _sessionStartTime = null;      // Date when session was created
 
   /* ── polling ── */
@@ -1730,8 +3358,21 @@
     });
   }
 
+  function _showClassroomDisabled() {
+    document.getElementById('cr-board-wrap').innerHTML = `
+      <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:20px;padding:40px;text-align:center">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:64px;height:64px;color:rgba(155,93,229,0.4)"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/><line x1="1" y1="1" x2="23" y2="23" stroke="#F15BB5"/></svg>
+        <div style="font-family:'Unbounded',sans-serif;font-size:1.1rem;font-weight:800;color:var(--text,#e2d9f3)">Онлайн-уроки отключены</div>
+        <div style="font-size:0.9rem;color:rgba(255,255,255,0.5);max-width:340px;line-height:1.6">Администратор отключил модуль онлайн-уроков. Обратитесь к администратору платформы.</div>
+      </div>`;
+    document.getElementById('cr-toolbar')?.remove();
+    document.getElementById('cr-student-nav')?.remove();
+  }
+
   async function init() {
     if (!LS.isLoggedIn()) { window.location.href = '/login'; return; }
+    crLoadPrefs();
+    crApplyPrefs();
     _me = LS.getUser();
     if (!_me) {
       try { _me = await LS.get('/api/auth/me'); LS.setUser(_me); } catch { window.location.href = '/login'; return; }
@@ -1753,6 +3394,17 @@
       document.querySelector('.app-layout')?.classList.add('sb-collapsed');
     }
 
+    // Check classroom module enabled (teacher sees disabled screen if off)
+    if (_me.role === 'teacher') {
+      try {
+        const features = await LS.get('/api/admin/features').catch(() => ({}));
+        if (features.classroom === false) {
+          _showClassroomDisabled();
+          return;
+        }
+      } catch { /* if endpoint fails — allow access */ }
+    }
+
     // SSE for classroom events
     _sseHandle = LS.connectSSE(handleSSE);
 
@@ -1941,9 +3593,100 @@
         _wbMaxSeq = 0;   // seq restarts from 0 after DB delete, so reset polling cursor
         _wb.clearPage();
       }
+    } else if (data.type === 'classroom_page_renamed') {
+      if (_sessionId == data.sessionId) {
+        _pageNames[data.pageNum] = data.name || null;
+        wbRebuildThumbnails();
+      }
+    } else if (data.type === 'classroom_page_duplicated') {
+      if (_sessionId == data.sessionId) {
+        if (data.name) _pageNames[data.newPage] = data.name;
+        onPageAdded(data.newPage);
+      }
+    } else if (data.type === 'classroom_page_deleted') {
+      if (_sessionId == data.sessionId) {
+        const del = data.pageNum;
+        const newNames = {};
+        Object.keys(_pageNames).forEach(k => {
+          const n = parseInt(k);
+          if (n < del)       newNames[n] = _pageNames[n];
+          else if (n > del)  newNames[n - 1] = _pageNames[n];
+        });
+        _pageNames = newNames;
+        _totalPages = Math.max(1, _totalPages - 1);
+        if (!isTeacher && _followTeacher) {
+          // navigate to teacher's current page
+          _wbCurrentPage = data.newCurrent;
+          updatePageLabel();
+          if (_wb) {
+            _wb.clearPage();
+            LS.get(`/api/classroom/${_sessionId}/strokes?page_num=${_wbCurrentPage}`).then(d => {
+              _wb.loadStrokes(d.strokes || []);
+              if (d.template) _wb.setTemplate(d.template);
+              _wbUpdateMaxSeq(d.strokes || []); _wbMaxSeq = 0; _wbClearGen++;
+            }).catch(() => {});
+          }
+        }
+        wbRebuildThumbnails();
+      }
+    } else if (data.type === 'classroom_sim_open') {
+      if (_sessionId == data.sessionId) onSimOpen(data.simId, data.title);
+    } else if (data.type === 'classroom_sim_close') {
+      if (_sessionId == data.sessionId) onSimClose();
+    } else if (data.type === 'classroom_sim_state') {
+      if (_sessionId == data.sessionId && _simActive && _simMode === 'demo') {
+        const isTeacher = _me && (_me.role === 'teacher' || _me.role === 'admin');
+        if (!isTeacher) {
+          // Student: apply teacher's state to own iframe
+          document.getElementById('cr-sim-frame')?.contentWindow?.postMessage(
+            { type: 'apply_sim_state', state: data.state }, '*'
+          );
+        }
+      }
+    } else if (data.type === 'classroom_sim_mode') {
+      if (_sessionId == data.sessionId) onSimModeChange(data.mode);
     } else if (data.type === '_sse_reconnect') {
       // SSE reconnected after a drop — re-sync all real-time state to fill the gap
       if (_sessionId) resyncAfterReconnect();
+    } else if (data.type === 'live_question') {
+      // live_* events are class-scoped, no sessionId field
+      const _iqTeacher = _me && (_me.role === 'teacher' || _me.role === 'admin');
+      if (_iqTeacher) {
+        if (_quizLiveId == null) _quizLiveId = data.liveId;
+        crQuizShowActiveCard(data.question);
+      } else {
+        crStudentOnQuestion(data.question, data.liveId);
+      }
+    } else if (data.type === 'live_answer_count') {
+      if (_me && (_me.role === 'teacher' || _me.role === 'admin')) crQuizUpdateCounter(data.count);
+    } else if (data.type === 'live_results') {
+      const _irTeacher = _me && (_me.role === 'teacher' || _me.role === 'admin');
+      if (_irTeacher) crQuizRenderResults(data);
+      else crStudentOnResults(data);
+    } else if (data.type === 'live_ended') {
+      const _ieTeacher = _me && (_me.role === 'teacher' || _me.role === 'admin');
+      if (_ieTeacher) {
+        _quizLiveId = null;
+        document.getElementById('cr-quiz-status-bar').style.display = 'none';
+        document.getElementById('cr-quiz-start-area').style.display = 'block';
+        document.getElementById('cr-quiz-active-card').style.display = 'none';
+        document.getElementById('cr-quiz-result-stats').style.display = 'none';
+      } else {
+        crStudentOnEnded();
+      }
+    } else if (data.type === 'classroom_guest_joined') {
+      if (_sessionId == data.sessionId) {
+        _participants[data.guestId] = { name: data.guestName || 'Гость', role: 'guest', micMuted: false };
+        updateParticipantsList();
+        crStatusNotify('info',
+          `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>`,
+          `Гость «${LS.escapeHtml(data.guestName || 'Гость')}» присоединился`);
+      }
+    } else if (data.type === 'classroom_guest_left') {
+      if (_sessionId == data.sessionId) {
+        delete _participants[data.guestId];
+        updateParticipantsList();
+      }
     }
   }
   /* eslint-enable eqeqeq */
@@ -1952,12 +3695,22 @@
     const isTeacher = _me.role === 'teacher' || _me.role === 'admin';
     if (!isTeacher) {
       showJoinBanner({ id: data.sessionId, title: data.title });
+      // Push notification if enabled and page not focused
+      if (_prefs.lessonPushNotif && Notification.permission === 'granted' && document.hidden) {
+        try {
+          new Notification('Урок начался', {
+            body: data.title || 'Учитель начал урок. Присоединяйтесь!',
+            icon: '/favicon.svg',
+          });
+        } catch {}
+      }
     }
   }
 
   function onClassroomEnded() {
     stopPolling();
     wbStopBatch();
+    _crWsClose();
     // Fully destroy whiteboard (not just clear) so the board area is gone
     if (_wb) { _wb.destroy(); _wb = null; }
     if (_rtc) { _rtc.destroy(); _rtc = null; }
@@ -1966,6 +3719,7 @@
     _sessionId = null;
     _sessionStartTime = null;
     _participants = {};
+    document.getElementById('cr-speaker-chip')?.classList.remove('visible');
     _raisedHands = {};
     _handRaised = false;
     _wbCurrentPage = 1;
@@ -1979,6 +3733,11 @@
     document.getElementById('cr-hands-section').style.display = 'none';
     document.getElementById('cr-hand-btn').style.display = 'none';
     document.getElementById('cr-mute-btn').style.display = 'none';
+    document.getElementById('cr-share-lib-btn').style.display = 'none';
+    const _tabQuizEnd = document.getElementById('tab-quiz');
+    if (_tabQuizEnd) _tabQuizEnd.style.display = 'none';
+    document.getElementById('cr-tabs-inner')?.classList.remove('tabs-4');
+    if (_activeTab === 'quiz') crSwitchTab('participants');
     document.getElementById('cr-student-nav').style.display = 'none';
     document.getElementById('cr-timer').style.display = 'none';
     document.getElementById('cr-timer').textContent = '00:00';
@@ -2001,6 +3760,8 @@
     document.getElementById('cr-idle-student').style.display = isTeacher ? 'none' : 'flex';
     document.getElementById('cr-toolbar').style.display = 'none';
     document.getElementById('wb-thumbs-panel').style.display = 'none';
+    // Close sim panel if open
+    if (_simActive) onSimClose();
     updateParticipantsList();
     LS.toast('Урок завершён', 'info');
   }
@@ -2015,6 +3776,7 @@
   function onUserLeft(data) {
     delete _participants[data.userId];
     updateParticipantsList();
+    _updateSpeakerChip();
     if (_rtc) _rtc.removePeer(data.userId);
   }
 
@@ -2180,10 +3942,15 @@
     document.getElementById('cr-end-btn').style.display   = isTeacher ? 'flex' : 'none';
     document.getElementById('cr-leave-btn').style.display = isTeacher ? 'none' : 'flex';
     document.getElementById('cr-screen-btn').style.display = isTeacher ? 'flex' : 'none';
+    document.getElementById('cr-sim-btn').style.display   = isTeacher ? 'flex' : 'none';
+    document.getElementById('cr-guest-btn').style.display = isTeacher ? 'flex' : 'none';
+    document.getElementById('cr-share-lib-btn').style.display = isTeacher ? 'flex' : 'none';
     document.getElementById('cr-hand-btn').style.display  = isTeacher ? 'none' : 'flex';
     document.getElementById('btn-templates').style.display = isTeacher ? 'flex' : 'none';
     // Teacher: show raised hands panel
     document.getElementById('cr-hands-section').style.display = isTeacher ? 'block' : 'none';
+    // Quiz panel
+    crQuizOnSessionActive(isTeacher);
 
     // page state
     _wbCurrentPage = session.current_page || 1;
@@ -2204,7 +3971,10 @@
     if (window.lucide) lucide.createIcons();
 
     // session timer
-    _sessionStartTime = session.created_at ? new Date(session.created_at) : new Date();
+    // SQLite stores UTC without 'T'/'Z' — force UTC parse
+    _sessionStartTime = session.created_at
+      ? new Date(session.created_at.replace(' ', 'T') + 'Z')
+      : new Date();
     if (_timerHandle) clearInterval(_timerHandle);
     _timerHandle = setInterval(updateTimer, 1000);
     document.getElementById('cr-timer').style.display = 'inline';
@@ -2219,6 +3989,9 @@
     // init whiteboard
     initWhiteboard(isTeacher, session.id);
 
+    // open WebSocket for low-latency cursor + preview
+    _crWsConnect();
+
     // init WebRTC (async - don't block UI)
     initRTC(session);
 
@@ -2258,23 +4031,36 @@
       onStrokeProgress: canEdit ? wbOnStrokeProgress     : null,
       onStrokeUpdated:  canEdit ? wbOnLocalStrokeUpdated : null,
       onCursorMove:     wbOnCursorMove,
-      // Formula: open modal editor instead of inline input
       onFormulaInsert:  canEdit ? showFormulaModal  : null,
       onCoordEdit:      canEdit ? showCoordModal    : null,
       onNumberLineEdit: canEdit ? showNumLineModal  : null,
-      // After creating an object (text/sticky/formula/table), auto-switch to select
       onObjectCreated:  canEdit ? () => wbSetTool('select') : null,
-      // Zoom change: update zoom label
+      onToolSwitch:     canEdit ? tool => wbSetTool(tool) : null,
       onZoomChange: z => { const el = document.getElementById('wb-zoom-label'); if (el) el.textContent = Math.round(z * 100) + '%'; },
-      // Overlay change: update props panel
       onOverlayChange: wbOvChange,
+      stylusMultiplier: _prefs.stylusMultiplier,
     });
 
+    // Sync board theme selector to whiteboard default
+    { const sel = document.getElementById('wb-theme-select'); if (sel) sel.value = 'chalkboard'; }
+
     // show/hide toolbar, thumbs panel, and readonly label
     document.getElementById('cr-toolbar').style.display      = canEdit ? 'flex' : 'none';
     document.getElementById('wb-thumbs-panel').style.display = isTeacher ? 'flex' : 'none';
     document.getElementById('cr-board-readonly').style.display = canEdit ? 'none' : 'block';
 
+    // Apply default tool preference
+    if (canEdit && _prefs.defaultTool && _prefs.defaultTool !== 'pencil') {
+      wbSetTool(_prefs.defaultTool);
+    }
+
+    // load page names
+    try {
+      const pagesRes = await LS.get(`/api/classroom/${sessionId}/pages`);
+      _pageNames = {};
+      (pagesRes.pages || []).forEach(p => { if (p.name) _pageNames[p.page_num] = p.name; });
+    } catch {}
+
     // load existing strokes — done before unblocking SSE to avoid duplicates
     try {
       const res = await LS.get(`/api/classroom/${sessionId}/strokes?page_num=1`);
@@ -2282,6 +4068,8 @@
       _wbUpdateMaxSeq(initialStrokes);
       _wb.loadStrokes(initialStrokes);
       if (res.template) { _wb.setTemplate(res.template); const sel = document.getElementById('wb-tpl-select'); if (sel) sel.value = res.template; }
+      if (res.name !== undefined) _pageNames[1] = res.name || null;
+      _wbUpdateBgBtn();
       wbUpdateThumbnail(1);
     } catch {}
 
@@ -2293,6 +4081,12 @@
       _wbPendingSSE = [];
     }
 
+    // apply initial cursor style based on active tool
+    wbUpdateCursorStyle();
+
+    // Selection-based context UI (connector arrows, multi-select alignment)
+    canvas.addEventListener('pointerup', () => setTimeout(wbCheckSelectionUI, 20));
+
     if (isTeacher) {
       // start batch flush every 80ms
       _wbBatchTimer = setInterval(wbFlushBatch, 80);
@@ -2458,31 +4252,56 @@
     _wbBatch = _wbBatch.filter(s => s.id !== id);
   }
 
-  /* Called by Whiteboard during drawing (throttled to 50ms inside the class).
-     Posts current stroke state so students can see it in real-time. */
+  /* ── WebSocket connect/close (classroom session scope) ── */
+  function _crWsConnect() {
+    if (_crWs && (_crWs.readyState === WebSocket.OPEN || _crWs.readyState === WebSocket.CONNECTING)) return;
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const token = LS.getToken() || '';
+    _crWs = new WebSocket(`${proto}//${location.host}/ws?token=${encodeURIComponent(token)}`);
+    _crWs.onopen  = () => { _crWsReady = true; };
+    _crWs.onclose = () => { _crWsReady = false; };
+    _crWs.onerror = () => { _crWsReady = false; };
+    // No incoming messages expected (server→client still uses SSE)
+  }
+
+  function _crWsClose() {
+    _crWsReady = false;
+    if (_crWs) { try { _crWs.close(); } catch {} _crWs = null; }
+  }
+
+  function _crWsSend(obj) {
+    if (_crWsReady && _crWs?.readyState === WebSocket.OPEN) {
+      try { _crWs.send(JSON.stringify(obj)); return true; } catch {}
+    }
+    return false; // fallback to HTTP
+  }
+
+  /* Called by Whiteboard during drawing (throttled ~20ms inside the class).
+     Sends preview via WebSocket (fast path); falls back to HTTP if WS not ready. */
   function wbOnStrokeProgress(p) {
     if (!_sessionId) return;
-    // Cancel case: drawing ended with no valid stroke
     if (p.cancel) {
-      LS.post(`/api/classroom/${_sessionId}/stroke-preview`, {
-        live_id: p.liveId, cancel: true, page_num: _wbCurrentPage,
-      }).catch(() => {});
+      if (!_crWsSend({ type: 'preview', sessionId: _sessionId, liveId: p.liveId, pageNum: _wbCurrentPage, cancel: true })) {
+        LS.post(`/api/classroom/${_sessionId}/stroke-preview`, {
+          live_id: p.liveId, cancel: true, page_num: _wbCurrentPage,
+        }).catch(() => {});
+      }
       return;
     }
-    // Normal progress — Whiteboard already throttles at 50ms, so post directly
-    LS.post(`/api/classroom/${_sessionId}/stroke-preview`, {
-      live_id: p.liveId,
-      tool:    p.tool,
-      data:    p.data,
-      page_num: _wbCurrentPage,
-    }).catch(() => {});
+    if (!_crWsSend({ type: 'preview', sessionId: _sessionId, liveId: p.liveId, tool: p.tool, data: p.data, pageNum: _wbCurrentPage })) {
+      LS.post(`/api/classroom/${_sessionId}/stroke-preview`, {
+        live_id: p.liveId, tool: p.tool, data: p.data, page_num: _wbCurrentPage,
+      }).catch(() => {});
+    }
   }
 
   function wbOnCursorMove(vx, vy) {
     if (!_sessionId) return;
-    LS.post(`/api/classroom/${_sessionId}/cursor`, {
-      x: vx, y: vy, page_num: _wbCurrentPage,
-    }).catch(() => {});
+    if (!_crWsSend({ type: 'cursor', sessionId: _sessionId, x: vx, y: vy, pageNum: _wbCurrentPage })) {
+      LS.post(`/api/classroom/${_sessionId}/cursor`, {
+        x: vx, y: vy, page_num: _wbCurrentPage,
+      }).catch(() => {});
+    }
   }
 
   async function wbFlushBatch() {
@@ -2566,6 +4385,64 @@
     'rect','ellipse','line','arrow',
     'triangle','diamond','hexagon','star','roundedrect','callout',
     'text','sticky','formula','table','connector','coordinate','numberline','compass'];
+  /* ── Custom cursors ── */
+  function _makePencilCursor(color, lineW) {
+    const r  = Math.max(2, Math.min(8, lineW * 0.8));
+    const sz = 32;
+    const tip = sz - 4;
+    const enc = encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="${sz}" height="${sz}" viewBox="0 0 ${sz} ${sz}">` +
+      `<circle cx="${tip}" cy="${tip}" r="${r}" fill="${color}" opacity="0.85" stroke="rgba(0,0,0,0.5)" stroke-width="1"/>` +
+      `<line x1="0" y1="0" x2="${tip - r}" y2="${tip - r}" stroke="rgba(0,0,0,0.4)" stroke-width="0.7"/>` +
+      `</svg>`
+    );
+    return `url("data:image/svg+xml,${enc}") ${tip} ${tip}, crosshair`;
+  }
+
+  function _makeEraserCursor(lineW) {
+    const s  = Math.max(8, Math.min(28, lineW * 2));
+    const sz = s + 6;
+    const off = 3;
+    const enc = encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="${sz}" height="${sz}" viewBox="0 0 ${sz} ${sz}">` +
+      `<rect x="${off}" y="${off}" width="${s}" height="${s}" rx="2" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.7)" stroke-width="1.2"/>` +
+      `</svg>`
+    );
+    const hot = Math.round(sz / 2);
+    return `url("data:image/svg+xml,${enc}") ${hot} ${hot}, cell`;
+  }
+
+  function _makeHighlighterCursor(color) {
+    const enc = encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">` +
+      `<rect x="8" y="14" width="12" height="10" rx="1" fill="${color}" opacity="0.55" stroke="rgba(0,0,0,0.3)" stroke-width="1"/>` +
+      `<line x1="14" y1="0" x2="14" y2="28" stroke="rgba(0,0,0,0.25)" stroke-width="0.5"/>` +
+      `<line x1="0" y1="14" x2="28" y2="14" stroke="rgba(0,0,0,0.25)" stroke-width="0.5"/>` +
+      `</svg>`
+    );
+    return `url("data:image/svg+xml,${enc}") 14 14, crosshair`;
+  }
+
+  function wbUpdateCursorStyle() {
+    if (!_wb) return;
+    const tool  = _wb._tool;
+    const color = _wb._color || '#ffffff';
+    const lineW = _wb._lineWidth || 4;
+    let cursor;
+    if (tool === 'pencil')      cursor = _makePencilCursor(color, lineW);
+    else if (tool === 'highlighter') cursor = _makeHighlighterCursor(color);
+    else if (tool === 'eraser') cursor = _makeEraserCursor(lineW);
+    else {
+      const map = { text: 'text', select: 'default', sticky: 'copy', formula: 'copy',
+                    table: 'crosshair', connector: 'crosshair', laser: 'none',
+                    coordinate: 'copy', numberline: 'copy', compass: 'copy' };
+      cursor = map[tool] || 'crosshair';
+    }
+    document.getElementById('cr-canvas').style.cursor = cursor;
+  }
+
+  const WB_SHAPE_TOOLS = ['rect','ellipse','line','arrow','triangle','diamond','hexagon','star','roundedrect','callout'];
+
   function wbSetTool(tool) {
     if (!_wb) return;
     _wb.setTool(tool);
@@ -2573,11 +4450,322 @@
       const el = document.getElementById(`wb-tool-${t}`);
       if (el) el.classList.toggle('active', t === tool);
     });
-    const cursors = { eraser: 'cell', text: 'text', pencil: 'crosshair', select: 'default',
-                      sticky: 'copy', formula: 'copy', table: 'crosshair', connector: 'crosshair',
-                      highlighter: 'crosshair', laser: 'none', coordinate: 'copy',
-                      numberline: 'copy', compass: 'copy' };
-    document.getElementById('cr-canvas').style.cursor = cursors[tool] || 'crosshair';
+    // shape picker trigger: highlight if a shape tool is active, update icon
+    const isShape = WB_SHAPE_TOOLS.includes(tool);
+    const shapeTrigger = document.getElementById('wb-shape-picker-btn');
+    if (shapeTrigger) shapeTrigger.classList.toggle('active', isShape);
+    if (isShape) {
+      const srcBtn = document.getElementById(`wb-tool-${tool}`);
+      const slot = document.getElementById('wb-shape-icon-slot');
+      if (srcBtn && slot) slot.innerHTML = srcBtn.querySelector('svg').outerHTML;
+    }
+    // text row visibility
+    document.getElementById('cr-text-row')?.classList.toggle('visible', tool === 'text');
+    // sticky color row visibility
+    document.getElementById('wb-sticky-row')?.classList.toggle('visible', tool === 'sticky');
+    // hide connector/align rows when switching tools
+    document.getElementById('wb-connector-row')?.classList.remove('visible');
+    document.getElementById('wb-align-row')?.classList.remove('visible');
+    wbUpdateCursorStyle();
+  }
+
+  // Position a fixed popup above its trigger button (no inline display — CSS class controls visibility)
+  function _positionDropPopup(popup, btn, approxW) {
+    const r    = btn.getBoundingClientRect();
+    let   left = r.left + r.width / 2 - approxW / 2;
+    left = Math.max(4, Math.min(left, window.innerWidth - approxW - 4));
+    popup.style.left   = left + 'px';
+    popup.style.top    = 'auto';
+    popup.style.bottom = (window.innerHeight - r.top + 8) + 'px';
+  }
+
+  // Shape picker dropdown  (~182px wide: 5×32 + 4×3gap + 2×5pad)
+  function wbToggleShapePicker() {
+    const popup = document.getElementById('cr-shape-popup');
+    const btn   = document.getElementById('wb-shape-picker-btn');
+    const wasOpen = popup.classList.contains('open');
+    document.getElementById('cr-utils-popup')?.classList.remove('open');
+    if (wasOpen) { popup.classList.remove('open'); return; }
+    _positionDropPopup(popup, btn, 182);
+    popup.classList.add('open');
+    setTimeout(() => document.addEventListener('click', _closeShapePicker, { once: true }), 0);
+  }
+  function _closeShapePicker(e) {
+    if (!document.getElementById('cr-shape-drop')?.contains(e.target))
+      document.getElementById('cr-shape-popup')?.classList.remove('open');
+    else if (document.getElementById('cr-shape-popup')?.classList.contains('open'))
+      document.addEventListener('click', _closeShapePicker, { once: true });
+  }
+  function wbPickShape(tool) {
+    document.getElementById('cr-shape-popup')?.classList.remove('open');
+    wbSetTool(tool);
+  }
+
+  // Text alignment
+  function wbSetTextAlign(align) {
+    if (!_wb) return;
+    _wb.setTextAlign(align);
+    ['left','center','right'].forEach(a => {
+      document.getElementById(`wb-text-al-${a}`)?.classList.toggle('active', a === align);
+    });
+  }
+
+  // Text tool options
+  function wbSetTextFont(family) {
+    if (!_wb) return;
+    _wb.setTextFontFamily(family);
+    // Also update selected text/sticky strokes
+    if (_wb._selectedIds.size > 0) {
+      for (const id of _wb._selectedIds) {
+        const s = _wb._strokes.find(x => x.id === id);
+        if (s && (s.tool === 'text' || s.tool === 'sticky')) {
+          s.data.fontFamily = family;
+          if (_wb._onStrokeUpdated) _wb._onStrokeUpdated(s);
+        }
+      }
+      _wb._staticDirty = true;
+      _wb.render();
+    }
+  }
+  function wbSetTextSize(v) {
+    const n = parseInt(v);
+    if (!_wb || isNaN(n)) return;
+    _wb.setTextFontSize(n);
+    const inp = document.getElementById('wb-text-size');
+    if (inp) inp.value = Math.max(8, Math.min(120, n));
+  }
+  function wbToggleTextBold() {
+    if (!_wb) return;
+    _wb._textBold = !_wb._textBold;
+    _wb.setTextBold(_wb._textBold);
+    document.getElementById('wb-text-bold')?.classList.toggle('active', _wb._textBold);
+  }
+  function wbToggleTextItalic() {
+    if (!_wb) return;
+    _wb._textItalic = !_wb._textItalic;
+    _wb.setTextItalic(_wb._textItalic);
+    document.getElementById('wb-text-italic')?.classList.toggle('active', _wb._textItalic);
+  }
+
+  // Sticky color presets
+  function wbSetStickyColor(btn) {
+    if (!_wb) return;
+    const c = btn.dataset.sc;
+    _wb.setStickyColor(c);
+    document.querySelectorAll('.wb-sticky-col').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+  }
+
+  // Connector arrow toggles
+  function wbToggleArrow(which) {
+    if (!_wb) return;
+    _wb.toggleConnectorArrow(which);
+    // Update button state
+    const sel = _wb._strokes.find(s => s.id === _wb._selectedId);
+    if (sel && sel.tool === 'connector') {
+      document.getElementById('wb-arr-start')?.classList.toggle('active', !!sel.data.arrowStart);
+      document.getElementById('wb-arr-end')?.classList.toggle('active',   !!sel.data.arrowEnd);
+    }
+  }
+
+  // Multi-select alignment
+  function wbAlign(dir) {
+    if (_wb) _wb.alignStrokes(dir);
+  }
+
+  // Table grid picker
+  function _buildTableGrid() {
+    const grid  = document.getElementById('wb-tbl-grid');
+    const label = document.getElementById('wb-tbl-label');
+    if (!grid) return;
+    grid.innerHTML = '';
+    const ROWS = 6, COLS = 8;
+    let hlR = 0, hlC = 0;
+    for (let r = 1; r <= ROWS; r++) {
+      const row = document.createElement('div');
+      row.className = 'wb-tbl-row';
+      for (let c = 1; c <= COLS; c++) {
+        const cell = document.createElement('div');
+        cell.className = 'wb-tbl-cell';
+        cell.dataset.r = r; cell.dataset.c = c;
+        cell.addEventListener('mouseover', () => {
+          hlR = r; hlC = c;
+          label.textContent = `${r} × ${c}`;
+          grid.querySelectorAll('.wb-tbl-cell').forEach(el => {
+            el.classList.toggle('hl', +el.dataset.r <= hlR && +el.dataset.c <= hlC);
+          });
+        });
+        cell.addEventListener('click', () => {
+          if (_wb) { _wb.setTableSize(r, c); wbSetTool('table'); }
+          document.getElementById('wb-tbl-popup')?.classList.remove('open');
+        });
+        row.appendChild(cell);
+      }
+      grid.appendChild(row);
+    }
+  }
+
+  function wbToggleTablePicker() {
+    const popup = document.getElementById('wb-tbl-popup');
+    const btn   = document.getElementById('wb-tool-table');
+    if (!popup || !btn) return;
+    const wasOpen = popup.classList.contains('open');
+    document.getElementById('cr-shape-popup')?.classList.remove('open');
+    document.getElementById('cr-utils-popup')?.classList.remove('open');
+    if (wasOpen) { popup.classList.remove('open'); return; }
+    if (!popup.dataset.built) { _buildTableGrid(); popup.dataset.built = '1'; }
+    // Reset highlight
+    document.getElementById('wb-tbl-label').textContent = '1 × 1';
+    popup.querySelectorAll('.wb-tbl-cell').forEach(el => el.classList.remove('hl'));
+    _positionDropPopup(popup, btn, 190);
+    popup.classList.add('open');
+    setTimeout(() => document.addEventListener('click', _closeTablePicker, { once: true }), 0);
+  }
+  function _closeTablePicker(e) {
+    if (!document.getElementById('wb-tbl-drop')?.contains(e.target))
+      document.getElementById('wb-tbl-popup')?.classList.remove('open');
+    else if (document.getElementById('wb-tbl-popup')?.classList.contains('open'))
+      document.addEventListener('click', _closeTablePicker, { once: true });
+  }
+
+  // ── Content templates picker ────────────────────────────────────────
+  function wbToggleTplPicker() {
+    const popup = document.getElementById('wb-content-tpl-popup');
+    const btn   = document.getElementById('wb-tpl-picker-btn');
+    const wasOpen = popup.classList.contains('open');
+    document.getElementById('wb-tpl-popup')?.classList.remove('open');
+    document.getElementById('cr-utils-popup')?.classList.remove('open');
+    if (wasOpen) { popup.classList.remove('open'); return; }
+    _positionDropPopup(popup, btn, 230);
+    popup.classList.add('open');
+    setTimeout(() => document.addEventListener('click', _closeTplPicker, { once: true }), 0);
+  }
+  function _closeTplPicker(e) {
+    if (!document.getElementById('cr-tpl-drop')?.contains(e.target))
+      document.getElementById('wb-content-tpl-popup')?.classList.remove('open');
+    else if (document.getElementById('wb-content-tpl-popup')?.classList.contains('open'))
+      document.addEventListener('click', _closeTplPicker, { once: true });
+  }
+  function wbInsertTemplate(name) {
+    if (!_wb) return;
+    document.getElementById('wb-content-tpl-popup')?.classList.remove('open');
+    _wb.insertTemplate(name);
+    wbSetTool('select');
+  }
+
+  // ── Page background image ────────────────────────────────────────────
+  function wbPickBgImage() {
+    document.getElementById('wb-content-tpl-popup')?.classList.remove('open');
+    document.getElementById('wb-bg-file-input')?.click();
+  }
+  function wbBgFileSelected(input) {
+    const file = input.files?.[0];
+    if (!file || !_wb) return;
+    input.value = '';
+    if (file.type === 'application/pdf') {
+      _wbLoadPdfAsBackground(file);
+    } else {
+      _wb.pasteImageAsBackground(file);
+      _wbUpdateBgBtn();
+    }
+  }
+  function wbRemoveBgImage() {
+    if (!_wb) return;
+    _wb.removePageBackground();
+    _wbUpdateBgBtn();
+  }
+  function _wbUpdateBgBtn() {
+    const btn = document.getElementById('wb-bg-remove-btn');
+    if (btn) btn.style.display = _wb?.hasPageBackground() ? '' : 'none';
+  }
+  async function _wbLoadPdfAsBackground(file) {
+    try {
+      // Dynamically load PDF.js if not already loaded
+      if (!window.pdfjsLib) {
+        await new Promise((res, rej) => {
+          const s = document.createElement('script');
+          s.src = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.4.168/build/pdf.min.mjs';
+          s.type = 'module';
+          s.onload = res; s.onerror = rej;
+          document.head.appendChild(s);
+        });
+        if (!window.pdfjsLib) throw new Error('PDF.js не загрузился');
+      }
+      const ab  = await file.arrayBuffer();
+      const pdf = await window.pdfjsLib.getDocument({ data: ab }).promise;
+      const page = await pdf.getPage(1);
+      const vp  = page.getViewport({ scale: 1 });
+      // Render at full resolution, capped at 1920 wide
+      const scale = Math.min(1, 1920 / vp.width);
+      const viewport = page.getViewport({ scale });
+      const canvas = document.createElement('canvas');
+      canvas.width = Math.round(viewport.width);
+      canvas.height = Math.round(viewport.height);
+      await page.render({ canvasContext: canvas.getContext('2d'), viewport }).promise;
+      canvas.toBlob(blob => {
+        if (blob) { _wb.pasteImageAsBackground(blob); _wbUpdateBgBtn(); }
+      }, 'image/jpeg', 0.85);
+    } catch (err) {
+      LS.toast('Ошибка загрузки PDF: ' + (err.message || err), 'error');
+    }
+  }
+
+  // Selection UI: show connector/align context rows based on current selection
+  function wbCheckSelectionUI() {
+    if (!_wb || _wb._tool !== 'select') {
+      document.getElementById('wb-connector-row')?.classList.remove('visible');
+      document.getElementById('wb-align-row')?.classList.remove('visible');
+      return;
+    }
+    const ids  = [..._wb._selectedIds];
+    const cnt  = ids.length;
+    // Multi-select alignment row
+    document.getElementById('wb-align-row')?.classList.toggle('visible', cnt > 1);
+    // Connector row (single connector selected)
+    let showConn = false;
+    if (cnt === 1) {
+      const sel = _wb._strokes.find(s => s.id === ids[0]);
+      if (sel && sel.tool === 'connector') {
+        showConn = true;
+        document.getElementById('wb-arr-start')?.classList.toggle('active', !!sel.data.arrowStart);
+        document.getElementById('wb-arr-end')?.classList.toggle('active',   !!sel.data.arrowEnd);
+      }
+    }
+    document.getElementById('wb-connector-row')?.classList.toggle('visible', showConn);
+
+    // Text/sticky font row
+    let showTextRow = false;
+    if (cnt === 1) {
+      const sel = _wb._strokes.find(s => s.id === ids[0]);
+      if (sel && (sel.tool === 'text' || sel.tool === 'sticky')) {
+        showTextRow = true;
+        const ff = sel.data.fontFamily || 'Manrope';
+        const fSel = document.getElementById('wb-text-font');
+        if (fSel && fSel.value !== ff) fSel.value = ff;
+      }
+    }
+    const textRow = document.getElementById('cr-text-row');
+    if (textRow && _wb._tool === 'select') {
+      textRow.classList.toggle('visible', showTextRow);
+    }
+  }
+
+  // Utils picker dropdown  (~112px wide: 3×32 + 2×3gap + 2×5pad)
+  function wbToggleUtilsPicker() {
+    const popup = document.getElementById('cr-utils-popup');
+    const btn   = document.getElementById('wb-utils-picker-btn');
+    const wasOpen = popup.classList.contains('open');
+    document.getElementById('cr-shape-popup')?.classList.remove('open');
+    if (wasOpen) { popup.classList.remove('open'); return; }
+    _positionDropPopup(popup, btn, 112);
+    popup.classList.add('open');
+    setTimeout(() => document.addEventListener('click', _closeUtilsPicker, { once: true }), 0);
+  }
+  function _closeUtilsPicker(e) {
+    if (!document.getElementById('cr-utils-drop')?.contains(e.target))
+      document.getElementById('cr-utils-popup')?.classList.remove('open');
+    else if (document.getElementById('cr-utils-popup')?.classList.contains('open'))
+      document.addEventListener('click', _closeUtilsPicker, { once: true });
   }
 
   function wbSetColor(btn) {
@@ -2590,6 +4778,7 @@
     const activeTools = ['eraser','laser'];
     if (activeTools.some(t => document.getElementById(`wb-tool-${t}`)?.classList.contains('active')))
       wbSetTool('pencil');
+    else wbUpdateCursorStyle();
   }
 
   function wbSetWidth(px, btn) {
@@ -2597,6 +4786,7 @@
     _wb.setWidth(px);
     document.querySelectorAll('.cr-width-btn').forEach(b => b.classList.remove('active'));
     btn.classList.add('active');
+    wbUpdateCursorStyle();
   }
 
   function wbSetLineStyle(style, btn) {
@@ -2630,6 +4820,13 @@
     if (!on && _wbOvCurrent?.type === 'protractor') wbOvHide();
   }
 
+  function wbToggleSnap(btn) {
+    if (!_wb) return;
+    const on = !_wb._snapEnabled;
+    _wb.setSnapEnabled(on);
+    btn.classList.toggle('active', on);
+  }
+
   function wbToggleMeasurements(btn) {
     if (!_wb) return;
     const on = _wb.toggleMeasurements();
@@ -2799,6 +4996,7 @@
   function wbUndo() {
     if (!_wb) return;
     _wb.undo();
+    setTimeout(wbCheckSelectionUI, 20);
   }
 
   async function wbClear() {
@@ -2830,6 +5028,169 @@
     } catch {}
   }
 
+  /* ── guest link ── */
+  function crGuestOpen() {
+    if (!_sessionId) return;
+    const overlay = document.getElementById('cr-guest-modal');
+    overlay.classList.add('open');
+    // Load current token state
+    LS.get(`/api/classroom/${_sessionId}/guest-token`).then(data => {
+      if (data.token) {
+        _crGuestShowToken(data.token);
+      } else {
+        document.getElementById('cr-guest-no-token').style.display = 'block';
+        document.getElementById('cr-guest-has-token').style.display = 'none';
+      }
+    }).catch(() => {});
+  }
+
+  function crGuestClose() {
+    document.getElementById('cr-guest-modal').classList.remove('open');
+  }
+
+  function _crGuestShowToken(token) {
+    const url = `${location.origin}/guest-board?token=${token}`;
+    document.getElementById('cr-guest-url').textContent = url;
+    document.getElementById('cr-guest-no-token').style.display = 'none';
+    document.getElementById('cr-guest-has-token').style.display = 'block';
+    const copyBtn = document.getElementById('cr-guest-copy-btn');
+    if (copyBtn) copyBtn.classList.remove('copied');
+  }
+
+  async function crGuestCreate() {
+    if (!_sessionId) return;
+    try {
+      const data = await LS.post(`/api/classroom/${_sessionId}/guest-token`);
+      _crGuestShowToken(data.token);
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  async function crGuestRevoke() {
+    if (!_sessionId) return;
+    const ok = await crConfirm('Отозвать ссылку?', 'Гости, перешедшие по старой ссылке, потеряют доступ.', { okText: 'Отозвать', type: 'danger' });
+    if (!ok) return;
+    try {
+      await LS.del(`/api/classroom/${_sessionId}/guest-token`);
+      document.getElementById('cr-guest-no-token').style.display = 'block';
+      document.getElementById('cr-guest-has-token').style.display = 'none';
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  function crGuestCopy() {
+    const url = document.getElementById('cr-guest-url')?.textContent || '';
+    if (!url) return;
+    navigator.clipboard.writeText(url).then(() => {
+      const btn = document.getElementById('cr-guest-copy-btn');
+      if (btn) {
+        btn.textContent = 'Скопировано';
+        btn.classList.add('copied');
+        setTimeout(() => { btn.textContent = 'Копировать'; btn.classList.remove('copied'); }, 2000);
+      }
+    }).catch(() => {
+      LS.toast('Не удалось скопировать', 'error');
+    });
+  }
+
+  /* ── file picker (share library file) ── */
+  let _crFilePickerFiles = [];
+
+  function crOpenFilePicker() {
+    document.getElementById('cr-file-picker-overlay').classList.add('open');
+    document.getElementById('cr-file-picker-search').value = '';
+    document.getElementById('cr-file-picker-list').innerHTML = '<div class="cr-file-picker-empty">Загрузка...</div>';
+    LS.get('/api/files').then(data => {
+      _crFilePickerFiles = (data.files || data || []);
+      crFilePickerSearch('');
+    }).catch(() => {
+      document.getElementById('cr-file-picker-list').innerHTML = '<div class="cr-file-picker-empty">Ошибка загрузки</div>';
+    });
+  }
+
+  function crCloseFilePicker() {
+    document.getElementById('cr-file-picker-overlay').classList.remove('open');
+  }
+
+  function crFilePickerSearch(q) {
+    const query = q.trim().toLowerCase();
+    const filtered = query
+      ? _crFilePickerFiles.filter(f => (f.title || f.original_name || '').toLowerCase().includes(query))
+      : _crFilePickerFiles;
+    crFilePickerRender(filtered);
+  }
+
+  function crFilePickerRender(files) {
+    const list = document.getElementById('cr-file-picker-list');
+    if (!files.length) {
+      list.innerHTML = '<div class="cr-file-picker-empty">Файлы не найдены</div>';
+      return;
+    }
+    list.innerHTML = files.map(f => {
+      const name = f.title || f.original_name || 'Файл';
+      const ext  = _crFileExt(f.mimetype || '');
+      const size = f.size ? _crFmtSize(f.size) : '';
+      const sub  = [f.subject_slug || '', size].filter(Boolean).join(' · ');
+      return `<div class="cr-file-item">
+        <div class="cr-file-icon ${ext}">${ext.toUpperCase()}</div>
+        <div class="cr-file-info">
+          <div class="cr-file-name" title="${LS.esc(name)}">${LS.esc(name)}</div>
+          ${sub ? `<div class="cr-file-meta">${LS.esc(sub)}</div>` : ''}
+        </div>
+        <button class="cr-file-pick-btn" onclick="crShareLibraryFile(${f.id}, ${JSON.stringify(name)}, ${JSON.stringify(f.mimetype || '')})">
+          Поделиться
+        </button>
+      </div>`;
+    }).join('');
+  }
+
+  async function crShareLibraryFile(fileId, title, mimetype) {
+    if (!_sessionId) return;
+    crCloseFilePicker();
+    try {
+      await LS.post(`/api/classroom/${_sessionId}/chat`, {
+        message:        title,
+        attachment_url:  fileId + '|' + (mimetype || ''),
+        attachment_type: 'library_file',
+      });
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  function crDownloadLibraryFile(fileId, name) {
+    const token = localStorage.getItem('ls_token');
+    fetch(`/api/files/${fileId}/download`, {
+      headers: { Authorization: 'Bearer ' + token },
+    })
+      .then(r => {
+        if (!r.ok) throw new Error('Ошибка загрузки');
+        return r.blob();
+      })
+      .then(blob => {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url; a.download = name;
+        document.body.appendChild(a); a.click();
+        document.body.removeChild(a);
+        setTimeout(() => URL.revokeObjectURL(url), 15000);
+      })
+      .catch(e => LS.toast(e.message || 'Ошибка загрузки', 'error'));
+  }
+
+  function _crFileExt(mimetype) {
+    if (!mimetype) return 'other';
+    if (mimetype === 'application/pdf') return 'pdf';
+    if (mimetype.startsWith('image/')) return 'img';
+    if (mimetype.includes('word') || mimetype.includes('document') || mimetype === 'text/plain') return 'doc';
+    if (mimetype.includes('sheet') || mimetype.includes('excel') || mimetype.includes('csv')) return 'xls';
+    if (mimetype.includes('presentation') || mimetype.includes('powerpoint')) return 'ppt';
+    if (mimetype.startsWith('video/')) return 'vid';
+    return 'other';
+  }
+
+  function _crFmtSize(bytes) {
+    if (bytes < 1024) return bytes + ' Б';
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + ' КБ';
+    return (bytes / (1024 * 1024)).toFixed(1) + ' МБ';
+  }
+
   /* ── participants ── */
   function updateParticipantsList() {
     const list = document.getElementById('cr-participants-list');
@@ -2849,34 +5210,57 @@
     const isTeacherView = _me?.role === 'teacher' || _me?.role === 'admin';
     ids.forEach(uid => {
       const p = _participants[uid];
+      const isGuest = p.role === 'guest';
       const initials = (p.name || '?').split(' ').slice(0,2).map(w=>w[0]?.toUpperCase()||'').join('') || '?';
-      const isMe = String(uid) === String(_me?.id);
-      const isSessionTeacher = _session && String(uid) === String(_session.teacher_id);
-      const hasHand = !!_raisedHands[uid];
+      const isMe = !isGuest && String(uid) === String(_me?.id);
+      const isSessionTeacher = !isGuest && _session && String(uid) === String(_session.teacher_id);
+      const hasHand = !isGuest && !!_raisedHands[uid];
       const div = document.createElement('div');
       div.className = 'cr-participant';
       div.dataset.uid = uid;
-      const hasDrawPerm = _permittedStudents.has(Number(uid));
+      const hasDrawPerm = !isGuest && _permittedStudents.has(Number(uid));
       const svgPencil = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:10px;height:10px"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>`;
       const svgMicOn  = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:10px;height:10px"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>`;
       const svgMicOff = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:10px;height:10px"><line x1="1" y1="1" x2="23" y2="23"/><path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"/><path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>`;
-      // Mute button for teacher: shows current state, action on hover
-      const muteBtnHtml = isTeacherView && !isMe && !isSessionTeacher ? (
+      // Mute button for teacher: shows current state, action on hover (not for guests)
+      const muteBtnHtml = isTeacherView && !isMe && !isSessionTeacher && !isGuest ? (
         p.micMuted
           ? `<button class="cr-p-mute-btn mic-muted" onclick="crMutePeer(${uid})" title="Включить микрофон">${svgMicOff} Выкл</button>`
           : `<button class="cr-p-mute-btn mic-active" onclick="crMutePeer(${uid})" title="Заглушить">${svgMicOn} Вкл</button>`
       ) : '';
+      if (p.speaking) div.classList.add('speaking');
+      /* per-user avatar gradient from uid hash */
+      const avatarGrads = [
+        ['#9B5DE5','#06D6E0'], ['#F15BB5','#9B5DE5'], ['#06D6A0','#2979FF'],
+        ['#FF9F43','#F15BB5'], ['#4361EE','#06D6E0'], ['#A8E063','#06D6A0'],
+        ['#9B5DE5','#F15BB5'], ['#06D6E0','#4361EE'],
+      ];
+      const uidHash = isGuest
+        ? uid.split('').reduce((a, c) => (a * 31 + c.charCodeAt(0)) & 0xffff, 0)
+        : (Number(uid) || 0);
+      const grad = avatarGrads[uidHash % avatarGrads.length];
       div.innerHTML = `
-        <div class="cr-p-avatar${p.speaking ? ' speaking' : ''}">${initials}</div>
-        <div class="cr-p-name">${LS.escapeHtml(p.name)}</div>
-        ${isSessionTeacher ? '<span class="cr-p-teacher">Учитель</span>' : ''}
-        ${isMe && !isSessionTeacher ? '<span class="cr-p-you">Вы</span>' : ''}
-        ${!isTeacherView && hasDrawPerm ? `<span class="cr-p-draw-badge">${svgPencil} рисует</span>` : ''}
+        <div class="cr-p-avatar-wrap">
+          <div class="cr-p-avatar${p.speaking ? ' speaking' : ''}"
+               style="background:linear-gradient(135deg,${grad[0]},${grad[1]})">${initials}</div>
+          <div class="cr-p-online-dot"></div>
+        </div>
+        <div class="cr-audio-bars" id="cr-bars-${uid}"><span></span><span></span><span></span></div>
+        <div class="cr-p-info">
+          <div class="cr-p-name">${LS.escapeHtml(p.name)}</div>
+          <div class="cr-p-sub">
+            ${isGuest
+              ? '<span class="cr-p-guest-badge">Гость</span>'
+              : isSessionTeacher ? '<span class="cr-p-role-tag teacher">Учитель</span>' : '<span class="cr-p-role-tag student">Ученик</span>'}
+            ${isMe ? '<span class="cr-p-you">Вы</span>' : ''}
+            ${!isTeacherView && hasDrawPerm ? `<span class="cr-p-draw-badge">${svgPencil} рисует</span>` : ''}
+          </div>
+        </div>
         <div class="cr-p-status">
           ${hasHand ? `<svg viewBox="0 0 24 24" fill="none" stroke="#FFB347" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px"><path d="M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0"/><path d="M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2"/><path d="M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/></svg>` : ''}
           ${muteBtnHtml}
         </div>
-        ${isTeacherView && !isMe && !isSessionTeacher ? `
+        ${isTeacherView && !isMe && !isSessionTeacher && !isGuest ? `
         <button class="cr-p-draw-toggle${hasDrawPerm ? ' granted' : ''}" onclick="crToggleDrawPermission(${uid})">
           ${svgPencil}
           ${hasDrawPerm ? 'Запретить' : 'Рисовать'}
@@ -2909,6 +5293,8 @@
     _raisedHands[userId] = userName;
     updateHandsList();
     updateParticipantsList();
+    if (_prefs.handSound && String(userId) !== String(_me?.id))
+      _crBeep(660, 150, 0.15);
   }
 
   function onHandLowered(userId) {
@@ -2942,6 +5328,7 @@
     updatePageLabel();
     const isTeacher = _me.role === 'teacher' || _me.role === 'admin';
     if (!isTeacher && _followTeacher) wbGoToPage(pageNum);
+    else wbRebuildThumbnails();
   }
 
   function onPageChanged(pageNum) {
@@ -2968,6 +5355,7 @@
       _wb.loadStrokes(strokes);
       if (res.template) _wb.setTemplate(res.template);
       _wb.setPageNum(pageNum);
+      _wbUpdateBgBtn();
       wbRebuildThumbnails();
     } catch {}
   }
@@ -3011,11 +5399,18 @@
       const item = document.createElement('div');
       item.className = 'wb-thumb-item' + (i === _wbCurrentPage ? ' active' : '');
       item.dataset.page = i;
-      item.title = `Страница ${i}`;
+      const name = _pageNames[i];
+      item.title = name || `Страница ${i}`;
       item.onclick = () => { if (i !== _wbCurrentPage) _wbChangePage(i); };
+      item.ondblclick = (e) => { e.stopPropagation(); wbStartRenaming(i); };
+      item.oncontextmenu = (e) => { e.preventDefault(); wbShowPageMenu(e, i); };
       const cvs = document.createElement('canvas');
       cvs.width = 192; cvs.height = 108;
       item.appendChild(cvs);
+      const lbl = document.createElement('span');
+      lbl.className = 'wb-thumb-label';
+      lbl.textContent = name || '';
+      item.appendChild(lbl);
       const num = document.createElement('span');
       num.className = 'wb-thumb-num';
       num.textContent = i;
@@ -3041,6 +5436,110 @@
     wbUpdateThumbnail(_wbCurrentPage);
   }
 
+  function wbSetBoardTheme(theme) {
+    if (!_wb) return;
+    _wb.setBoardTheme(theme);
+    // Update selector if called programmatically
+    const sel = document.getElementById('wb-theme-select');
+    if (sel) sel.value = theme;
+  }
+
+  /* ── Page context menu ── */
+  function wbShowPageMenu(e, pageNum) {
+    _wbMenuPage = pageNum;
+    const menu = document.getElementById('wb-page-menu');
+    menu.classList.add('open');
+    const x = Math.min(e.clientX, window.innerWidth  - 155);
+    const y = Math.min(e.clientY, window.innerHeight - 140);
+    menu.style.left = x + 'px';
+    menu.style.top  = y + 'px';
+    setTimeout(() => document.addEventListener('click', _wbMenuClose, { once: true }), 0);
+  }
+  function _wbMenuClose() { document.getElementById('wb-page-menu').classList.remove('open'); }
+  function wbHidePageMenu() { _wbMenuClose(); }
+
+  async function wbPageDuplicate(pageNum) {
+    wbHidePageMenu();
+    if (!_sessionId) return;
+    try {
+      const res = await LS.post(`/api/classroom/${_sessionId}/pages/${pageNum}/duplicate`);
+      // SSE handles page addition; set name if returned
+      if (res.name) _pageNames[res.newPage] = res.name;
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  async function wbPageDelete(pageNum) {
+    wbHidePageMenu();
+    if (!_sessionId || _totalPages <= 1) return;
+    try {
+      const res = await LS.del(`/api/classroom/${_sessionId}/pages/${pageNum}`);
+      // Renumber _pageNames
+      const newNames = {};
+      Object.keys(_pageNames).forEach(k => {
+        const n = parseInt(k);
+        if (n < pageNum)       newNames[n] = _pageNames[n];
+        else if (n > pageNum)  newNames[n - 1] = _pageNames[n];
+      });
+      _pageNames = newNames;
+      _totalPages = Math.max(1, _totalPages - 1);
+      if (_wbCurrentPage > pageNum)       _wbCurrentPage = _wbCurrentPage - 1;
+      else if (_wbCurrentPage === pageNum) _wbCurrentPage = res.newCurrent;
+      updatePageLabel();
+      if (_wb) {
+        _wb.clearPage();
+        const d = await LS.get(`/api/classroom/${_sessionId}/strokes?page_num=${_wbCurrentPage}`);
+        _wb.loadStrokes(d.strokes || []);
+        if (d.template) _wb.setTemplate(d.template);
+        _wbMaxSeq = 0; _wbClearGen++;
+        _wbUpdateMaxSeq(d.strokes || []);
+        _wbUpdateBgBtn();
+      }
+      wbRebuildThumbnails();
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  async function wbPageClear(pageNum) {
+    wbHidePageMenu();
+    if (!_sessionId) return;
+    try { await LS.post(`/api/classroom/${_sessionId}/clear-page`, { page_num: pageNum }); } catch {}
+    if (pageNum === _wbCurrentPage && _wb) { _wb.clearPage(); _wbMaxSeq = 0; _wbClearGen++; }
+    wbUpdateThumbnail(pageNum);
+  }
+
+  /* ── Page naming ── */
+  function wbStartRenaming(pageNum) {
+    const list = document.getElementById('wb-thumbs-list');
+    const item = list?.querySelector(`.wb-thumb-item[data-page="${pageNum}"]`);
+    if (!item) return;
+    // Remove existing input if any
+    item.querySelector('.wb-thumb-rename')?.remove();
+    const input = document.createElement('input');
+    input.className = 'wb-thumb-rename';
+    input.value = _pageNames[pageNum] || '';
+    input.placeholder = `Стр. ${pageNum}`;
+    item.appendChild(input);
+    input.focus(); input.select();
+    input.onkeydown = (e) => {
+      if (e.key === 'Enter')  { e.preventDefault(); wbFinishRenaming(pageNum, input.value.trim()); }
+      if (e.key === 'Escape') { input.remove(); }
+    };
+    input.onblur = () => wbFinishRenaming(pageNum, input.value.trim());
+  }
+
+  async function wbFinishRenaming(pageNum, name) {
+    const list = document.getElementById('wb-thumbs-list');
+    const item = list?.querySelector(`.wb-thumb-item[data-page="${pageNum}"]`);
+    item?.querySelector('.wb-thumb-rename')?.remove();
+    const finalName = name || null;
+    _pageNames[pageNum] = finalName;
+    // Update label text
+    const lbl = item?.querySelector('.wb-thumb-label');
+    if (lbl) lbl.textContent = finalName || '';
+    if (item) item.title = finalName || `Страница ${pageNum}`;
+    if (!_sessionId) return;
+    try { await LS.patch(`/api/classroom/${_sessionId}/pages/${pageNum}/name`, { name: finalName }); } catch {}
+  }
+
   async function _wbChangePage(pageNum) {
     if (!_sessionId) return;
     _wbBatch = []; // discard unsent strokes from old page
@@ -3062,20 +5561,40 @@
           const sel = document.getElementById('wb-tpl-select');
           if (sel) sel.value = res.template;
         }
+        if (res.name !== undefined) _pageNames[pageNum] = res.name || null;
+        _wbUpdateBgBtn();
         wbRebuildThumbnails();
       }
     } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
   }
 
   /* ── tabs ── */
+  function crToggleRightPanel() {
+    const panel = document.getElementById('cr-right');
+    const collapsed = panel.classList.toggle('collapsed');
+    localStorage.setItem('cr_right_collapsed', collapsed ? '1' : '0');
+    // Trigger canvas resize after transition
+    setTimeout(() => { if (_wb) _wb.fit(); }, 240);
+  }
+
   function crSwitchTab(tab) {
+    // Auto-expand if collapsed
+    const panel = document.getElementById('cr-right');
+    if (panel?.classList.contains('collapsed')) crToggleRightPanel();
+
     _activeTab = tab;
     document.getElementById('tab-participants').classList.toggle('active', tab === 'participants');
     document.getElementById('tab-chat').classList.toggle('active', tab === 'chat');
     document.getElementById('tab-notes').classList.toggle('active', tab === 'notes');
+    const tabQuiz = document.getElementById('tab-quiz');
+    if (tabQuiz) tabQuiz.classList.toggle('active', tab === 'quiz');
     document.getElementById('panel-participants').style.display = tab === 'participants' ? 'flex' : 'none';
     document.getElementById('panel-chat').style.display         = tab === 'chat'         ? 'flex' : 'none';
     document.getElementById('panel-notes').style.display        = tab === 'notes'        ? 'flex' : 'none';
+    document.getElementById('panel-quiz').style.display         = tab === 'quiz'         ? 'flex' : 'none';
+    if (tab === 'quiz') {
+      document.getElementById('quiz-badge').style.display = 'none';
+    }
     if (tab === 'chat') {
       _chatUnread = 0;
       document.getElementById('chat-unread').style.display = 'none';
@@ -3110,12 +5629,19 @@
       _chatUnread++;
       const badge = document.getElementById('chat-unread');
       if (badge) { badge.textContent = _chatUnread; badge.style.display = 'inline'; }
+      if (_prefs.chatSound) _crBeep(880, 100, 0.12);
     }
 
     const wrap = document.getElementById('cr-messages');
     const isMsgTeacher = data.userId === _session?.teacher_id;
     const isTeacherView = _me?.role === 'teacher' || _me?.role === 'admin';
+    const isOwnMsg = String(data.userId) === String(_me?.id);
     const time = new Date(data.createdAt).toLocaleTimeString('ru', { hour: '2-digit', minute: '2-digit' });
+
+    /* row wrapper for bubble alignment */
+    const row = document.createElement('div');
+    row.className = 'cr-msg-row ' + (isOwnMsg ? 'mine' : 'theirs');
+
     const div = document.createElement('div');
     div.className = 'cr-msg' + (data.pinned ? ' cr-msg-pinned' : '');
     if (data.id) div.dataset.msgid = data.id;
@@ -3137,24 +5663,43 @@
       ).join('')
     }</div>`;
 
-    const attachHtml = data.attachmentUrl && data.attachmentType === 'image'
-      ? `<img class="cr-msg-img" src="${LS.esc(data.attachmentUrl)}" alt="изображение" onclick="window.open('${LS.esc(data.attachmentUrl)}','_blank')">`
-      : data.attachmentUrl ? `<a href="${LS.esc(data.attachmentUrl)}" target="_blank" style="color:#9B5DE5;font-size:0.78rem;">Файл</a>` : '';
+    let attachHtml = '';
+    if (data.attachmentUrl) {
+      if (data.attachmentType === 'image') {
+        attachHtml = `<img class="cr-msg-img" src="${LS.esc(data.attachmentUrl)}" alt="изображение" onclick="window.open('${LS.esc(data.attachmentUrl)}','_blank')">`;
+      } else if (data.attachmentType === 'library_file') {
+        const [fileId, ...mtParts] = (data.attachmentUrl || '').split('|');
+        const mime = mtParts.join('|') || '';
+        const ext  = _crFileExt(mime);
+        const displayName = data.message || 'Файл';
+        attachHtml = `<div class="cr-msg-file-card" onclick="crDownloadLibraryFile(${parseInt(fileId,10)}, ${JSON.stringify(displayName)})">
+          <div class="cr-file-icon ${ext}">${ext.toUpperCase()}</div>
+          <div class="cr-file-info">
+            <div class="cr-file-name">${LS.esc(displayName)}</div>
+            <div class="cr-msg-shared-label">из библиотеки</div>
+          </div>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;flex-shrink:0;color:rgba(255,255,255,0.35)"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+        </div>`;
+      } else {
+        attachHtml = `<a href="${LS.esc(data.attachmentUrl)}" target="_blank" style="color:#9B5DE5;font-size:0.78rem;">Файл</a>`;
+      }
+    }
 
     const reactionsHtml = _renderReactions(data.reactions || {}, data.id);
 
     div.innerHTML = `
       ${isTeacherView && data.id ? reactBar : ''}
       <div class="cr-msg-header">
-        <span class="cr-msg-name${isMsgTeacher ? ' teacher-name' : ''}">${LS.esc(data.userName || '')}</span>
+        ${!isOwnMsg ? `<span class="cr-msg-name${isMsgTeacher ? ' teacher-name' : ''}">${LS.esc(data.userName || '')}</span>` : ''}
         <span class="cr-msg-time">${time}</span>
         ${data.pinned ? `<span class="cr-msg-pin-badge">${pinIcon}</span>` : ''}
         ${isTeacherView && data.id ? `<button class="cr-msg-pin-btn${data.pinned ? ' active' : ''}" onclick="crPinMessage(${data.id}, this)" title="${data.pinned ? 'Открепить' : 'Закрепить'}">${pinIcon}</button>` : ''}
       </div>
-      ${data.message ? `<div class="cr-msg-text">${LS.esc(data.message)}</div>` : ''}
+      ${data.message && data.attachmentType !== 'library_file' ? `<div class="cr-msg-text">${LS.esc(data.message)}</div>` : ''}
       ${attachHtml}
       <div class="cr-msg-reactions" id="msg-reactions-${data.id}">${reactionsHtml}</div>`;
-    wrap.appendChild(div);
+    row.appendChild(div);
+    wrap.appendChild(row);
     wrap.scrollTop = wrap.scrollHeight;
   }
 
@@ -3300,6 +5845,13 @@
   function crNotesOnInput() {
     const st = document.getElementById('notes-status');
     if (st) st.textContent = 'Изменено…';
+    /* word count */
+    const ta = document.getElementById('cr-notes-ta');
+    const wc = document.getElementById('notes-wordcount');
+    if (ta && wc) {
+      const words = ta.value.trim() ? ta.value.trim().split(/\s+/).length : 0;
+      wc.textContent = words + ' ' + (words === 1 ? 'слово' : words < 5 ? 'слова' : 'слов');
+    }
     clearTimeout(_notesSaveTimer);
     _notesSaveTimer = setTimeout(crNotesSave, 1500);
   }
@@ -3489,7 +6041,7 @@
   }
 
   /* ── Whiteboard extra ── */
-  function wbRedo() { if (_wb) _wb.redo(); }
+  function wbRedo() { if (_wb) { _wb.redo(); setTimeout(wbCheckSelectionUI, 20); } }
 
   let _wbFill = false;
   function wbToggleFill(btn) {
@@ -3501,7 +6053,7 @@
 
   function wbCopySelected()   { if (_wb) _wb.copy(); }
   function wbPasteSelected()  { if (_wb) _wb.paste(); }
-  function wbDeleteSelected() { if (_wb) _wb.deleteSelected(); }
+  function wbDeleteSelected() { if (_wb) { _wb.deleteSelected(); setTimeout(wbCheckSelectionUI, 20); } }
   function wbBringToFront()   { if (_wb) _wb.bringToFront(); }
   function wbSendToBack()     { if (_wb) _wb.sendToBack(); }
 
@@ -3857,6 +6409,14 @@
     }
   }
 
+  function _updateStudentFsBtn() {
+    const isFs = !!document.fullscreenElement;
+    const lbl = document.getElementById('cr-fs-label');
+    if (lbl) lbl.textContent = isFs ? 'Свернуть' : 'На весь экран';
+  }
+  document.addEventListener('fullscreenchange', _updateStudentFsBtn);
+  document.addEventListener('webkitfullscreenchange', _updateStudentFsBtn);
+
   /* ── Student page nav / follow ── */
   async function wbStudentPrevPage() {
     if (_wbCurrentPage <= 1) return;
@@ -3927,22 +6487,65 @@
       onMicActive: (uid, speaking) => {
         if (_participants[uid]) {
           _participants[uid].speaking = speaking;
-          // Update only the avatar element to avoid full re-render on every VAD tick
-          const avatar = document.querySelector(`.cr-participant[data-uid="${uid}"] .cr-p-avatar`);
-          if (avatar) avatar.classList.toggle('speaking', speaking);
+          // Update avatar and row without full re-render
+          const row = document.querySelector(`.cr-participant[data-uid="${uid}"]`);
+          if (row) {
+            row.classList.toggle('speaking', speaking);
+            row.querySelector('.cr-p-avatar')?.classList.toggle('speaking', speaking);
+          }
+          _updateSpeakerChip();
         }
       },
+      onMicLevel: (uid, level) => {
+        if (_participants[uid]) _participants[uid].micLevel = level;
+        const bars = document.getElementById(`cr-bars-${uid}`);
+        if (bars) {
+          const spans = bars.querySelectorAll('span');
+          // 3 bars: left/center/right with natural stagger heights
+          const h2 = Math.max(2, Math.round((level / 100) * 12));
+          const h1 = Math.max(2, Math.round(h2 * 0.65));
+          const h3 = Math.max(2, Math.round(h2 * 0.45));
+          if (spans[0]) spans[0].style.height = h1 + 'px';
+          if (spans[1]) spans[1].style.height = h2 + 'px';
+          if (spans[2]) spans[2].style.height = h3 + 'px';
+        }
+      },
+      vadThreshold: VAD_THRESHOLDS[_prefs.vadSensitivity] ?? 12,
     });
 
     const micOk = await _rtc.startAudio();
     if (!micOk) LS.toast('Нет доступа к микрофону', 'warning');
 
+    // Apply muted-on-join preference
+    if (_prefs.mutedOnJoin && !_rtc.isMuted()) {
+      _rtc.forceMute();
+      if (_participants[_me?.id]) _participants[_me.id].micMuted = true;
+    }
+
     document.getElementById('cr-mute-btn').style.display = 'flex';
     updateMuteBtn();
 
     if (peerIds.length > 0) await _rtc.connectTo(peerIds);
   }
 
+  function _updateSpeakerChip() {
+    const chip = document.getElementById('cr-speaker-chip');
+    if (!chip) return;
+    // Find all currently speaking participants, pick the loudest
+    const speaking = Object.entries(_participants).filter(([, p]) => p.speaking);
+    if (!speaking.length) {
+      chip.classList.remove('visible');
+      return;
+    }
+    const [, p] = speaking.sort((a, b) => (b[1].micLevel || 0) - (a[1].micLevel || 0))[0];
+    const initials = (p.name || '?').split(' ').slice(0, 2).map(w => w[0]?.toUpperCase() || '').join('') || '?';
+    const avatarEl = document.getElementById('cr-speaker-chip-avatar');
+    const nameEl   = document.getElementById('cr-speaker-chip-name');
+    if (avatarEl) avatarEl.textContent = initials;
+    if (nameEl)   nameEl.textContent   = p.name || '';
+    chip.classList.add('visible');
+  }
+
   function crToggleMute() {
     if (!_rtc) return;
     const muted = _rtc.toggleMute();
@@ -3971,29 +6574,190 @@
       : `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;display:block"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>`;
   }
 
-  async function crToggleScreen() {
+  /* ── screen picker v2 ── */
+  let _crSpTab       = 'monitor'; // 'monitor' | 'window' | 'browser'
+  let _crSpRes       = 1080;      // 720 | 1080 | 0 (native)
+  let _crSpFps       = 30;
+  let _crSpAudio     = false;
+  let _crSpCursor    = true;
+  let _crSpTempStream = null;     // preview stream, handed to RTC on confirm
+
+  /* Tab metadata */
+  const _CR_SP_TABS = {
+    monitor: {
+      label: 'Выбрать экран',
+      emptyTitle: 'Экран не выбран',
+      emptyHint: 'Нажмите кнопку ниже — откроется выбор монитора',
+      barSvg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:11px;height:11px"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>',
+      emptySvg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:26px;height:26px"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>',
+    },
+    window: {
+      label: 'Выбрать окно',
+      emptyTitle: 'Окно не выбрано',
+      emptyHint: 'Нажмите кнопку ниже — откроется выбор приложения',
+      barSvg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:11px;height:11px"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>',
+      emptySvg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:26px;height:26px"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>',
+    },
+    browser: {
+      label: 'Выбрать вкладку',
+      emptyTitle: 'Вкладка не выбрана',
+      emptyHint: 'Нажмите кнопку ниже — откроется выбор вкладки браузера',
+      barSvg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:11px;height:11px"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>',
+      emptySvg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:26px;height:26px"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>',
+    },
+  };
+
+  function crToggleScreen() {
     if (!_rtc || !_sessionId) return;
-    const btn = document.getElementById('cr-screen-btn');
     if (_rtc.isSharing()) {
-      await _rtc.stopScreenShare();
-      btn.classList.remove('cr-btn-sharing');
-      try { await LS.del(`/api/classroom/${_sessionId}/screen`); } catch {}
+      _rtc.stopScreenShare();
+      document.getElementById('cr-screen-btn').classList.remove('cr-btn-sharing');
+      LS.del(`/api/classroom/${_sessionId}/screen`).catch(() => {});
     } else {
-      const stream = await _rtc.startScreenShare();
-      if (!stream) return; // user cancelled
-      // intercept track ended (browser stop button) to clean up page state
-      const vt = stream.getVideoTracks()[0];
-      if (vt) {
-        vt.onended = () => {
-          _rtc.stopScreenShare();
-          onScreenShareStopped();
-        };
-      }
-      btn.classList.add('cr-btn-sharing');
-      try { await LS.post(`/api/classroom/${_sessionId}/screen`); } catch {}
+      crOpenScreenPicker();
     }
   }
 
+  function crOpenScreenPicker() {
+    // Reset preview state (but keep quality prefs)
+    _crSpTempStreamStop();
+    _crSpShowEmpty();
+    // Sync UI state
+    ['monitor','window','browser'].forEach(t =>
+      document.getElementById(`cr-sptab-${t}`)?.classList.toggle('active', t === _crSpTab)
+    );
+    _crSpUpdateEmptyText();
+    document.getElementById('cr-screen-picker-overlay').classList.add('open');
+  }
+
+  function crCloseScreenPicker() {
+    document.getElementById('cr-screen-picker-overlay').classList.remove('open');
+    _crSpTempStreamStop(); // discard preview if not confirmed
+  }
+
+  function crSpSwitchTab(tab) {
+    if (_crSpTab === tab) return;
+    _crSpTab = tab;
+    ['monitor','window','browser'].forEach(t =>
+      document.getElementById(`cr-sptab-${t}`)?.classList.toggle('active', t === tab)
+    );
+    // Reset preview — different surface type
+    _crSpTempStreamStop();
+    _crSpShowEmpty();
+    _crSpUpdateEmptyText();
+  }
+
+  function _crSpUpdateEmptyText() {
+    const meta = _CR_SP_TABS[_crSpTab];
+    const emptyIcon = document.getElementById('cr-sp-empty-icon');
+    const emptyTitle = document.getElementById('cr-sp-empty-title');
+    const emptyHint  = document.getElementById('cr-sp-empty-hint');
+    const pickBtn    = document.getElementById('cr-sp-pick-btn');
+    if (emptyIcon)  emptyIcon.innerHTML = meta.emptySvg;
+    if (emptyTitle) emptyTitle.textContent = meta.emptyTitle;
+    if (emptyHint)  emptyHint.textContent = meta.emptyHint;
+    if (pickBtn) {
+      // keep the SVG icon inside the button, just update text node
+      pickBtn.innerHTML = meta.barSvg + ' ' + meta.label;
+    }
+  }
+
+  function _crSpShowEmpty() {
+    document.getElementById('cr-sp-empty').style.display      = 'flex';
+    document.getElementById('cr-sp-video-wrap').classList.remove('visible');
+    document.getElementById('cr-sp-start-btn').disabled       = true;
+    const v = document.getElementById('cr-sp-video');
+    if (v) v.srcObject = null;
+  }
+
+  function _crSpShowPreview(stream) {
+    const meta  = _CR_SP_TABS[_crSpTab];
+    const track = stream.getVideoTracks()[0];
+    const label = track?.label || meta.emptyTitle.replace('не выбран', '').trim() || 'Источник';
+    const settings = track?.getSettings?.() || {};
+    const w = settings.width || 0, h = settings.height || 0;
+    const resBadge = w && h ? `${w}×${h}` : '';
+
+    document.getElementById('cr-sp-bar-icon').innerHTML = meta.barSvg;
+    document.getElementById('cr-sp-preview-name').textContent = label;
+    document.getElementById('cr-sp-res-badge').textContent = resBadge;
+    document.getElementById('cr-sp-video').srcObject = stream;
+    document.getElementById('cr-sp-empty').style.display = 'none';
+    document.getElementById('cr-sp-video-wrap').classList.add('visible');
+    document.getElementById('cr-sp-start-btn').disabled = false;
+  }
+
+  function _crSpTempStreamStop() {
+    if (_crSpTempStream) {
+      _crSpTempStream.getTracks().forEach(t => t.stop());
+      _crSpTempStream = null;
+    }
+  }
+
+  async function crSpPickSource() {
+    _crSpTempStreamStop();
+    _crSpShowEmpty();
+
+    const vc = { displaySurface: _crSpTab, cursor: _crSpCursor ? 'always' : 'never' };
+    if (_crSpRes === 720)  { vc.width = { ideal: 1280 }; vc.height = { ideal: 720 }; }
+    if (_crSpRes === 1080) { vc.width = { ideal: 1920 }; vc.height = { ideal: 1080 }; }
+    if (_crSpFps > 0) vc.frameRate = { ideal: _crSpFps };
+
+    let stream;
+    try {
+      stream = await navigator.mediaDevices.getDisplayMedia({ video: vc, audio: _crSpAudio });
+    } catch { return; } // user cancelled
+
+    _crSpTempStream = stream;
+    _crSpShowPreview(stream);
+
+    // If user hits browser's "Stop sharing" button while modal open → reset
+    const vt = stream.getVideoTracks()[0];
+    if (vt) vt.onended = () => {
+      if (_crSpTempStream === stream) { _crSpTempStream = null; _crSpShowEmpty(); }
+    };
+  }
+
+  function crSpSetQ(btn, type) {
+    const row = btn.closest('.cr-sp-q-opts');
+    row.querySelectorAll('.cr-sp-qbtn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    const val = Number(btn.dataset.q);
+    if (type === 'res') _crSpRes = val;
+    else _crSpFps = val;
+  }
+
+  function crSpToggleAudio() {
+    _crSpAudio = !_crSpAudio;
+    document.getElementById('cr-sp-opt-audio')?.classList.toggle('on', _crSpAudio);
+  }
+
+  function crSpToggleCursor() {
+    _crSpCursor = !_crSpCursor;
+    document.getElementById('cr-sp-opt-cursor')?.classList.toggle('on', _crSpCursor);
+  }
+
+  async function crSpStartShare() {
+    if (!_crSpTempStream || !_rtc || !_sessionId) return;
+
+    const stream = _crSpTempStream;
+    _crSpTempStream = null; // hand off ownership — don't stop it
+
+    document.getElementById('cr-screen-picker-overlay').classList.remove('open');
+
+    await _rtc.useExistingScreenStream(stream);
+
+    const vt = stream.getVideoTracks()[0];
+    if (vt) {
+      vt.onended = () => {
+        _rtc.stopScreenShare();
+        onScreenShareStopped();
+      };
+    }
+    document.getElementById('cr-screen-btn').classList.add('cr-btn-sharing');
+    LS.post(`/api/classroom/${_sessionId}/screen`).catch(() => {});
+  }
+
   async function onScreenShareStopped() {
     document.getElementById('cr-screen-btn').classList.remove('cr-btn-sharing');
     if (_sessionId) {
@@ -4001,6 +6765,187 @@
     }
   }
 
+  /* ── Simulation integration ──────────────────────────────────────────── */
+
+  // Compact sims catalogue (id + title + category) mirrored from lab.html
+  const CR_SIMS = [
+    { id:'graph',         cat:'math', title:'График функции' },
+    { id:'graphtransform',cat:'math', title:'Трансформации графиков' },
+    { id:'triangle',      cat:'math', title:'Геометрия треугольника' },
+    { id:'quadratic',     cat:'math', title:'Корни квадратного уравнения' },
+    { id:'stereo',        cat:'math', title:'Стереометрия 3D' },
+    { id:'probability',   cat:'math', title:'Теория вероятностей' },
+    { id:'trigcircle',    cat:'math', title:'Тригонометрическая окружность' },
+    { id:'normaldist',    cat:'math', title:'Нормальное распределение' },
+    { id:'projectile',    cat:'phys', title:'Бросок тела' },
+    { id:'pendulum',      cat:'phys', title:'Маятник' },
+    { id:'collision',     cat:'phys', title:'Столкновение шаров' },
+    { id:'magnetic',      cat:'phys', title:'Магнитное поле токов' },
+    { id:'circuit',       cat:'phys', title:'Электрические цепи' },
+    { id:'coulomb',       cat:'phys', title:'Закон Кулона' },
+    { id:'dynamics',      cat:'phys', title:'Динамика' },
+    { id:'thinlens',      cat:'phys', title:'Тонкая линза' },
+    { id:'refraction',    cat:'phys', title:'Преломление света' },
+    { id:'mirrors',       cat:'phys', title:'Зеркала' },
+    { id:'isoprocess',    cat:'phys', title:'Изопроцессы' },
+    { id:'waves',         cat:'phys', title:'Волны и звук' },
+    { id:'molphys',       cat:'chem', title:'Молекулярная физика' },
+    { id:'chemistry',     cat:'chem', title:'Химические реакции' },
+    { id:'equilibrium',   cat:'chem', title:'Химическое равновесие' },
+    { id:'electrolysis',  cat:'chem', title:'Электролиз' },
+    { id:'bohratom',      cat:'chem', title:'Атом Бора' },
+    { id:'orbitals',      cat:'chem', title:'Молекулярные орбитали' },
+    { id:'titration',     cat:'chem', title:'pH и кривая титрования' },
+    { id:'chemsandbox',   cat:'chem', title:'Химическая песочница' },
+    { id:'crystal',       cat:'chem', title:'Кристаллическая решётка' },
+    { id:'celldivision',  cat:'bio',  title:'Деление клетки' },
+    { id:'photosynthesis',cat:'bio',  title:'Фотосинтез и дыхание' },
+    { id:'angrybirds',    cat:'game', title:'Angry Birds Physics' },
+  ];
+
+  const CAT_LABELS = { math:'Математика', phys:'Физика', chem:'Химия', bio:'Биология', game:'Игра' };
+
+  let _simPickerCat = 'all'; // active filter in picker
+
+  function crOpenSimPicker() {
+    if (_simActive) {
+      // If sim already open — clicking "Симуляция" closes it (teacher action)
+      crTeacherCloseSim();
+      return;
+    }
+    _simPickerCat = 'all';
+    _crRenderSimGrid('all');
+    const overlay = document.getElementById('cr-sim-picker-overlay');
+    overlay.classList.add('open');
+    // reset cat buttons
+    overlay.querySelectorAll('.cr-sim-cat-btn').forEach((b, i) => b.classList.toggle('active', i === 0));
+  }
+
+  function crCloseSimPicker() {
+    document.getElementById('cr-sim-picker-overlay').classList.remove('open');
+  }
+
+  function crFilterSims(cat, btn) {
+    _simPickerCat = cat;
+    document.querySelectorAll('.cr-sim-cat-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    _crRenderSimGrid(cat);
+  }
+
+  function _crRenderSimGrid(cat) {
+    const grid = document.getElementById('cr-sim-picker-grid');
+    const sims = cat === 'all' ? CR_SIMS : CR_SIMS.filter(s => s.cat === cat);
+    grid.innerHTML = sims.map(s => `
+      <div class="cr-sim-picker-card" onclick="crPickSim('${s.id}','${s.title.replace(/'/g,'\\\'')}')" title="${s.title}">
+        <span class="cr-sim-picker-card-cat ${s.cat}">${CAT_LABELS[s.cat] || s.cat}</span>
+        <span class="cr-sim-picker-card-title">${s.title}</span>
+      </div>
+    `).join('');
+  }
+
+  async function crPickSim(simId, title) {
+    crCloseSimPicker();
+    if (!_sessionId) return;
+    try {
+      await LS.post(`/api/classroom/${_sessionId}/sim`, { simId, title });
+      // onSimOpen will be called via SSE echo (including own client)
+    } catch (e) {
+      LS.toast(e.message || 'Ошибка открытия симуляции', 'error');
+    }
+  }
+
+  async function crTeacherCloseSim() {
+    if (!_sessionId) return;
+    try {
+      await LS.del(`/api/classroom/${_sessionId}/sim`);
+      // onSimClose will be called via SSE echo
+    } catch (e) {
+      LS.toast(e.message || 'Ошибка', 'error');
+    }
+  }
+
+  function onSimOpen(simId, title) {
+    _simActive = simId;
+    const panel    = document.getElementById('cr-sim-panel');
+    const frame    = document.getElementById('cr-sim-frame');
+    const titleEl  = document.getElementById('cr-sim-bar-title');
+    const closeBtn = document.getElementById('cr-sim-bar-close');
+    const modeToggle = document.getElementById('cr-sim-mode-toggle');
+    const headerBtn  = document.getElementById('cr-sim-btn');
+    const blocker    = document.getElementById('cr-sim-blocker');
+    const isTeacher  = _me && (_me.role === 'teacher' || _me.role === 'admin');
+
+    titleEl.textContent = title || simId;
+    frame.src = `/lab?embed=1&sim=${encodeURIComponent(simId)}`;
+    panel.classList.add('open');
+
+    // Teacher: show close button + mode toggle + update header label
+    if (closeBtn)    closeBtn.style.display    = isTeacher ? 'flex' : 'none';
+    if (modeToggle)  modeToggle.style.display  = isTeacher ? 'flex' : 'none';
+    if (headerBtn && isTeacher) {
+      headerBtn.title = 'Закрыть симуляцию';
+      headerBtn.querySelector('span').textContent = 'Закрыть';
+    }
+
+    // Student in demo mode: block interaction
+    if (blocker) blocker.classList.toggle('active', !isTeacher && _simMode === 'demo');
+
+    // Sync mode buttons to current state
+    onSimModeChange(_simMode);
+  }
+
+  function onSimClose() {
+    _simActive = null;
+    const panel      = document.getElementById('cr-sim-panel');
+    const frame      = document.getElementById('cr-sim-frame');
+    const headerBtn  = document.getElementById('cr-sim-btn');
+    const modeToggle = document.getElementById('cr-sim-mode-toggle');
+    const blocker    = document.getElementById('cr-sim-blocker');
+
+    panel.classList.remove('open');
+    if (modeToggle) modeToggle.style.display = 'none';
+    if (blocker)    blocker.classList.remove('active');
+
+    // Delay src reset so the iframe doesn't flash
+    setTimeout(() => { if (frame) frame.src = 'about:blank'; }, 300);
+
+    // Restore header button label
+    if (headerBtn) {
+      headerBtn.title = 'Открыть симуляцию';
+      const sp = headerBtn.querySelector('span');
+      if (sp) sp.textContent = 'Симуляция';
+    }
+  }
+
+  async function crSetSimMode(mode) {
+    if (!_sessionId) return;
+    try {
+      await LS.post(`/api/classroom/${_sessionId}/sim/mode`, { mode });
+    } catch (e) { LS.toast(e.message || 'Ошибка', 'error'); }
+  }
+
+  function onSimModeChange(mode) {
+    _simMode = mode;
+    const isTeacher = _me && (_me.role === 'teacher' || _me.role === 'admin');
+    const blocker   = document.getElementById('cr-sim-blocker');
+    if (blocker) blocker.classList.toggle('active', !isTeacher && mode === 'demo');
+    // Update toggle buttons (teacher UI)
+    document.getElementById('cr-sim-mode-demo')?.classList.toggle('active', mode === 'demo');
+    document.getElementById('cr-sim-mode-free')?.classList.toggle('active', mode === 'free');
+  }
+
+  // Teacher: relay sim state from iframe to backend → SSE to students
+  window.addEventListener('message', e => {
+    if (!_simActive || !_sessionId) return;
+    const isTeacher = _me?.role === 'teacher' || _me?.role === 'admin';
+    if (!isTeacher) return;
+    if (e.data?.type !== 'sim_state') return;
+    clearTimeout(_simStateThrottle);
+    _simStateThrottle = setTimeout(async () => {
+      try { await LS.post(`/api/classroom/${_sessionId}/sim/state`, { state: e.data.state }); } catch {}
+    }, 300);
+  });
+
   async function crToggleDrawPermission(uid) {
     if (!_sessionId) return;
     const numUid = Number(uid);
@@ -4059,6 +7004,352 @@
     if (typeof LS !== 'undefined' && LS.searchOpen) LS.searchOpen();
   }
 
+  /* ── Quiz integration ── */
+
+  // Suppress api.js full-screen quiz overlay on classroom page
+  window._lsLiveOverriddenByClassroom = true;
+
+  let _quizLiveId   = null;
+  let _quizQuestions = [];
+  let _quizPage      = 0;
+  let _quizTotal     = 0;
+  let _quizSearchTimer = null;
+  const _Q_LIMIT = 20;
+
+  function _crMathHtml(text) {
+    if (!text) return '';
+    const kat = window.katex;
+    if (!kat) { const d = document.createElement('span'); d.textContent = text; return d.innerHTML; }
+    let out = '', i = 0;
+    while (i < text.length) {
+      const ii = text.indexOf('\\(', i), bi = text.indexOf('\\[', i);
+      let next = -1, close = '', disp = false;
+      if (ii >= 0 && (bi < 0 || ii <= bi)) { next = ii; close = '\\)'; disp = false; }
+      else if (bi >= 0)                     { next = bi; close = '\\]'; disp = true;  }
+      const plain = document.createElement('span');
+      if (next < 0) { plain.textContent = text.slice(i); out += plain.innerHTML; break; }
+      plain.textContent = text.slice(i, next); out += plain.innerHTML;
+      const ci = text.indexOf(close, next + 2);
+      if (ci < 0) { const p2 = document.createElement('span'); p2.textContent = text.slice(next); out += p2.innerHTML; break; }
+      try { out += kat.renderToString(text.slice(next + 2, ci), { displayMode: disp, throwOnError: false }); }
+      catch(e) { const p2 = document.createElement('span'); p2.textContent = text.slice(next, ci + close.length); out += p2.innerHTML; }
+      i = ci + close.length;
+    }
+    return out;
+  }
+
+  function crQuizOnSessionActive(isTeacher) {
+    if (isTeacher) {
+      const tabQuiz = document.getElementById('tab-quiz');
+      if (tabQuiz) tabQuiz.style.display = '';
+      document.getElementById('cr-tabs-inner')?.classList.add('tabs-4');
+      document.getElementById('cr-quiz-no-session').style.display = 'none';
+      document.getElementById('cr-quiz-session').style.display = 'flex';
+      // Warn and disable start if no class (personal session)
+      const hasClass = !!_session?.class_id;
+      const noClassEl = document.getElementById('cr-quiz-no-class');
+      if (noClassEl) noClassEl.style.display = hasClass ? 'none' : 'block';
+      const startBtn = document.getElementById('cr-quiz-start-btn');
+      if (startBtn) startBtn.disabled = !hasClass;
+      crQuizInit();
+    }
+    crStudentWidgetInit();
+  }
+
+  async function crQuizInit() {
+    await crQuizLoadTopics();
+    crQuizLoadQuestions(true);
+    // Check if a quiz is already running for this class
+    if (!_session?.class_id) return;
+    try {
+      const data = await LS.get(`/api/live/class/${_session.class_id}/active`);
+      if (data?.active && data.live) {
+        _quizLiveId = data.live.id;
+        document.getElementById('cr-quiz-start-area').style.display = 'none';
+        document.getElementById('cr-quiz-status-bar').style.display = 'flex';
+        document.getElementById('cr-quiz-status-text').textContent = 'Квиз активен';
+        if (data.question) crQuizShowActiveCard(data.question);
+      }
+    } catch {}
+  }
+
+  async function crQuizLoadTopics() {
+    // Derive topics from the first batch of questions (no dedicated topics endpoint)
+    try {
+      const data = await LS.get(`/api/questions?limit=200`);
+      const sel = document.getElementById('cr-quiz-topic-sel');
+      if (!sel) return;
+      const seen = new Map();
+      (data.rows || []).forEach(q => {
+        if (q.topic_id && q.topic && !seen.has(q.topic_id)) {
+          seen.set(q.topic_id, q.topic);
+        }
+      });
+      seen.forEach((name, id) => {
+        const o = document.createElement('option');
+        o.value = id; o.textContent = name;
+        sel.appendChild(o);
+      });
+    } catch {}
+  }
+
+  async function crQuizLoadQuestions(reset = true) {
+    if (reset) { _quizPage = 1; _quizQuestions = []; }
+    const search  = document.getElementById('cr-quiz-search')?.value || '';
+    const topicId = document.getElementById('cr-quiz-topic-sel')?.value || '';
+    const diff    = document.getElementById('cr-quiz-diff-sel')?.value || '';
+    const params  = new URLSearchParams({ limit: _Q_LIMIT, page: _quizPage });
+    if (search)  params.set('q', search);
+    if (topicId) params.set('topic_id', topicId);
+    if (diff)    params.set('difficulty', diff);
+    try {
+      const data = await LS.get(`/api/questions?${params}`);
+      const qs = data.rows || [];
+      _quizTotal     = data.total || qs.length;
+      _quizQuestions = reset ? qs : [..._quizQuestions, ...qs];
+      crQuizRenderList(reset ? qs : _quizQuestions);
+      const countEl = document.getElementById('cr-quiz-count');
+      if (countEl) { countEl.textContent = `${_quizTotal} вопросов`; countEl.style.display = _quizTotal > 0 ? '' : 'none'; }
+      const moreBtn = document.getElementById('cr-quiz-load-more');
+      if (moreBtn) moreBtn.style.display = _quizQuestions.length < _quizTotal ? '' : 'none';
+    } catch {}
+  }
+
+  function crQuizRenderList(questions) {
+    const scroll = document.getElementById('cr-quiz-q-scroll');
+    if (!scroll) return;
+    if (!questions.length) {
+      scroll.innerHTML = '<div style="padding:16px 12px;color:rgba(255,255,255,0.3);font-size:0.72rem;text-align:center">Вопросы не найдены</div>';
+      return;
+    }
+    scroll.innerHTML = questions.map(q => {
+      const diffColor = q.difficulty === 1 ? '#A8E063' : q.difficulty === 3 ? '#FF6B6B' : '#FFE066';
+      const diffLabel = q.difficulty === 1 ? 'Лёгкий' : q.difficulty === 3 ? 'Сложный' : 'Средний';
+      const safeText  = (q.text || '').replace(/"/g, '&quot;');
+      return `<div class="cr-quiz-q-item">
+        <div class="cr-quiz-q-body">
+          <div class="cr-quiz-q-text" data-text="${safeText}"></div>
+          <div class="cr-quiz-q-meta">
+            <span style="color:${diffColor}">${diffLabel}</span>
+            ${q.topic ? `<span>· ${q.topic}</span>` : ''}
+          </div>
+        </div>
+        <button class="cr-quiz-launch-btn" onclick="crQuizLaunch(${q.id})" title="Запустить вопрос" ${_session?.class_id ? '' : 'disabled'}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+        </button>
+      </div>`;
+    }).join('');
+    scroll.querySelectorAll('[data-text]').forEach(el => { el.innerHTML = _crMathHtml(el.dataset.text); });
+  }
+
+  function crQuizLoadMore() { _quizPage++; crQuizLoadQuestions(false); }
+
+  function crQuizOnSearch(v) {
+    clearTimeout(_quizSearchTimer);
+    _quizSearchTimer = setTimeout(() => crQuizLoadQuestions(true), 350);
+  }
+
+  function crQuizOnTopicFilter() { crQuizLoadQuestions(true); }
+  function crQuizOnDiffFilter()  { crQuizLoadQuestions(true); }
+
+  async function crQuizStart() {
+    if (!_session?.class_id) {
+      LS.toast('Квиз доступен только для классных сессий', 'warn');
+      return;
+    }
+    try {
+      const data = await LS.post('/api/live', { class_id: _session.class_id });
+      _quizLiveId = data.id;
+      document.getElementById('cr-quiz-start-area').style.display = 'none';
+      document.getElementById('cr-quiz-status-bar').style.display = 'flex';
+      document.getElementById('cr-quiz-status-text').textContent = 'Квиз запущен';
+    } catch(e) {
+      LS.toast(e.message || 'Ошибка запуска квиза', 'error');
+    }
+  }
+
+  async function crQuizEnd() {
+    if (!_quizLiveId) return;
+    try { await LS.del(`/api/live/${_quizLiveId}`); } catch {}
+    _quizLiveId = null;
+    document.getElementById('cr-quiz-start-area').style.display = 'block';
+    document.getElementById('cr-quiz-status-bar').style.display = 'none';
+    document.getElementById('cr-quiz-active-card').style.display = 'none';
+    document.getElementById('cr-quiz-result-stats').style.display = 'none';
+  }
+
+  async function crQuizLaunch(questionId) {
+    if (!_quizLiveId) await crQuizStart();
+    if (!_quizLiveId) return;
+    try {
+      const resp = await LS.put(`/api/live/${_quizLiveId}/question`, { question_id: questionId });
+      crQuizShowActiveCard(resp.question || { text: '...' });
+      document.getElementById('cr-quiz-result-stats').style.display = 'none';
+    } catch(e) { console.error('crQuizLaunch', e); }
+  }
+
+  function crQuizShowActiveCard(q) {
+    const card   = document.getElementById('cr-quiz-active-card');
+    const textEl = document.getElementById('cr-quiz-active-text');
+    if (!card || !textEl) return;
+    card.style.display = 'block';
+    textEl.innerHTML = _crMathHtml(q.text || '');
+    document.getElementById('cr-quiz-ans-count').textContent = '0';
+    document.getElementById('cr-quiz-status-text').textContent = 'Вопрос активен';
+    document.getElementById('cr-quiz-result-stats').style.display = 'none';
+  }
+
+  function crQuizUpdateCounter(count) {
+    const el = document.getElementById('cr-quiz-ans-count');
+    if (el) el.textContent = count;
+  }
+
+  async function crQuizShowResults() {
+    if (!_quizLiveId) return;
+    try { const data = await LS.get(`/api/live/${_quizLiveId}/results`); crQuizRenderResults(data); } catch {}
+  }
+
+  function crQuizRenderResults(data) {
+    const container = document.getElementById('cr-quiz-result-stats');
+    if (!container) return;
+    const opts    = data.options || [];
+    const stats   = data.stats   || {};
+    const total   = stats.total  || 0;
+    const correct = stats.correct || 0;
+    const maxCnt  = Math.max(...opts.map(o => o.chosen_count || 0), 1);
+    const pct     = total > 0 ? Math.round(correct / total * 100) : 0;
+    container.innerHTML = `
+      <div style="display:flex;gap:6px;padding:6px 10px 2px">
+        <div class="cr-quiz-result-stat"><span class="cr-quiz-result-stat-val" style="color:#A8E063">${pct}%</span><span class="cr-quiz-result-stat-lbl">Правильно</span></div>
+        <div class="cr-quiz-result-stat"><span class="cr-quiz-result-stat-val">${total}</span><span class="cr-quiz-result-stat-lbl">Ответов</span></div>
+      </div>
+      <div class="cr-quiz-result-bars">
+        ${opts.map((o, i) => {
+          const cnt  = o.chosen_count || 0;
+          const fill = Math.round(cnt / maxCnt * 100);
+          return `<div class="cr-quiz-result-row">
+            <span class="cr-quiz-result-key ${o.is_correct ? 'correct' : ''}">${String.fromCharCode(65+i)}</span>
+            <div class="cr-quiz-result-track"><div class="cr-quiz-result-fill ${o.is_correct ? 'correct-fill' : ''}" style="width:${fill}%"></div></div>
+            <span class="cr-quiz-result-count">${cnt}</span>
+          </div>`;
+        }).join('')}
+      </div>`;
+    container.style.display = 'block';
+  }
+
+  /* ── Student quiz widget ── */
+
+  let _sqAnswered = false;
+  let _sqLiveId   = null;
+  let _sqCollapsed = false;
+
+  async function crStudentWidgetInit() {
+    const isTeacher = _me && (_me.role === 'teacher' || _me.role === 'admin');
+    if (isTeacher || document.getElementById('cr-sq-widget')) return;
+    const w = document.createElement('div');
+    w.id = 'cr-sq-widget';
+    w.style.display = 'none';
+    w.innerHTML = `
+      <div class="cr-sq-head">
+        <span class="cr-sq-badge"><span class="cr-sq-badge-dot"></span>Квиз</span>
+        <button class="cr-sq-collapse" onclick="crSqToggle()" title="Свернуть/развернуть">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
+        </button>
+      </div>
+      <div class="cr-sq-body" id="cr-sq-body">
+        <div class="cr-sq-q"   id="cr-sq-q"></div>
+        <div class="cr-sq-opts" id="cr-sq-opts"></div>
+        <div class="cr-sq-res"  id="cr-sq-res" style="display:none"></div>
+      </div>`;
+    document.body.appendChild(w);
+
+    // Recover active question state on page reload
+    if (_session?.class_id) {
+      LS.get(`/api/live/class/${_session.class_id}/active`).then(data => {
+        if (!data?.active || !data.live || !data.question) return;
+        _sqLiveId = data.live.id;
+        // Merge options into question object
+        const q = { ...data.question, options: data.options || [] };
+        crStudentOnQuestion(q, data.live.id);
+        if (data.myAnswer) {
+          _sqAnswered = true;
+          document.querySelectorAll('.cr-sq-opt').forEach(b => b.disabled = true);
+          // Mark the previously selected option
+          const selBtn = document.querySelector(`.cr-sq-opt[onclick="crStudentAnswer(${data.myAnswer.option_id})"]`);
+          if (selBtn) selBtn.classList.add('selected');
+        }
+      }).catch(() => {});
+    }
+  }
+
+  function crSqToggle() {
+    _sqCollapsed = !_sqCollapsed;
+    const body = document.getElementById('cr-sq-body');
+    if (body) body.style.display = _sqCollapsed ? 'none' : '';
+    const icon = document.querySelector('#cr-sq-widget .cr-sq-collapse svg');
+    if (icon) icon.style.transform = _sqCollapsed ? 'rotate(180deg)' : '';
+  }
+
+  function crStudentOnQuestion(q, liveId) {
+    _sqAnswered = false;
+    _sqLiveId   = liveId || q.liveId || null;
+    crStudentWidgetInit(); // ensure widget exists
+    const w = document.getElementById('cr-sq-widget');
+    if (!w) return;
+    w.style.display = 'flex';
+    if (_sqCollapsed) crSqToggle();
+    const qEl = document.getElementById('cr-sq-q');
+    if (qEl) qEl.innerHTML = _crMathHtml(q.text || '');
+    const optsEl = document.getElementById('cr-sq-opts');
+    if (optsEl) {
+      optsEl.innerHTML = (q.options || []).map((o, i) => {
+        const safeText = (o.text || '').replace(/"/g, '&quot;');
+        return `<button class="cr-sq-opt" onclick="crStudentAnswer(${o.id})">
+          <span class="cr-sq-key">${String.fromCharCode(65+i)}</span>
+          <span class="cr-sq-opt-text" data-text="${safeText}"></span>
+        </button>`;
+      }).join('');
+      optsEl.querySelectorAll('[data-text]').forEach(el => { el.innerHTML = _crMathHtml(el.dataset.text); });
+    }
+    const resEl = document.getElementById('cr-sq-res');
+    if (resEl) resEl.style.display = 'none';
+  }
+
+  async function crStudentAnswer(optionId) {
+    if (_sqAnswered || !_sqLiveId) return;
+    _sqAnswered = true;
+    document.querySelectorAll('.cr-sq-opt').forEach(b => b.disabled = true);
+    const btn = document.querySelector(`.cr-sq-opt[onclick="crStudentAnswer(${optionId})"]`);
+    if (btn) btn.classList.add('selected');
+    try { await LS.post(`/api/live/${_sqLiveId}/answer`, { option_id: optionId }); } catch {}
+  }
+
+  function crStudentOnResults(data) {
+    const optsEl = document.getElementById('cr-sq-opts');
+    const resEl  = document.getElementById('cr-sq-res');
+    if (!optsEl || !resEl) return;
+    const opts = data.options || [];
+    const btns = optsEl.querySelectorAll('.cr-sq-opt');
+    btns.forEach((b, i) => {
+      if (!opts[i]) return;
+      if (opts[i].is_correct) b.classList.add('cr-sq-opt-correct');
+      else if (b.classList.contains('selected')) b.classList.add('cr-sq-opt-wrong');
+    });
+    const stats = data.stats || {};
+    const total = stats.total || 0;
+    const corr  = stats.correct || 0;
+    const pct   = total > 0 ? Math.round(corr / total * 100) : 0;
+    resEl.innerHTML = `<div style="font-size:0.68rem;color:rgba(255,255,255,0.45);padding:4px 0 2px">${corr} из ${total} правильно (${pct}%)</div>`;
+    resEl.style.display = '';
+  }
+
+  function crStudentOnEnded() {
+    setTimeout(() => {
+      const w = document.getElementById('cr-sq-widget');
+      if (w) w.style.display = 'none';
+    }, 4000);
+  }
+
   /* ── stop polling + leave on navigate away ── */
   window.addEventListener('pagehide', () => {
     stopPolling();
@@ -4250,5 +7541,160 @@
     </div>
   </div>
 </div>
+
+<!-- Page context menu -->
+<div class="wb-page-menu" id="wb-page-menu">
+  <button onclick="wbHidePageMenu();wbStartRenaming(_wbMenuPage)">Переименовать</button>
+  <button onclick="wbPageDuplicate(_wbMenuPage)">Дублировать</button>
+  <hr>
+  <button onclick="wbPageClear(_wbMenuPage)">Очистить страницу</button>
+  <button class="danger" onclick="wbPageDelete(_wbMenuPage)">Удалить страницу</button>
+</div>
+
+<!-- ── Settings panel ───────────────────────────────────────────────────── -->
+<div class="cr-settings-overlay" id="cr-settings-overlay" onclick="if(event.target===this)closeSettings()">
+  <div class="cr-settings-panel">
+    <div class="cr-sp-head">
+      <div class="cr-sp-title">Настройки урока</div>
+      <button class="cr-sp-close" onclick="closeSettings()">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+      </button>
+    </div>
+    <div class="cr-sp-tabs">
+      <button class="cr-sp-tab active" data-tab="appearance" onclick="settingsTab('appearance')">Внешний вид</button>
+      <button class="cr-sp-tab" data-tab="audio" onclick="settingsTab('audio')">Аудио</button>
+      <button class="cr-sp-tab" data-tab="board" onclick="settingsTab('board')">Доска</button>
+    </div>
+    <div class="cr-sp-body">
+
+      <!-- Внешний вид -->
+      <div class="cr-sp-pane active" id="crs-appearance">
+        <div class="cr-sp-section">
+          <div class="cr-sp-section-label">Чат</div>
+          <div class="cr-sp-row">
+            <div class="cr-sp-row-lbl">Размер шрифта</div>
+            <div class="cr-seg" id="crs-chat-size">
+              <button data-val="small"  onclick="crSetPref('chatFontSize','small')">S</button>
+              <button data-val="medium" onclick="crSetPref('chatFontSize','medium')">M</button>
+              <button data-val="large"  onclick="crSetPref('chatFontSize','large')">L</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Аудио -->
+      <div class="cr-sp-pane" id="crs-audio">
+        <div class="cr-sp-section">
+          <div class="cr-sp-section-label">Микрофон</div>
+          <div class="cr-sp-row">
+            <div>
+              <div class="cr-sp-row-lbl">Войти без микрофона</div>
+              <div class="cr-sp-row-sub">Микрофон будет выключен при входе в урок</div>
+            </div>
+            <label class="cr-toggle">
+              <input type="checkbox" id="crs-muted-join" onchange="crSetPref('mutedOnJoin',this.checked)">
+              <span class="cr-toggle-track"></span>
+            </label>
+          </div>
+          <div class="cr-sp-row">
+            <div class="cr-sp-row-lbl">Чувствительность</div>
+            <div class="cr-seg" id="crs-vad">
+              <button data-val="low"    onclick="crSetPref('vadSensitivity','low')">Низкая</button>
+              <button data-val="medium" onclick="crSetPref('vadSensitivity','medium')">Средняя</button>
+              <button data-val="high"   onclick="crSetPref('vadSensitivity','high')">Высокая</button>
+            </div>
+          </div>
+        </div>
+        <div class="cr-sp-section">
+          <div class="cr-sp-section-label">Звуки</div>
+          <div class="cr-sp-row">
+            <div class="cr-sp-row-lbl">Звук при новом сообщении</div>
+            <label class="cr-toggle">
+              <input type="checkbox" id="crs-chat-sound" onchange="crSetPref('chatSound',this.checked)">
+              <span class="cr-toggle-track"></span>
+            </label>
+          </div>
+          <div class="cr-sp-row">
+            <div class="cr-sp-row-lbl">Звук при поднятой руке</div>
+            <label class="cr-toggle">
+              <input type="checkbox" id="crs-hand-sound" onchange="crSetPref('handSound',this.checked)">
+              <span class="cr-toggle-track"></span>
+            </label>
+          </div>
+        </div>
+        <div class="cr-sp-section">
+          <div class="cr-sp-section-label">Тест микрофона</div>
+          <div class="cr-mic-bar"><div class="cr-mic-fill" id="crs-mic-fill"></div></div>
+          <div class="cr-sp-note" id="crs-mic-status"></div>
+          <button class="cr-sp-btn" id="crs-mic-btn" onclick="crMicTestStart()">Начать тест</button>
+        </div>
+        <div class="cr-sp-section" id="crs-push-section">
+          <div class="cr-sp-section-label">Уведомления</div>
+          <div class="cr-sp-row">
+            <div>
+              <div class="cr-sp-row-lbl">Push-уведомление «Урок начался»</div>
+              <div class="cr-sp-row-sub">Браузер уведомит когда учитель начнёт урок</div>
+            </div>
+          </div>
+          <button class="cr-sp-btn cyan" id="crs-push-btn" onclick="crRequestPush()">Включить уведомления</button>
+        </div>
+      </div>
+
+      <!-- Доска -->
+      <div class="cr-sp-pane" id="crs-board">
+        <div class="cr-sp-section">
+          <div class="cr-sp-section-label">Инструмент при входе</div>
+          <div class="cr-seg" id="crs-def-tool">
+            <button data-val="pencil" onclick="crSetPref('defaultTool','pencil')">Карандаш</button>
+            <button data-val="select" onclick="crSetPref('defaultTool','select')">Выделение</button>
+          </div>
+        </div>
+        <div class="cr-sp-section">
+          <div class="cr-sp-section-label">Ведущая рука</div>
+          <div class="cr-sp-note">Панель чата и участников переедет на левую сторону экрана</div>
+          <div class="cr-seg" id="crs-hand">
+            <button data-val="right" onclick="crSetPref('leftHand',false)">Правша (панель справа)</button>
+            <button data-val="left"  onclick="crSetPref('leftHand',true)">Левша (панель слева)</button>
+          </div>
+        </div>
+        <div class="cr-sp-section">
+          <div class="cr-sp-section-label">Стилус / палец — давление</div>
+          <div class="cr-sp-note">Толщина линии зависит от силы нажатия стилуса на планшет</div>
+          <div class="cr-seg" id="crs-stylus">
+            <button data-val="0"   onclick="crSetPref('stylusMultiplier',0)">Выкл</button>
+            <button data-val="0.5" onclick="crSetPref('stylusMultiplier',0.5)">Слабая</button>
+            <button data-val="1"   onclick="crSetPref('stylusMultiplier',1)">Средняя</button>
+            <button data-val="2"   onclick="crSetPref('stylusMultiplier',2)">Сильная</button>
+          </div>
+        </div>
+      </div>
+
+    </div><!-- /.cr-sp-body -->
+  </div><!-- /.cr-settings-panel -->
+</div><!-- /.cr-settings-overlay -->
+
+<!-- ── Simulation picker modal ─────────────────────────────────────────── -->
+<div class="cr-sim-picker-overlay" id="cr-sim-picker-overlay" onclick="if(event.target===this)crCloseSimPicker()">
+  <div class="cr-sim-picker-modal">
+    <div class="cr-sim-picker-head">
+      <h3>Выбрать симуляцию</h3>
+      <button class="cr-sim-picker-close" onclick="crCloseSimPicker()">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+      </button>
+    </div>
+    <div class="cr-sim-picker-cats">
+      <button class="cr-sim-cat-btn active" onclick="crFilterSims('all', this)">Все</button>
+      <button class="cr-sim-cat-btn" onclick="crFilterSims('math', this)">Математика</button>
+      <button class="cr-sim-cat-btn" onclick="crFilterSims('phys', this)">Физика</button>
+      <button class="cr-sim-cat-btn" onclick="crFilterSims('chem', this)">Химия</button>
+      <button class="cr-sim-cat-btn" onclick="crFilterSims('bio', this)">Биология</button>
+      <button class="cr-sim-cat-btn" onclick="crFilterSims('game', this)">Игры</button>
+    </div>
+    <div class="cr-sim-picker-body">
+      <div class="cr-sim-picker-grid" id="cr-sim-picker-grid"></div>
+    </div>
+  </div>
+</div>
+
 </body>
 </html>
diff --git a/frontend/collection-rb.html b/frontend/collection-rb.html
index e994489..982637a 100644
--- a/frontend/collection-rb.html
+++ b/frontend/collection-rb.html
@@ -432,6 +432,7 @@ function renderGrid() {
       <p>Откройте виды в каталоге, чтобы они появились здесь</p>
       <a href="/red-book.html" class="btn-rb-outline"><svg class="ic" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> Исследовать виды</a>
       <a href="/classroom" class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
     </div>`;
     return;
   }
diff --git a/frontend/collection.html b/frontend/collection.html
index b7e8160..9551f7e 100644
--- a/frontend/collection.html
+++ b/frontend/collection.html
@@ -241,6 +241,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2" class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html"           class="sb-link"><i data-lucide="leaf"     class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom"     class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/course.html b/frontend/course.html
index e496b24..d0246ee 100644
--- a/frontend/course.html
+++ b/frontend/course.html
@@ -415,6 +415,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"    class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html"           class="sb-link"><i data-lucide="leaf"     class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom"     class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/crossword.html b/frontend/crossword.html
index caa3420..922e21c 100644
--- a/frontend/crossword.html
+++ b/frontend/crossword.html
@@ -203,6 +203,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2" class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html" class="sb-link"><i data-lucide="leaf"         class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom"     class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/dashboard.html b/frontend/dashboard.html
index af446da..d3830af 100644
--- a/frontend/dashboard.html
+++ b/frontend/dashboard.html
@@ -1193,6 +1193,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"    class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html"            class="sb-link"><i data-lucide="leaf"       class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom" class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/flashcards.html b/frontend/flashcards.html
index 6920445..e58f1c8 100644
--- a/frontend/flashcards.html
+++ b/frontend/flashcards.html
@@ -7,6 +7,7 @@
   <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
   <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="/css/ls.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" />
   <style>
     .sb-content { background: #f4f5f8; min-height: 100vh; }
     .fc-wrap    { max-width: 1100px; margin: 0 auto; padding: 28px 28px 80px; }
@@ -395,6 +396,8 @@
 <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
 <script src="/js/api.js"></script>
 <script src="/js/search.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
 <script>
 (async () => {
   /* ── auth ── */
@@ -664,13 +667,28 @@ async function startStudyForDeck(deckId) {
   bindSwipe();
 }
 
+const _FC_DELIMS = [
+  { left: '\\(', right: '\\)', display: false },
+  { left: '\\[', right: '\\]', display: true  },
+  { left: '$',   right: '$',   display: false  },
+];
+function mathHtmlFC(text) {
+  if (!text) return '';
+  const tmp = document.createElement('span');
+  tmp.textContent = text;
+  if (window.renderMathInElement) {
+    try { renderMathInElement(tmp, { delimiters: _FC_DELIMS, throwOnError: false }); } catch {}
+  }
+  return tmp.innerHTML;
+}
+
 function showStudyCard() {
   const card = _studyCards[_studyIdx];
   if (!card) { finishStudy(); return; }
   const el = document.getElementById('study-card');
   el.className = 'study-card-inner';
-  document.getElementById('study-front-text').textContent = card.front;
-  document.getElementById('study-back-text').textContent  = card.back;
+  document.getElementById('study-front-text').innerHTML = mathHtmlFC(card.front);
+  document.getElementById('study-back-text').innerHTML  = mathHtmlFC(card.back);
   _studyFlipped = false;
   document.getElementById('study-btns').classList.remove('visible');
   document.getElementById('study-flip-hint').style.display = 'block';
diff --git a/frontend/gradebook.html b/frontend/gradebook.html
index 222c3de..643b92b 100644
--- a/frontend/gradebook.html
+++ b/frontend/gradebook.html
@@ -215,6 +215,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"          class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html" class="sb-link"><i data-lucide="leaf"             class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom"     class="sb-link"><i data-lucide="presentation"     class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/guest-board.html b/frontend/guest-board.html
new file mode 100644
index 0000000..eef02b2
--- /dev/null
+++ b/frontend/guest-board.html
@@ -0,0 +1,435 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Гостевой просмотр — LearnSpace</title>
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+  <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" crossorigin="anonymous" />
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --bg:      #0b0920;
+      --bg2:     #12093a;
+      --violet:  #9B5DE5;
+      --cyan:    #06D6E0;
+      --text:    #e8e0f7;
+      --muted:   rgba(232,224,247,0.45);
+      --border:  rgba(155,93,229,0.2);
+    }
+
+    html, body { height: 100%; background: var(--bg); color: var(--text); font-family: 'Manrope', sans-serif; overflow: hidden; }
+
+    /* ── Name entry screen ── */
+    #guest-entry {
+      position: fixed; inset: 0; z-index: 100;
+      display: flex; align-items: center; justify-content: center;
+      background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(155,93,229,0.12) 0%, transparent 70%), var(--bg);
+    }
+    .ge-box {
+      width: 100%; max-width: 400px; padding: 40px 36px 36px;
+      background: rgba(255,255,255,0.03);
+      border: 1px solid var(--border);
+      border-radius: 24px;
+      backdrop-filter: blur(12px);
+      box-shadow: 0 32px 80px rgba(0,0,0,0.55);
+      margin: 16px;
+    }
+    .ge-logo {
+      display: flex; align-items: center; gap: 10px;
+      font-family: 'Unbounded', sans-serif; font-size: 0.9rem; font-weight: 800;
+      color: var(--text); margin-bottom: 28px;
+    }
+    .ge-logo svg { width: 28px; height: 28px; }
+    .ge-title { font-family: 'Unbounded', sans-serif; font-size: 1.05rem; font-weight: 800; margin-bottom: 6px; }
+    .ge-sub { font-size: 0.78rem; color: var(--muted); margin-bottom: 26px; line-height: 1.6; }
+    .ge-lesson-name {
+      font-size: 0.82rem; font-weight: 700; color: var(--violet);
+      margin-bottom: 22px; padding: 8px 12px;
+      background: rgba(155,93,229,0.08); border-radius: 8px;
+      border: 1px solid rgba(155,93,229,0.18);
+      display: none;
+    }
+    .ge-label { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
+    .ge-input {
+      width: 100%; padding: 12px 14px;
+      background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.12);
+      border-radius: 12px; color: var(--text); font-family: 'Manrope', sans-serif;
+      font-size: 0.9rem; outline: none; transition: border-color 0.15s;
+    }
+    .ge-input:focus { border-color: var(--violet); }
+    .ge-input::placeholder { color: rgba(255,255,255,0.22); }
+    .ge-btn {
+      width: 100%; margin-top: 18px; padding: 13px;
+      background: linear-gradient(135deg, var(--violet), #5e2fb5);
+      border: none; border-radius: 12px; color: #fff;
+      font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800;
+      cursor: pointer; transition: opacity 0.15s, transform 0.12s;
+      display: flex; align-items: center; justify-content: center; gap: 8px;
+    }
+    .ge-btn:hover { opacity: 0.88; transform: translateY(-1px); }
+    .ge-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
+    .ge-disclaimer {
+      margin-top: 16px; font-size: 0.68rem; color: rgba(255,255,255,0.2);
+      text-align: center; line-height: 1.6;
+    }
+    .ge-error { margin-top: 12px; font-size: 0.75rem; color: #FF6B6B; text-align: center; display: none; }
+
+    /* ── Board layout ── */
+    #guest-board { display: none; flex-direction: column; height: 100vh; }
+
+    /* Header */
+    .gb-header {
+      height: 46px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 0 16px;
+      background: rgba(10,7,30,0.92); border-bottom: 1px solid rgba(255,255,255,0.07);
+      backdrop-filter: blur(8px);
+      z-index: 10;
+    }
+    .gb-header-left  { display: flex; align-items: center; gap: 10px; }
+    .gb-header-right { display: flex; align-items: center; gap: 10px; }
+    .gb-logo { font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800; color: var(--violet); }
+    .gb-title { font-size: 0.78rem; font-weight: 700; color: var(--text); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .gb-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.1); }
+    .gb-badge {
+      display: flex; align-items: center; gap: 5px; padding: 3px 9px;
+      background: rgba(155,93,229,0.1); border: 1px solid rgba(155,93,229,0.22);
+      border-radius: 99px; font-size: 0.63rem; font-weight: 700; color: var(--violet);
+    }
+    .gb-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: #06D6A0; animation: pulse-dot 1.5s ease infinite; }
+    @keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }
+
+    /* Page nav */
+    .gb-page-nav { display: flex; align-items: center; gap: 8px; }
+    .gb-page-btn {
+      width: 28px; height: 28px; border: 1px solid rgba(255,255,255,0.12);
+      border-radius: 7px; background: rgba(255,255,255,0.04);
+      color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
+      transition: all 0.15s;
+    }
+    .gb-page-btn:hover:not(:disabled) { border-color: rgba(155,93,229,0.4); color: var(--text); background: rgba(155,93,229,0.08); }
+    .gb-page-btn:disabled { opacity: 0.3; cursor: default; }
+    .gb-page-label { font-size: 0.72rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
+
+    /* Canvas area */
+    .gb-canvas-wrap {
+      flex: 1; position: relative; overflow: hidden;
+      background: #2d5a2d; /* chalkboard green — same as classroom */
+    }
+    #guest-canvas { display: block; width: 100%; height: 100%; }
+
+    /* Ended overlay */
+    #gb-ended {
+      display: none; position: fixed; inset: 0; z-index: 200;
+      background: rgba(11,9,32,0.92); backdrop-filter: blur(8px);
+      flex-direction: column; align-items: center; justify-content: center;
+      gap: 14px; text-align: center;
+    }
+    #gb-ended svg { width: 48px; height: 48px; color: var(--violet); }
+    #gb-ended h2 { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800; }
+    #gb-ended p  { font-size: 0.8rem; color: var(--muted); }
+
+    /* Status toast */
+    #gb-toast {
+      position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
+      padding: 8px 18px; border-radius: 99px;
+      background: rgba(20,15,50,0.95); border: 1px solid rgba(155,93,229,0.3);
+      font-size: 0.76rem; font-weight: 600; color: var(--text);
+      pointer-events: none; opacity: 0; transition: opacity 0.25s;
+      white-space: nowrap; z-index: 500;
+    }
+    #gb-toast.show { opacity: 1; }
+
+    @media (max-width: 480px) {
+      .gb-logo { display: none; }
+      .gb-title { max-width: 140px; font-size: 0.72rem; }
+    }
+  </style>
+</head>
+<body>
+
+<!-- ── Name entry screen ─────────────────────────────── -->
+<div id="guest-entry">
+  <div class="ge-box">
+    <div class="ge-logo">
+      <svg viewBox="0 0 32 32" fill="none"><rect width="32" height="32" rx="8" fill="#9B5DE5"/><path d="M8 22V12l8-4 8 4v10" stroke="#fff" stroke-width="2" stroke-linecap="round"/><path d="M13 22v-5h6v5" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>
+      LearnSpace
+    </div>
+    <div class="ge-title">Гостевой просмотр</div>
+    <div class="ge-sub">Вы смотрите доску в режиме чтения. Рисовать нельзя.</div>
+    <div class="ge-lesson-name" id="ge-lesson-name"></div>
+    <div class="ge-label">Ваше имя</div>
+    <input class="ge-input" id="ge-name-input" type="text" placeholder="Введите ваше имя…" maxlength="40"
+      onkeydown="if(event.key==='Enter') guestJoin()">
+    <button class="ge-btn" id="ge-join-btn" onclick="guestJoin()">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:15px;height:15px"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
+      Войти как гость
+    </button>
+    <div class="ge-error" id="ge-error"></div>
+    <div class="ge-disclaimer">Ваше имя будет видно учителю в списке участников</div>
+  </div>
+</div>
+
+<!-- ── Board ─────────────────────────────────────────── -->
+<div id="guest-board">
+  <header class="gb-header">
+    <div class="gb-header-left">
+      <span class="gb-logo">LearnSpace</span>
+      <div class="gb-sep"></div>
+      <span class="gb-title" id="gb-title">Онлайн-урок</span>
+      <div class="gb-badge">
+        <span class="gb-badge-dot"></span>
+        Гостевой просмотр
+      </div>
+    </div>
+    <div class="gb-header-right">
+      <div class="gb-page-nav">
+        <button class="gb-page-btn" id="gb-prev" onclick="gbPrevPage()" disabled title="Предыдущая страница">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px"><polyline points="15 18 9 12 15 6"/></svg>
+        </button>
+        <span class="gb-page-label" id="gb-page-label">1 / 1</span>
+        <button class="gb-page-btn" id="gb-next" onclick="gbNextPage()" disabled title="Следующая страница">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px"><polyline points="9 18 15 12 9 6"/></svg>
+        </button>
+      </div>
+    </div>
+  </header>
+  <div class="gb-canvas-wrap">
+    <canvas id="guest-canvas"></canvas>
+  </div>
+</div>
+
+<!-- ── Lesson ended overlay ─── -->
+<div id="gb-ended">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="9" x2="15" y2="15"/><line x1="15" y1="9" x2="9" y2="15"/></svg>
+  <h2>Урок завершён</h2>
+  <p>Учитель завершил урок. Спасибо за участие!</p>
+</div>
+
+<div id="gb-toast"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" crossorigin="anonymous"></script>
+<script src="/js/whiteboard.js"></script>
+<script>
+  const _token   = new URLSearchParams(location.search).get('token');
+  let _guestId   = null;
+  let _sessionId = null;
+  let _wb        = null;
+  let _curPage   = 1;
+  let _totalPages = 1;
+  let _es        = null;
+  let _wbMaxSeq  = 0;
+  let _pollTimer = null;
+
+  /* ── toast ── */
+  let _toastTimer;
+  function showToast(msg, dur = 2800) {
+    const el = document.getElementById('gb-toast');
+    el.textContent = msg;
+    el.classList.add('show');
+    clearTimeout(_toastTimer);
+    _toastTimer = setTimeout(() => el.classList.remove('show'), dur);
+  }
+
+  /* ── pre-load session info ── */
+  async function init() {
+    if (!_token) { showError('Неверная ссылка'); return; }
+    try {
+      const r = await fetch(`/api/classroom/guest/${_token}`);
+      if (!r.ok) { showError('Ссылка недействительна или урок уже завершён'); return; }
+      const info = await r.json();
+      if (info.status !== 'active') {
+        showError('Урок ещё не начался. Попробуйте позже или обратитесь к учителю.');
+        return;
+      }
+      const nameEl = document.getElementById('ge-lesson-name');
+      nameEl.textContent = info.title || 'Онлайн-урок';
+      nameEl.style.display = 'block';
+      _totalPages = info.page_count || 1;
+      _curPage    = info.current_page || 1;
+    } catch {
+      showError('Не удалось подключиться к серверу');
+    }
+  }
+
+  function showError(msg) {
+    const el = document.getElementById('ge-error');
+    el.textContent = msg;
+    el.style.display = 'block';
+  }
+
+  /* ── join ── */
+  async function guestJoin() {
+    const nameInput = document.getElementById('ge-name-input');
+    const btn       = document.getElementById('ge-join-btn');
+    const name      = nameInput.value.trim() || 'Гость';
+    btn.disabled = true;
+
+    try {
+      const r = await fetch(`/api/classroom/guest/${_token}/join`, {
+        method:  'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body:    JSON.stringify({ name }),
+      });
+      if (!r.ok) {
+        const err = await r.json().catch(() => ({}));
+        showError(err.error || 'Не удалось войти');
+        btn.disabled = false;
+        return;
+      }
+      const data  = await r.json();
+      _guestId    = data.guestId;
+      _sessionId  = data.sessionId;
+      _totalPages = data.page_count || 1;
+      _curPage    = data.current_page || 1;
+
+      document.getElementById('gb-title').textContent = data.title || 'Онлайн-урок';
+      startBoard();
+    } catch {
+      showError('Ошибка соединения');
+      btn.disabled = false;
+    }
+  }
+
+  /* ── board startup ── */
+  function startBoard() {
+    document.getElementById('guest-entry').style.display = 'none';
+    const boardEl = document.getElementById('guest-board');
+    boardEl.style.display = 'flex';
+
+    const canvas = document.getElementById('guest-canvas');
+    _wb = new Whiteboard(canvas, { readOnly: true, bg: 'chalk' });
+    _wb.fit();
+    window.addEventListener('resize', () => _wb.fit());
+
+    loadPage(_curPage);
+    connectSSE();
+
+    // Send goodbye on tab close
+    window.addEventListener('pagehide', leaveGuest);
+  }
+
+  /* ── load strokes for a page ── */
+  async function loadPage(pageNum) {
+    _curPage = pageNum;
+    updatePageNav();
+    _wbMaxSeq = 0;
+    _wb.clearPage();
+    try {
+      const r = await fetch(`/api/classroom/guest/${_token}/strokes?page_num=${pageNum}`);
+      if (!r.ok) return;
+      const data = await r.json();
+      _wbMaxSeq = data.seq || 0;
+      _wb.loadStrokes(data.strokes || []);
+      if (data.template) _wb.setTemplate(data.template);
+    } catch {}
+  }
+
+  function updatePageNav() {
+    document.getElementById('gb-page-label').textContent = `${_curPage} / ${_totalPages}`;
+    document.getElementById('gb-prev').disabled = _curPage <= 1;
+    document.getElementById('gb-next').disabled = _curPage >= _totalPages;
+  }
+
+  function gbPrevPage() { if (_curPage > 1) loadPage(_curPage - 1); }
+  function gbNextPage() { if (_curPage < _totalPages) loadPage(_curPage + 1); }
+
+  /* ── SSE ── */
+  function connectSSE() {
+    const url = `/api/classroom/guest/${_token}/stream?guestId=${encodeURIComponent(_guestId || '')}`;
+    _es = new EventSource(url);
+    _es.onmessage = (e) => {
+      try { handleEvent(JSON.parse(e.data)); } catch {}
+    };
+    _es.onerror = () => {
+      // Auto-reconnects — just show brief toast
+      setTimeout(() => { if (_es.readyState === EventSource.CONNECTING) showToast('Переподключение…'); }, 3000);
+    };
+  }
+
+  function handleEvent(data) {
+    if (!data.type) return;
+    switch (data.type) {
+
+      case 'classroom_strokes':
+        if (data.pageNum == _curPage) {
+          _wbMaxSeq = Math.max(_wbMaxSeq, ...(data.strokes || []).map(s => s.seq || 0));
+          _wb.addStrokes(data.strokes || []);
+        }
+        break;
+
+      case 'classroom_stroke_preview':
+        if (data.pageNum == _curPage) {
+          if (data.cancel) _wb.removeLiveStroke(data.liveId);
+          else             _wb.setLiveStroke(data.liveId, data.tool, data.data, data.userName, '#06D6E0');
+        }
+        break;
+
+      case 'classroom_stroke_deleted':
+        _wb.removeStroke(data.strokeId);
+        break;
+
+      case 'classroom_stroke_updated':
+        if (data.pageNum == _curPage)
+          _wb.updateStroke(data.strokeId, data.data);
+        break;
+
+      case 'classroom_page_added':
+        _totalPages++;
+        updatePageNav();
+        break;
+
+      case 'classroom_page_changed':
+        // Follow teacher
+        if (data.pageNum !== _curPage) loadPage(data.pageNum);
+        break;
+
+      case 'classroom_template_changed':
+        if (data.pageNum == _curPage) _wb.setTemplate(data.template);
+        break;
+
+      case 'classroom_page_cleared':
+        if (data.pageNum == _curPage) { _wbMaxSeq = 0; _wb.clearPage(); }
+        break;
+
+      case 'classroom_page_renamed':
+        // Nothing visible to guest
+        break;
+
+      case 'classroom_page_duplicated':
+        _totalPages++;
+        updatePageNav();
+        break;
+
+      case 'classroom_page_deleted':
+        _totalPages = Math.max(1, _totalPages - 1);
+        if (_curPage > _totalPages) loadPage(_totalPages);
+        else updatePageNav();
+        break;
+
+      case 'classroom_ended':
+        showEnded();
+        break;
+    }
+  }
+
+  function showEnded() {
+    if (_es) { _es.close(); _es = null; }
+    document.getElementById('gb-ended').style.display = 'flex';
+  }
+
+  function leaveGuest() {
+    if (!_guestId) return;
+    navigator.sendBeacon(`/api/classroom/guest/${_token}/leave`,
+      new Blob([JSON.stringify({ guestId: _guestId })], { type: 'application/json' }));
+  }
+
+  /* ── boot ── */
+  init();
+</script>
+</body>
+</html>
diff --git a/frontend/hangman.html b/frontend/hangman.html
index 280f918..3bd198e 100644
--- a/frontend/hangman.html
+++ b/frontend/hangman.html
@@ -285,6 +285,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2" class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html" class="sb-link"><i data-lucide="leaf"         class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom"     class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/homework.html b/frontend/homework.html
index a027e95..9ae5937 100644
--- a/frontend/homework.html
+++ b/frontend/homework.html
@@ -166,6 +166,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"    class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html"           class="sb-link"><i data-lucide="leaf"     class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom"     class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/js/classroom-rtc.js b/frontend/js/classroom-rtc.js
index 98f80e0..cddbe2d 100644
--- a/frontend/js/classroom-rtc.js
+++ b/frontend/js/classroom-rtc.js
@@ -20,12 +20,14 @@
  *   rtc.destroy();
  */
 class ClassroomRTC {
-  constructor({ sessionId, userId, onSignal, onScreenStream, onMicActive }) {
+  constructor({ sessionId, userId, onSignal, onScreenStream, onMicActive, onMicLevel, vadThreshold }) {
     this._sid          = sessionId;
     this._uid          = userId;
     this._onSignal     = onSignal;       // fn(targetUid, payload)
     this._onScreen     = onScreenStream; // fn(stream | null)
     this._onMicActive  = onMicActive;    // fn(uid, bool) — optional
+    this._onMicLevel   = onMicLevel;     // fn(uid, level 0-100) — optional, fires every tick
+    this._vadThreshold = vadThreshold ?? 12;
 
     this._peers        = new Map();      // uid → PeerState
     this._localStream  = null;           // mic audio
@@ -62,15 +64,17 @@ class ClassroomRTC {
       src.connect(analyser);
       const buf = new Uint8Array(analyser.frequencyBinCount);
       let speaking = false;
-      const THRESHOLD = 12;
+      const THRESHOLD = this._vadThreshold;
       const timer = setInterval(() => {
         analyser.getByteFrequencyData(buf);
         const avg = buf.reduce((a, b) => a + b, 0) / buf.length;
+        const level = Math.min(100, Math.round((avg / 64) * 100));
         const now = avg > THRESHOLD;
         if (now !== speaking) {
           speaking = now;
-          try { this._onMicActive(uid, speaking); } catch {}
+          try { if (this._onMicActive) this._onMicActive(uid, speaking); } catch {}
         }
+        try { if (this._onMicLevel) this._onMicLevel(uid, level); } catch {}
       }, 120);
       this._vadTimers.set(uid, { ctx, timer });
     } catch {}
@@ -307,10 +311,11 @@ class ClassroomRTC {
 
   /* ── Screen sharing (teacher) ───────────────────────���─────────────────── */
 
-  async startScreenShare() {
+  async startScreenShare(constraints = {}) {
     try {
       this._screenStream = await navigator.mediaDevices.getDisplayMedia({
-        video: { cursor: 'always' }, audio: false,
+        video: { cursor: 'always', ...constraints.video },
+        audio: constraints.audio ?? false,
       });
     } catch { return null; }
 
@@ -340,6 +345,23 @@ class ClassroomRTC {
     }
   }
 
+  /** Take an already-acquired MediaStream (e.g. from a pre-picker) and share it. */
+  async useExistingScreenStream(stream) {
+    if (this._screenStream) {
+      this._screenStream.getTracks().forEach(t => t.stop());
+      this._screenStream = null;
+    }
+    this._screenStream = stream;
+    const vt = this._screenStream.getVideoTracks()[0];
+    if (!vt) return stream;
+    for (const [, peer] of this._peers) {
+      if (!peer.screenSender) {
+        peer.screenSender = peer.pc.addTrack(vt, this._screenStream);
+      }
+    }
+    return stream;
+  }
+
   isSharing() { return !!this._screenStream; }
 
   /* ── Cleanup ─────────────────────────────────────────────────────────── */
diff --git a/frontend/js/labs/angrybirds.js b/frontend/js/labs/angrybirds.js
index fc70da6..f3005f7 100644
--- a/frontend/js/labs/angrybirds.js
+++ b/frontend/js/labs/angrybirds.js
@@ -792,7 +792,7 @@ class AngryBirdsSim {
 
     /* Planet + g — second line, readable */
     ctx.font = '13px Manrope,sans-serif'; ctx.fillStyle = 'rgba(255,255,255,0.72)';
-    ctx.fillText(`${pl.label}   g = ${pl.g} м/с²`, 14, 50);
+    ctx.fillText(`${pl.label.replace(/<svg[\s\S]*?<\/svg>/g, '').trim()}   g = ${pl.g} м/с²`, 14, 50);
 
     /* Wind reminder */
     if (lvl?.wind) {
diff --git a/frontend/js/labs/bohratom.js b/frontend/js/labs/bohratom.js
index cd61bf0..9e365ad 100644
--- a/frontend/js/labs/bohratom.js
+++ b/frontend/js/labs/bohratom.js
@@ -50,6 +50,7 @@ class BohrAtomSim {
     this.W = w; this.H = h;
   }
 
+  getParams() { return { level: this.level }; }
   setParams({ level } = {}) {
     if (level !== undefined) {
       const n = Math.max(1, Math.min(6, Math.round(+level)));
diff --git a/frontend/js/labs/chemsandbox.js b/frontend/js/labs/chemsandbox.js
index 6c2a06b..3e07ef1 100644
--- a/frontend/js/labs/chemsandbox.js
+++ b/frontend/js/labs/chemsandbox.js
@@ -1,4 +1,16 @@
 'use strict';
+
+/* Strip SVG markup for canvas fillText — replaces icon SVGs with Unicode */
+function _csClean(s) {
+  if (!s || !s.includes('<svg')) return s;
+  return s.replace(/<svg[\s\S]*?<\/svg>/g, m => {
+    if (m.includes('x1="5" y1="12" x2="19"'))  return '\u2192'; // → right arrow
+    if (m.includes('x1="12" y1="5" x2="12" y2="19"')) return '\u2193'; // ↓ down (precip)
+    if (m.includes('x1="12" y1="19" x2="12" y2="5"')) return '\u2191'; // ↑ up (gas)
+    return '';
+  });
+}
+
 /* ════════════════════════════════════════════════════════════════
    ChemSandboxSim v2 — «Химическая песочница»
    • Колба Эрленмейера с реалистичным стеклом
@@ -1089,7 +1101,7 @@ class ChemSandboxSim {
     // ── Молекулярное уравнение ──
     ctx.font = 'bold 17px "JetBrains Mono", monospace';
     ctx.fillStyle = rx.fx.none ? 'rgba(255,100,100,0.75)' : 'rgba(255,255,255,0.95)';
-    ctx.fillText(rx.eq, W / 2, y);
+    ctx.fillText(_csClean(rx.eq), W / 2, y);
     y += 22;
 
     // ── Тип реакции + пояснение ──
@@ -1109,7 +1121,7 @@ class ChemSandboxSim {
     if (rx.why) {
       ctx.font = '13px sans-serif';
       ctx.fillStyle = 'rgba(255,255,255,0.55)';
-      ctx.fillText(rx.why, W / 2, y);
+      ctx.fillText(_csClean(rx.why), W / 2, y);
       y += 17;
     }
 
@@ -1117,7 +1129,7 @@ class ChemSandboxSim {
     if (rx.ionFull) {
       ctx.font = '13px "JetBrains Mono", monospace';
       ctx.fillStyle = 'rgba(155,200,255,0.60)';
-      ctx.fillText('Полн.: ' + rx.ionFull, W / 2, y);
+      ctx.fillText('Полн.: ' + _csClean(rx.ionFull), W / 2, y);
       y += 16;
     }
 
@@ -1125,7 +1137,7 @@ class ChemSandboxSim {
     if (rx.ionNet) {
       ctx.font = 'bold 13px "JetBrains Mono", monospace';
       ctx.fillStyle = 'rgba(123,245,164,0.75)';
-      ctx.fillText('Сокр.: ' + rx.ionNet, W / 2, y);
+      ctx.fillText('Сокр.: ' + _csClean(rx.ionNet), W / 2, y);
       y += 16;
     }
 
diff --git a/frontend/js/labs/collision.js b/frontend/js/labs/collision.js
index 082926f..d49bda6 100644
--- a/frontend/js/labs/collision.js
+++ b/frontend/js/labs/collision.js
@@ -74,6 +74,7 @@ class CollisionSim {
     this.c.height = r.height || 420;
   }
 
+  getParams() { return { m1: this.m1, m2: this.m2, v1: this.v1, v2: this.v2, angle: this.angle, e: this.e }; }
   setParams(p) {
     if (p.m1    !== undefined) this.m1    = +p.m1;
     if (p.m2    !== undefined) this.m2    = +p.m2;
diff --git a/frontend/js/labs/electrolysis.js b/frontend/js/labs/electrolysis.js
index a06bc54..404b92d 100644
--- a/frontend/js/labs/electrolysis.js
+++ b/frontend/js/labs/electrolysis.js
@@ -86,6 +86,7 @@ class ElectrolysisSim {
     this._initIons();
   }
 
+  getParams() { return { voltage: this.voltage, electrolyte: this.electrolyte }; }
   setParams({ voltage, electrolyte } = {}) {
     if (voltage !== undefined) this.voltage = Math.max(1, Math.min(12, +voltage));
     if (electrolyte !== undefined) {
diff --git a/frontend/js/labs/equilibrium.js b/frontend/js/labs/equilibrium.js
index 3237a4e..2009caf 100644
--- a/frontend/js/labs/equilibrium.js
+++ b/frontend/js/labs/equilibrium.js
@@ -48,6 +48,7 @@ class EquilibriumSim {
     this.reset();
   }
 
+  getParams() { return { T: this.T, nA: this.nA, nB: this.nB, Ea_f: this.Ea_f, Ea_r: this.Ea_r }; }
   setParams({ T, nA, nB, Ea_f, Ea_r } = {}) {
     let needReset = false;
     if (T    !== undefined) this.T    = Math.max(200, Math.min(500, +T));
diff --git a/frontend/js/labs/forcesandbox.js b/frontend/js/labs/forcesandbox.js
index b362cd9..c65f4e6 100644
--- a/frontend/js/labs/forcesandbox.js
+++ b/frontend/js/labs/forcesandbox.js
@@ -1787,7 +1787,7 @@ class ForceSandboxSim {
 
       // Угловая скорость ω — фиолетовая метка справа от тела
       if (hasOmg) {
-        const sym  = b.omega > 0 ? '<svg class="ic" viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-.49-4.12"/></svg>' : '<svg class="ic" viewBox="0 0 24 24"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.12"/></svg>';
+        const sym  = b.omega > 0 ? '\u21BB' : '\u21BA';
         const labX = b.x + halfW + 7;
         const labY = b.type === 'box' ? b.y - b.h * 0.12 : b.y - b.r * 0.15;
         ctx.save();
@@ -1852,7 +1852,7 @@ class ForceSandboxSim {
     ctx.fillStyle = '#EF476F';
     ctx.fillText(`p=${(body.mass * spd / S).toFixed(1)} кг·м/с`, cx, cy + r + 12);
     if (Math.abs(body.omega) > 0.05) {
-      const sym = body.omega > 0 ? '<svg class="ic" viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-.49-4.12"/></svg>' : '<svg class="ic" viewBox="0 0 24 24"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.12"/></svg>';
+      const sym = body.omega > 0 ? '\u21BB' : '\u21BA';
       ctx.fillStyle = '#9B5DE5';
       ctx.fillText(`${sym} ω=${Math.abs(body.omega).toFixed(2)} рад/с`, cx, cy + r + 22);
     }
diff --git a/frontend/js/labs/graphtransform.js b/frontend/js/labs/graphtransform.js
index 50d0482..9c900d4 100644
--- a/frontend/js/labs/graphtransform.js
+++ b/frontend/js/labs/graphtransform.js
@@ -46,6 +46,7 @@ class GraphTransformSim {
     this.W = w; this.H = h;
   }
 
+  getParams() { return { a: this.a, k: this.k, b: this.b, c: this.c }; }
   setParams({ a, k, b, c } = {}) {
     if (a !== undefined) this.a = +a;
     if (k !== undefined) this.k = +k;
diff --git a/frontend/js/labs/hydrostatics.js b/frontend/js/labs/hydrostatics.js
new file mode 100644
index 0000000..f3e3d0d
--- /dev/null
+++ b/frontend/js/labs/hydrostatics.js
@@ -0,0 +1,1350 @@
+'use strict';
+/* ═══════════════════════════════════════════════════════════════════
+   HydroSim v2 — Гидростатика
+   Модули: давление · поверхностное натяжение · сообщающиеся сосуды · Архимед
+   Canvas 2D, pure-JS physics (no external libraries)
+   ═══════════════════════════════════════════════════════════════════ */
+
+class HydroSim {
+  static G = 9.81;
+
+  static LIQUIDS = {
+    water:     { name: 'Вода',         rho: 1000,  color: '#2979FF', sigma: 0.073 },
+    saltwater: { name: 'Солёная вода', rho: 1030,  color: '#1565C0', sigma: 0.074 },
+    oil:       { name: 'Масло',        rho: 900,   color: '#FFA000', sigma: 0.033 },
+    alcohol:   { name: 'Спирт',        rho: 790,   color: '#CE93D8', sigma: 0.022 },
+    glycerin:  { name: 'Глицерин',     rho: 1260,  color: '#FFCC02', sigma: 0.063 },
+    mercury:   { name: 'Ртуть',        rho: 13600, color: '#B0BEC5', sigma: 0.500 },
+  };
+
+  static MATERIALS = {
+    styrofoam: { name: 'Пенопласт', rho: 30,    color: '#F5F5F5' },
+    cork:      { name: 'Пробка',    rho: 120,   color: '#8D6E63' },
+    wood:      { name: 'Дерево',    rho: 500,   color: '#A1887F' },
+    ice:       { name: 'Лёд',       rho: 900,   color: '#B3E5FC' },
+    plastic:   { name: 'Пластик',   rho: 1100,  color: '#EF5350' },
+    glass:     { name: 'Стекло',    rho: 2500,  color: '#90CAF9' },
+    aluminum:  { name: 'Алюминий',  rho: 2700,  color: '#CFD8DC' },
+    iron:      { name: 'Железо',    rho: 7800,  color: '#78909C' },
+    gold:      { name: 'Золото',    rho: 19300, color: '#FFD700' },
+  };
+
+  constructor(canvas, mode = 'pressure') {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.mode   = mode;
+    this._raf   = null;
+    this._running    = false;
+    this.onUpdate    = null;
+    this._lastNotify = 0;
+    this._t          = 0;
+
+    this.liquidKey   = 'water';
+    this.materialKey = 'wood';
+    this.g           = HydroSim.G;
+
+    /* pressure */
+    this._probe = { vy: 0.5, dragging: false };
+
+    /* surface */
+    this._stMode       = 'capillary';
+    this._contactAngle = 20;
+
+    /* communicating */
+    this._numVessels   = 2;
+    this._liquidFrac   = 0.45;
+    this._valveOpen    = true;
+    this._vesselShapes = ['rect', 'wide'];
+    this._animLevel    = null;
+    this._targetLevel  = null;
+    this._recalcVessels();
+
+    /* archimedes */
+    this._archReady  = false;
+    this._bodies     = [];
+    this._waterLevel = 0.60;
+    this._bodyShape  = 'rect';
+
+    this._bindEvents();
+    this._ro = new ResizeObserver(() => this.fit());
+    this._ro.observe(canvas.parentElement || canvas);
+    requestAnimationFrame(() => { this.fit(); this.play(); });
+  }
+
+  /* ── Public API ── */
+  setMode(m) {
+    this.mode = m;
+    if (m === 'archimedes') this._initArch();
+    else this._destroyArch();
+    this._notify();
+  }
+  setLiquid(key)   { this.liquidKey = key; this._notify(); }
+  setMaterial(key) { this.materialKey = key; if (this.mode === 'archimedes') this._archReset(); this._notify(); }
+  setContactAngle(deg) { this._contactAngle = deg; }
+  setNumVessels(n) {
+    this._numVessels   = n;
+    this._vesselShapes = Array.from({ length: n }, (_, i) => ['rect','wide','narrow','trapezoid'][i % 4]);
+    this._recalcVessels(); this._notify();
+  }
+  setValve(open) { this._valveOpen = open; this._recalcVessels(); this._notify(); }
+  addLiquid()    { this._liquidFrac = Math.min(0.85, this._liquidFrac + 0.05); this._recalcVessels(); }
+  removeLiquid() { this._liquidFrac = Math.max(0.05, this._liquidFrac - 0.05); this._recalcVessels(); }
+  setBodyShape(s){ this._bodyShape = s; if (this.mode === 'archimedes') this._archReset(); }
+  addBody()      { this._archAddBody(); }
+  clearBodies()  { this._archClear(); this._notify(); }
+
+  getInfo() {
+    const liq = HydroSim.LIQUIDS[this.liquidKey];
+    const mat = HydroSim.MATERIALS[this.materialKey];
+    switch (this.mode) {
+      case 'pressure': {
+        const h = this._probe.vy * this._tankH_m();
+        const P = liq.rho * this.g * h;
+        return { h: h.toFixed(3), rho: liq.rho, P: Math.round(P), liqName: liq.name,
+          formula: `P = ρ·g·h = ${liq.rho}·${this.g.toFixed(1)}·${h.toFixed(3)} = ${Math.round(P)} Па` };
+      }
+      case 'surface': {
+        const r = 0.001, theta = this._contactAngle * Math.PI / 180;
+        const h = 2 * liq.sigma * Math.cos(theta) / (liq.rho * this.g * r);
+        return { sigma: liq.sigma, theta: this._contactAngle, h: (h * 1000).toFixed(1), liqName: liq.name,
+          formula: `h = 2σ·cos(θ)/(ρgr) = ${(h*1000).toFixed(1)} мм  (r=1мм)` };
+      }
+      case 'communicating': {
+        const lvl = this._animLevel ?? this._targetLevel ?? this._liquidFrac * 0.8;
+        const h = lvl * this._tankH_m(), P = liq.rho * this.g * h;
+        return { h: h.toFixed(3), rho: liq.rho, P: Math.round(P), liqName: liq.name,
+          vessels: this._numVessels, valve: this._valveOpen,
+          formula: `h₁ = h₂ = ${h.toFixed(3)} м;  P = ${Math.round(P)} Па` };
+      }
+      case 'archimedes': {
+        if (!this._bodies.length) return { liqName: liq.name, matName: mat.name };
+        const b = this._bodies[0];
+        const Vs = b.submergedFrac * b.volume;
+        const FA = liq.rho * this.g * Vs, mg = mat.rho * b.volume * this.g;
+        const state = mat.rho < liq.rho * 0.99 ? 'ВСПЛЫВАЕТ'
+                    : mat.rho > liq.rho * 1.01 ? 'ТОНЕТ' : 'ВЗВЕШЕНО';
+        return { FA: FA.toFixed(4), mg: mg.toFixed(4), state, liqName: liq.name, matName: mat.name,
+          rhoMat: mat.rho, rhoLiq: liq.rho,
+          formula: `Fₐ = ρж·g·Vпог = ${liq.rho}·${this.g.toFixed(1)}·${Vs.toFixed(5)} = ${FA.toFixed(4)} Н` };
+      }
+    }
+    return {};
+  }
+
+  fit() {
+    const el = this.canvas.parentElement || this.canvas;
+    const w  = el.clientWidth || 600, h = el.clientHeight || 400;
+    if (w < 50 || h < 50) return;
+    this.canvas.width = w; this.canvas.height = h;
+    this.W = w; this.H = h;
+    /* archimedes: no walls to rebuild — pure JS physics */
+  }
+
+  play()  { if (!this._running) { this._running = true; requestAnimationFrame(t => this._loop(t)); } }
+  stop()  { this._running = false; if (this._raf) cancelAnimationFrame(this._raf); }
+  destroy() {
+    this.stop(); this._destroyArch(); this._ro?.disconnect();
+    this.canvas.removeEventListener('pointerdown', this._onPD);
+    this.canvas.removeEventListener('pointermove', this._onPM);
+    window.removeEventListener('pointerup', this._onPU);
+  }
+
+  /* ── Loop ── */
+  _loop(t) {
+    if (!this._running) return;
+    this._raf = requestAnimationFrame(ts => this._loop(ts));
+    this._t   = t;
+    this._update(t);
+    this._draw(t);
+    if (t - this._lastNotify > 120) { this._lastNotify = t; this._notify(); }
+  }
+
+  _update(t) {
+    if (this.mode === 'communicating' && this._targetLevel !== null) {
+      if (this._animLevel === null) this._animLevel = this._targetLevel;
+      const d = this._targetLevel - this._animLevel;
+      this._animLevel += d * 0.07;
+      if (Math.abs(d) < 0.001) this._animLevel = this._targetLevel;
+    }
+    this._waveT = ((this._waveT || 0) + 0.025);
+    if (this.mode === 'archimedes' && this._archReady) this._archPhysStep();
+  }
+
+  _draw(t) {
+    if (!this.W || !this.H) return;
+    this.ctx.clearRect(0, 0, this.W, this.H);
+    /* opaque background — prevents page bg colour bleeding through transparent canvas */
+    this.ctx.fillStyle = '#0d0920';
+    this.ctx.fillRect(0, 0, this.W, this.H);
+    switch (this.mode) {
+      case 'pressure':      this._drawPressure(t);      break;
+      case 'surface':       this._drawSurface(t);       break;
+      case 'communicating': this._drawCommunicating(t); break;
+      case 'archimedes':    this._drawArchimedes(t);    break;
+    }
+  }
+
+  /* ═══════════════════════════════════════════════════
+     МОДУЛЬ 1 — ДАВЛЕНИЕ
+  ═══════════════════════════════════════════════════ */
+  _drawPressure(t) {
+    const ctx = this.ctx, W = this.W, H = this.H;
+    const liq = HydroSim.LIQUIDS[this.liquidKey];
+
+    /* tank */
+    const tw = Math.min(W * 0.30, 200), th = H * 0.72;
+    const tx = W * 0.12, ty = H * 0.10;
+
+    /* pressure at probe */
+    const h    = this._probe.vy * this._tankH_m();
+    const P    = liq.rho * this.g * h;
+    const maxP = liq.rho * this.g * this._tankH_m();
+
+    /* draw pressure-gradient zones inside tank */
+    this._drawPressureZones(ctx, tx, ty, tw, th, maxP, liq.color);
+
+    /* vessel over zones */
+    this._drawGlassVessel(ctx, tx, ty, tw, th);
+
+    /* wave surface */
+    const liqY = ty;
+    this._drawWaveSurface(ctx, tx + 3, liqY, tw - 6, liq.color, this._waveT);
+
+    /* depth ruler */
+    this._drawRuler(ctx, tx - 36, ty, th, '0 м', '1 м');
+
+    /* probe */
+    const pX = tx + tw * 0.5, pY = ty + this._probe.vy * th;
+
+    /* depth dashed line */
+    ctx.save();
+    ctx.setLineDash([5, 4]); ctx.strokeStyle = 'rgba(255,255,255,0.18)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(tx - 36, pY); ctx.lineTo(tx + tw + 80, pY); ctx.stroke();
+    ctx.setLineDash([]); ctx.restore();
+
+    /* depth label */
+    ctx.save();
+    ctx.fillStyle = 'rgba(255,255,255,0.55)'; ctx.font = '12px Manrope,sans-serif';
+    ctx.textAlign = 'right';
+    ctx.fillText('h = ' + h.toFixed(2) + ' м', tx - 40, pY + 4);
+    ctx.restore();
+
+    /* pressure arrows */
+    const maxLen = Math.min(60, tw * 0.42);
+    const arLen  = maxP > 0 ? (P / maxP) * maxLen : 0;
+    const arCol  = this._lerpColor('#FFD166', '#F15BB5', P / Math.max(maxP, 1));
+    const dirs   = [{ dx: 1, dy: 0 }, { dx: -1, dy: 0 }, { dx: 0, dy: 1 }, { dx: 0, dy: -1 }];
+    for (const d of dirs) this._drawArrow(ctx, pX, pY, d.dx * arLen, d.dy * arLen, arCol, 4);
+
+    /* pressure value label */
+    if (P > 5) {
+      ctx.save();
+      ctx.fillStyle = arCol; ctx.font = 'bold 14px "JetBrains Mono",monospace';
+      ctx.textAlign = 'center'; ctx.shadowColor = arCol; ctx.shadowBlur = 8;
+      ctx.fillText(Math.round(P) + ' Па', pX, pY - 22);
+      ctx.shadowBlur = 0; ctx.restore();
+    }
+
+    /* probe dot */
+    ctx.save();
+    ctx.shadowColor = '#06D6E0'; ctx.shadowBlur = this._probe.dragging ? 24 : 14;
+    ctx.fillStyle = '#06D6E0';
+    ctx.beginPath(); ctx.arc(pX, pY, 12, 0, Math.PI * 2); ctx.fill();
+    ctx.strokeStyle = '#fff'; ctx.lineWidth = 2.5; ctx.stroke();
+    ctx.shadowBlur = 0;
+    ctx.fillStyle = 'rgba(255,255,255,0.9)'; ctx.font = 'bold 10px monospace';
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+    ctx.fillText('P', pX, pY);
+    ctx.textBaseline = 'alphabetic'; ctx.restore();
+
+    /* drag hint */
+    ctx.fillStyle = 'rgba(6,214,224,0.4)'; ctx.font = '10px Manrope,sans-serif';
+    ctx.textAlign = 'center'; ctx.fillText('↕ тяни', pX, pY + 28);
+
+    /* gauge */
+    const gR  = Math.min(48, H * 0.11);
+    const gCx = tx + tw + 22 + gR, gCy = ty + th * 0.50;
+    this._drawGauge(ctx, gCx, gCy, P, maxP, 'Па', gR);
+
+    /* right-side info panel */
+    this._drawInfoPanel(ctx, tx + tw + 22 + gR * 2 + 12, ty + 4, W - (tx + tw + 22 + gR * 2 + 16), th - 8, [
+      { label: 'Жидкость', value: liq.name },
+      { label: 'ρ', value: liq.rho + ' кг/м³' },
+      { label: 'h', value: h.toFixed(3) + ' м' },
+      { label: 'P', value: Math.round(P) + ' Па', color: arCol },
+    ]);
+
+    /* formula strip */
+    this._drawFormula(ctx, W / 2, H - 12,
+      `P = ρ·g·h = ${liq.rho}·${this.g.toFixed(1)}·${h.toFixed(2)} = ${Math.round(P)} Па`,
+      '#FFD166');
+  }
+
+  _drawPressureZones(ctx, x, y, w, h, maxP, color) {
+    ctx.save();
+    ctx.beginPath(); ctx.rect(x + 3, y, w - 6, h); ctx.clip();
+    /* deep-color gradient */
+    const g = ctx.createLinearGradient(0, y, 0, y + h);
+    g.addColorStop(0,   color + '22');
+    g.addColorStop(0.4, color + '55');
+    g.addColorStop(1,   color + 'CC');
+    ctx.fillStyle = g; ctx.fillRect(x + 3, y, w - 6, h);
+    /* isobar lines */
+    ctx.strokeStyle = 'rgba(255,255,255,0.10)'; ctx.lineWidth = 1;
+    ctx.setLineDash([4, 6]);
+    for (let i = 1; i < 10; i++) {
+      const iy = y + (i / 10) * h;
+      ctx.beginPath(); ctx.moveTo(x + 3, iy); ctx.lineTo(x + w - 3, iy); ctx.stroke();
+    }
+    ctx.setLineDash([]);
+    /* caustic shimmer */
+    ctx.globalAlpha = 0.06;
+    for (let i = 0; i < 6; i++) {
+      const cx2 = x + 10 + ((i * 47 + (this._waveT || 0) * 15) % (w - 20));
+      const cy2 = y + h * 0.3 + Math.sin(i + (this._waveT || 0) * 0.5) * h * 0.15;
+      ctx.fillStyle = '#fff';
+      ctx.beginPath(); ctx.ellipse(cx2, cy2, 12, 5, 0.4, 0, Math.PI * 2); ctx.fill();
+    }
+    ctx.globalAlpha = 1; ctx.restore();
+  }
+
+  /* ═══════════════════════════════════════════════════
+     МОДУЛЬ 2 — ПОВЕРХНОСТНОЕ НАТЯЖЕНИЕ
+  ═══════════════════════════════════════════════════ */
+  _drawSurface(t) {
+    if (this._stMode === 'capillary')
+      this._drawCapillaries(t);
+    else
+      this._drawDrop(t);
+  }
+
+  _drawCapillaries(t) {
+    const ctx = this.ctx, W = this.W, H = this.H;
+    const liq = HydroSim.LIQUIDS[this.liquidKey];
+
+    const diameters = [0.5, 1.0, 2.0, 4.0];
+    const n    = diameters.length;
+    const tW   = W * 0.76, tX = W * 0.12;
+    const tY   = H * 0.55, tH = H * 0.28;
+
+    /* wide container */
+    this._fillLiquidRect(ctx, tX + 3, tY, tW - 6, tH, liq.color);
+    this._drawGlassVessel(ctx, tX, tY, tW, tH);
+    this._drawWaveSurface(ctx, tX + 3, tY, tW - 6, liq.color, this._waveT);
+
+    const capTubeW = Math.max(26, Math.min(W * 0.055, 40));
+    const step  = tW / (n + 1);
+    const theta = this._contactAngle * Math.PI / 180;
+    const cosT  = Math.cos(theta);
+    const capH  = H * 0.52;
+
+    for (let i = 0; i < n; i++) {
+      const r_m    = diameters[i] * 0.5 * 0.001;
+      const h_m    = 2 * liq.sigma * cosT / (liq.rho * this.g * r_m);
+      const cx     = tX + step * (i + 1);
+      const capBot = tY;
+      const capTop = tY - capH;
+      const inner  = capTubeW - 10;
+
+      /* tube walls — rendered as filled rects with gradient */
+      const wallG = ctx.createLinearGradient(cx - capTubeW / 2, 0, cx + capTubeW / 2, 0);
+      wallG.addColorStop(0,    'rgba(140,180,255,0.55)');
+      wallG.addColorStop(0.18, 'rgba(200,225,255,0.25)');
+      wallG.addColorStop(0.82, 'rgba(200,225,255,0.12)');
+      wallG.addColorStop(1,    'rgba(140,180,255,0.45)');
+      ctx.save();
+      ctx.fillStyle = wallG;
+      ctx.fillRect(cx - capTubeW / 2, capTop, capTubeW, capH);
+      /* hollow out centre */
+      ctx.clearRect(cx - inner / 2, capTop, inner, capH);
+      ctx.restore();
+
+      /* glass highlight on left wall interior */
+      ctx.save();
+      ctx.fillStyle = 'rgba(255,255,255,0.18)';
+      ctx.fillRect(cx - inner / 2, capTop, 2, capH);
+      ctx.restore();
+
+      /* liquid rise height (visual scale: 5cm = full tube) */
+      const scaledH = (h_m / 0.05) * capH * 0.9;
+      const liqH    = Math.min(Math.max(scaledH, 0), capH);
+      const liqTop  = capBot - liqH;
+
+      if (liqH > 1) {
+        /* cylindrical-look radial gradient */
+        const rg = ctx.createRadialGradient(cx, liqTop + liqH / 2, 0, cx, liqTop + liqH / 2, inner / 2);
+        rg.addColorStop(0,   liq.color + 'EE');
+        rg.addColorStop(0.6, liq.color + 'BB');
+        rg.addColorStop(1,   liq.color + '55');
+        ctx.save();
+        ctx.beginPath(); ctx.rect(cx - inner / 2, liqTop, inner, liqH); ctx.clip();
+        ctx.fillStyle = rg; ctx.fillRect(cx - inner / 2, liqTop, inner, liqH);
+        ctx.restore();
+      }
+
+      /* meniscus */
+      this._drawMeniscus(ctx, cx, liqTop, inner, this._contactAngle, liq.color);
+
+      /* meniscus specular highlight */
+      if (this._contactAngle < 90 && liqH > 3) {
+        const dip = (inner / 2) * Math.cos(theta) * 1.1;
+        ctx.save();
+        ctx.globalAlpha = 0.28;
+        ctx.fillStyle = '#fff';
+        ctx.beginPath();
+        ctx.ellipse(cx - inner * 0.15, liqTop - dip * 0.3, inner * 0.22, Math.max(2, dip * 0.35), 0, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      }
+
+      /* tube top cap */
+      ctx.save();
+      ctx.strokeStyle = 'rgba(140,180,255,0.5)'; ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(cx - capTubeW / 2, capTop);
+      ctx.lineTo(cx + capTubeW / 2, capTop);
+      ctx.stroke(); ctx.restore();
+
+      /* diameter label */
+      ctx.fillStyle = 'rgba(255,255,255,0.60)'; ctx.font = '12px Manrope,sans-serif';
+      ctx.textAlign = 'center'; ctx.fillText('d=' + diameters[i] + ' мм', cx, capTop - 22);
+
+      /* rise height label */
+      if (liqH > 14) {
+        ctx.fillStyle = liq.color; ctx.font = 'bold 13px monospace';
+        ctx.textAlign = 'center'; ctx.fillText((h_m * 1000).toFixed(1) + ' мм', cx, liqTop - 10);
+      }
+
+      /* vertical bracket showing rise */
+      if (liqH > 28) {
+        ctx.save();
+        ctx.strokeStyle = liq.color + '88'; ctx.lineWidth = 1; ctx.setLineDash([2, 3]);
+        ctx.beginPath();
+        ctx.moveTo(cx + capTubeW / 2 + 6, capBot);
+        ctx.lineTo(cx + capTubeW / 2 + 6, liqTop);
+        ctx.stroke(); ctx.setLineDash([]); ctx.restore();
+      }
+    }
+
+    /* contact angle status */
+    const isH = this._contactAngle < 90;
+    ctx.fillStyle = isH ? '#06D6E0' : '#F15BB5';
+    ctx.font = '13px Manrope,sans-serif'; ctx.textAlign = 'left';
+    ctx.fillText('θ = ' + this._contactAngle + '°  — ' + (isH ? 'смачивание ↑' : 'несмачивание ↓'), tX, H - 34);
+
+    this._drawFormula(ctx, W / 2, H - 12,
+      'h = 2σ·cos(θ) / (ρgr)   σ=' + liq.sigma + ' Н/м   θ=' + this._contactAngle + '°', '#06D6E0');
+  }
+
+  _drawMeniscus(ctx, cx, topY, innerW, angleDeg, color) {
+    const r = innerW / 2;
+    ctx.save();
+    if (angleDeg < 90) {
+      const dip = r * Math.cos(angleDeg * Math.PI / 180) * 1.1;
+      ctx.beginPath(); ctx.moveTo(cx - r, topY); ctx.quadraticCurveTo(cx, topY - dip, cx + r, topY);
+    } else {
+      const bulge = r * 0.5;
+      ctx.beginPath(); ctx.moveTo(cx - r, topY); ctx.quadraticCurveTo(cx, topY + bulge, cx + r, topY);
+    }
+    ctx.strokeStyle = color; ctx.lineWidth = 2.5; ctx.stroke();
+    ctx.restore();
+  }
+
+  _drawDrop(t) {
+    const ctx = this.ctx, W = this.W, H = this.H;
+    const liq = HydroSim.LIQUIDS[this.liquidKey];
+    const theta        = this._contactAngle * Math.PI / 180;
+    const isHydrophobic = this._contactAngle >= 90;
+    const surfY        = H * 0.60;
+
+    /* surface plane */
+    ctx.save();
+    const sg = ctx.createLinearGradient(0, surfY - 4, 0, surfY + H * 0.18);
+    sg.addColorStop(0, isHydrophobic ? 'rgba(155,93,229,0.55)' : 'rgba(6,214,224,0.55)');
+    sg.addColorStop(1, 'rgba(0,0,0,0)');
+    ctx.fillStyle = sg; ctx.fillRect(W * 0.05, surfY, W * 0.90, H * 0.18);
+    ctx.strokeStyle = isHydrophobic ? '#9B5DE5' : '#06D6E0'; ctx.lineWidth = 2.5;
+    ctx.beginPath(); ctx.moveTo(W * 0.05, surfY); ctx.lineTo(W * 0.95, surfY); ctx.stroke();
+    ctx.restore();
+
+    /* surface label */
+    ctx.fillStyle = 'rgba(255,255,255,0.38)'; ctx.font = '12px Manrope,sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(isHydrophobic ? 'Гидрофобная поверхность' : 'Гидрофильная поверхность', W / 2, surfY + 20);
+
+    /* drop shape */
+    const dropVol  = 0.0002;
+    const cos3     = Math.cos(theta);
+    const Rpow     = 2 - 3 * cos3 + cos3 * cos3 * cos3;
+    const R        = Math.pow((3 * dropVol) / (Math.PI * Math.max(Rpow, 0.01)), 1 / 3);
+    const Rpx      = Math.min(R * 2200, W * 0.24);
+    const contactR = Rpx * Math.sin(theta);
+    const centerY  = surfY - Rpx * Math.cos(theta);
+    const wobble   = 1 + Math.sin(t * 0.002) * 0.012; /* slight oscillation */
+
+    ctx.save();
+    ctx.shadowColor = liq.color; ctx.shadowBlur = 22;
+    ctx.beginPath(); ctx.rect(0, 0, W, surfY + 1); ctx.clip();
+    const dg = ctx.createRadialGradient(
+      W / 2 - Rpx * 0.28, centerY - Rpx * 0.28, Rpx * 0.04,
+      W / 2, centerY, Rpx * wobble
+    );
+    dg.addColorStop(0,   liq.color + 'EE');
+    dg.addColorStop(0.5, liq.color + 'BB');
+    dg.addColorStop(1,   liq.color + '44');
+    ctx.fillStyle = dg;
+    ctx.beginPath();
+    ctx.ellipse(W / 2, centerY, Rpx * wobble, Rpx / wobble, 0, 0, Math.PI * 2);
+    ctx.fill();
+    /* specular highlight */
+    ctx.globalAlpha = 0.50; ctx.fillStyle = '#fff';
+    ctx.beginPath();
+    ctx.ellipse(W / 2 - Rpx * 0.28, centerY - Rpx * 0.28, Rpx * 0.20, Rpx * 0.10, -0.5, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.restore();
+
+    /* contact angle arc */
+    ctx.save();
+    ctx.strokeStyle = '#FFD166'; ctx.lineWidth = 2.5;
+    const arcR = 34, tangAngle = Math.PI - theta;
+    ctx.beginPath();
+    ctx.arc(W / 2 - contactR, surfY, arcR, -Math.PI * 0.5, tangAngle - Math.PI * 0.5);
+    ctx.stroke();
+    ctx.fillStyle = '#FFD166'; ctx.font = 'bold 13px monospace'; ctx.textAlign = 'left';
+    ctx.fillText('θ = ' + this._contactAngle + '°', W / 2 - contactR + arcR + 6, surfY - 8);
+    ctx.restore();
+
+    this._drawFormula(ctx, W / 2, H - 12,
+      'σ = ' + liq.sigma + ' Н/м   ΔP = 2σ/R ≈ ' + (2 * liq.sigma / (R || 0.001)).toFixed(1) + ' Па',
+      '#F15BB5');
+  }
+
+  /* ═══════════════════════════════════════════════════
+     МОДУЛЬ 3 — СООБЩАЮЩИЕСЯ СОСУДЫ
+  ═══════════════════════════════════════════════════ */
+  _drawCommunicating(t) {
+    const ctx = this.ctx, W = this.W, H = this.H;
+    const liq = HydroSim.LIQUIDS[this.liquidKey];
+    const n   = this._numVessels;
+
+    /* ── Geometry ────────────────────────────────────────
+       One unified container, internal partitions stop
+       PIPE_H above the floor → shared bottom pipe zone.
+       Vessels = sections between outer walls + partitions. */
+    const CX   = W * 0.09, CW = W * 0.82;   // container left + width
+    const CY   = H * 0.09, CH = H * 0.73;   // container top + height
+    const PIPE_H = Math.max(22, CH * 0.07);  // connecting pipe zone height
+    const PIPE_Y = CY + CH - PIPE_H;         // pipe zone top Y
+    const FLOOR  = CY + CH;                  // container floor Y
+    const PART_W = 5;                        // partition thickness (px)
+    const SEC_W  = (CW - (n - 1) * PART_W) / n; // each section width
+
+    const isOpen = this._valveOpen;
+    const liqFrac = isOpen
+      ? (this._animLevel ?? this._targetLevel ?? this._liquidFrac * 0.8)
+      : this._liquidFrac * 0.8;
+
+    /* usable height for liquid level display (above pipe zone) */
+    const USABLE  = CH - PIPE_H;
+    const liqTopY = PIPE_Y - liqFrac * USABLE;  // liquid surface Y
+    const liqH    = FLOOR - liqTopY;             // total liquid column height
+
+    /* ── 1. Liquid fill in each section ─────────────────── */
+    for (let i = 0; i < n; i++) {
+      const sx = CX + i * (SEC_W + PART_W);
+      const lg = ctx.createLinearGradient(0, liqTopY, 0, FLOOR);
+      lg.addColorStop(0,   liq.color + '42');
+      lg.addColorStop(0.4, liq.color + '88');
+      lg.addColorStop(1,   liq.color + 'CC');
+      ctx.fillStyle = lg;
+      ctx.fillRect(sx, liqTopY, SEC_W, liqH);
+    }
+
+    /* ── 2. Pipe zone fill (open = liquid, closed = dark) ── */
+    for (let i = 0; i < n - 1; i++) {
+      const px = CX + i * (SEC_W + PART_W) + SEC_W;
+      if (isOpen) {
+        const pg = ctx.createLinearGradient(0, PIPE_Y, 0, FLOOR);
+        pg.addColorStop(0, liq.color + '88');
+        pg.addColorStop(1, liq.color + 'CC');
+        ctx.fillStyle = pg;
+      } else {
+        ctx.fillStyle = 'rgba(8,4,18,0.95)';
+      }
+      ctx.fillRect(px, PIPE_Y, PART_W, PIPE_H);
+    }
+
+    /* ── 3. Wave on each liquid surface ─────────────────── */
+    for (let i = 0; i < n; i++) {
+      const sx = CX + i * (SEC_W + PART_W);
+      this._drawWaveSurface(ctx, sx + 2, liqTopY, SEC_W - 4, liq.color, this._waveT + i * 1.3);
+    }
+
+    /* ── 4. Outer container walls (U-shape, open at top) ── */
+    ctx.save();
+    ctx.strokeStyle = 'rgba(200,225,255,0.55)';
+    ctx.lineWidth = 2.5; ctx.lineCap = 'round';
+    ctx.shadowColor = 'rgba(180,210,255,0.22)'; ctx.shadowBlur = 8;
+    ctx.beginPath();
+    ctx.moveTo(CX, CY);          // left wall top
+    ctx.lineTo(CX, FLOOR);       // left wall
+    ctx.lineTo(CX + CW, FLOOR);  // bottom floor
+    ctx.lineTo(CX + CW, CY);     // right wall
+    ctx.stroke();
+    /* glass reflection strip */
+    ctx.shadowBlur = 0;
+    ctx.strokeStyle = 'rgba(255,255,255,0.12)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(CX + 5, CY); ctx.lineTo(CX + 5, FLOOR); ctx.stroke();
+    ctx.restore();
+
+    /* ── 5. Internal partitions (stop at pipe zone top) ─── */
+    ctx.save();
+    ctx.strokeStyle = 'rgba(200,225,255,0.42)';
+    ctx.lineWidth = PART_W; ctx.lineCap = 'butt';
+    ctx.shadowColor = 'rgba(180,210,255,0.15)'; ctx.shadowBlur = 4;
+    for (let i = 0; i < n - 1; i++) {
+      const px = CX + i * (SEC_W + PART_W) + SEC_W + PART_W / 2;
+      ctx.beginPath();
+      ctx.moveTo(px, CY);
+      ctx.lineTo(px, PIPE_Y);   // stop above pipe zone
+      ctx.stroke();
+    }
+    ctx.restore();
+
+    /* ── 6. Valve icon in each pipe gap ─────────────────── */
+    for (let i = 0; i < n - 1; i++) {
+      const px = CX + i * (SEC_W + PART_W) + SEC_W;
+      const vm = px + PART_W / 2;
+      const vc = PIPE_Y + PIPE_H / 2;
+      if (isOpen) {
+        /* flow arrows ← → */
+        this._drawArrow(ctx, vm - 16, vc,  12, 0, '#06D6A0', 1.8);
+        this._drawArrow(ctx, vm + 16, vc, -12, 0, '#06D6A0', 1.8);
+      } else {
+        ctx.save();
+        ctx.translate(vm, vc); ctx.rotate(Math.PI / 4);
+        ctx.strokeStyle = '#F15BB5'; ctx.lineWidth = 2.5;
+        ctx.shadowColor = '#F15BB5'; ctx.shadowBlur = 10;
+        ctx.strokeRect(-6, -6, 12, 12);
+        ctx.restore();
+      }
+    }
+
+    /* ── 7. Height labels + dashed brackets ─────────────── */
+    for (let i = 0; i < n; i++) {
+      const sx = CX + i * (SEC_W + PART_W);
+      if (liqFrac > 0.02) {
+        const h_m = liqFrac * this._tankH_m();
+        ctx.fillStyle = liq.color;
+        ctx.font = 'bold 11px monospace'; ctx.textAlign = 'center';
+        ctx.fillText('h = ' + h_m.toFixed(2) + ' м', sx + SEC_W / 2, liqTopY - 10);
+        /* dashed bracket */
+        ctx.save();
+        ctx.strokeStyle = liq.color + '55'; ctx.lineWidth = 1; ctx.setLineDash([2, 4]);
+        ctx.beginPath();
+        ctx.moveTo(sx + SEC_W - 6, PIPE_Y);
+        ctx.lineTo(sx + SEC_W - 6, liqTopY);
+        ctx.stroke(); ctx.setLineDash([]);
+        ctx.restore();
+      }
+    }
+
+    /* ── 8. Equal-level dashed line ─────────────────────── */
+    if (isOpen && liqFrac > 0.02) {
+      ctx.save();
+      ctx.setLineDash([12, 6]);
+      ctx.strokeStyle = '#06D6E0'; ctx.lineWidth = 1.5;
+      ctx.globalAlpha = 0.55; ctx.shadowColor = '#06D6E0'; ctx.shadowBlur = 4;
+      ctx.beginPath();
+      ctx.moveTo(CX - 14, liqTopY);
+      ctx.lineTo(CX + CW + 14, liqTopY);
+      ctx.stroke();
+      ctx.setLineDash([]); ctx.globalAlpha = 1; ctx.shadowBlur = 0;
+      this._labelPill(ctx, CX + CW + 18, liqTopY, 'h₁ = h₂', '#06D6E0');
+      ctx.restore();
+    }
+
+    /* ── 9. Status + formula ─────────────────────────────── */
+    ctx.fillStyle = isOpen ? '#06D6A0' : '#F15BB5';
+    ctx.font = '12px Manrope,sans-serif'; ctx.textAlign = 'right';
+    ctx.fillText('Кран: ' + (isOpen ? 'открыт' : 'закрыт'), W - 12, H - 34);
+
+    const h_m = liqFrac * this._tankH_m();
+    this._drawFormula(ctx, W / 2, H - 12,
+      'h₁ = h₂ = ' + h_m.toFixed(2) + ' м   P = ρgh = ' + Math.round(liq.rho * this.g * h_m) + ' Па',
+      '#9B5DE5');
+  }
+
+  /* ═══════════════════════════════════════════════════
+     МОДУЛЬ 4 — АРХИМЕД
+  ═══════════════════════════════════════════════════ */
+  _archTank() {
+    const W = this.W || 600, H = this.H || 400;
+    const tx = W * 0.03, ty = H * 0.06;
+    const tw = W * 0.60, th = H * 0.80;
+    const waterlineY = ty + th * (1 - this._waterLevel);
+    return { tx, ty, tw, th, waterlineY };
+  }
+
+  _initArch() {
+    if (this._archReady) return;
+    this._bodies = [];
+    this._archReady = true;
+    this._archAddBody();
+  }
+
+  _destroyArch() {
+    this._archReady = false;
+    this._bodies = [];
+  }
+
+  /* pure-JS physics helpers ─────────────────────────── */
+  _archAddBody() {
+    if (!this._archReady && this.mode === 'archimedes') { this._initArch(); return; }
+    if (!this._archReady) return;
+    const mat = HydroSim.MATERIALS[this.materialKey];
+    const liq = HydroSim.LIQUIDS[this.liquidKey];
+    const { tx, ty, tw, th, waterlineY } = this._archTank();
+    const size    = Math.max(46, Math.min(tw * 0.20, 76));
+    const eqFrac  = Math.min(1.0, mat.rho / liq.rho);
+    const sinks   = eqFrac >= 1.0;
+
+    /* spawn at equilibrium → zero entry velocity, no overshooting */
+    let y = sinks
+      ? waterlineY + (ty + th - waterlineY) * 0.32
+      : waterlineY + size * (eqFrac - 0.5);
+    y = Math.max(ty + size * 0.55, Math.min(ty + th - size * 0.55, y));
+
+    const spread = Math.min(tw * 0.26, size + 20);
+    const x      = tx + tw * 0.25 + this._bodies.length * spread;
+    const s_m    = size * 0.0018;
+    const volume = this._bodyShape === 'circle'
+      ? Math.PI * (s_m / 2) ** 2 * 0.08
+      : s_m * s_m * 0.08;
+
+    this._bodies.push({
+      x, y, vy: 0, size, shape: this._bodyShape,
+      mat: this.materialKey, submergedFrac: sinks ? 1 : eqFrac,
+      wobble: 0, volume,
+    });
+  }
+
+  _archClear()  { this._bodies = []; }
+  _archReset()  { this._bodies = []; this._archAddBody(); }
+
+  _archPhysStep() {
+    const liq  = HydroSim.LIQUIDS[this.liquidKey];
+    const { ty, th, waterlineY } = this._archTank();
+    const botY = ty + th - 3, topY = ty + 3;
+    const G    = 0.38;   /* px/frame²  — gravitational accel in canvas units */
+    const DAMP = 0.22;   /* viscous damping fraction/frame at full submersion  */
+    const VMAX = 8;      /* speed cap px/frame                                */
+
+    for (const b of this._bodies) {
+      const mat  = HydroSim.MATERIALS[b.mat];
+      const half = b.size / 2;
+      const bot  = b.y + half, top = b.y - half;
+
+      /* submerged fraction */
+      let frac = 0;
+      if (bot > waterlineY) {
+        frac = top >= waterlineY ? 1.0 : (bot - waterlineY) / b.size;
+        frac = Math.max(0, Math.min(1, frac));
+      }
+      b.submergedFrac = frac;
+
+      /* net downward acceleration: G·(1 − ρж/ρт·frac)
+         positive = downward (canvas Y), negative = floats up              */
+      const rhoRatio = Math.min(liq.rho / mat.rho, 10.0);
+      b.vy += G * (1.0 - rhoRatio * frac);
+
+      /* viscous drag — heavier when deeper */
+      if (frac > 0) b.vy *= (1.0 - DAMP * frac);
+
+      b.vy = Math.max(-VMAX, Math.min(VMAX, b.vy));
+      b.y += b.vy;
+
+      /* soft collisions */
+      if (b.y + half >= botY) { b.y = botY - half; b.vy *= -0.12; }
+      if (b.y - half <= topY) { b.y = topY + half; b.vy = Math.abs(b.vy) * 0.08; }
+
+      /* visual wobble driven by vertical speed */
+      b.wobble = (b.wobble || 0) * 0.86 + b.vy * 0.004;
+    }
+  }
+
+  /* ── Draw ─────────────────────────────────────────── */
+  _drawArchimedes(t) {
+    const ctx = this.ctx, W = this.W, H = this.H;
+    const liq = HydroSim.LIQUIDS[this.liquidKey];
+    const { tx, ty, tw, th, waterlineY } = this._archTank();
+
+    /* ── air zone (above waterline) */
+    const airH = Math.max(0, waterlineY - ty);
+    if (airH > 1) {
+      ctx.save();
+      const ag = ctx.createLinearGradient(0, ty, 0, waterlineY);
+      ag.addColorStop(0, 'rgba(18,12,38,0.0)');
+      ag.addColorStop(1, 'rgba(18,12,38,0.28)');
+      ctx.fillStyle = ag; ctx.fillRect(tx + 4, ty, tw - 8, airH);
+      ctx.restore();
+    }
+
+    /* ── liquid zone (below waterline) */
+    const liqH = ty + th - waterlineY;
+    if (liqH > 1) {
+      this._fillLiquidRect(ctx, tx + 4, waterlineY, tw - 8, liqH, liq.color);
+    }
+
+    /* ── glass vessel + wave */
+    this._drawGlassVessel(ctx, tx, ty, tw, th);
+    this._drawWaveSurface(ctx, tx + 4, waterlineY, tw - 8, liq.color, this._waveT);
+
+    /* ── waterline dashed rule */
+    ctx.save();
+    ctx.setLineDash([10, 7]); ctx.strokeStyle = liq.color + 'BB'; ctx.lineWidth = 1.5;
+    ctx.beginPath(); ctx.moveTo(tx + 4, waterlineY); ctx.lineTo(tx + tw - 4, waterlineY); ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.fillStyle = liq.color + 'CC'; ctx.font = '11px Manrope,sans-serif'; ctx.textAlign = 'right';
+    ctx.fillText('← ' + liq.name, tx + tw - 6, waterlineY - 7);
+    ctx.restore();
+
+    /* ── bodies (clip to tank interior) */
+    ctx.save();
+    ctx.beginPath(); ctx.rect(tx + 4, ty + 1, tw - 8, th - 2); ctx.clip();
+    for (const b of this._bodies) this._archDrawBody(ctx, b, waterlineY, liq);
+    ctx.restore();
+
+    /* ── force arrows — clipped to tank band so mg↓ never bleeds below the glass floor */
+    ctx.save();
+    ctx.beginPath(); ctx.rect(0, 0, W, ty + th); ctx.clip();
+    for (const b of this._bodies) this._archDrawForces(ctx, b, liq);
+    ctx.restore();
+
+    /* ── info panel (right side) */
+    const panX = tx + tw + 16, panW = W - panX - 8;
+    if (panW > 80) this._archDrawPanel(ctx, panX, ty, panW, th, liq);
+
+    /* ── bottom formula */
+    if (this._bodies.length > 0) {
+      const b  = this._bodies[0];
+      const FA = liq.rho * this.g * b.volume * b.submergedFrac;
+      const mg = HydroSim.MATERIALS[b.mat].rho * b.volume * this.g;
+      this._drawFormula(ctx, tx + tw * 0.5, H - 12,
+        `Fₐ = ${FA.toFixed(4)} Н   mg = ${mg.toFixed(4)} Н   ρж/ρт = ${(liq.rho / HydroSim.MATERIALS[b.mat].rho).toFixed(2)}`,
+        '#06D6E0');
+    } else {
+      this._drawFormula(ctx, tx + tw * 0.5, H - 12, 'Fₐ = ρж · g · Vпогружённый  —  закон Архимеда', '#06D6E0');
+    }
+  }
+
+  _archDrawBody(ctx, b, waterlineY, liq) {
+    const mat  = HydroSim.MATERIALS[b.mat];
+    const half = b.size / 2;
+
+    /* submerged liquid tint on body */
+    if (b.submergedFrac > 0.01) {
+      ctx.save();
+      const subTop = b.y - half;
+      ctx.beginPath(); ctx.rect(b.x - half - 1, waterlineY, b.size + 2, b.y + half - waterlineY + 1); ctx.clip();
+      ctx.globalAlpha = 0.22; ctx.fillStyle = liq.color;
+      if (b.shape === 'circle') { ctx.beginPath(); ctx.arc(b.x, b.y, half, 0, Math.PI * 2); ctx.fill(); }
+      else { ctx.fillRect(b.x - half, b.y - half, b.size, b.size); }
+      ctx.restore();
+    }
+
+    /* main body */
+    ctx.save();
+    ctx.translate(b.x, b.y); ctx.rotate(b.wobble || 0);
+    ctx.shadowColor = mat.color + 'BB'; ctx.shadowBlur = 18;
+    ctx.fillStyle   = mat.color;
+    if (b.shape === 'circle') {
+      ctx.beginPath(); ctx.arc(0, 0, half, 0, Math.PI * 2); ctx.fill();
+    } else {
+      const r = Math.min(10, half * 0.25);
+      if (ctx.roundRect) ctx.roundRect(-half, -half, b.size, b.size, r);
+      else ctx.rect(-half, -half, b.size, b.size);
+      ctx.fill();
+    }
+    ctx.shadowBlur = 0;
+
+    /* material texture */
+    this._archMatTex(ctx, b.mat, half, b.shape);
+
+    /* outline */
+    ctx.strokeStyle = 'rgba(255,255,255,0.38)'; ctx.lineWidth = 2;
+    if (b.shape === 'circle') { ctx.beginPath(); ctx.arc(0, 0, half, 0, Math.PI * 2); ctx.stroke(); }
+    else {
+      const r = Math.min(10, half * 0.25);
+      if (ctx.roundRect) ctx.roundRect(-half, -half, b.size, b.size, r);
+      else ctx.rect(-half, -half, b.size, b.size);
+      ctx.stroke();
+    }
+    ctx.restore();
+
+    /* name tag below body */
+    ctx.save();
+    ctx.fillStyle = 'rgba(255,255,255,0.72)'; ctx.font = 'bold 11px Manrope,sans-serif'; ctx.textAlign = 'center';
+    ctx.fillText(mat.name, b.x, b.y + half + 16);
+    ctx.restore();
+  }
+
+  _archMatTex(ctx, matKey, half, shape) {
+    ctx.save(); ctx.globalAlpha = 0.60;
+    if (matKey === 'wood' || matKey === 'cork') {
+      ctx.strokeStyle = 'rgba(0,0,0,0.18)'; ctx.lineWidth = 1.5;
+      if (shape === 'circle') {
+        for (let r = half * 0.35; r < half; r += half * 0.30) {
+          ctx.beginPath(); ctx.arc(0, 0, r, 0, Math.PI * 2); ctx.stroke();
+        }
+      } else {
+        for (let y2 = -half + 10; y2 < half; y2 += 10) {
+          ctx.beginPath(); ctx.moveTo(-half + 3, y2); ctx.lineTo(half - 3, y2); ctx.stroke();
+        }
+      }
+    } else if (['iron','gold','aluminum','glass','plastic'].includes(matKey)) {
+      const g = ctx.createRadialGradient(-half * 0.3, -half * 0.3, 0, 0, 0, half * 1.1);
+      g.addColorStop(0, 'rgba(255,255,255,0.55)'); g.addColorStop(0.45, 'rgba(255,255,255,0.12)'); g.addColorStop(1, 'rgba(0,0,0,0.28)');
+      ctx.fillStyle = g;
+      if (shape === 'circle') { ctx.beginPath(); ctx.arc(0, 0, half, 0, Math.PI * 2); ctx.fill(); }
+      else ctx.fillRect(-half, -half, half * 2, half * 2);
+    } else if (matKey === 'ice') {
+      ctx.strokeStyle = 'rgba(180,240,255,0.65)'; ctx.lineWidth = 1.5;
+      ctx.beginPath(); ctx.moveTo(-half * 0.5, -half * 0.5); ctx.lineTo(half * 0.5, half * 0.5); ctx.stroke();
+      ctx.beginPath(); ctx.moveTo(half * 0.5, -half * 0.5); ctx.lineTo(-half * 0.5, half * 0.5); ctx.stroke();
+    } else if (matKey === 'styrofoam') {
+      ctx.fillStyle = 'rgba(255,255,255,0.40)';
+      for (let i = 0; i < 6; i++) {
+        const ax = Math.cos(i * 1.047) * half * 0.52, ay = Math.sin(i * 1.047) * half * 0.52;
+        ctx.beginPath(); ctx.arc(ax, ay, half * 0.09, 0, Math.PI * 2); ctx.fill();
+      }
+    }
+    ctx.restore();
+  }
+
+  _archDrawForces(ctx, b, liq) {
+    const mat  = HydroSim.MATERIALS[b.mat];
+    const half = b.size / 2;
+
+    /* buoyancy arrows only when partly submerged */
+    const FA_rel = (liq.rho / mat.rho) * b.submergedFrac; /* relative to mg */
+    const showFA = b.submergedFrac > 0.01;
+    const BASE   = 54;
+    const maxRel = Math.max(FA_rel, 1.0, 0.001);
+    const Fa_px  = showFA ? Math.max(22, Math.min(90, (FA_rel / maxRel) * BASE)) : 0;
+    const mg_px  = Math.max(22, Math.min(90, (1.0 / maxRel) * BASE));
+
+    const lx = b.x - half - 20, rx = b.x + half + 20;
+    if (showFA) this._drawArrow(ctx, lx, b.y, 0, -Fa_px, '#06D6E0', 3.5, 'Fₐ');
+    this._drawArrow(ctx, rx, b.y, 0, mg_px, '#F15BB5', 3.5, 'mg');
+  }
+
+  _archDrawPanel(ctx, x, y, w, h, liq) {
+    /* background */
+    ctx.save();
+    ctx.fillStyle = 'rgba(6,4,20,0.78)'; ctx.strokeStyle = 'rgba(255,255,255,0.07)'; ctx.lineWidth = 1;
+    if (ctx.roundRect) ctx.roundRect(x, y, w, h, 10); else ctx.rect(x, y, w, h);
+    ctx.fill(); ctx.stroke(); ctx.restore();
+
+    if (!this._bodies.length) {
+      ctx.fillStyle = 'rgba(255,255,255,0.20)'; ctx.font = '12px Manrope,sans-serif'; ctx.textAlign = 'center';
+      ctx.fillText('+ Добавьте тело', x + w / 2, y + h / 2);
+      return;
+    }
+
+    const b   = this._bodies[0];
+    const mat = HydroSim.MATERIALS[b.mat];
+    const FA  = liq.rho * this.g * b.volume * b.submergedFrac;
+    const mg  = mat.rho * b.volume * this.g;
+    const state = mat.rho < liq.rho * 0.99 ? 'ВСПЛЫВАЕТ'
+                : mat.rho > liq.rho * 1.01 ? 'ТОНЕТ' : 'ВЗВЕШЕНО';
+    const stC   = state === 'ВСПЛЫВАЕТ' ? '#06D6A0' : state === 'ТОНЕТ' ? '#F15BB5' : '#FFD166';
+    const pulse = state !== 'ВЗВЕШЕНО' ? 0.7 + Math.sin(this._t * 0.004) * 0.3 : 1.0;
+
+    const pad = 11, lh = 20;
+    let cy = y + 20;
+
+    /* ── state badge ── */
+    ctx.save();
+    ctx.fillStyle = stC + '1E'; ctx.strokeStyle = stC + '66'; ctx.lineWidth = 1.5;
+    if (ctx.roundRect) ctx.roundRect(x + pad, cy - 15, w - pad * 2, 30, 7);
+    else ctx.rect(x + pad, cy - 15, w - pad * 2, 30);
+    ctx.fill(); ctx.stroke();
+    ctx.globalAlpha = pulse; ctx.fillStyle = stC;
+    ctx.font = 'bold 14px Manrope,sans-serif'; ctx.textAlign = 'center';
+    ctx.shadowColor = stC; ctx.shadowBlur = 10;
+    ctx.fillText(state, x + w / 2, cy + 4);
+    ctx.globalAlpha = 1; ctx.shadowBlur = 0; ctx.restore();
+    cy += 38;
+
+    /* ── separator ── */
+    ctx.save(); ctx.strokeStyle = 'rgba(255,255,255,0.07)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(x + pad, cy); ctx.lineTo(x + w - pad, cy); ctx.stroke(); ctx.restore();
+    cy += 13;
+
+    /* ── material + liquid ── */
+    ctx.save(); ctx.font = '10px Manrope,sans-serif'; ctx.textAlign = 'left';
+    ctx.fillStyle = 'rgba(255,255,255,0.32)'; ctx.fillText('МАТЕРИАЛ', x + pad, cy); cy += lh * 0.8;
+    ctx.fillStyle = mat.color; ctx.fillRect(x + pad, cy - 11, 12, 12);
+    ctx.strokeStyle = 'rgba(255,255,255,0.18)'; ctx.lineWidth = 0.5; ctx.strokeRect(x + pad, cy - 11, 12, 12);
+    ctx.fillStyle = '#fff'; ctx.font = '12px Manrope,sans-serif'; ctx.fillText(mat.name, x + pad + 16, cy);
+    cy += lh * 0.7;
+    ctx.fillStyle = 'rgba(255,255,255,0.48)'; ctx.font = '11px "JetBrains Mono",monospace';
+    ctx.fillText('ρт = ' + mat.rho + ' кг/м³', x + pad, cy); cy += lh * 0.9;
+    ctx.fillText('ρж = ' + liq.rho + ' кг/м³', x + pad, cy); cy += lh * 1.2; ctx.restore();
+
+    /* ── force bars ── */
+    ctx.save(); ctx.font = '10px Manrope,sans-serif'; ctx.textAlign = 'left';
+    ctx.fillStyle = 'rgba(255,255,255,0.32)'; ctx.fillText('СИЛЫ', x + pad, cy); cy += lh * 0.85;
+    const barW  = w - pad * 2;
+    const maxF  = Math.max(FA, mg, 1e-14);
+    const faW   = Math.max(3, (FA / maxF) * barW);
+    const mgW   = Math.max(3, (mg / maxF) * barW);
+
+    /* Fа row */
+    ctx.fillStyle = 'rgba(6,214,224,0.12)'; ctx.fillRect(x + pad, cy - 12, barW, 17);
+    ctx.fillStyle = '#06D6E0'; ctx.fillRect(x + pad, cy - 12, faW, 17);
+    ctx.fillStyle = '#fff'; ctx.font = '10px "JetBrains Mono",monospace';
+    ctx.fillText('Fа ↑', x + pad + 3, cy); ctx.textAlign = 'right';
+    ctx.fillText(FA.toFixed(5), x + pad + barW - 2, cy); ctx.textAlign = 'left';
+    cy += lh * 1.05;
+
+    /* mg row */
+    ctx.fillStyle = 'rgba(241,91,181,0.12)'; ctx.fillRect(x + pad, cy - 12, barW, 17);
+    ctx.fillStyle = '#F15BB5'; ctx.fillRect(x + pad, cy - 12, mgW, 17);
+    ctx.fillStyle = '#fff';
+    ctx.fillText('mg ↓', x + pad + 3, cy); ctx.textAlign = 'right';
+    ctx.fillText(mg.toFixed(5), x + pad + barW - 2, cy); ctx.textAlign = 'left';
+    cy += lh * 1.35; ctx.restore();
+
+    /* ── density ratio bar ── */
+    ctx.save(); ctx.font = '10px Manrope,sans-serif'; ctx.fillStyle = 'rgba(255,255,255,0.32)';
+    const ratio = (liq.rho / mat.rho);
+    ctx.fillText('ρж / ρт = ' + (ratio).toFixed(2), x + pad, cy); cy += lh * 0.85;
+    const rbW = w - pad * 2;
+    /* bar covers ratio 0..4; mark at ratio=1 */
+    const normR  = Math.min(ratio / 4, 1.0);
+    const mark1  = x + pad + rbW * 0.25;          /* ratio = 1 position */
+    ctx.fillStyle = 'rgba(255,255,255,0.07)'; ctx.fillRect(x + pad, cy - 10, rbW, 13);
+    const rg = ctx.createLinearGradient(x + pad, 0, x + pad + rbW, 0);
+    rg.addColorStop(0, '#F15BB5'); rg.addColorStop(0.25, '#FFD166'); rg.addColorStop(1, '#06D6A0');
+    ctx.fillStyle = rg; ctx.fillRect(x + pad, cy - 10, normR * rbW, 13);
+    /* cursor on bar */
+    const curX = x + pad + normR * rbW;
+    ctx.fillStyle = '#fff'; ctx.fillRect(curX - 2, cy - 13, 4, 19);
+    /* neutral marker */
+    ctx.fillStyle = 'rgba(255,255,255,0.45)'; ctx.fillRect(mark1 - 1, cy - 13, 2, 19);
+    ctx.fillStyle = 'rgba(255,255,255,0.30)'; ctx.font = '8px monospace'; ctx.textAlign = 'center';
+    ctx.fillText('=1', mark1, cy + 14);
+    ctx.restore();
+  }
+
+  /* ═══════════════════════════════════════════════════
+     HELPERS — RENDERING
+  ═══════════════════════════════════════════════════ */
+
+  _drawGlassVessel(ctx, x, y, w, h) {
+    ctx.save();
+    /* thick wall gradient — left */
+    const lG = ctx.createLinearGradient(x, 0, x + 14, 0);
+    lG.addColorStop(0,   'rgba(160,200,255,0.65)');
+    lG.addColorStop(0.5, 'rgba(160,200,255,0.30)');
+    lG.addColorStop(1,   'rgba(160,200,255,0.05)');
+    ctx.fillStyle = lG; ctx.fillRect(x, y, 14, h + 14);
+    /* right */
+    const rG = ctx.createLinearGradient(x + w - 14, 0, x + w, 0);
+    rG.addColorStop(0,   'rgba(160,200,255,0.05)');
+    rG.addColorStop(0.5, 'rgba(160,200,255,0.25)');
+    rG.addColorStop(1,   'rgba(160,200,255,0.60)');
+    ctx.fillStyle = rG; ctx.fillRect(x + w - 14, y, 14, h + 14);
+    /* bottom */
+    const bG = ctx.createLinearGradient(0, y + h, 0, y + h + 14);
+    bG.addColorStop(0, 'rgba(160,200,255,0.35)');
+    bG.addColorStop(1, 'rgba(0,0,0,0)');
+    ctx.fillStyle = bG; ctx.fillRect(x, y + h, w, 14);
+    /* outline */
+    ctx.strokeStyle = 'rgba(200,225,255,0.55)'; ctx.lineWidth = 2.5;
+    ctx.beginPath();
+    ctx.moveTo(x + 2, y); ctx.lineTo(x + 2, y + h + 12); ctx.lineTo(x + w - 2, y + h + 12); ctx.lineTo(x + w - 2, y);
+    ctx.stroke();
+    /* inner reflection */
+    ctx.strokeStyle = 'rgba(255,255,255,0.18)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(x + 6, y); ctx.lineTo(x + 6, y + h); ctx.stroke();
+    ctx.restore();
+  }
+
+  _fillLiquidRect(ctx, x, y, w, h, color) {
+    ctx.save();
+    const g = ctx.createLinearGradient(0, y, 0, y + h);
+    g.addColorStop(0,    color + '33');
+    g.addColorStop(0.25, color + '66');
+    g.addColorStop(0.75, color + 'AA');
+    g.addColorStop(1,    color + 'CC');
+    ctx.fillStyle = g;
+    ctx.fillRect(x, y, w, h);
+    /* deep shadow at bottom */
+    const dG = ctx.createLinearGradient(0, y + h * 0.75, 0, y + h);
+    dG.addColorStop(0, 'rgba(0,0,30,0)');
+    dG.addColorStop(1, 'rgba(0,0,30,0.22)');
+    ctx.fillStyle = dG; ctx.fillRect(x, y + h * 0.75, w, h * 0.25);
+    ctx.restore();
+  }
+
+  _drawWaveSurface(ctx, x, y, w, color, wt) {
+    ctx.save();
+    ctx.strokeStyle = color + 'CC'; ctx.lineWidth = 1.8;
+    ctx.beginPath();
+    for (let px = x; px <= x + w; px += 2) {
+      const wy = y + Math.sin(px * 0.055 + wt) * 2.5 + Math.sin(px * 0.13 + wt * 1.3) * 1.0;
+      px === x ? ctx.moveTo(px, wy) : ctx.lineTo(px, wy);
+    }
+    ctx.stroke();
+    /* surface sheen */
+    ctx.strokeStyle = 'rgba(255,255,255,0.14)'; ctx.lineWidth = 1;
+    ctx.beginPath();
+    for (let px = x; px <= x + w; px += 2) {
+      const wy = y + Math.sin(px * 0.055 + wt + 0.4) * 2.5;
+      px === x ? ctx.moveTo(px, wy - 2) : ctx.lineTo(px, wy - 2);
+    }
+    ctx.stroke();
+    ctx.restore();
+  }
+
+  _drawLiquidShaped(ctx, x, y, w, h, frac, color, shape, wt) {
+    const liqH = h * Math.max(0, Math.min(frac, 1));
+    const liqY = y + h - liqH;
+    if (liqH < 2) return;
+    ctx.save();
+    /* shape clip */
+    ctx.beginPath();
+    switch (shape) {
+      case 'wide':      ctx.rect(x - w*0.15, y, w*1.3, h); break;
+      case 'narrow':    ctx.rect(x + w*0.2, y, w*0.6, h); break;
+      case 'trapezoid': {
+        const bl = x - w*0.12, br = x+w+w*0.12, tl = x, tr = x+w;
+        ctx.moveTo(tl, y); ctx.lineTo(bl, y+h); ctx.lineTo(br, y+h); ctx.lineTo(tr, y); ctx.closePath();
+        break;
+      }
+      default: ctx.rect(x, y, w, h);
+    }
+    ctx.clip();
+    const g = ctx.createLinearGradient(0, liqY, 0, y + h);
+    g.addColorStop(0,   color + '44'); g.addColorStop(0.4, color + '88'); g.addColorStop(1, color + 'BB');
+    ctx.fillStyle = g; ctx.fillRect(x - w*0.2, liqY, w*1.4, liqH);
+    ctx.restore();
+  }
+
+  _drawVesselShaped(ctx, x, y, w, h, shape) {
+    ctx.save();
+    ctx.strokeStyle = 'rgba(200,225,255,0.55)'; ctx.lineWidth = 2.5;
+    ctx.shadowColor = 'rgba(180,210,255,0.20)'; ctx.shadowBlur = 6;
+    ctx.beginPath();
+    switch (shape) {
+      case 'wide':
+        ctx.moveTo(x - w*0.15, y); ctx.lineTo(x - w*0.15, y+h); ctx.lineTo(x+w+w*0.15, y+h); ctx.lineTo(x+w+w*0.15, y);
+        break;
+      case 'narrow':
+        ctx.moveTo(x + w*0.2, y); ctx.lineTo(x+w*0.2, y+h); ctx.lineTo(x+w*0.8, y+h); ctx.lineTo(x+w*0.8, y);
+        break;
+      case 'trapezoid':
+        ctx.moveTo(x, y); ctx.lineTo(x-w*0.12, y+h); ctx.lineTo(x+w+w*0.12, y+h); ctx.lineTo(x+w, y);
+        break;
+      default:
+        ctx.moveTo(x, y); ctx.lineTo(x, y+h); ctx.lineTo(x+w, y+h); ctx.lineTo(x+w, y);
+    }
+    ctx.stroke();
+    /* inner reflection strip */
+    ctx.shadowBlur = 0; ctx.strokeStyle = 'rgba(255,255,255,0.14)'; ctx.lineWidth = 1;
+    const lx = shape === 'wide' ? x - w*0.15 + 5 : shape === 'narrow' ? x+w*0.2+5 : x+5;
+    ctx.beginPath(); ctx.moveTo(lx, y); ctx.lineTo(lx, y+h); ctx.stroke();
+    ctx.restore();
+  }
+
+  _shapeRect(x, w, shape) {
+    if (shape === 'wide')   return [x - w*0.15, w*1.3];
+    if (shape === 'narrow') return [x + w*0.2,  w*0.6];
+    return [x, w];
+  }
+
+  _drawArrow(ctx, x, y, dx, dy, color, lw = 3, label) {
+    const len = Math.hypot(dx, dy);
+    if (len < 2) return;
+    ctx.save();
+    ctx.strokeStyle = color; ctx.fillStyle = color;
+    ctx.lineWidth = lw; ctx.shadowColor = color; ctx.shadowBlur = 7;
+    ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x+dx, y+dy); ctx.stroke();
+    const a = Math.atan2(dy, dx), ar = 11;
+    ctx.beginPath();
+    ctx.moveTo(x+dx, y+dy);
+    ctx.lineTo(x+dx - ar*Math.cos(a-0.35), y+dy - ar*Math.sin(a-0.35));
+    ctx.lineTo(x+dx - ar*Math.cos(a+0.35), y+dy - ar*Math.sin(a+0.35));
+    ctx.closePath(); ctx.fill();
+    if (label) {
+      ctx.shadowBlur = 0;
+      const lx = x + dx * 0.5 + (dy === 0 ? 0 : 16);
+      const ly = y + dy * 0.5 + (dx === 0 ? -10 : -6);
+      /* pill background */
+      ctx.font = 'bold 12px monospace';
+      const tw2 = ctx.measureText(label).width + 8;
+      ctx.fillStyle = 'rgba(0,0,0,0.55)';
+      ctx.beginPath();
+      if (ctx.roundRect) ctx.roundRect(lx - tw2/2, ly - 9, tw2, 16, 4); else ctx.rect(lx - tw2/2, ly - 9, tw2, 16);
+      ctx.fill();
+      ctx.fillStyle = color; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText(label, lx, ly - 1); ctx.textBaseline = 'alphabetic';
+    }
+    ctx.restore();
+  }
+
+  _drawRuler(ctx, x, y, h, labelTop, labelBot) {
+    ctx.save();
+    ctx.strokeStyle = 'rgba(255,255,255,0.25)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(x+8, y); ctx.lineTo(x+8, y+h); ctx.stroke();
+    for (let i = 0; i <= 10; i++) {
+      const ty2 = y + (i/10)*h, tw2 = i%5===0 ? 10 : 5;
+      ctx.beginPath(); ctx.moveTo(x+8-tw2, ty2); ctx.lineTo(x+8, ty2); ctx.stroke();
+      if (i % 5 === 0) {
+        ctx.fillStyle = 'rgba(255,255,255,0.4)'; ctx.font = '10px monospace'; ctx.textAlign = 'right';
+        ctx.fillText(i === 0 ? labelTop : (i === 10 ? labelBot : ''), x+5, ty2+4);
+      }
+    }
+    ctx.restore();
+  }
+
+  _drawGauge(ctx, cx, cy, val, maxVal, unit, r = 44) {
+    const frac   = Math.min(val / Math.max(maxVal, 1), 1);
+    const startA = Math.PI * 0.75, endA = Math.PI * 2.25;
+    const valA   = startA + (endA - startA) * frac;
+    const color  = this._lerpColor('#06D6E0', '#F15BB5', frac);
+    ctx.save();
+    /* outer ring */
+    ctx.strokeStyle = 'rgba(255,255,255,0.06)'; ctx.lineWidth = r * 0.22 + 4;
+    ctx.beginPath(); ctx.arc(cx, cy, r, startA, endA); ctx.stroke();
+    /* track */
+    ctx.strokeStyle = 'rgba(255,255,255,0.08)'; ctx.lineWidth = r * 0.22;
+    ctx.beginPath(); ctx.arc(cx, cy, r, startA, endA); ctx.stroke();
+    /* value arc */
+    ctx.strokeStyle = color; ctx.shadowColor = color; ctx.shadowBlur = 12;
+    ctx.beginPath(); ctx.arc(cx, cy, r, startA, valA); ctx.stroke();
+    ctx.shadowBlur = 0;
+    /* tick marks */
+    ctx.strokeStyle = 'rgba(255,255,255,0.25)'; ctx.lineWidth = 1;
+    for (let i = 0; i <= 4; i++) {
+      const a = startA + (endA - startA) * (i / 4);
+      ctx.beginPath();
+      ctx.moveTo(cx + (r - 8)*Math.cos(a), cy + (r - 8)*Math.sin(a));
+      ctx.lineTo(cx + (r + 3)*Math.cos(a), cy + (r + 3)*Math.sin(a));
+      ctx.stroke();
+    }
+    /* needle */
+    ctx.strokeStyle = '#fff'; ctx.lineWidth = 2;
+    ctx.beginPath(); ctx.moveTo(cx, cy);
+    ctx.lineTo(cx + (r - 12)*Math.cos(valA), cy + (r - 12)*Math.sin(valA)); ctx.stroke();
+    ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(cx, cy, 4, 0, Math.PI*2); ctx.fill();
+    /* value */
+    ctx.fillStyle = color; ctx.font = 'bold 13px monospace'; ctx.textAlign = 'center';
+    ctx.fillText(Math.round(val) + ' ' + unit, cx, cy + r + 20);
+    ctx.restore();
+  }
+
+  _drawInfoPanel(ctx, x, y, w, h, rows) {
+    if (w < 50) return;
+    ctx.save();
+    ctx.fillStyle = 'rgba(8,6,20,0.55)'; ctx.strokeStyle = 'rgba(255,255,255,0.07)'; ctx.lineWidth = 1;
+    ctx.beginPath();
+    if (ctx.roundRect) ctx.roundRect(x, y, w, Math.min(h, rows.length * 22 + 20), 8);
+    else ctx.rect(x, y, w, rows.length * 22 + 20);
+    ctx.fill(); ctx.stroke();
+    ctx.font = '12px Manrope,sans-serif'; ctx.textAlign = 'left';
+    rows.forEach((r, i) => {
+      const ry = y + 16 + i * 22;
+      ctx.fillStyle = 'rgba(255,255,255,0.35)'; ctx.fillText(r.label, x + 10, ry);
+      ctx.fillStyle = r.color || 'rgba(255,255,255,0.85)';
+      ctx.textAlign = 'right'; ctx.fillText(r.value, x + w - 10, ry);
+      ctx.textAlign = 'left';
+    });
+    ctx.restore();
+  }
+
+  _labelPill(ctx, x, y, text, color) {
+    ctx.save();
+    ctx.font = 'bold 12px Manrope,sans-serif';
+    const tw2 = ctx.measureText(text).width + 16;
+    ctx.fillStyle = 'rgba(0,0,0,0.55)';
+    ctx.beginPath();
+    if (ctx.roundRect) ctx.roundRect(x, y - 11, tw2, 20, 5); else ctx.rect(x, y - 11, tw2, 20);
+    ctx.fill();
+    ctx.fillStyle = color; ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+    ctx.fillText(text, x + 8, y - 1); ctx.textBaseline = 'alphabetic';
+    ctx.restore();
+  }
+
+  _drawFormula(ctx, x, y, text, color) {
+    ctx.save();
+    ctx.font = '12px "JetBrains Mono",monospace';
+    const tw2 = ctx.measureText(text).width;
+    const pad = 12, bh = 28;
+    let bx = x - (tw2 + pad*2) / 2;
+    bx = Math.max(4, Math.min((this.W||600) - tw2 - pad*2 - 4, bx));
+    const by = y - bh;
+    ctx.fillStyle = 'rgba(6,4,18,0.90)'; ctx.strokeStyle = color; ctx.lineWidth = 1.3;
+    ctx.shadowColor = color; ctx.shadowBlur = 6;
+    const rr = 7;
+    ctx.beginPath();
+    ctx.moveTo(bx+rr, by); ctx.lineTo(bx+tw2+pad*2-rr, by);
+    ctx.quadraticCurveTo(bx+tw2+pad*2, by, bx+tw2+pad*2, by+rr);
+    ctx.lineTo(bx+tw2+pad*2, by+bh-rr);
+    ctx.quadraticCurveTo(bx+tw2+pad*2, by+bh, bx+tw2+pad*2-rr, by+bh);
+    ctx.lineTo(bx+rr, by+bh); ctx.quadraticCurveTo(bx, by+bh, bx, by+bh-rr);
+    ctx.lineTo(bx, by+rr); ctx.quadraticCurveTo(bx, by, bx+rr, by);
+    ctx.closePath(); ctx.fill(); ctx.stroke();
+    ctx.shadowBlur = 0; ctx.fillStyle = color;
+    ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
+    ctx.fillText(text, bx+pad, by+bh/2); ctx.textBaseline = 'alphabetic';
+    ctx.restore();
+  }
+
+  /* ═══ Physics helpers ═══ */
+  _tankH_m()     { return 1.0; }
+  _recalcVessels() {
+    this._targetLevel = this._valveOpen ? this._liquidFrac * 0.82 : null;
+    if (!this._valveOpen) this._animLevel = null;
+  }
+
+  /* ═══ Events ═══ */
+  _bindEvents() {
+    this._onPD = e => this._pointerDown(e);
+    this._onPM = e => this._pointerMove(e);
+    this._onPU = () => { this._probe.dragging = false; };
+    this.canvas.addEventListener('pointerdown', this._onPD);
+    this.canvas.addEventListener('pointermove', this._onPM);
+    window.addEventListener('pointerup', this._onPU);
+  }
+  _cp(e) {
+    const r = this.canvas.getBoundingClientRect();
+    return { x: (e.clientX-r.left)*(this.W/r.width), y: (e.clientY-r.top)*(this.H/r.height) };
+  }
+  _pointerDown(e) {
+    if (this.mode !== 'pressure') return;
+    const { x, y } = this._cp(e);
+    const tw = Math.min(this.W*0.30, 200), tx = this.W*0.12, ty = this.H*0.10, th = this.H*0.72;
+    const pX = tx + tw*0.5, pY = ty + this._probe.vy * th;
+    if (Math.hypot(x-pX, y-pY) < 22) { this._probe.dragging = true; this.canvas.setPointerCapture(e.pointerId); }
+  }
+  _pointerMove(e) {
+    if (!this._probe.dragging) return;
+    const { y } = this._cp(e);
+    const ty = this.H*0.10, th = this.H*0.72;
+    this._probe.vy = Math.max(0.02, Math.min(0.98, (y-ty)/th));
+  }
+
+  /* ═══ Utils ═══ */
+  _lerpColor(c1, c2, t) {
+    const h  = s => parseInt(s.slice(1), 16);
+    const p  = (a, b, t2) => Math.round(Math.max(0, Math.min(255, a + (b-a)*t2)));
+    const v1 = h(c1), v2 = h(c2);
+    return '#' + [[(v1>>16)&255,(v2>>16)&255],[(v1>>8)&255,(v2>>8)&255],[v1&255,v2&255]]
+      .map(([a,b]) => p(a,b,t).toString(16).padStart(2,'0')).join('');
+  }
+  _notify() { if (this.onUpdate) try { this.onUpdate(this.getInfo()); } catch {} }
+}
diff --git a/frontend/js/labs/isoprocess.js b/frontend/js/labs/isoprocess.js
index 611fe15..04c96aa 100644
--- a/frontend/js/labs/isoprocess.js
+++ b/frontend/js/labs/isoprocess.js
@@ -56,6 +56,7 @@ class IsoprocessSim {
 
   setProcess(p) { this.process = p; this.draw(); this._emit(); }
   setGamma(g)   { this.gamma = +g; this.draw(); this._emit(); }
+  getParams() { return { P1: this.P1, V1: this.V1, process: this.process }; }
   setParams({ P1, V1 } = {}) {
     if (P1 !== undefined) this.P1 = Math.max(0.4, Math.min(8, +P1));
     if (V1 !== undefined) this.V1 = Math.max(2, Math.min(28, +V1));
diff --git a/frontend/js/labs/mirror.js b/frontend/js/labs/mirror.js
index d16dafe..34b5062 100644
--- a/frontend/js/labs/mirror.js
+++ b/frontend/js/labs/mirror.js
@@ -84,6 +84,7 @@ class MirrorSim {
     this.draw(); this._emit();
   }
 
+  getParams() { return { f: this.f, d: this.d, h: this.h }; }
   setParams({ f, d, h } = {}) {
     if (f !== undefined) this.f = Math.max(30, Math.min(300, +f));
     if (d !== undefined) this.d = Math.max(30, Math.min(490, +d));
diff --git a/frontend/js/labs/normaldist.js b/frontend/js/labs/normaldist.js
index e75bff6..3d6bd6e 100644
--- a/frontend/js/labs/normaldist.js
+++ b/frontend/js/labs/normaldist.js
@@ -34,6 +34,7 @@ class NormalDistSim {
     this.W = w; this.H = h;
   }
 
+  getParams() { return { mu: this.mu, sigma: this.sigma, shade: this.shade, zLow: this.zLow, zHigh: this.zHigh }; }
   setParams({ mu, sigma, shade, zLow, zHigh } = {}) {
     if (mu    !== undefined) this.mu    = +mu;
     if (sigma !== undefined) this.sigma = Math.max(0.1, +sigma);
diff --git a/frontend/js/labs/pendulum.js b/frontend/js/labs/pendulum.js
index a2a2976..88f337a 100644
--- a/frontend/js/labs/pendulum.js
+++ b/frontend/js/labs/pendulum.js
@@ -51,6 +51,9 @@ class PendulumSim {
     this.W = w; this.H = h;
   }
 
+  getParams() {
+    return { L: this.L, g: this.g, theta: +(this.theta * 180 / Math.PI).toFixed(3), damping: this.damping };
+  }
   setParams({ L, g, theta, damping } = {}) {
     if (L       !== undefined) this.L       = +L;
     if (g       !== undefined) this.g       = +g;
diff --git a/frontend/js/labs/probability.js b/frontend/js/labs/probability.js
index d6e3122..45455e3 100644
--- a/frontend/js/labs/probability.js
+++ b/frontend/js/labs/probability.js
@@ -60,6 +60,7 @@ class ProbabilitySim {
     this.W = w; this.H = h;
   }
 
+  getParams() { return { mode: this.mode, trials: this.trials, speed: this.speed }; }
   setParams({ mode, trials, speed } = {}) {
     if (mode   !== undefined) this.mode   = mode;
     if (trials !== undefined) this.trials = Math.max(1, +trials);
diff --git a/frontend/js/labs/projectile.js b/frontend/js/labs/projectile.js
index d43ec9e..b9cfd9a 100644
--- a/frontend/js/labs/projectile.js
+++ b/frontend/js/labs/projectile.js
@@ -88,6 +88,11 @@ class ProjectileSim {
     this._cw = w; this._ch = h;
   }
 
+  getParams() {
+    return { v0: this.v0, angle: this.angle, h0: this.h0, g: this.g,
+             drag: this.drag, Cd: this.Cd, mass: this.mass, wind: this.wind,
+             bounce: this.bounce, restitution: this.restitution };
+  }
   setParams({ v0, angle, h0, g, drag, Cd, mass, wind, bounce, restitution } = {}) {
     if (v0          !== undefined) this.v0          = +v0;
     if (angle       !== undefined) this.angle       = +angle;
diff --git a/frontend/js/labs/quadratic.js b/frontend/js/labs/quadratic.js
index 0d84b5c..99ecda2 100644
--- a/frontend/js/labs/quadratic.js
+++ b/frontend/js/labs/quadratic.js
@@ -43,6 +43,7 @@ class QuadraticSim {
     this.W = w; this.H = h;
   }
 
+  getParams() { return { a: this.a, b: this.b, c: this.c }; }
   setParams({ a, b, c } = {}) {
     if (a !== undefined) this.a = +a;
     if (b !== undefined) this.b = +b;
diff --git a/frontend/js/labs/refraction.js b/frontend/js/labs/refraction.js
index 5470eb0..77babb3 100644
--- a/frontend/js/labs/refraction.js
+++ b/frontend/js/labs/refraction.js
@@ -42,6 +42,7 @@ class RefractionSim {
     this.W = w; this.H = h;
   }
 
+  getParams() { return { n1: this.n1, n2: this.n2, angle: this.angle, dispersion: this.dispersion }; }
   setParams({ n1, n2, angle, dispersion } = {}) {
     if (n1    !== undefined) this.n1    = Math.max(1.0, Math.min(3.0, +n1));
     if (n2    !== undefined) this.n2    = Math.max(1.0, Math.min(3.0, +n2));
diff --git a/frontend/js/labs/thinlens.js b/frontend/js/labs/thinlens.js
index ed4a0b9..b384099 100644
--- a/frontend/js/labs/thinlens.js
+++ b/frontend/js/labs/thinlens.js
@@ -39,6 +39,7 @@ class ThinLensSim {
     this.W = w; this.H = h;
   }
 
+  getParams() { return { f: this.f, d: this.d, h: this.h }; }
   setParams({ f, d, h } = {}) {
     if (f !== undefined) this.f = Math.max(-200, Math.min(200, +f));
     if (d !== undefined) this.d = Math.max(30, Math.min(400, +d));
diff --git a/frontend/js/labs/titration.js b/frontend/js/labs/titration.js
index 640f1f5..d97be34 100644
--- a/frontend/js/labs/titration.js
+++ b/frontend/js/labs/titration.js
@@ -67,6 +67,7 @@ class TitrationSim {
 
   /* ── Public API ─────────────────────────────────────────── */
 
+  getParams() { return { acidConc: this.acidConc, baseConc: this.baseConc, acidVol: this.acidVol, indicator: this.indicator, acidType: this.acidType }; }
   setParams({ acidConc, baseConc, acidVol, indicator, acidType } = {}) {
     if (acidConc  !== undefined) this.acidConc  = Math.max(0.05, Math.min(1.0, +acidConc));
     if (baseConc  !== undefined) this.baseConc  = Math.max(0.05, Math.min(1.0, +baseConc));
diff --git a/frontend/js/labs/triangle.js b/frontend/js/labs/triangle.js
index d9b7756..574aa9c 100644
--- a/frontend/js/labs/triangle.js
+++ b/frontend/js/labs/triangle.js
@@ -792,7 +792,7 @@ class TriangleSim {
 
     // Formula
     this._drawFormulaBox(ctx, this.W, this.H,
-      `${oppSideName}² = ${adjSide1Name}² + ${adjSide2Name}² − 2·${adjSide1Name}·${adjSide2Name}·cos${angName}  <svg class="ic" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>  ${c2.toFixed(2)} = ${check.toFixed(2)}`,
+      `${oppSideName}² = ${adjSide1Name}² + ${adjSide2Name}² \u2212 2\u00B7${adjSide1Name}\u00B7${adjSide2Name}\u00B7cos${angName}  \u2192  ${c2.toFixed(2)} = ${check.toFixed(2)}`,
       '#fbbf24');
 
     ctx.restore();
@@ -845,7 +845,7 @@ class TriangleSim {
     const diff = Math.abs(hypArea - (leg1Area + leg2Area));
     const statusCol = isRight ? '#22d55e' : '#f59e0b';
     const statusText = isRight
-      ? `<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>  ${leg1Name}² + ${leg2Name}² = ${hypName}²  (${(leg1Area + leg2Area).toFixed(2)} = ${hypArea.toFixed(2)})`
+      ? `\u2713  ${leg1Name}\u00B2 + ${leg2Name}\u00B2 = ${hypName}\u00B2  (${(leg1Area + leg2Area).toFixed(2)} = ${hypArea.toFixed(2)})`
       : `${leg1Name}² + ${leg2Name}² = ${(leg1Area + leg2Area).toFixed(2)}  ≠  ${hypName}² = ${hypArea.toFixed(2)}  (Δ = ${diff.toFixed(2)})`;
 
     this._drawFormulaBox(ctx, this.W, this.H, statusText, statusCol);
diff --git a/frontend/js/labs/waves.js b/frontend/js/labs/waves.js
index 087251a..c2be230 100644
--- a/frontend/js/labs/waves.js
+++ b/frontend/js/labs/waves.js
@@ -59,6 +59,10 @@ class WavesSim {
     this._emit();
   }
 
+  getParams() {
+    return { A1: this._A1, f1: this._f1, phi1: this._phi1, A2: this._A2, f2: this._f2, phi2: this._phi2,
+             n: this._n, speed: this._speed, mode: this._mode };
+  }
   setParams({ A1, f1, phi1, A2, f2, phi2, n, speed } = {}) {
     if (A1    !== undefined) this._A1    = Math.max(5,   Math.min(90, +A1));
     if (f1    !== undefined) this._f1    = Math.max(0.3, Math.min(4,  +f1));
diff --git a/frontend/js/whiteboard.js b/frontend/js/whiteboard.js
index daf7c14..edbaa52 100644
--- a/frontend/js/whiteboard.js
+++ b/frontend/js/whiteboard.js
@@ -75,14 +75,22 @@ class Whiteboard {
     this._fill      = false;
     this._lineStyle = 'solid';
     this._opacity   = 1.0;
+    // text tool settings
+    this._textFontSize   = 22;
+    this._textFontFamily = 'Manrope';
+    this._textBold       = false;
+    this._textItalic     = false;
     this._template  = opts.template  || 'blank';
     this._pageNum   = opts.pageNum   || 1;
+    this._stylusMultiplier = opts.stylusMultiplier ?? 0; // 0=disabled
+    this._effectiveWidth   = null;
 
     this._selectedIds = new Set();   // multi-select
     this._dragState   = null;
     this._clipboard   = null;
     this._lassoRect   = null;        // {x1,y1,x2,y2} rubber-band selection
     this._snapGuides  = [];          // [{axis:'x'|'y', pos:number}]
+    this._snapEnabled = true;        // snap guides on/off
     this._staticDirty = true;        // two-layer: re-render static when true
     this._overlays    = [];          // ruler/protractor overlays (not saved to DB)
     this._overlayDrag = null;        // {idx, type:'move'|'rotate'|'resize', ...}
@@ -114,12 +122,50 @@ class Whiteboard {
     this._textInputDocHandler  = null;   // document pointerdown handler for outside-click
     this._objectInput          = null;
     this._onObjectCreated        = opts.onObjectCreated || null;
+    this._onToolSwitch           = opts.onToolSwitch    || null;
     this._onFormulaInsert        = opts.onFormulaInsert || null;
     this._onCoordEdit            = opts.onCoordEdit        || null;
     this._onNumberLineEdit       = opts.onNumberLineEdit   || null;
     this._onCompassEdit          = opts.onCompassEdit      || null;
     this._editingFormulaStroke   = null;
     this._laserPos               = null;
+    this._laserTrail             = [];   // fade trail points (last 25)
+    this._pointerVx              = 0;    // last pointer virtual X (for eraser cursor)
+    this._pointerVy              = 0;
+    this._textAlign              = 'left'; // text alignment state
+    this._stickyColor            = null; // forced sticky bg color (null = random)
+    this._tableRows              = 3;    // table picker rows
+    this._tableCols              = 4;    // table picker cols
+
+    // Board theme
+    this._boardTheme   = opts.boardTheme || 'chalkboard';
+    this._bgNoiseCache = new Map(); // canvas element per theme
+
+    // Compass state machine
+    this._compassState        = 'idle'; // 'idle'|'setting-radius'|'waiting-arc'|'drawing-arc'
+    this._compassCenter       = null;
+    this._compassRadius       = 0;
+    this._compassArcStart     = 0;
+    this._compassArcSweep     = 0;
+    this._compassCurrentAngle = 0;
+    this._compassLastAngle    = 0;
+
+    // Mind map editing state
+    this._editingMindmapStroke   = null;  // compound stroke being edited node-by-node
+    this._selectedMindmapNodeId  = null;  // id of currently selected node within mindmap
+    this._mmNodeDragStart        = null;  // {nodeId, origRelX, origRelY, startVx, startVy}
+
+    // Smart connector anchor snapping
+    this._connSnapStart     = null;
+    this._connSnapEnd       = null;
+    this._connHoverShapeId  = null;
+
+    // rAF render gate — at most one render per browser frame
+    this._rafPending = false;
+
+    // Pause rendering when tab is hidden (resume on visibilitychange)
+    this._visHandler = () => { if (!document.hidden) this._doRender(); };
+    document.addEventListener('visibilitychange', this._visHandler);
 
     // dynamic overlay canvas (selection, snap guides, live strokes, laser)
     this._dynCanvas = document.createElement('canvas');
@@ -166,20 +212,29 @@ class Whiteboard {
 
   _bindEvents() {
     const c = this._canvas;
-    const onDown = e => { if (!this._readOnly) this._onPointerDown(e); };
+    const onDown = e => {
+      if (e.button === 1) { e.preventDefault(); this._beginPan(e); return; }
+      if (!this._readOnly) this._onPointerDown(e);
+    };
     const onMove = e => {
+      if (this._panStartCss) { this._onPointerMove(e); return; } // pan works for everyone
       if (!this._readOnly) { this._onPointerMove(e); return; }
       // readOnly: still broadcast cursor position if callback set
       if (this._onCursorMove) {
         const [vx, vy] = this._pointerPos(e);
         const now = Date.now();
-        if (now - this._cursorThrottle > 100) {
+        if (now - this._cursorThrottle > 33) {
           this._cursorThrottle = now;
           this._onCursorMove(vx, vy);
         }
       }
     };
-    const onUp   = e => { if (!this._readOnly) this._onPointerUp(e); };
+    const onUp = e => {
+      if (this._panStartCss) { this._onPointerUp(e); return; } // pan end for everyone
+      if (!this._readOnly) this._onPointerUp(e);
+    };
+    // Prevent browser auto-scroll cursor on middle-click
+    c.addEventListener('mousedown', e => { if (e.button === 1) e.preventDefault(); });
 
     c.addEventListener('pointerdown', onDown);
     c.addEventListener('pointermove', onMove);
@@ -199,6 +254,33 @@ class Whiteboard {
 
   _handleKeyDown(e) {
     if (this._readOnly) return;
+    // Mindmap keyboard shortcuts
+    if (this._editingMindmapStroke) {
+      const tag = document.activeElement?.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+      if ((e.key === 'Delete' || e.key === 'Backspace') && this._selectedMindmapNodeId) {
+        e.preventDefault();
+        this._deleteMindmapNode(this._editingMindmapStroke, this._selectedMindmapNodeId);
+        return;
+      }
+      if (e.key === 'Tab' && this._selectedMindmapNodeId) {
+        e.preventDefault();
+        this._addMindmapChild(this._editingMindmapStroke, this._selectedMindmapNodeId);
+        return;
+      }
+      if (e.key === 'Escape') {
+        this._editingMindmapStroke  = null;
+        this._selectedMindmapNodeId = null;
+        this._mmNodeDragStart       = null;
+        this.render();
+        return;
+      }
+      if ((e.key === 'F2' || e.key === 'Enter') && this._selectedMindmapNodeId) {
+        e.preventDefault();
+        this._editMindmapNodeText(this._editingMindmapStroke, this._selectedMindmapNodeId);
+        return;
+      }
+    }
     const tag = document.activeElement?.tagName;
     if (tag === 'INPUT' || tag === 'TEXTAREA' || document.activeElement?.isContentEditable) return;
 
@@ -210,7 +292,11 @@ class Whiteboard {
       if (this._selectedIds.size > 0) { e.preventDefault(); this.deleteSelected(); }
     }
     if (e.key === 'Escape') {
-      this._selectedIds.clear(); this._dragState = null; this._lassoRect = null; this.render();
+      if (this._tool === 'compass' && this._compassState !== 'idle') {
+        this._compassState = 'idle'; this._drawing = false; this.render();
+      } else {
+        this._selectedIds.clear(); this._dragState = null; this._lassoRect = null; this.render();
+      }
     }
     // Zoom shortcuts
     if ((e.ctrlKey || e.metaKey) && (e.key === '=' || e.key === '+')) { e.preventDefault(); this.zoomTo(this._zoom * 1.25); }
@@ -229,22 +315,49 @@ class Whiteboard {
   _isObjectStroke(s) {
     return s.tool === 'image' || s.tool === 'sticky' ||
            s.tool === 'formula' || s.tool === 'table' || s.tool === 'coordinate' ||
-           s.tool === 'numberline' || s.tool === 'compass';
+           s.tool === 'numberline' || s.tool === 'compass' || s.tool === 'mindmap';
   }
 
   _isResizableStroke(s) {
-    return this._isObjectStroke(s) || s.tool === 'shape' || s.tool === 'connector';
+    // Compass uses specialized handles, not corner resize; mindmap has its own node handles
+    return (this._isObjectStroke(s) && s.tool !== 'compass' && s.tool !== 'mindmap') || s.tool === 'shape' || s.tool === 'connector';
   }
 
   /* Returns {x, y, w, h} bounding box in virtual coords for any stroke type */
   _getStrokeBBox(stroke) {
     const d = stroke.data;
+    // Compass uses cx/cy/radius geometry
+    if (stroke.tool === 'compass') {
+      const pad = 40;
+      const r   = (d.radius || 50) + pad;
+      return { x: d.cx - r, y: d.cy - r, w: r * 2, h: r * 2 };
+    }
+    if (stroke.tool === 'mindmap') {
+      if (!d.nodes || !d.nodes.length) return { x: d.x - 100, y: d.y - 60, w: 200, h: 120 };
+      let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+      for (const n of d.nodes) {
+        const hw = (this._mmNodeDepth(d, n.id) === 0 ? 140 : 120) / 2 + 30;
+        const hh = (this._mmNodeDepth(d, n.id) === 0 ? 54  : 44)  / 2 + 20;
+        minX = Math.min(minX, d.x + n.relX - hw);
+        maxX = Math.max(maxX, d.x + n.relX + hw);
+        minY = Math.min(minY, d.y + n.relY - hh);
+        maxY = Math.max(maxY, d.y + n.relY + hh);
+      }
+      return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+    }
     if (this._isObjectStroke(stroke)) return { x: d.x, y: d.y, w: d.w, h: d.h };
     if (stroke.tool === 'text') {
       const lines = (d.text || '').split('\n').length;
       return { x: d.x, y: d.y, w: 400, h: (d.fontSize || 22) * 1.45 * (lines + 1) };
     }
-    if (stroke.tool === 'shape' || stroke.tool === 'connector') {
+    if (stroke.tool === 'connector') {
+      const ep = this._getConnectorEndpoints(d);
+      return {
+        x: Math.min(ep.x1, ep.x2), y: Math.min(ep.y1, ep.y2),
+        w: Math.abs(ep.x2 - ep.x1) || 20, h: Math.abs(ep.y2 - ep.y1) || 20,
+      };
+    }
+    if (stroke.tool === 'shape') {
       return {
         x: Math.min(d.x1, d.x2), y: Math.min(d.y1, d.y2),
         w: Math.abs(d.x2 - d.x1) || 20, h: Math.abs(d.y2 - d.y1) || 20,
@@ -261,10 +374,16 @@ class Whiteboard {
   /* Move any stroke by virtual delta */
   _moveStroke(stroke, dvx, dvy) {
     const d = stroke.data;
+    if (stroke.tool === 'mindmap') { stroke.data.x += dvx; stroke.data.y += dvy; return; }
+    if (stroke.tool === 'compass') { d.cx += dvx; d.cy += dvy; return; }
     if (this._isObjectStroke(stroke) || stroke.tool === 'text') {
       d.x += dvx; d.y += dvy;
-    } else if (stroke.tool === 'shape' || stroke.tool === 'connector') {
+    } else if (stroke.tool === 'shape') {
       d.x1 += dvx; d.y1 += dvy; d.x2 += dvx; d.y2 += dvy;
+    } else if (stroke.tool === 'connector') {
+      if (!d.fromId) { d.x1 += dvx; d.y1 += dvy; }
+      if (!d.toId)   { d.x2 += dvx; d.y2 += dvy; }
+      if (d.fromId && d.toId) { d.x1 += dvx; d.y1 += dvy; d.x2 += dvx; d.y2 += dvy; }
     } else if (d.points) {
       d.points = d.points.map(([px, py]) => [px + dvx, py + dvy]);
     }
@@ -290,8 +409,11 @@ class Whiteboard {
     else                         { data.y1 = newMaxY; data.y2 = newMinY; }
   }
 
+  setSnapEnabled(v) { this._snapEnabled = v; if (!v) { this._snapGuides = []; this.render(); } }
+
   /* Snap guides: compute alignment guides for movingStroke vs. all other strokes */
   _computeSnapGuides(movingStroke) {
+    if (!this._snapEnabled) { this._snapGuides = []; return; }
     const SNAP = 8; // virtual-pixel threshold
     const b = this._getStrokeBBox(movingStroke);
     const guides = [];
@@ -315,10 +437,218 @@ class Whiteboard {
     this._snapGuides = guides;
   }
 
+  /* ── Mind map helpers ─────────────────────────────────────────── */
+
+  _mmNodeDepth(data, nodeId) {
+    let depth = 0, current = nodeId;
+    while (depth < 20) {
+      const node = data.nodes.find(n => n.id === current);
+      if (!node || node.parentId === null) break;
+      current = node.parentId;
+      depth++;
+    }
+    return depth;
+  }
+
+  _mmNodeSize(depth) {
+    if (depth === 0) return { w: 148, h: 54 };
+    if (depth === 1) return { w: 124, h: 42 };
+    return { w: 106, h: 36 };
+  }
+
+  _mmNodeAbsPos(data, node) {
+    return { x: data.x + node.relX, y: data.y + node.relY };
+  }
+
+  _mmNodeRect(data, node) {
+    const pos  = this._mmNodeAbsPos(data, node);
+    const sz   = this._mmNodeSize(this._mmNodeDepth(data, node.id));
+    return { x: pos.x - sz.w / 2, y: pos.y - sz.h / 2, w: sz.w, h: sz.h, cx: pos.x, cy: pos.y };
+  }
+
+  _hitTestMindmapNode(stroke, vx, vy) {
+    const d = stroke.data;
+    for (let i = d.nodes.length - 1; i >= 0; i--) {
+      const n = d.nodes[i];
+      const r = this._mmNodeRect(d, n);
+      if (vx >= r.x && vx <= r.x + r.w && vy >= r.y && vy <= r.y + r.h) return n;
+    }
+    return null;
+  }
+
+  _mmSubtree(data, nodeId) {
+    const ids = new Set([nodeId]);
+    let changed = true;
+    while (changed) {
+      changed = false;
+      for (const n of data.nodes) {
+        if (!ids.has(n.id) && ids.has(n.parentId)) { ids.add(n.id); changed = true; }
+      }
+    }
+    return ids;
+  }
+
+  _addMindmapChild(stroke, parentNodeId) {
+    const data   = stroke.data;
+    const parent = data.nodes.find(n => n.id === parentNodeId);
+    if (!parent) return;
+    const depth    = this._mmNodeDepth(data, parentNodeId);
+    const siblings = data.nodes.filter(n => n.parentId === parentNodeId);
+    const colors   = ['#06D6E0', '#F15BB5', '#A8E063', '#FF9F43', '#FF6B6B', '#4361EE', '#9B5DE5'];
+    const col      = depth === 0 ? colors[siblings.length % colors.length] : (parent.color || '#06D6E0');
+    const spread   = 140;
+    const dist     = depth === 0 ? 280 : 220;
+    let relX, relY;
+    if (depth === 0) {
+      const rightCount  = data.nodes.filter(n => n.parentId === 'root' && n.relX > 0).length;
+      const leftCount   = data.nodes.filter(n => n.parentId === 'root' && n.relX < 0).length;
+      const goRight = rightCount <= leftCount;
+      relX = goRight ? dist : -dist;
+      const sideNodes = data.nodes.filter(n => n.parentId === 'root' && (goRight ? n.relX > 0 : n.relX < 0));
+      relY = sideNodes.length === 0 ? 0 : (sideNodes.length % 2 === 0 ? -1 : 1) * Math.ceil(sideNodes.length / 2) * spread;
+    } else {
+      relX = parent.relX + (parent.relX >= 0 ? dist : -dist);
+      if (siblings.length === 0) relY = parent.relY;
+      else if (siblings.length === 1) relY = parent.relY - spread;
+      else relY = parent.relY + (siblings.length - 1) * (spread * 0.7) * (siblings.length % 2 === 0 ? 1 : -1);
+    }
+    const newId = `mm_${Date.now()}_${Math.random().toString(36).slice(2, 5)}`;
+    data.nodes.push({ id: newId, text: 'Новый узел', parentId: parentNodeId, relX, relY, color: col });
+    this._selectedMindmapNodeId = newId;
+    this._staticDirty = true;
+    this.render();
+    if (this._onStrokeUpdated) this._onStrokeUpdated(stroke);
+    setTimeout(() => {
+      if (this._editingMindmapStroke === stroke) this._editMindmapNodeText(stroke, newId);
+    }, 60);
+  }
+
+  _deleteMindmapNode(stroke, nodeId) {
+    const data = stroke.data;
+    if (!nodeId) return;
+    const node = data.nodes.find(n => n.id === nodeId);
+    if (!node || node.parentId === null) return;
+    const toDelete = this._mmSubtree(data, nodeId);
+    data.nodes = data.nodes.filter(n => !toDelete.has(n.id));
+    this._selectedMindmapNodeId = null;
+    this._staticDirty = true;
+    this.render();
+    if (this._onStrokeUpdated) this._onStrokeUpdated(stroke);
+  }
+
+  _editMindmapNodeText(stroke, nodeId) {
+    const data = stroke.data;
+    const node = data.nodes.find(n => n.id === nodeId);
+    if (!node) return;
+    const wrap = this._canvas.parentElement;
+    if (!wrap) return;
+    this._removeObjectInput();
+    const r    = this._mmNodeRect(data, node);
+    const [cx, cy] = this._toCanvas(r.x, r.y);
+    const cw = (r.w / Whiteboard.VW) * this._cssW;
+    const ch = (r.h / Whiteboard.VH) * this._cssH;
+    const depth = this._mmNodeDepth(data, nodeId);
+    const vFontSize = depth === 0 ? 15 : 13;
+    const fs  = Math.max(9, Math.round((vFontSize / Whiteboard.VH) * this._cssH));
+    const ta  = document.createElement('textarea');
+    ta.value  = node.text || '';
+    ta.style.cssText = `
+      position:absolute; left:${cx}px; top:${cy}px;
+      width:${Math.max(60, cw)}px; height:${Math.max(22, ch)}px;
+      font-size:${fs}px; font-family:'Manrope',sans-serif; font-weight:600;
+      color:#fff; background:transparent; border:none; outline:none; resize:none;
+      padding:2px 6px; text-align:center; line-height:1.35;
+      box-sizing:border-box; caret-color:#fff; z-index:20;
+    `;
+    wrap.style.position = 'relative';
+    wrap.appendChild(ta);
+    ta.focus();
+    ta.select();
+    this._objectInput = { el: ta, strokeId: stroke.id };
+    const commit = () => {
+      const text = ta.value.trim() || node.text;
+      this._removeObjectInput();
+      const s = this._strokes.find(x => x.id === stroke.id);
+      if (!s) return;
+      const n2 = s.data.nodes.find(n => n.id === nodeId);
+      if (n2) n2.text = text || 'Узел';
+      this._staticDirty = true;
+      this.render();
+      if (this._onStrokeUpdated) this._onStrokeUpdated(s);
+    };
+    ta.addEventListener('keydown', ev => {
+      ev.stopPropagation();
+      if (ev.key === 'Escape') { ev.preventDefault(); this._removeObjectInput(); }
+      if (ev.key === 'Enter' && !ev.shiftKey) { ev.preventDefault(); commit(); }
+      if (ev.key === 'Tab') { ev.preventDefault(); commit(); setTimeout(() => { if (this._editingMindmapStroke) this._addMindmapChild(this._editingMindmapStroke, nodeId); }, 80); }
+    });
+    ta.addEventListener('blur', () => setTimeout(commit, 120));
+  }
+
+  _enterMindmapEdit(stroke, vx, vy) {
+    this._editingMindmapStroke  = stroke;
+    this._selectedId            = stroke.id;
+    const nodeHit = this._hitTestMindmapNode(stroke, vx, vy);
+    this._selectedMindmapNodeId = nodeHit ? nodeHit.id : 'root';
+    this.render();
+  }
+
+  _getAnchorPoint(stroke, anchor) {
+    const b = this._getStrokeBBox(stroke);
+    const cx = b.x + b.w / 2, cy = b.y + b.h / 2;
+    switch (anchor) {
+      case 'n':  return { x: cx,        y: b.y       };
+      case 's':  return { x: cx,        y: b.y + b.h };
+      case 'e':  return { x: b.x + b.w, y: cy        };
+      case 'w':  return { x: b.x,       y: cy        };
+      default:   return { x: cx,        y: cy        };
+    }
+  }
+
+  _findNearestAnchor(vx, vy, excludeId = null) {
+    const THRESH = 40;
+    let best = null, bestDist = THRESH;
+    const anchors = ['n', 's', 'e', 'w', 'center'];
+    for (let i = this._strokes.length - 1; i >= 0; i--) {
+      const s = this._strokes[i];
+      if (s.tool === 'connector' || s.tool === 'pencil' || s.tool === 'highlighter' || s.tool === 'eraser') continue;
+      if (s.data.isBackground || s.data.locked) continue;
+      if (s.id === excludeId) continue;
+      for (const anchor of anchors) {
+        const p = this._getAnchorPoint(s, anchor);
+        const dist = Math.hypot(vx - p.x, vy - p.y);
+        if (dist < bestDist) { bestDist = dist; best = { stroke: s, anchor, x: p.x, y: p.y }; }
+      }
+    }
+    return best;
+  }
+
+  _getConnectorEndpoints(d) {
+    let x1 = d.x1, y1 = d.y1, x2 = d.x2, y2 = d.y2;
+    if (d.fromId) {
+      const s = this._strokes.find(x => x.id === d.fromId);
+      if (s) { const p = this._getAnchorPoint(s, d.fromAnchor || 'center'); x1 = p.x; y1 = p.y; }
+    }
+    if (d.toId) {
+      const s = this._strokes.find(x => x.id === d.toId);
+      if (s) { const p = this._getAnchorPoint(s, d.toAnchor || 'center'); x2 = p.x; y2 = p.y; }
+    }
+    return { x1, y1, x2, y2 };
+  }
+
+  _anchorDirection(anchor) {
+    switch (anchor) {
+      case 'n': return [0, -1]; case 's': return [0, 1];
+      case 'e': return [1,  0]; case 'w': return [-1, 0];
+      default:  return [0,  0];
+    }
+  }
+
   /* Hit-test any stroke (all types) — returns topmost hit */
   _hitTestAny(vx, vy) {
     for (let i = this._strokes.length - 1; i >= 0; i--) {
       const s = this._strokes[i];
+      if (s.data.isBackground || s.data.locked) continue;
       const b = this._getStrokeBBox(s);
       if (vx >= b.x && vx <= b.x + b.w && vy >= b.y && vy <= b.y + b.h) return s;
     }
@@ -387,21 +717,30 @@ class Whiteboard {
 
   /* ── pointer handlers ───────────────────────────────────────────────── */
 
+  _beginPan(e) {
+    const rect = this._canvas.getBoundingClientRect();
+    const cx   = e.clientX - rect.left;
+    const cy   = e.clientY - rect.top;
+    this._panStartCss = [cx, cy];
+    this._panStartPan = [this._panVX, this._panVY];
+    this._canvas.style.cursor = 'grabbing';
+    this._canvas.setPointerCapture(e.pointerId);
+  }
+
   _onPointerDown(e) {
     // ── pan mode (Space + drag) ───────────────────────────────────────────
-    if (this._spaceDown) {
-      const rect = this._canvas.getBoundingClientRect();
-      const cx = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
-      const cy = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;
-      this._panStartCss = [cx, cy];
-      this._panStartPan = [this._panVX, this._panVY];
-      this._canvas.style.cursor = 'grabbing';
-      this._canvas.setPointerCapture(e.pointerId);
-      return;
-    }
+    if (this._spaceDown) { this._beginPan(e); return; }
 
     const [vx, vy] = this._pointerPos(e);
 
+    // Pressure-sensitive width for stylus
+    if (this._stylusMultiplier > 0 && e.pointerType === 'pen') {
+      const p = Math.max(0.1, e.pressure || 0.5);
+      this._effectiveWidth = Math.max(1, Math.round(this._width * p * this._stylusMultiplier));
+    } else {
+      this._effectiveWidth = null;
+    }
+
     // ── overlay drag (ruler/protractor) — always checked first ────────────
     if (this._overlays.length > 0) {
       const hit = this._hitTestOverlay(vx, vy);
@@ -444,6 +783,50 @@ class Whiteboard {
       this._lastClickVx   = vx;
       this._lastClickVy   = vy;
 
+      // ── mindmap edit mode: intercept pointer events ──────────────────────
+      if (this._editingMindmapStroke && this._tool === 'select') {
+        const mm = this._editingMindmapStroke;
+        const nodeHit = this._hitTestMindmapNode(mm, vx, vy);
+        if (nodeHit) {
+          if (dbl) { this._editMindmapNodeText(mm, nodeHit.id); return; }
+          this._selectedMindmapNodeId = nodeHit.id;
+          this._mmNodeDragStart = { nodeId: nodeHit.id, lastVx: vx, lastVy: vy };
+          this._canvas.setPointerCapture(e.pointerId);
+          this._staticDirty = true;
+          this.render();
+          return;
+        }
+        // Check "+" button
+        if (this._selectedMindmapNodeId) {
+          const selNode = mm.data.nodes.find(n => n.id === this._selectedMindmapNodeId);
+          if (selNode) {
+            const r = this._mmNodeRect(mm.data, selNode);
+            const btnAbsX = r.x + r.w + 10 + 10;
+            const btnAbsY = r.y + r.h / 2;
+            if (Math.hypot(vx - btnAbsX, vy - btnAbsY) < 18) {
+              this._addMindmapChild(mm, this._selectedMindmapNodeId);
+              return;
+            }
+          }
+        }
+        // Click outside mindmap bbox: exit editing
+        const bbox = this._getStrokeBBox(mm);
+        const pad  = 30;
+        if (vx < bbox.x - pad || vx > bbox.x + bbox.w + pad || vy < bbox.y - pad || vy > bbox.y + bbox.h + pad) {
+          this._editingMindmapStroke  = null;
+          this._selectedMindmapNodeId = null;
+          this._mmNodeDragStart       = null;
+          this.render();
+          // Fall through to normal select behavior
+        } else {
+          // Click inside mindmap but not on a node: deselect node
+          this._selectedMindmapNodeId = null;
+          this._staticDirty = true;
+          this.render();
+          return;
+        }
+      }
+
       // Check handles on the primary selected stroke
       const primarySel = this._selectedIds.size === 1
         ? this._strokes.find(s => s.id === this._selectedId) : null;
@@ -536,9 +919,10 @@ class Whiteboard {
     // ── laser pointer (ephemeral — not saved) ────────────────────────────
     if (this._tool === 'laser') {
       this._canvas.setPointerCapture(e.pointerId);
-      this._drawing  = true;
-      this._laserPos = [vx, vy];
-      this._liveId   = `${Date.now()}${Math.random().toString(36).slice(2, 5)}`;
+      this._drawing    = true;
+      this._laserPos   = [vx, vy];
+      this._laserTrail = [[vx, vy]];
+      this._liveId     = `${Date.now()}${Math.random().toString(36).slice(2, 5)}`;
       if (this._onStrokeProgress)
         this._onStrokeProgress({ liveId: this._liveId, tool: 'laser', data: { points: [[vx, vy]] } });
       this.render();
@@ -586,16 +970,23 @@ class Whiteboard {
       return;
     }
 
-    // ── compass tool ─────────────────────────────────────────────────────
-    if (this._tool === 'compass') {
-      const W = 260, H = 260;
-      const x = Math.max(0, Math.min(vx - W / 2, Whiteboard.VW - W));
-      const y = Math.max(0, Math.min(vy - H / 2, Whiteboard.VH - H));
+    // ── mindmap tool ───────────────────────────────────────────────────────
+    if (this._tool === 'mindmap') {
+      const colors = ['#06D6E0', '#F15BB5', '#A8E063', '#FF9F43', '#FF6B6B', '#4361EE'];
+      const rightX = 280, leftX = -280;
       const stroke = {
-        id: this._localIdCounter--, tool: 'compass',
-        data: { x, y, w: W, h: H, angle: 0, spread: Math.PI / 4,
-                arcAngle: Math.PI * 2, arcStart: 0,
-                color: this._color, radius: null, showRadius: true },
+        id: this._localIdCounter--, tool: 'mindmap',
+        data: {
+          x: vx, y: vy,
+          nodes: [
+            { id: 'root', text: 'Главная идея', parentId: null, relX: 0,      relY: 0,    color: '#9B5DE5' },
+            { id: 'mm1',  text: 'Ветка 1',      parentId: 'root', relX: rightX, relY: -140, color: colors[0] },
+            { id: 'mm2',  text: 'Ветка 2',      parentId: 'root', relX: rightX, relY:  0,   color: colors[1] },
+            { id: 'mm3',  text: 'Ветка 3',      parentId: 'root', relX: rightX, relY:  140, color: colors[2] },
+            { id: 'mm4',  text: 'Ветка 4',      parentId: 'root', relX: leftX,  relY: -70,  color: colors[3] },
+            { id: 'mm5',  text: 'Ветка 5',      parentId: 'root', relX: leftX,  relY:  70,  color: colors[4] },
+          ],
+        },
       };
       this._strokes.push(stroke);
       this._undoStack.push(stroke.id);
@@ -605,6 +996,34 @@ class Whiteboard {
       this.render();
       if (this._onStrokeDone)    this._onStrokeDone(stroke);
       if (this._onObjectCreated) this._onObjectCreated(stroke);
+      this._editingMindmapStroke  = stroke;
+      this._selectedMindmapNodeId = 'root';
+      if (this._onToolSwitch) this._onToolSwitch('select');
+      return;
+    }
+
+    // ── compass tool: two-phase state machine ────────────────────────────
+    if (this._tool === 'compass') {
+      e.preventDefault();
+      this._canvas.setPointerCapture(e.pointerId);
+      if (this._compassState === 'idle') {
+        // Phase 1: set center, start dragging for radius
+        this._compassCenter       = { x: vx, y: vy };
+        this._compassRadius       = 0;
+        this._compassCurrentAngle = -Math.PI / 2;
+        this._compassLastAngle    = -Math.PI / 2;
+        this._compassState        = 'setting-radius';
+        this._drawing             = true;
+      } else if (this._compassState === 'waiting-arc') {
+        // Phase 2: set arc start, start dragging for sweep
+        const dx = vx - this._compassCenter.x, dy = vy - this._compassCenter.y;
+        this._compassArcStart     = Math.atan2(dy, dx);
+        this._compassArcSweep     = 0;
+        this._compassCurrentAngle = this._compassArcStart;
+        this._compassLastAngle    = this._compassArcStart;
+        this._compassState        = 'drawing-arc';
+      }
+      this.render();
       return;
     }
 
@@ -612,6 +1031,14 @@ class Whiteboard {
     this._canvas.setPointerCapture(e.pointerId);
     this._drawing = true;
     this._liveId  = `${Date.now()}${Math.random().toString(36).slice(2, 5)}`;
+    if (this._tool === 'connector') {
+      const snap = this._findNearestAnchor(vx, vy);
+      if (snap) {
+        this._connSnapStart = { strokeId: snap.stroke.id, anchor: snap.anchor, x: snap.x, y: snap.y };
+      } else {
+        this._connSnapStart = null;
+      }
+    }
     if (this._isShapeTool() || this._tool === 'connector' || this._tool === 'table') {
       this._shapeStart = [vx, vy];
       this._shapeEnd   = [vx, vy];
@@ -637,11 +1064,12 @@ class Whiteboard {
     }
 
     const [vx, vy] = this._pointerPos(e);
+    this._pointerVx = vx; this._pointerVy = vy;
 
-    // Broadcast cursor position to other participants (throttled to 50ms)
+    // Broadcast cursor position to other participants (throttled to ~30fps)
     if (this._onCursorMove) {
       const now = Date.now();
-      if (now - this._cursorThrottle > 100) {
+      if (now - this._cursorThrottle > 33) {
         this._cursorThrottle = now;
         this._onCursorMove(vx, vy);
       }
@@ -674,15 +1102,38 @@ class Whiteboard {
       return;
     }
 
-    // ── laser: update position ────────────────────────────────────────────
+    // ── laser: update position + trail ───────────────────────────────────
     if (this._tool === 'laser' && this._drawing) {
       this._laserPos = [vx, vy];
+      this._laserTrail.push([vx, vy]);
+      if (this._laserTrail.length > 25) this._laserTrail.shift();
       if (this._onStrokeProgress && this._liveId)
         this._onStrokeProgress({ liveId: this._liveId, tool: 'laser', data: { points: [[vx, vy]] } });
       this.render();
       return;
     }
 
+    // ── compass: update radius or arc sweep ──────────────────────────────
+    if (this._tool === 'compass' && this._compassState !== 'idle') {
+      const dx = vx - this._compassCenter.x, dy = vy - this._compassCenter.y;
+      if (this._compassState === 'setting-radius') {
+        this._compassRadius       = Math.hypot(dx, dy);
+        this._compassCurrentAngle = Math.atan2(dy, dx);
+      } else if (this._compassState === 'drawing-arc') {
+        this._compassCurrentAngle = Math.atan2(dy, dx);
+        // Accumulate sweep with wrap-around handling
+        let delta = this._compassCurrentAngle - this._compassLastAngle;
+        if (delta > Math.PI)  delta -= Math.PI * 2;
+        if (delta < -Math.PI) delta += Math.PI * 2;
+        this._compassArcSweep += delta;
+        // Clamp to ±2π (full circle max)
+        this._compassArcSweep = Math.max(-Math.PI * 2, Math.min(Math.PI * 2, this._compassArcSweep));
+        this._compassLastAngle = this._compassCurrentAngle;
+      }
+      this.render();
+      return;
+    }
+
     // ── select: update cursor + drag ──────────────────────────────────────
     if (this._tool === 'select') {
       // Lasso update
@@ -722,6 +1173,22 @@ class Whiteboard {
         this._canvas.style.cursor = cur;
       }
 
+      // Mindmap node drag
+      if (this._mmNodeDragStart) {
+        const mm = this._editingMindmapStroke;
+        if (mm) {
+          const dvx = vx - this._mmNodeDragStart.lastVx;
+          const dvy = vy - this._mmNodeDragStart.lastVy;
+          this._mmNodeDragStart.lastVx = vx;
+          this._mmNodeDragStart.lastVy = vy;
+          const node = mm.data.nodes.find(n => n.id === this._mmNodeDragStart.nodeId);
+          if (node) { node.relX += dvx; node.relY += dvy; }
+          this._staticDirty = true;
+          this.render();
+          return;
+        }
+      }
+
       if (!this._dragState) return;
       const ds  = this._dragState;
       if (ds.type === 'move') {
@@ -761,27 +1228,88 @@ class Whiteboard {
       return;
     }
 
+    // Connector: update hover shape + snap target (even when not drawing)
+    if (this._tool === 'connector') {
+      const hit = this._hitTestAny(vx, vy);
+      this._connHoverShapeId = hit && hit.tool !== 'connector' ? hit.id : null;
+      const snapEndRaw = this._findNearestAnchor(vx, vy, this._connSnapStart?.strokeId);
+      this._connSnapEnd = snapEndRaw ? { strokeId: snapEndRaw.stroke.id, anchor: snapEndRaw.anchor, x: snapEndRaw.x, y: snapEndRaw.y } : null;
+      if (this._connSnapEnd && this._drawing) {
+        this._shapeEnd = [this._connSnapEnd.x, this._connSnapEnd.y];
+        this.render();
+        return;
+      }
+    }
+
     if (!this._drawing) return;
     if (this._isShapeTool() || this._tool === 'connector' || this._tool === 'table') {
-      this._shapeEnd = [vx, vy];
+      let [ex, ey] = [vx, vy];
+      // Shift: proportional constraint for shapes (square/circle)
+      if (e.shiftKey && this._isShapeTool() && this._shapeStart) {
+        const [sx, sy] = this._shapeStart;
+        const dxv = ex - sx, dyv = ey - sy;
+        const side = Math.max(Math.abs(dxv), Math.abs(dyv));
+        ex = sx + (dxv >= 0 ? side : -side);
+        ey = sy + (dyv >= 0 ? side : -side);
+      }
+      this._shapeEnd = [ex, ey];
       this.render();
     } else {
-      this._curPts.push([vx, vy]);
+      // Shift: straight line (snapped to 0°/45°/90°) for pencil and highlighter
+      if (e.shiftKey && this._curPts.length >= 1 &&
+          (this._tool === 'pencil' || this._tool === 'highlighter')) {
+        const [sx, sy] = this._curPts[0];
+        const dx = vx - sx, dy = vy - sy;
+        const angle   = Math.atan2(dy, dx);
+        const snapped = Math.round(angle / (Math.PI / 4)) * (Math.PI / 4);
+        const dist    = Math.hypot(dx, dy);
+        this._curPts = [this._curPts[0], [sx + Math.cos(snapped) * dist, sy + Math.sin(snapped) * dist]];
+      } else {
+        this._curPts.push([vx, vy]);
+      }
       this.render();
     }
     if (this._onStrokeProgress && !this._progressTimer) {
       this._progressTimer = setTimeout(() => {
         this._progressTimer = null;
         this._flushProgress();
-      }, 50);
+      }, 20);
     }
   }
 
   _onWheel(e) {
     e.preventDefault();
-    const rect  = this._canvas.getBoundingClientRect();
-    const cx    = e.clientX - rect.left;
-    const cy    = e.clientY - rect.top;
+    const rect = this._canvas.getBoundingClientRect();
+    const cx   = e.clientX - rect.left;
+    const cy   = e.clientY - rect.top;
+
+    // Ctrl+wheel or pinch-zoom (ctrlKey set by browser on pinch)
+    if (e.ctrlKey) {
+      const [vx, vy] = this._toVirtual(cx, cy);
+      const factor   = e.deltaY < 0 ? 1.15 : 1 / 1.15;
+      this.zoomTo(this._zoom * factor, vx, vy);
+      return;
+    }
+
+    // Shift+wheel → horizontal pan
+    if (e.shiftKey) {
+      const sx = (this._cssW || 300) / Whiteboard.VW;
+      this._panVX += e.deltaY / (sx * this._zoom);
+      this._clampPan(); this._staticDirty = true; this.render();
+      return;
+    }
+
+    // Two-finger trackpad scroll (deltaMode=0, both axes) → pan
+    if (e.deltaMode === 0 && Math.abs(e.deltaX) > 2) {
+      const sx = (this._cssW || 300) / Whiteboard.VW;
+      const sy = (this._cssH || 150) / Whiteboard.VH;
+      this._panVX += e.deltaX / (sx * this._zoom);
+      this._panVY += e.deltaY / (sy * this._zoom);
+      this._clampPan(); this._staticDirty = true; this.render();
+      return;
+    }
+
+    // Regular wheel → zoom
     const [vx, vy] = this._toVirtual(cx, cy);
     const factor   = e.deltaY < 0 ? 1.15 : 1 / 1.15;
     this.zoomTo(this._zoom * factor, vx, vy);
@@ -813,6 +1341,45 @@ class Whiteboard {
     if (this._onZoomChange) this._onZoomChange(1);
   }
 
+  /* Zoom to fit all visible strokes, with optional padding in virtual px.
+     Falls back to resetView() when there are no strokes. */
+  zoomFitStrokes(padding = 80) {
+    const VW = Whiteboard.VW, VH = Whiteboard.VH;
+    if (!this._strokes.length) { this.resetView(); return; }
+
+    let minX = VW, minY = VH, maxX = 0, maxY = 0;
+    for (const s of this._strokes) {
+      const b = this._getStrokeBBox(s);
+      if (b.w === VW && b.h === VH) continue; // skip fallback bbox (unknown type)
+      minX = Math.min(minX, b.x);
+      minY = Math.min(minY, b.y);
+      maxX = Math.max(maxX, b.x + b.w);
+      maxY = Math.max(maxY, b.y + b.h);
+    }
+    if (maxX <= minX || maxY <= minY) { this.resetView(); return; }
+
+    // Add padding, clamp to board bounds
+    minX = Math.max(0, minX - padding);
+    minY = Math.max(0, minY - padding);
+    maxX = Math.min(VW, maxX + padding);
+    maxY = Math.min(VH, maxY + padding);
+
+    const contentW = maxX - minX;
+    const contentH = maxY - minY;
+
+    // zoom so the content bbox fills the canvas (pick limiting axis)
+    const zoom = Math.min(VW / contentW, VH / contentH, 8);
+    this._zoom  = Math.max(0.25, zoom);
+
+    // center the content
+    this._panVX = (minX + maxX) / 2 - VW / (2 * this._zoom);
+    this._panVY = (minY + maxY) / 2 - VH / (2 * this._zoom);
+    this._clampPan();
+    this._staticDirty = true;
+    this.render();
+    if (this._onZoomChange) this._onZoomChange(this._zoom);
+  }
+
   _clampPan() {
     const VW = Whiteboard.VW, VH = Whiteboard.VH;
     const visW = VW / this._zoom;
@@ -861,16 +1428,16 @@ class Whiteboard {
       if (!this._shapeStart || !this._shapeEnd) return;
       data = { shape: this._tool, x1: this._shapeStart[0], y1: this._shapeStart[1],
                x2: this._shapeEnd[0], y2: this._shapeEnd[1],
-               color: this._color, width: this._width, fill: this._fill };
+               color: this._color, width: this._w, fill: this._fill };
     } else if (this._tool === 'connector') {
       if (!this._shapeStart || !this._shapeEnd) return;
       data = { x1: this._shapeStart[0], y1: this._shapeStart[1],
                x2: this._shapeEnd[0], y2: this._shapeEnd[1],
-               color: this._color, width: this._width, arrowEnd: true, arrowStart: false };
+               color: this._color, width: this._w, arrowEnd: true, arrowStart: false };
     } else {
       if (this._curPts.length === 0) return;
       data = { points: [...this._curPts],
-               color: this._tool === 'eraser' ? null : this._color, width: this._width };
+               color: this._tool === 'eraser' ? null : this._color, width: this._w };
     }
     this._onStrokeProgress({
       liveId: this._liveId,
@@ -896,11 +1463,50 @@ class Whiteboard {
       return;
     }
 
+    // ── compass: phase transitions ────────────────────────────────────────
+    if (this._tool === 'compass') {
+      if (this._compassState === 'setting-radius') {
+        if (this._compassRadius < 15) {
+          // Too small: cancel
+          this._compassState = 'idle'; this._drawing = false;
+        } else {
+          this._compassState = 'waiting-arc';
+          // Stay in "drawing" state so the preview stays visible
+        }
+        this.render();
+      } else if (this._compassState === 'drawing-arc') {
+        if (Math.abs(this._compassArcSweep) > 0.05) {
+          const stroke = {
+            id: this._localIdCounter--, tool: 'compass',
+            data: {
+              cx: this._compassCenter.x, cy: this._compassCenter.y,
+              radius: Math.max(1, Math.round(this._compassRadius)),
+              arcStart: this._compassArcStart,
+              arcSweep: this._compassArcSweep,
+              color:    this._color,
+              lineWidth: this._width,
+              showLegs: true,
+            },
+          };
+          this._strokes.push(stroke);
+          this._undoStack.push(stroke.id);
+          this._redoStack = [];
+          this._staticDirty = true;
+          if (this._onStrokeDone)    this._onStrokeDone(stroke);
+          if (this._onObjectCreated) this._onObjectCreated(stroke);
+        }
+        this._compassState = 'idle'; this._drawing = false;
+        this.render();
+      }
+      return;
+    }
+
     // ── laser pointer: cancel preview ─────────────────────────────────────
     if (this._tool === 'laser') {
-      this._drawing  = false;
-      this._laserPos = null;
-      const liveId   = this._liveId;
+      this._drawing    = false;
+      this._laserPos   = null;
+      this._laserTrail = [];
+      const liveId     = this._liveId;
       this._liveId   = null;
       if (liveId && this._onStrokeProgress) this._onStrokeProgress({ liveId, cancel: true });
       this.render();
@@ -925,6 +1531,14 @@ class Whiteboard {
         this.render();
         return;
       }
+      // Mindmap node drag end
+      if (this._mmNodeDragStart) {
+        const mm = this._editingMindmapStroke;
+        if (mm && this._onStrokeUpdated) this._onStrokeUpdated(mm);
+        this._mmNodeDragStart = null;
+        this.render();
+        return;
+      }
       if (this._dragState) {
         this._snapGuides = [];
         // Notify server of updated positions for all moved strokes
@@ -954,12 +1568,13 @@ class Whiteboard {
       if (vh < 40) vh = 240;
       vx = Math.min(vx, Whiteboard.VW - vw);
       vy = Math.min(vy, Whiteboard.VH - vh);
+      const tR = this._tableRows || 3, tC = this._tableCols || 4;
       const stroke = {
         id: this._localIdCounter--, tool: 'table',
         data: {
           x: Math.max(0, vx), y: Math.max(0, vy), w: vw, h: vh,
-          rows: 3, cols: 4,
-          cells: [['','','',''], ['','','',''], ['','','','']],
+          rows: tR, cols: tC,
+          cells: Array.from({ length: tR }, () => Array(tC).fill('')),
           borderColor: '#9B5DE5',
           bgColor:     'rgba(26,22,37,0.85)',
           textColor:   '#e8e0f7',
@@ -979,19 +1594,29 @@ class Whiteboard {
 
     // ── connector tool ────────────────────────────────────────────────────
     if (this._tool === 'connector') {
-      const [x1, y1] = this._shapeStart;
-      const [x2, y2] = this._shapeEnd || this._shapeStart;
+      let [x1, y1] = this._shapeStart;
+      let [x2, y2] = this._shapeEnd || this._shapeStart;
+      if (this._connSnapStart) { x1 = this._connSnapStart.x; y1 = this._connSnapStart.y; }
+      if (this._connSnapEnd)   { x2 = this._connSnapEnd.x;   y2 = this._connSnapEnd.y; }
       if (Math.abs(x2 - x1) < 5 && Math.abs(y2 - y1) < 5) {
         if (liveId && this._onStrokeProgress) this._onStrokeProgress({ liveId, cancel: true });
+        this._connSnapStart = null; this._connSnapEnd = null;
         return;
       }
+      const isCurved = !!(this._connSnapStart || this._connSnapEnd);
+      const data = { x1, y1, x2, y2, color: this._color, width: this._width,
+        arrowEnd: true, arrowStart: false,
+        lineStyle: this._lineStyle, opacity: this._opacity,
+        connStyle: isCurved ? 'curved' : 'straight',
+      };
+      if (this._connSnapStart) { data.fromId = this._connSnapStart.strokeId; data.fromAnchor = this._connSnapStart.anchor; }
+      if (this._connSnapEnd)   { data.toId   = this._connSnapEnd.strokeId;   data.toAnchor   = this._connSnapEnd.anchor; }
       const stroke = {
         id: this._localIdCounter--, tool: 'connector',
-        data: { x1, y1, x2, y2, color: this._color, width: this._width,
-                arrowEnd: true, arrowStart: false,
-                lineStyle: this._lineStyle, opacity: this._opacity },
+        data,
       };
       this._shapeStart = null; this._shapeEnd = null;
+      this._connSnapStart = null; this._connSnapEnd = null; this._connHoverShapeId = null;
       this._strokes.push(stroke);
       this._undoStack.push(stroke.id);
       this._redoStack = [];
@@ -1012,7 +1637,7 @@ class Whiteboard {
       const stroke = {
         id: this._localIdCounter--, tool: 'shape',
         data: { shape: this._tool, x1, y1, x2, y2,
-                color: this._color, width: this._width, fill: this._fill,
+                color: this._color, width: this._w, fill: this._fill,
                 lineStyle: this._lineStyle, opacity: this._opacity },
       };
       this._shapeStart = null; this._shapeEnd = null;
@@ -1033,7 +1658,7 @@ class Whiteboard {
     const stroke = {
       id: this._localIdCounter--, tool: this._tool,
       data: { points: this._curPts,
-              color: this._tool === 'eraser' ? null : this._color, width: this._width,
+              color: this._tool === 'eraser' ? null : this._color, width: this._w,
               lineStyle: this._lineStyle, opacity: this._opacity },
     };
     this._curPts = [];
@@ -1061,10 +1686,12 @@ class Whiteboard {
     const offX = canvasRect.left - wrapRect.left;
     const offY = canvasRect.top  - wrapRect.top;
 
-    const fs   = Math.max(14, Math.round((22 / Whiteboard.VH) * ch));
+    const fs   = Math.max(10, Math.round((this._textFontSize / Whiteboard.VH) * ch));
     const W    = Math.max(120, Math.min(300, cw - 16));
     const left = Math.min(cx + offX, offX + cw - W - 4);
     const top  = Math.max(offY, Math.min(cy + offY, offY + ch - 110));
+    const fw   = this._textBold   ? 'bold'   : 'normal';
+    const fi   = this._textItalic ? 'italic' : 'normal';
 
     const ta = document.createElement('textarea');
     ta.placeholder = 'Введите текст… (Enter — вставить, Esc — отмена)';
@@ -1072,8 +1699,9 @@ class Whiteboard {
     ta.style.cssText = `
       position:absolute; left:${left}px; top:${top}px;
       width:${W}px; min-height:68px; box-sizing:border-box;
-      font-size:${fs}px; font-family:'Manrope',sans-serif;
-      color:${this._color};
+      font-size:${fs}px; font-family:'${this._textFontFamily}',sans-serif;
+      font-weight:${fw}; font-style:${fi};
+      color:${this._color}; text-align:${this._textAlign};
       background:rgba(12,8,24,0.92);
       border:1.5px solid rgba(155,93,229,0.7);
       border-radius:8px; outline:none; resize:none;
@@ -1090,7 +1718,13 @@ class Whiteboard {
       if (!text) return;
       const stroke = {
         id: this._localIdCounter--, tool: 'text',
-        data: { text, x: vx, y: vy, fontSize: 22, color: this._color },
+        data: { text, x: vx, y: vy,
+          fontSize:   this._textFontSize,
+          fontFamily: this._textFontFamily,
+          fontWeight: this._textBold   ? 'bold'   : 'normal',
+          fontStyle:  this._textItalic ? 'italic' : 'normal',
+          textAlign:  this._textAlign,
+          color: this._color },
       };
       this._strokes.push(stroke);
       this._undoStack.push(stroke.id);
@@ -1141,7 +1775,7 @@ class Whiteboard {
     const x = Math.max(0, Math.min(vx - W / 2, Whiteboard.VW - W));
     const y = Math.max(0, Math.min(vy - 20, Whiteboard.VH - H));
     const bgColors = ['#FFE066', '#FF9F7F', '#B5EAD7', '#C7CEEA', '#FFDAC1', '#E2B7F5'];
-    const bgColor  = bgColors[Math.floor(Math.random() * bgColors.length)];
+    const bgColor  = this._stickyColor || bgColors[Math.floor(Math.random() * bgColors.length)];
     const stroke = {
       id: this._localIdCounter--, tool: 'sticky',
       data: { x, y, w: W, h: H, text: '', bgColor, textColor: '#1a1a2e', fontSize: 16 },
@@ -1355,9 +1989,11 @@ class Whiteboard {
   /* ── edit dispatch ──────────────────────────────────────────────────── */
 
   _editObject(stroke, vx, vy) {
+    if (stroke.tool === 'mindmap') { this._enterMindmapEdit(stroke, vx, vy); return; }
     if (stroke.tool === 'coordinate') { if (this._onCoordEdit) this._onCoordEdit(stroke); return; }
     if (stroke.tool === 'numberline') { if (this._onNumberLineEdit) this._onNumberLineEdit(stroke); return; }
     if (stroke.tool === 'compass')    { if (this._onCompassEdit)    this._onCompassEdit(stroke);    return; }
+    if (stroke.tool === 'shape')   { this._editShapeText(stroke); return; }
     if (stroke.tool === 'sticky')  { this._editSticky(stroke); return; }
     if (stroke.tool === 'formula') { this._editFormula(stroke); return; }
     if (stroke.tool === 'table') {
@@ -1381,6 +2017,59 @@ class Whiteboard {
     }
   }
 
+  _editShapeText(stroke) {
+    const d = stroke.data;
+    if (d.shape === 'line' || d.shape === 'arrow') return;
+    const wrap = this._canvas.parentElement;
+    if (!wrap) return;
+    this._removeObjectInput();
+
+    const canvasRect = this._canvas.getBoundingClientRect();
+    const wrapRect   = wrap.getBoundingClientRect();
+    const offX = canvasRect.left - wrapRect.left;
+    const offY = canvasRect.top  - wrapRect.top;
+
+    const [ccx1, ccy1] = this._toCanvas(Math.min(d.x1, d.x2), Math.min(d.y1, d.y2));
+    const [ccx2, ccy2] = this._toCanvas(Math.max(d.x1, d.x2), Math.max(d.y1, d.y2));
+    const cw = ccx2 - ccx1, ch = ccy2 - ccy1;
+    const pad = Math.max(8, cw * 0.06);
+    const tcol = d.textColor || '#ffffff';
+
+    const ta = document.createElement('textarea');
+    ta.value       = d.text || '';
+    ta.placeholder = 'Текст…';
+    ta.style.cssText = [
+      'position:absolute;',
+      `left:${offX + ccx1 + pad}px; top:${offY + ccy1 + pad}px;`,
+      `width:${Math.max(60, cw - pad * 2)}px;`,
+      `height:${Math.max(36, ch - pad * 2)}px;`,
+      'background:rgba(0,0,0,0.18); border:1px dashed rgba(255,255,255,0.45);',
+      'border-radius:4px; outline:none; resize:none; overflow:hidden;',
+      `padding:4px 6px; color:${tcol}; caret-color:${tcol};`,
+      'font:bold 14px Manrope,sans-serif; text-align:center;',
+      'z-index:20; line-height:1.4;',
+    ].join('');
+
+    wrap.appendChild(ta);
+    ta.focus(); ta.select();
+    this._objectInput = ta;
+
+    const commit = () => {
+      d.text = ta.value.trim() || null;
+      if (this._objectInput === ta) { ta.remove(); this._objectInput = null; }
+      this._staticDirty = true;
+      this.render();
+      if (this._onStrokeUpdated) this._onStrokeUpdated(stroke);
+    };
+
+    ta.addEventListener('blur', commit);
+    ta.addEventListener('keydown', e => {
+      if (e.key === 'Escape') { ta.value = d.text || ''; commit(); }
+      if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); commit(); }
+      e.stopPropagation();
+    });
+  }
+
   /* ── live stroke API (remote preview) ──────────────────────────────── */
 
   setLiveStroke(liveId, tool, data, userName, color) {
@@ -1402,60 +2091,111 @@ class Whiteboard {
 
   /* ── chalkboard background ──────────────────────────────────────────── */
 
-  _getBgNoise() {
-    if (this._bgNoise) return this._bgNoise;
+  // Returns a noise HTMLCanvasElement for the given theme (cached)
+  _getBgNoiseCanvas(theme) {
+    if (this._bgNoiseCache.has(theme)) return this._bgNoiseCache.get(theme);
     try {
       const SIZE = 256;
       const oc   = document.createElement('canvas');
       oc.width = oc.height = SIZE;
       const oc2 = oc.getContext('2d');
-      // Base chalkboard green
-      oc2.fillStyle = '#213d26';
+      const cfg = {
+        chalkboard: { bg: '#213d26', delta: 22, gBias: 4, smear: 'horizontal', smearAlpha: 0.05, smearColor: '#ffffff', smearCount: 6 },
+        blackboard: { bg: '#1a1a2e', delta: 18, gBias: 0, smear: 'diagonal',   smearAlpha: 0.03, smearColor: '#a0a0b8', smearCount: 4 },
+        corkboard:  { bg: '#7a5c1e', delta: 25, gBias: 0, smear: 'diagonal',   smearAlpha: 0.04, smearColor: '#c8a050', smearCount: 5 },
+        whiteboard: { bg: '#f0f0f0', delta:  5, gBias: 0, smear: 'none',       smearAlpha: 0.02, smearColor: '#cccccc', smearCount: 3 },
+      }[theme] || { bg: '#213d26', delta: 22, gBias: 4, smear: 'horizontal', smearAlpha: 0.05, smearColor: '#ffffff', smearCount: 6 };
+      oc2.fillStyle = cfg.bg;
       oc2.fillRect(0, 0, SIZE, SIZE);
-      // Per-pixel noise for chalk dust texture
       const img = oc2.getImageData(0, 0, SIZE, SIZE);
-      const d   = img.data;
-      for (let i = 0; i < d.length; i += 4) {
-        const n = (Math.random() - 0.5) * 22;
-        d[i]     = Math.max(0, Math.min(255, d[i]     + n));
-        d[i + 1] = Math.max(0, Math.min(255, d[i + 1] + n + 4)); // slightly more green variation
-        d[i + 2] = Math.max(0, Math.min(255, d[i + 2] + n));
+      const dd  = img.data;
+      for (let i = 0; i < dd.length; i += 4) {
+        const n = (Math.random() - 0.5) * cfg.delta;
+        dd[i]     = Math.max(0, Math.min(255, dd[i]     + n));
+        dd[i + 1] = Math.max(0, Math.min(255, dd[i + 1] + n + cfg.gBias));
+        dd[i + 2] = Math.max(0, Math.min(255, dd[i + 2] + n));
       }
       oc2.putImageData(img, 0, 0);
-      // Faint horizontal chalk smear lines
-      oc2.globalAlpha = 0.05;
-      oc2.strokeStyle = '#ffffff';
-      oc2.lineWidth   = 1;
-      for (let i = 0; i < 6; i++) {
-        const y = Math.random() * SIZE;
-        oc2.beginPath();
-        oc2.moveTo(0, y);
-        oc2.lineTo(SIZE, y + (Math.random() - 0.5) * 6);
-        oc2.stroke();
+      if (cfg.smear !== 'none') {
+        oc2.globalAlpha  = cfg.smearAlpha;
+        oc2.strokeStyle  = cfg.smearColor;
+        oc2.lineWidth    = 1;
+        for (let i = 0; i < cfg.smearCount; i++) {
+          const x0 = Math.random() * SIZE, y0 = Math.random() * SIZE;
+          oc2.beginPath();
+          if (cfg.smear === 'horizontal') {
+            oc2.moveTo(0, y0); oc2.lineTo(SIZE, y0 + (Math.random() - 0.5) * 6);
+          } else {
+            const angle = Math.random() * Math.PI;
+            oc2.moveTo(x0, y0);
+            oc2.lineTo(x0 + Math.cos(angle) * SIZE * 0.4, y0 + Math.sin(angle) * SIZE * 0.4);
+          }
+          oc2.stroke();
+        }
       }
-      this._bgNoise = this._ctx.createPattern(oc, 'repeat');
-    } catch { this._bgNoise = false; }
-    return this._bgNoise;
+      // Cork knot spots for corkboard
+      if (theme === 'corkboard') {
+        for (let k = 0; k < 10; k++) {
+          const kx = Math.random() * SIZE, ky = Math.random() * SIZE;
+          const kr = 2 + Math.random() * 3;
+          oc2.globalAlpha = 0.06;
+          oc2.fillStyle = '#4a3010';
+          oc2.beginPath(); oc2.arc(kx, ky, kr, 0, Math.PI * 2); oc2.fill();
+        }
+      }
+      this._bgNoiseCache.set(theme, oc);
+    } catch { this._bgNoiseCache.set(theme, null); }
+    return this._bgNoiseCache.get(theme);
   }
 
   _renderBg(ctx) {
     const W = this._cssW || 300;
     const H = this._cssH || 150;
     ctx.clearRect(0, 0, W, H);
-    ctx.fillStyle = '#213d26';
-    ctx.fillRect(0, 0, W, H);
-    const noise = this._getBgNoise();
-    if (noise) {
-      ctx.save();
-      ctx.globalCompositeOperation = 'overlay';
-      ctx.globalAlpha = 0.12;
-      ctx.fillStyle   = noise;
-      ctx.fillRect(0, 0, W, H);
-      ctx.restore();
+    const theme = this._boardTheme || 'chalkboard';
+
+    // Base background
+    const bgColors = {
+      chalkboard: '#213d26',
+      blackboard: '#1a1a2e',
+      corkboard:  '#7a5c1e',
+      whiteboard: null, // uses gradient
+    };
+    if (theme === 'whiteboard') {
+      const wg = ctx.createLinearGradient(0, 0, 0, H);
+      wg.addColorStop(0, '#f6f6f6'); wg.addColorStop(1, '#e8e8e8');
+      ctx.fillStyle = wg;
+    } else {
+      ctx.fillStyle = bgColors[theme] || '#213d26';
     }
+    ctx.fillRect(0, 0, W, H);
+
+    // Noise texture (overlay composite)
+    const noiseCanvas = this._getBgNoiseCanvas(theme);
+    if (noiseCanvas) {
+      try {
+        const pat = ctx.createPattern(noiseCanvas, 'repeat');
+        if (pat) {
+          ctx.save();
+          ctx.globalCompositeOperation = theme === 'whiteboard' ? 'multiply' : 'overlay';
+          ctx.globalAlpha = theme === 'whiteboard' ? 0.08 : 0.12;
+          ctx.fillStyle   = pat;
+          ctx.fillRect(0, 0, W, H);
+          ctx.restore();
+        }
+      } catch { /* ignore pattern errors */ }
+    }
+
+    // Vignette
+    const vigColors = {
+      chalkboard: [0, 0, 0, 0.28],
+      blackboard: [0, 0, 0, 0.35],
+      corkboard:  [40, 20, 0, 0.22],
+      whiteboard: [0, 0, 0, 0.04],
+    }[theme] || [0, 0, 0, 0.28];
     const vg = ctx.createRadialGradient(W / 2, H / 2, Math.min(W, H) * 0.25, W / 2, H / 2, Math.max(W, H) * 0.78);
     vg.addColorStop(0, 'rgba(0,0,0,0)');
-    vg.addColorStop(1, 'rgba(0,0,0,0.28)');
+    vg.addColorStop(1, `rgba(${vigColors.join(',')})`);
     ctx.fillStyle = vg;
     ctx.fillRect(0, 0, W, H);
   }
@@ -1463,18 +2203,21 @@ class Whiteboard {
   _renderTemplate(ctx) {
     const W = this._cssW || 300;
     const H = this._cssH || 150;
+    const isLight = this._boardTheme === 'whiteboard';
+    const lineC = isLight ? 'rgba(0,0,0,0.10)' : 'rgba(255,255,255,0.08)';
+    const dotC  = isLight ? 'rgba(0,0,0,0.20)'  : 'rgba(255,255,255,0.18)';
     ctx.save();
     if (this._template === 'grid') {
       const stepX = (40 / Whiteboard.VW) * W;
       const stepY = (40 / Whiteboard.VH) * H;
-      ctx.strokeStyle = 'rgba(255,255,255,0.08)'; ctx.lineWidth = 0.8;
+      ctx.strokeStyle = lineC; ctx.lineWidth = 0.8;
       ctx.beginPath();
       for (let x = stepX; x < W; x += stepX) { ctx.moveTo(x, 0); ctx.lineTo(x, H); }
       for (let y = stepY; y < H; y += stepY) { ctx.moveTo(0, y); ctx.lineTo(W, y); }
       ctx.stroke();
     } else if (this._template === 'lined') {
       const stepY = (36 / Whiteboard.VH) * H;
-      ctx.strokeStyle = 'rgba(255,255,255,0.08)'; ctx.lineWidth = 0.8;
+      ctx.strokeStyle = lineC; ctx.lineWidth = 0.8;
       ctx.beginPath();
       for (let y = stepY; y < H; y += stepY) { ctx.moveTo(0, y); ctx.lineTo(W, y); }
       ctx.stroke();
@@ -1482,7 +2225,7 @@ class Whiteboard {
       const stepX = (40 / Whiteboard.VW) * W;
       const stepY = (40 / Whiteboard.VH) * H;
       const r = Math.max(1, (1.5 / Whiteboard.VW) * W);
-      ctx.fillStyle = 'rgba(255,255,255,0.18)';
+      ctx.fillStyle = dotC;
       for (let x = stepX; x < W; x += stepX)
         for (let y = stepY; y < H; y += stepY) {
           ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill();
@@ -1491,24 +2234,27 @@ class Whiteboard {
       const ox = W / 2, oy = H / 2;
       const stepX = (40 / Whiteboard.VW) * W;
       const stepY = (40 / Whiteboard.VH) * H;
+      const coordGridC  = isLight ? 'rgba(0,0,0,0.07)'  : 'rgba(255,255,255,0.06)';
+      const coordAxisC  = isLight ? 'rgba(0,0,0,0.45)'  : 'rgba(255,255,255,0.35)';
+      const coordTickC  = isLight ? 'rgba(0,0,0,0.28)'  : 'rgba(255,255,255,0.25)';
       // Light grid
-      ctx.strokeStyle = 'rgba(255,255,255,0.06)'; ctx.lineWidth = 0.6;
+      ctx.strokeStyle = coordGridC; ctx.lineWidth = 0.6;
       ctx.beginPath();
       for (let x = ox % stepX; x < W; x += stepX) { ctx.moveTo(x, 0); ctx.lineTo(x, H); }
       for (let y = oy % stepY; y < H; y += stepY) { ctx.moveTo(0, y); ctx.lineTo(W, y); }
       ctx.stroke();
       // Axes
-      ctx.strokeStyle = 'rgba(255,255,255,0.35)'; ctx.lineWidth = 1.2;
+      ctx.strokeStyle = coordAxisC; ctx.lineWidth = 1.2;
       ctx.beginPath();
       ctx.moveTo(0, oy); ctx.lineTo(W, oy);
       ctx.moveTo(ox, 0); ctx.lineTo(ox, H);
       ctx.stroke();
       // Arrows
-      const ar = 7; ctx.fillStyle = 'rgba(255,255,255,0.35)';
+      const ar = 7; ctx.fillStyle = coordAxisC;
       ctx.beginPath(); ctx.moveTo(W, oy); ctx.lineTo(W-ar, oy-ar/2); ctx.lineTo(W-ar, oy+ar/2); ctx.closePath(); ctx.fill();
       ctx.beginPath(); ctx.moveTo(ox, 0); ctx.lineTo(ox-ar/2, ar); ctx.lineTo(ox+ar/2, ar); ctx.closePath(); ctx.fill();
       // Tick marks
-      ctx.strokeStyle = 'rgba(255,255,255,0.25)'; ctx.lineWidth = 0.8;
+      ctx.strokeStyle = coordTickC; ctx.lineWidth = 0.8;
       const tk = 4; ctx.beginPath();
       for (let x = ox + stepX; x < W - ar; x += stepX) { ctx.moveTo(x, oy-tk); ctx.lineTo(x, oy+tk); }
       for (let x = ox - stepX; x > 0; x -= stepX)       { ctx.moveTo(x, oy-tk); ctx.lineTo(x, oy+tk); }
@@ -1519,7 +2265,18 @@ class Whiteboard {
     ctx.restore();
   }
 
+  /* Schedule a render on the next animation frame.
+     Multiple calls within the same frame are collapsed into one. */
   render() {
+    if (this._rafPending) return;
+    this._rafPending = true;
+    requestAnimationFrame(() => {
+      this._rafPending = false;
+      if (!document.hidden) this._doRender();
+    });
+  }
+
+  _doRender() {
     if (this._staticDirty) { this._renderStatic(); this._staticDirty = false; }
     this._renderDynamic();
     this._renderMinimap();
@@ -1529,7 +2286,13 @@ class Whiteboard {
     const ctx = this._ctx;
     this._renderBg(ctx);
     if (this._template && this._template !== 'blank') this._renderTemplate(ctx);
-    for (const s of this._strokes) this._renderStroke(ctx, s);
+    // Background images render first (locked layer, always behind everything)
+    for (const s of this._strokes) {
+      if (s.tool === 'image' && s.data.isBackground) this._renderStroke(ctx, s);
+    }
+    for (const s of this._strokes) {
+      if (!(s.tool === 'image' && s.data.isBackground)) this._renderStroke(ctx, s);
+    }
   }
 
   _renderDynamic() {
@@ -1543,14 +2306,181 @@ class Whiteboard {
       this._renderStroke(ctx, ls);
     }
 
-    // Laser pointer (local teacher view)
-    if (this._tool === 'laser' && this._drawing && this._laserPos) {
-      const [lvx, lvy] = this._laserPos;
-      const [lcx, lcy] = this._toCanvas(lvx, lvy);
+    // Laser pointer (local teacher view) — fade trail
+    if (this._tool === 'laser' && this._drawing && this._laserTrail.length > 0) {
+      const n = this._laserTrail.length;
       ctx.save();
-      ctx.shadowColor = '#ff2222'; ctx.shadowBlur = 15;
-      ctx.fillStyle   = '#ff4444';
-      ctx.beginPath(); ctx.arc(lcx, lcy, 6, 0, Math.PI * 2); ctx.fill();
+      for (let i = 0; i < n; i++) {
+        const [lvx, lvy] = this._laserTrail[i];
+        const [lcx, lcy] = this._toCanvas(lvx, lvy);
+        const t = (i + 1) / n;
+        ctx.globalAlpha = t * 0.85;
+        ctx.shadowColor = '#ff2222'; ctx.shadowBlur = 15 * t;
+        ctx.fillStyle   = '#ff4444';
+        ctx.beginPath(); ctx.arc(lcx, lcy, Math.max(2, 6 * t), 0, Math.PI * 2); ctx.fill();
+      }
+      ctx.restore();
+    }
+
+    // Eraser: visual cursor circle follows pointer
+    if (this._tool === 'eraser') {
+      const [ecx, ecy] = this._toCanvas(this._pointerVx, this._pointerVy);
+      const er = Math.max(4, ((this._w / Whiteboard.VW) * W) / 2);
+      ctx.save();
+      ctx.strokeStyle = 'rgba(255,255,255,0.75)'; ctx.lineWidth = 1.5;
+      ctx.setLineDash([3, 2]);
+      ctx.beginPath(); ctx.arc(ecx, ecy, er, 0, Math.PI * 2); ctx.stroke();
+      ctx.setLineDash([]); ctx.restore();
+    }
+
+    // Connector: anchor point hints on hover shape
+    if (this._tool === 'connector') {
+      const anchors = ['n', 's', 'e', 'w', 'center'];
+      const shapeIdsToShow = new Set();
+      if (this._connHoverShapeId) shapeIdsToShow.add(this._connHoverShapeId);
+      if (this._drawing && this._connSnapStart) shapeIdsToShow.add(this._connSnapStart.strokeId);
+
+      for (const shapeId of shapeIdsToShow) {
+        const shape = this._strokes.find(s => s.id === shapeId);
+        if (!shape || shape.tool === 'connector') continue;
+        ctx.save();
+        for (const anchor of anchors) {
+          const p = this._getAnchorPoint(shape, anchor);
+          const [acx, acy] = this._toCanvas(p.x, p.y);
+          const isSnap = this._connSnapEnd &&
+            this._connSnapEnd.strokeId === shapeId && this._connSnapEnd.anchor === anchor;
+          ctx.beginPath();
+          ctx.arc(acx, acy, isSnap ? 7 : 5, 0, Math.PI * 2);
+          ctx.fillStyle   = isSnap ? '#06D6E0' : 'rgba(6,214,224,0.35)';
+          ctx.strokeStyle = isSnap ? '#06D6E0' : 'rgba(6,214,224,0.7)';
+          ctx.lineWidth   = 1.5;
+          ctx.fill();
+          ctx.stroke();
+        }
+        ctx.restore();
+      }
+    }
+
+    // Compass tool live preview (3 state-machine phases)
+    if (this._tool === 'compass' && this._compassState !== 'idle' && this._compassCenter) {
+      const [ccx, ccy] = this._toCanvas(this._compassCenter.x, this._compassCenter.y);
+      const sx       = W / Whiteboard.VW;
+      const cr       = this._compassRadius * sx;
+      const lw       = Math.max(1.5, (this._width || 2) * sx);
+      const arcColor = this._color || '#FFE066';
+      ctx.save();
+
+      if (this._compassState === 'setting-radius') {
+        // Dashed ghost circle + radius line to pointer
+        if (cr > 2) {
+          ctx.strokeStyle = 'rgba(255,255,255,0.28)';
+          ctx.lineWidth = 1; ctx.setLineDash([5, 4]);
+          ctx.beginPath(); ctx.arc(ccx, ccy, cr, 0, Math.PI * 2); ctx.stroke();
+          ctx.setLineDash([]);
+        }
+        const [pmx, pmy] = this._toCanvas(this._pointerVx, this._pointerVy);
+        ctx.strokeStyle = 'rgba(6,214,224,0.4)';
+        ctx.lineWidth = 1; ctx.setLineDash([3, 3]);
+        ctx.beginPath(); ctx.moveTo(ccx, ccy); ctx.lineTo(pmx, pmy); ctx.stroke();
+        ctx.setLineDash([]);
+        // Center dot
+        ctx.fillStyle = '#06D6E0'; ctx.shadowColor = '#06D6E0'; ctx.shadowBlur = 8;
+        ctx.beginPath(); ctx.arc(ccx, ccy, 4, 0, Math.PI * 2); ctx.fill();
+        ctx.shadowBlur = 0;
+        // Radius label
+        if (cr > 14) {
+          const rLabel = `r = ${Math.round(this._compassRadius)}`;
+          ctx.font = 'bold 11px Manrope, sans-serif';
+          ctx.textBaseline = 'bottom'; ctx.textAlign = 'left';
+          const tw = ctx.measureText(rLabel).width;
+          const lx = ccx + cr * 0.28 + 2, ly = ccy - cr * 0.18 - 4;
+          ctx.fillStyle = 'rgba(20,14,36,0.78)';
+          ctx.beginPath();
+          if (ctx.roundRect) ctx.roundRect(lx - 4, ly - 15, tw + 8, 17, 3);
+          else ctx.rect(lx - 4, ly - 15, tw + 8, 17);
+          ctx.fill();
+          ctx.fillStyle = 'rgba(230,225,255,0.9)'; ctx.fillText(rLabel, lx, ly);
+          ctx.textAlign = 'left';
+        }
+
+      } else if (this._compassState === 'waiting-arc') {
+        // Dashed full-circle preview + "click to draw arc" hint
+        ctx.strokeStyle = arcColor + '77';
+        ctx.lineWidth = lw; ctx.setLineDash([7, 5]);
+        ctx.beginPath(); ctx.arc(ccx, ccy, cr, 0, Math.PI * 2); ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.fillStyle = '#06D6E0'; ctx.shadowColor = '#06D6E0'; ctx.shadowBlur = 8;
+        ctx.beginPath(); ctx.arc(ccx, ccy, 4, 0, Math.PI * 2); ctx.fill();
+        ctx.shadowBlur = 0;
+        // Hint text below circle
+        const hintText = 'Кликни, чтобы начать дугу';
+        ctx.font = '11px Manrope, sans-serif';
+        ctx.textBaseline = 'top'; ctx.textAlign = 'center';
+        const tw2 = ctx.measureText(hintText).width;
+        const hx2 = ccx, hy2 = ccy + cr + 10;
+        ctx.fillStyle = 'rgba(20,14,36,0.82)';
+        ctx.beginPath();
+        if (ctx.roundRect) ctx.roundRect(hx2 - tw2 / 2 - 6, hy2 - 2, tw2 + 12, 19, 4);
+        else ctx.rect(hx2 - tw2 / 2 - 6, hy2 - 2, tw2 + 12, 19);
+        ctx.fill();
+        ctx.fillStyle = 'rgba(200,190,230,0.92)'; ctx.fillText(hintText, hx2, hy2 + 1);
+        ctx.textAlign = 'left';
+
+      } else if (this._compassState === 'drawing-arc') {
+        // Live arc + instrument legs
+        const arcEnd = this._compassArcStart + this._compassArcSweep;
+        const ccwArc = this._compassArcSweep < 0;
+        ctx.strokeStyle = arcColor; ctx.lineWidth = lw; ctx.lineCap = 'round'; ctx.setLineDash([]);
+        ctx.shadowColor = arcColor; ctx.shadowBlur = 4;
+        ctx.beginPath(); ctx.arc(ccx, ccy, cr, this._compassArcStart, arcEnd, ccwArc); ctx.stroke();
+        ctx.shadowBlur = 0;
+
+        const ptx = ccx + cr * Math.cos(arcEnd);
+        const pty = ccy + cr * Math.sin(arcEnd);
+        const legLen = cr * 1.55;
+        const dist   = Math.hypot(ptx - ccx, pty - ccy);
+        if (dist >= 2 && dist < legLen * 2) {
+          const mx    = (ccx + ptx) / 2, my = (ccy + pty) / 2;
+          const perpX = -(pty - ccy) / dist;
+          const perpY =  (ptx - ccx) / dist;
+          const halfH = Math.sqrt(Math.max(0, legLen * legLen - (dist / 2) * (dist / 2)));
+          const sign  = (my + perpY * halfH) <= (my - perpY * halfH) ? 1 : -1;
+          const hx3   = mx + sign * perpX * halfH;
+          const hy3   = my + sign * perpY * halfH;
+          ctx.strokeStyle = 'rgba(6,214,224,0.6)'; ctx.lineWidth = Math.max(1, lw * 0.7);
+          ctx.beginPath(); ctx.moveTo(hx3, hy3); ctx.lineTo(ccx, ccy); ctx.stroke();
+          ctx.strokeStyle = 'rgba(155,93,229,0.6)';
+          ctx.beginPath(); ctx.moveTo(hx3, hy3); ctx.lineTo(ptx, pty); ctx.stroke();
+          ctx.fillStyle = 'rgba(215,210,232,0.85)';
+          ctx.beginPath(); ctx.arc(hx3, hy3, Math.max(3, lw * 1.2), 0, Math.PI * 2); ctx.fill();
+        }
+        // Center dot
+        ctx.fillStyle = '#06D6E0'; ctx.shadowColor = '#06D6E0'; ctx.shadowBlur = 8;
+        ctx.beginPath(); ctx.arc(ccx, ccy, 4, 0, Math.PI * 2); ctx.fill();
+        ctx.shadowBlur = 0;
+        // Pencil tip dot
+        ctx.fillStyle = arcColor; ctx.shadowColor = arcColor; ctx.shadowBlur = 6;
+        ctx.beginPath(); ctx.arc(ptx, pty, Math.max(2.5, lw * 0.8), 0, Math.PI * 2); ctx.fill();
+        ctx.shadowBlur = 0;
+        // Sweep angle label
+        const sweepDeg = Math.abs(this._compassArcSweep * 180 / Math.PI);
+        if (sweepDeg > 3) {
+          const midAngle = this._compassArcStart + this._compassArcSweep / 2;
+          const llx = ccx + (cr + 18) * Math.cos(midAngle);
+          const lly = ccy + (cr + 18) * Math.sin(midAngle);
+          const lText = `${sweepDeg.toFixed(1)}°`;
+          ctx.font = 'bold 11px Manrope, sans-serif';
+          ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+          const ltw = ctx.measureText(lText).width;
+          ctx.fillStyle = 'rgba(20,14,36,0.8)';
+          ctx.beginPath();
+          if (ctx.roundRect) ctx.roundRect(llx - ltw / 2 - 4, lly - 9, ltw + 8, 18, 3);
+          else ctx.rect(llx - ltw / 2 - 4, lly - 9, ltw + 8, 18);
+          ctx.fill();
+          ctx.fillStyle = arcColor; ctx.fillText(lText, llx, lly);
+          ctx.textAlign = 'left';
+        }
+      }
       ctx.restore();
     }
 
@@ -1599,14 +2529,33 @@ class Whiteboard {
           this._renderStroke(ctx, { tool: 'connector', data: {
             x1: this._shapeStart[0], y1: this._shapeStart[1],
             x2: this._shapeEnd[0],   y2: this._shapeEnd[1],
-            color: this._color, width: this._width, arrowEnd: true, arrowStart: false,
+            color: this._color, width: this._w, arrowEnd: true, arrowStart: false,
           }});
         } else {
           this._renderStroke(ctx, { tool: 'shape', data: {
             shape: this._tool, x1: this._shapeStart[0], y1: this._shapeStart[1],
             x2: this._shapeEnd[0], y2: this._shapeEnd[1],
-            color: this._color, width: this._width, fill: this._fill,
+            color: this._color, width: this._w, fill: this._fill,
           }});
+          // Size label near bottom-right corner of the shape
+          const [sx, sy] = this._shapeStart, [ex, ey] = this._shapeEnd;
+          const vw2 = Math.abs(ex - sx), vh2 = Math.abs(ey - sy);
+          if (vw2 > 8 || vh2 > 8) {
+            const [labx, laby] = this._toCanvas(Math.max(sx, ex), Math.max(sy, ey));
+            const label = `${Math.round(vw2)} × ${Math.round(vh2)}`;
+            ctx.save();
+            ctx.font = 'bold 11px Manrope, sans-serif';
+            ctx.textBaseline = 'top';
+            const tw = ctx.measureText(label).width;
+            ctx.fillStyle = 'rgba(20,14,36,0.82)';
+            ctx.beginPath();
+            if (ctx.roundRect) ctx.roundRect(labx + 6, laby + 4, tw + 12, 20, 4);
+            else ctx.rect(labx + 6, laby + 4, tw + 12, 20);
+            ctx.fill();
+            ctx.fillStyle = '#e8e0f7';
+            ctx.fillText(label, labx + 12, laby + 8);
+            ctx.restore();
+          }
         }
       } else if (this._tool === 'table' && this._shapeStart && this._shapeEnd) {
         const [x1, y1] = this._shapeStart, [x2, y2] = this._shapeEnd;
@@ -1627,6 +2576,7 @@ class Whiteboard {
   }
 
   _renderStroke(ctx, stroke) {
+    if (stroke.tool === 'mindmap')     { this._renderMindmap(ctx, stroke);     return; }
     if (stroke.tool === 'shape')       { this._renderShape(ctx, stroke);       return; }
     if (stroke.tool === 'text')        { this._renderText(ctx, stroke);        return; }
     if (stroke.tool === 'image')       { this._renderImage(ctx, stroke);       return; }
@@ -1818,13 +2768,42 @@ class Whiteboard {
         break;
       }
     }
+
+    // Text inside shape (set via double-click)
+    if (d.text && d.shape !== 'line' && d.shape !== 'arrow') {
+      const vH2 = Math.abs(d.y2 - d.y1);
+      const autoFsV = Math.max(12, Math.min(38, vH2 * 0.18));
+      const fs = Math.max(9, Math.round(((d.fontSize || autoFsV) / Whiteboard.VH) * (this._cssH || 150)));
+      const tpad = Math.max(8, W * 0.06);
+      const maxTW = W - tpad * 2;
+      if (maxTW > 10) {
+        ctx.setLineDash([]);
+        ctx.fillStyle   = d.textColor || '#ffffff';
+        ctx.shadowBlur  = 0;
+        ctx.font        = `bold ${fs}px Manrope, sans-serif`;
+        ctx.textBaseline = 'middle';
+        ctx.textAlign   = 'center';
+        const tmidX = (cx1 + cx2) / 2, tmidY = (cy1 + cy2) / 2;
+        const tLines = this._wrapText(ctx, d.text, maxTW);
+        const lineH  = fs * 1.3;
+        const totalH = tLines.length * lineH;
+        let ty = tmidY - totalH / 2 + lineH / 2;
+        const botLim = Math.max(cy1, cy2) - tpad;
+        for (const line of tLines) {
+          if (ty > botLim) break;
+          ctx.fillText(line, tmidX, ty);
+          ty += lineH;
+        }
+      }
+    }
     ctx.restore();
   }
 
   _renderConnector(ctx, stroke) {
     const d = stroke.data;
-    const [cx1, cy1] = this._toCanvas(d.x1, d.y1);
-    const [cx2, cy2] = this._toCanvas(d.x2, d.y2);
+    const ep = this._getConnectorEndpoints(d);
+    const [cx1, cy1] = this._toCanvas(ep.x1, ep.y1);
+    const [cx2, cy2] = this._toCanvas(ep.x2, ep.y2);
     const lw = Math.max(1, (d.width / Whiteboard.VW) * (this._cssW || 300));
 
     const dx = cx2 - cx1, dy = cy2 - cy1;
@@ -1844,14 +2823,26 @@ class Whiteboard {
                : d.lineStyle === 'dotted' ? [lw, lw * 2.5] : [];
     ctx.setLineDash(dash);
 
-    // Line
+    // Line (straight or bezier)
     ctx.beginPath();
-    ctx.moveTo(cx1, cy1);
-    ctx.lineTo(cx2 - ux * headL * 0.7, cy2 - uy * headL * 0.7);
+    if (d.connStyle === 'curved' && (d.fromAnchor || d.toAnchor)) {
+      const dist = Math.hypot(cx2 - cx1, cy2 - cy1);
+      const k = Math.max(40, dist * 0.4);
+      const [d1x, d1y] = this._anchorDirection(d.fromAnchor || 'center');
+      const [d2x, d2y] = this._anchorDirection(d.toAnchor  || 'center');
+      const cpx1 = cx1 + d1x * k, cpy1 = cy1 + d1y * k;
+      const cpx2 = cx2 - d2x * k, cpy2 = cy2 - d2y * k;
+      ctx.moveTo(cx1, cy1);
+      ctx.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, cx2 - ux * headL * 0.7, cy2 - uy * headL * 0.7);
+    } else {
+      ctx.moveTo(cx1, cy1);
+      ctx.lineTo(cx2 - ux * headL * 0.7, cy2 - uy * headL * 0.7);
+    }
     ctx.stroke();
 
     // End arrowhead
     if (d.arrowEnd !== false) {
+      ctx.setLineDash([]);
       ctx.beginPath();
       ctx.moveTo(cx2, cy2);
       ctx.lineTo(cx2 - ux * headL + uy * headW, cy2 - uy * headL - ux * headW);
@@ -1862,6 +2853,7 @@ class Whiteboard {
 
     // Start arrowhead
     if (d.arrowStart) {
+      ctx.setLineDash([]);
       ctx.beginPath();
       ctx.moveTo(cx1, cy1);
       ctx.lineTo(cx1 + ux * headL + uy * headW, cy1 + uy * headL - ux * headW);
@@ -1875,37 +2867,42 @@ class Whiteboard {
   _renderHighlighter(ctx, stroke) {
     const d = stroke.data;
     if (!d.points || d.points.length < 2) return;
-    const lw = Math.max(8, (d.width / Whiteboard.VW) * (this._cssW || 300) * 3);
-    ctx.save();
-    ctx.globalCompositeOperation = 'source-over';
-    ctx.globalAlpha = 0.38;
-    ctx.strokeStyle = d.color || '#FFE066';
-    ctx.lineWidth   = lw;
-    ctx.lineCap     = 'square';
-    ctx.lineJoin    = 'round';
-    ctx.beginPath();
+    const W = this._cssW || 300, H = this._cssH || 150;
+    const lw = Math.max(8, (d.width / Whiteboard.VW) * W * 3);
+    // Render on offscreen canvas first so self-overlapping segments
+    // don't accumulate alpha (uniform highlight, no darker crossing points)
+    const off = document.createElement('canvas');
+    off.width = W; off.height = H;
+    const octx = off.getContext('2d');
+    octx.strokeStyle = d.color || '#FFE066';
+    octx.lineWidth   = lw;
+    octx.lineCap     = 'square';
+    octx.lineJoin    = 'round';
+    octx.beginPath();
     const [fx, fy] = this._toCanvas(d.points[0][0], d.points[0][1]);
-    ctx.moveTo(fx, fy);
+    octx.moveTo(fx, fy);
     for (let i = 1; i < d.points.length; i++) {
       const [px, py] = this._toCanvas(d.points[i][0], d.points[i][1]);
-      ctx.lineTo(px, py);
+      octx.lineTo(px, py);
     }
-    ctx.stroke();
+    octx.stroke();
+    ctx.save();
+    ctx.globalAlpha = 0.38;
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.drawImage(off, 0, 0);
     ctx.restore();
   }
 
   _renderLaser(ctx, stroke) {
     const d = stroke.data;
     if (!d.points || d.points.length === 0) return;
+    // Render only the last point (remote users don't get trail history)
     const [vx, vy] = d.points[d.points.length - 1];
     const [cx, cy] = this._toCanvas(vx, vy);
     ctx.save();
-    ctx.shadowColor = '#ff2222';
-    ctx.shadowBlur  = 15;
+    ctx.shadowColor = '#ff2222'; ctx.shadowBlur = 15;
     ctx.fillStyle   = '#ff4444';
-    ctx.beginPath();
-    ctx.arc(cx, cy, 6, 0, Math.PI * 2);
-    ctx.fill();
+    ctx.beginPath(); ctx.arc(cx, cy, 6, 0, Math.PI * 2); ctx.fill();
     ctx.restore();
   }
 
@@ -1914,11 +2911,15 @@ class Whiteboard {
     if (!d.text) return;
     const [cx, cy] = this._toCanvas(d.x, d.y);
     const fontSize = Math.round(((d.fontSize || 22) / Whiteboard.VH) * (this._cssH || 150));
+    const fw = d.fontWeight || 'normal';
+    const fi = d.fontStyle  || 'normal';
+    const ff = d.fontFamily || 'Manrope';
     ctx.save();
     ctx.globalCompositeOperation = 'source-over';
     ctx.fillStyle = d.color || '#ffffff';
-    ctx.font = `${fontSize}px 'Manrope', sans-serif`;
+    ctx.font = `${fi} ${fw} ${fontSize}px '${ff}', sans-serif`;
     ctx.textBaseline = 'top';
+    ctx.textAlign    = d.textAlign || 'left';
     // chalk effect on text too
     ctx.shadowColor = d.color || '#ffffff';
     ctx.shadowBlur  = 1.2;
@@ -1942,8 +2943,17 @@ class Whiteboard {
     if (stroke._img.complete && stroke._img.naturalWidth > 0) {
       ctx.save();
       ctx.globalCompositeOperation = 'source-over';
+      ctx.globalAlpha = d.opacity ?? 1.0;
       if (d.rotation) { const [ocx, ocy] = this._toCanvas(d.x + d.w / 2, d.y + d.h / 2); ctx.translate(ocx, ocy); ctx.rotate(d.rotation); ctx.translate(-ocx, -ocy); }
-      ctx.drawImage(stroke._img, cx, cy, cw, ch);
+      if (d.isBackground && d.fit === 'contain') {
+        // Letterbox: maintain aspect ratio, center in canvas
+        const iW = stroke._img.naturalWidth, iH = stroke._img.naturalHeight;
+        const scale = Math.min(cw / iW, ch / iH);
+        const dw = iW * scale, dh = iH * scale;
+        ctx.drawImage(stroke._img, cx + (cw - dw) / 2, cy + (ch - dh) / 2, dw, dh);
+      } else {
+        ctx.drawImage(stroke._img, cx, cy, cw, ch);
+      }
       ctx.restore();
     }
   }
@@ -2009,6 +3019,113 @@ class Whiteboard {
     ctx.restore();
   }
 
+  _renderMindmap(ctx, stroke) {
+    const d   = stroke.data;
+    if (!d.nodes) return;
+    const isEditing  = this._editingMindmapStroke === stroke;
+    const selNodeId  = isEditing ? this._selectedMindmapNodeId : null;
+
+    // Draw edges first (behind nodes)
+    for (const node of d.nodes) {
+      if (node.parentId === null) continue;
+      const parent = d.nodes.find(n => n.id === node.parentId);
+      if (!parent) continue;
+      const pr = this._mmNodeRect(d, parent);
+      const cr = this._mmNodeRect(d, node);
+      const dx  = cr.cx - pr.cx;
+      const px1 = dx >= 0 ? pr.cx + pr.w / 2 : pr.cx - pr.w / 2;
+      const px2 = dx >= 0 ? cr.cx - cr.w / 2 : cr.cx + cr.w / 2;
+      const [cpx1, cpy1] = this._toCanvas(px1, pr.cy);
+      const [cpx2, cpy2] = this._toCanvas(px2, cr.cy);
+      const k = Math.abs(cpx2 - cpx1) * 0.5;
+      ctx.save();
+      ctx.strokeStyle = node.color || '#9B5DE5';
+      ctx.lineWidth   = 1.8;
+      ctx.globalAlpha = 0.65;
+      ctx.setLineDash([]);
+      ctx.beginPath();
+      ctx.moveTo(cpx1, cpy1);
+      ctx.bezierCurveTo(cpx1 + (dx >= 0 ? k : -k), cpy1, cpx2 + (dx >= 0 ? -k : k), cpy2, cpx2, cpy2);
+      ctx.stroke();
+      ctx.restore();
+    }
+
+    // Draw nodes
+    for (const node of d.nodes) {
+      const r     = this._mmNodeRect(d, node);
+      const depth = this._mmNodeDepth(d, node.id);
+      const [cx, cy]  = this._toCanvas(r.x, r.y);
+      const cw = (r.w / Whiteboard.VW) * this._cssW;
+      const ch = (r.h / Whiteboard.VH) * this._cssH;
+      const isSelected = isEditing && node.id === selNodeId;
+      const color  = node.color || '#9B5DE5';
+
+      ctx.save();
+      ctx.globalAlpha = 0.92;
+      ctx.fillStyle   = depth === 0 ? color : `${color}33`;
+      const rad = depth === 0 ? 10 : 8;
+      if (ctx.roundRect) ctx.roundRect(cx, cy, cw, ch, rad);
+      else { ctx.beginPath(); ctx.rect(cx, cy, cw, ch); }
+      ctx.fill();
+
+      ctx.strokeStyle = isSelected ? '#ffffff' : color;
+      ctx.lineWidth   = isSelected ? 2 : 1.5;
+      ctx.globalAlpha = isSelected ? 1.0 : 0.8;
+      if (ctx.roundRect) ctx.roundRect(cx, cy, cw, ch, rad);
+      else { ctx.beginPath(); ctx.rect(cx, cy, cw, ch); }
+      ctx.stroke();
+
+      const vFontSize = depth === 0 ? 15 : 13;
+      const fs = Math.max(8, Math.round((vFontSize / Whiteboard.VH) * this._cssH));
+      ctx.fillStyle   = depth === 0 ? '#fff' : '#e8e0f7';
+      ctx.globalAlpha = 1.0;
+      ctx.font        = `${depth === 0 ? '700' : '600'} ${fs}px Manrope, sans-serif`;
+      ctx.textBaseline = 'middle';
+      ctx.textAlign    = 'center';
+      ctx.shadowBlur   = 0;
+      const lines = this._wrapText(ctx, node.text || '', cw - 10);
+      const lh = fs * 1.3;
+      const totalH = lines.length * lh;
+      let ty = cy + ch / 2 - totalH / 2 + lh / 2;
+      for (const line of lines) {
+        ctx.fillText(line, cx + cw / 2, ty);
+        ty += lh;
+      }
+
+      if (isSelected) {
+        const [bx, by] = this._toCanvas(r.x + r.w + 10, r.y + r.h / 2 - 10);
+        const btnR = Math.max(7, (10 / Whiteboard.VW) * this._cssW);
+        ctx.beginPath();
+        ctx.arc(bx + btnR, by + btnR, btnR, 0, Math.PI * 2);
+        ctx.fillStyle = '#06D6E0';
+        ctx.globalAlpha = 0.9;
+        ctx.fill();
+        ctx.fillStyle = '#fff';
+        ctx.globalAlpha = 1.0;
+        ctx.font = `bold ${Math.round(btnR * 1.4)}px Manrope`;
+        ctx.textBaseline = 'middle'; ctx.textAlign = 'center';
+        ctx.fillText('+', bx + btnR, by + btnR);
+      }
+      ctx.restore();
+    }
+
+    // Outer selection rect when whole mindmap selected but NOT in node-edit mode
+    if (!isEditing && this._selectedIds.has(stroke.id)) {
+      const bbox = this._getStrokeBBox(stroke);
+      const [bx, by] = this._toCanvas(bbox.x - 10, bbox.y - 10);
+      const bw = ((bbox.w + 20) / Whiteboard.VW) * this._cssW;
+      const bh = ((bbox.h + 20) / Whiteboard.VH) * this._cssH;
+      ctx.save();
+      ctx.strokeStyle = 'rgba(155,93,229,0.6)';
+      ctx.lineWidth = 1.5; ctx.setLineDash([5, 3]);
+      if (ctx.roundRect) ctx.roundRect(bx, by, bw, bh, 8);
+      else { ctx.beginPath(); ctx.rect(bx, by, bw, bh); }
+      ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.restore();
+    }
+  }
+
   _darkenHex(hex, amount) {
     try {
       const r = Math.max(0, parseInt(hex.slice(1, 3), 16) - amount);
@@ -2288,12 +3405,154 @@ class Whiteboard {
   }
   setWidth(px)        { this._width     = px; }
   setFill(v)          { this._fill      = v; }
+  setTextFontSize(n)  { this._textFontSize   = Math.max(8, Math.min(120, n)); }
+  setTextFontFamily(f){ this._textFontFamily = f; }
+  setTextBold(v)      { this._textBold       = v; }
+  setTextItalic(v)    { this._textItalic     = v; }
+  setTextAlign(v)     { this._textAlign = v || 'left'; if (this._textInput) this._textInput.style.textAlign = v; }
   setReadOnly(v)      { this._readOnly  = v; }
   setLineStyle(style) { this._lineStyle = style; }
   setOpacity(v)       { this._opacity   = Math.max(0.05, Math.min(1, v)); }
+  setStylusMultiplier(v) { this._stylusMultiplier = v; }
+  setBoardTheme(name) { this._boardTheme = name || 'chalkboard'; this._bgNoiseCache.delete(name); this._staticDirty = true; this.render(); }
+  setStickyColor(c)   { this._stickyColor = c || null; }
+  setTableSize(r, c)  { this._tableRows = Math.max(1, r); this._tableCols = Math.max(1, c); }
+
+  // Toggle arrowStart or arrowEnd on the selected connector
+  toggleConnectorArrow(which) {
+    if (this._selectedIds.size !== 1) return;
+    const sel = this._strokes.find(s => s.id === this._selectedId);
+    if (!sel || sel.tool !== 'connector') return;
+    sel.data[which] = !sel.data[which];
+    this._staticDirty = true;
+    this.render();
+    if (this._onStrokeUpdated) this._onStrokeUpdated(sel);
+  }
+
+  // Align all selected strokes by edge/center
+  alignStrokes(direction) {
+    if (this._selectedIds.size < 2) return;
+    const items = [];
+    for (const id of this._selectedIds) {
+      const s = this._strokes.find(x => x.id === id);
+      if (s) items.push({ stroke: s, bbox: this._getStrokeBBox(s) });
+    }
+    let ref;
+    if      (direction === 'left')    ref = Math.min(...items.map(b => b.bbox.x));
+    else if (direction === 'right')   ref = Math.max(...items.map(b => b.bbox.x + b.bbox.w));
+    else if (direction === 'top')     ref = Math.min(...items.map(b => b.bbox.y));
+    else if (direction === 'bottom')  ref = Math.max(...items.map(b => b.bbox.y + b.bbox.h));
+    else if (direction === 'centerH') ref = (Math.min(...items.map(b => b.bbox.x)) + Math.max(...items.map(b => b.bbox.x + b.bbox.w))) / 2;
+    else if (direction === 'centerV') ref = (Math.min(...items.map(b => b.bbox.y)) + Math.max(...items.map(b => b.bbox.y + b.bbox.h))) / 2;
+    for (const { stroke, bbox } of items) {
+      let dvx = 0, dvy = 0;
+      if      (direction === 'left')    dvx = ref - bbox.x;
+      else if (direction === 'right')   dvx = ref - (bbox.x + bbox.w);
+      else if (direction === 'top')     dvy = ref - bbox.y;
+      else if (direction === 'bottom')  dvy = ref - (bbox.y + bbox.h);
+      else if (direction === 'centerH') dvx = ref - (bbox.x + bbox.w / 2);
+      else if (direction === 'centerV') dvy = ref - (bbox.y + bbox.h / 2);
+      if (dvx !== 0 || dvy !== 0) {
+        this._moveStroke(stroke, dvx, dvy);
+        if (this._onStrokeUpdated) this._onStrokeUpdated(stroke);
+      }
+    }
+    this._staticDirty = true;
+    this.render();
+  }
+  get _w() { return this._effectiveWidth ?? this._width; }
   setTemplate(name)   { this._template  = name || 'blank'; this._staticDirty = true; this.render(); }
   setPageNum(n)       { this._pageNum   = n; }
 
+  /* ── Insert pre-built educational template ───────────────────────────── */
+  insertTemplate(name) {
+    const VW = Whiteboard.VW, VH = Whiteboard.VH;
+    // Center of current viewport in virtual coords
+    const [vcx, vcy] = this._toVirtual((this._cssW || VW) / 2, (this._cssH || VH) / 2);
+    const cx = vcx, cy = vcy;
+
+    const mk = (tool, data) => ({ tool, data: { ...data } });
+    const sh = (shape, x1, y1, x2, y2, color = '#06D6E0', width = 3, fill = false, extra = {}) =>
+      mk('shape', { shape, x1: cx + x1, y1: cy + y1, x2: cx + x2, y2: cy + y2, color, width, fill, ...extra });
+    const tx = (x, y, text, color = '#e8e0f7', fontSize = 18) =>
+      mk('text',  { x: cx + x, y: cy + y, text, color, fontSize });
+
+    const tpls = {
+      venn2: () => [
+        sh('ellipse', -310, -200, +90, +200, '#06D6E0'),
+        sh('ellipse', -90,  -200, +310, +200, '#F15BB5'),
+      ],
+      venn3: () => [
+        sh('ellipse', -250, -220, +50,  +100, '#06D6E0'),
+        sh('ellipse', -50,  -220, +250, +100, '#F15BB5'),
+        sh('ellipse', -140, -80,  +140, +240, '#FFE066'),
+      ],
+      tchart: () => [
+        sh('rect',  -390, -230, +390, +230, '#9B5DE5', 2),
+        sh('line',  0,    -230, 0,    +230, '#9B5DE5', 2),
+        sh('line',  -390, -150, +390, -150, '#9B5DE5', 2),
+        tx(-290, -210, 'Колонка 1', '#9B5DE5'),
+        tx( +20,  -210, 'Колонка 2', '#9B5DE5'),
+      ],
+      timeline: () => [
+        sh('line', -460, 0, +460, 0, '#06D6E0', 3),
+        sh('line',  462, -8, 462, 8, '#06D6E0', 0, false), // pseudo arrow tip
+        ...Array.from({ length: 5 }, (_, i) => {
+          const bx = -360 + i * 180;
+          return sh('line', bx, -35, bx, +35, '#06D6E0', 2);
+        }),
+        ...Array.from({ length: 5 }, (_, i) =>
+          tx(-378 + i * 180, +48, `Событие ${i + 1}`, '#9ca3af', 15)
+        ),
+      ],
+      quadrant: () => [
+        sh('line',  -380, 0,    +380, 0,    '#9B5DE5', 2),
+        sh('line',  0,    -260, 0,    +260, '#9B5DE5', 2),
+        tx(+20,  -250, 'I',   'rgba(155,93,229,0.65)', 22),
+        tx(-70,  -250, 'II',  'rgba(155,93,229,0.65)', 22),
+        tx(-80,  +210, 'III', 'rgba(155,93,229,0.65)', 22),
+        tx(+20,  +210, 'IV',  'rgba(155,93,229,0.65)', 22),
+      ],
+      pyramid: () => {
+        const levels = 4;
+        return [
+          sh('triangle', -300, -230, +300, +230, '#06D6E0', 2),
+          ...Array.from({ length: levels - 1 }, (_, i) => {
+            const t = (i + 1) / levels;
+            const y = -230 + t * 460;
+            const halfW = 300 * t;
+            return sh('line', -halfW, y, +halfW, y, '#06D6E0', 1);
+          }),
+        ];
+      },
+      swot: () => [
+        sh('rect',  -400, -250, +400, +250, '#9B5DE5', 2),
+        sh('line',  0,    -250, 0,    +250, '#9B5DE5', 2),
+        sh('line',  -400, 0,    +400, 0,    '#9B5DE5', 2),
+        tx(-380, -240, 'Strengths',   '#06D6E0', 18),
+        tx(  20, -240, 'Weaknesses',  '#F15BB5', 18),
+        tx(-380,  +15, 'Opportunities','#A8E063', 18),
+        tx(  20,  +15, 'Threats',     '#FF6B6B', 18),
+      ],
+    };
+
+    const strokes = (tpls[name] ? tpls[name]() : []);
+    if (!strokes.length) return;
+    const newIds = [];
+    for (const s of strokes) {
+      s.id = this._localIdCounter--;
+      this._strokes.push(s);
+      this._undoStack.push(s.id);
+      newIds.push(s.id);
+      if (this._onStrokeDone) this._onStrokeDone(s);
+    }
+    this._redoStack = [];
+    this._staticDirty = true;
+    this._selectedIds.clear();
+    for (const id of newIds) this._selectedIds.add(id);
+    this.render();
+  }
+
   exportPNG() {
     const off = document.createElement('canvas');
     off.width = Whiteboard.VW; off.height = Whiteboard.VH;
@@ -2509,6 +3768,57 @@ class Whiteboard {
     reader.readAsDataURL(blob);
   }
 
+  /* ── page background image ──────────────────────────────────────────── */
+
+  pasteImageAsBackground(blob) {
+    const reader = new FileReader();
+    reader.onload = ev => {
+      const img = new Image();
+      img.onload = () => {
+        // Resize to max 1920 for reasonable data size
+        const maxPx = 1920;
+        let pw = img.naturalWidth, ph = img.naturalHeight;
+        if (pw > maxPx || ph > maxPx) {
+          if (pw >= ph) { ph = Math.round(ph * maxPx / pw); pw = maxPx; }
+          else          { pw = Math.round(pw * maxPx / ph); ph = maxPx; }
+        }
+        const tmp = document.createElement('canvas');
+        tmp.width = pw; tmp.height = ph;
+        tmp.getContext('2d').drawImage(img, 0, 0, pw, ph);
+        const src = tmp.toDataURL('image/jpeg', 0.85);
+        this.removePageBackground();
+        const stroke = {
+          id: this._localIdCounter--, tool: 'image',
+          data: { src, x: 0, y: 0, w: Whiteboard.VW, h: Whiteboard.VH,
+                  isBackground: true, fit: 'contain' },
+        };
+        this._strokes.unshift(stroke);
+        this._undoStack.push(stroke.id);
+        this._redoStack = [];
+        this._staticDirty = true;
+        this.render();
+        if (this._onStrokeDone) this._onStrokeDone(stroke);
+      };
+      img.src = ev.target.result;
+    };
+    reader.readAsDataURL(blob);
+  }
+
+  removePageBackground() {
+    const idx = this._strokes.findIndex(s => s.tool === 'image' && s.data.isBackground);
+    if (idx === -1) return;
+    const stroke = this._strokes.splice(idx, 1)[0];
+    const ui = this._undoStack.indexOf(stroke.id);
+    if (ui !== -1) this._undoStack.splice(ui, 1);
+    this._staticDirty = true;
+    this.render();
+    if (this._onStrokeUndo) this._onStrokeUndo(stroke.id);
+  }
+
+  hasPageBackground() {
+    return this._strokes.some(s => s.tool === 'image' && s.data.isBackground);
+  }
+
   /* ── copy / paste / delete / z-order ─────────────────────────────────── */
 
   copy() {
@@ -2556,6 +3866,12 @@ class Whiteboard {
       const ui = this._undoStack.indexOf(id);
       if (ui !== -1) this._undoStack.splice(ui, 1);
     }
+    const deletedIds = new Set(ids);
+    for (const s of this._strokes) {
+      if (s.tool !== 'connector') continue;
+      if (deletedIds.has(s.data.fromId)) { delete s.data.fromId; delete s.data.fromAnchor; }
+      if (deletedIds.has(s.data.toId))   { delete s.data.toId;   delete s.data.toAnchor; }
+    }
     this._staticDirty = true;
     this.render();
     for (const id of ids) { if (this._onStrokeUndo) this._onStrokeUndo(id); }
@@ -2685,9 +4001,10 @@ class Whiteboard {
     if (this._ro) this._ro.disconnect();
     this._removeTextInput();
     this._removeObjectInput();
-    document.removeEventListener('keydown', this._onKeyDown);
-    document.removeEventListener('keyup',   this._onKeyUp);
-    document.removeEventListener('paste',   this._onPaste);
+    document.removeEventListener('keydown',          this._onKeyDown);
+    document.removeEventListener('keyup',            this._onKeyUp);
+    document.removeEventListener('paste',            this._onPaste);
+    document.removeEventListener('visibilitychange', this._visHandler);
     if (this._dynCanvas?.parentElement) this._dynCanvas.parentElement.removeChild(this._dynCanvas);
     if (this._mmCanvas?.parentElement)  this._mmCanvas.parentElement.removeChild(this._mmCanvas);
   }
@@ -3116,69 +4433,83 @@ class Whiteboard {
 
   _renderCompass(ctx, stroke) {
     const d = stroke.data;
-    const [cx, cy] = this._toCanvas(d.x, d.y);
-    const cw = (d.w / Whiteboard.VW) * (this._cssW || 300);
-    const ch = (d.h / Whiteboard.VH) * (this._cssH || 150);
-    const r  = Math.min(cw, ch) * 0.38;
-    const ocx = cx + cw / 2, ocy = cy + ch / 2;
+    // New format: {cx, cy, radius, arcStart, arcSweep, color, lineWidth, showLegs}
+    if (d.cx == null) return; // skip legacy strokes with old format
+    const [ccx, ccy] = this._toCanvas(d.cx, d.cy);
+    const sx  = (this._cssW || 300) / Whiteboard.VW;
+    const cr  = d.radius * sx;
+    const lw  = Math.max(1.5, (d.lineWidth || 2) * sx);
+    const arcColor = d.color || '#FFE066';
 
     ctx.save();
-    if (d.rotation) { ctx.translate(ocx, ocy); ctx.rotate(d.rotation); ctx.translate(-ocx, -ocy); }
+    ctx.globalAlpha = d.opacity ?? 1.0;
 
-    // Background
-    ctx.fillStyle = 'rgba(18,13,30,0.82)';
-    ctx.strokeStyle = 'rgba(6,214,224,0.25)';
-    ctx.lineWidth = 1;
-    if (ctx.roundRect) ctx.roundRect(cx, cy, cw, ch, 8); else ctx.rect(cx, cy, cw, ch);
-    ctx.fill(); ctx.stroke();
-
-    // Draw arm of compass (needle)
-    const angle = (d.angle || 0);       // current arc angle
-    const spread = d.spread || Math.PI / 4; // angle between legs (half = radius)
-    const legLen = r * 1.15;
-
-    // Left leg (pivot) — straight down
-    ctx.strokeStyle = 'rgba(6,214,224,0.7)';
-    ctx.lineWidth   = 2;
+    // 1. Draw the arc
+    const arcEnd = d.arcStart + d.arcSweep;
+    const ccw    = d.arcSweep < 0;
+    ctx.strokeStyle = arcColor;
+    ctx.lineWidth   = lw;
     ctx.lineCap     = 'round';
-    const pivotAngle = -Math.PI / 2 - spread / 2;
-    const drawAngle  = -Math.PI / 2 + spread / 2;
-    ctx.beginPath();
-    ctx.moveTo(ocx, ocy);
-    ctx.lineTo(ocx + Math.cos(pivotAngle + angle) * legLen, ocy + Math.sin(pivotAngle + angle) * legLen);
-    ctx.stroke();
-
-    // Right leg (pencil tip)
-    ctx.strokeStyle = 'rgba(155,93,229,0.8)';
-    ctx.beginPath();
-    ctx.moveTo(ocx, ocy);
-    ctx.lineTo(ocx + Math.cos(drawAngle + angle) * legLen, ocy + Math.sin(drawAngle + angle) * legLen);
-    ctx.stroke();
-
-    // Hinge circle at top
-    ctx.fillStyle = 'rgba(6,214,224,0.9)';
-    ctx.beginPath(); ctx.arc(ocx, ocy, 4, 0, Math.PI * 2); ctx.fill();
-
-    // Drawn arc
-    const arcR = (Math.cos(spread / 2) * legLen); // approximate radius
-    const arcAngle = d.arcAngle || Math.PI * 2;
-    const arcStart = d.arcStart || 0;
-    ctx.strokeStyle = (d.color || '#FFE066') + 'cc';
-    ctx.lineWidth   = 1.8;
     ctx.setLineDash([]);
+    ctx.shadowColor = arcColor;
+    ctx.shadowBlur  = Math.max(2, lw * 0.8);
     ctx.beginPath();
-    ctx.arc(ocx + Math.cos(pivotAngle + angle) * legLen, ocy + Math.sin(pivotAngle + angle) * legLen,
-            arcR, arcStart, arcStart + arcAngle);
+    ctx.arc(ccx, ccy, cr, d.arcStart, arcEnd, ccw);
     ctx.stroke();
+    ctx.shadowBlur = 0;
 
-    // Radius label
-    if (d.showRadius && d.radius) {
-      const fs = Math.max(9, Math.round((11 / Whiteboard.VH) * (this._cssH || 150)));
-      ctx.fillStyle = 'rgba(255,255,255,0.6)';
-      ctx.font = `${fs}px Manrope,sans-serif`;
-      ctx.textAlign = 'center'; ctx.textBaseline = 'top';
-      ctx.fillText(`r = ${d.radius}`, ocx, cy + 6);
+    // 2. Compass instrument legs
+    if (d.showLegs !== false) {
+      const ptx = ccx + cr * Math.cos(arcEnd);
+      const pty = ccy + cr * Math.sin(arcEnd);
+      const legLen = cr * 1.55;
+      const dist   = Math.hypot(ptx - ccx, pty - ccy);
+
+      // Hinge above center & pencil tip (isoceles triangle apex)
+      let hx, hy;
+      if (dist < 2) {
+        hx = ccx; hy = ccy - legLen;
+      } else {
+        const mx = (ccx + ptx) / 2, my = (ccy + pty) / 2;
+        const perpX  = -(pty - ccy) / dist;
+        const perpY  =  (ptx - ccx) / dist;
+        const halfH  = Math.sqrt(Math.max(0, legLen * legLen - (dist / 2) * (dist / 2)));
+        // Choose perpendicular direction that is "upward" (smaller canvas Y)
+        const sign   = (my + perpY * halfH) <= (my - perpY * halfH) ? 1 : -1;
+        hx = mx + sign * perpX * halfH;
+        hy = my + sign * perpY * halfH;
+      }
+
+      // Needle leg: hinge → center (fixed pivot, cyan)
+      ctx.strokeStyle = 'rgba(6,214,224,0.75)';
+      ctx.lineWidth   = Math.max(1, lw * 0.7);
+      ctx.lineCap     = 'round';
+      ctx.beginPath(); ctx.moveTo(hx, hy); ctx.lineTo(ccx, ccy); ctx.stroke();
+
+      // Pencil leg: hinge → pencil tip (violet)
+      ctx.strokeStyle = 'rgba(155,93,229,0.75)';
+      ctx.beginPath(); ctx.moveTo(hx, hy); ctx.lineTo(ptx, pty); ctx.stroke();
+
+      // Hinge screw dot
+      const hr = Math.max(3, lw * 1.3);
+      ctx.fillStyle   = 'rgba(215,210,232,0.92)';
+      ctx.strokeStyle = 'rgba(100,80,140,0.6)';
+      ctx.lineWidth   = 1;
+      ctx.beginPath(); ctx.arc(hx, hy, hr, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
+
+      // Center needle tip (cyan glow)
+      ctx.fillStyle   = '#06D6E0';
+      ctx.shadowColor = '#06D6E0'; ctx.shadowBlur = 8;
+      ctx.beginPath(); ctx.arc(ccx, ccy, Math.max(2.5, lw), 0, Math.PI * 2); ctx.fill();
+      ctx.shadowBlur = 0;
+
+      // Pencil tip dot (arc color glow)
+      ctx.fillStyle   = arcColor;
+      ctx.shadowColor = arcColor; ctx.shadowBlur = 6;
+      ctx.beginPath(); ctx.arc(ptx, pty, Math.max(2, lw * 0.85), 0, Math.PI * 2); ctx.fill();
+      ctx.shadowBlur = 0;
     }
+
     ctx.restore();
   }
 
diff --git a/frontend/knowledge-map.html b/frontend/knowledge-map.html
index a31d6e6..8af09d4 100644
--- a/frontend/knowledge-map.html
+++ b/frontend/knowledge-map.html
@@ -380,6 +380,7 @@
       <span class="sb-link active"><i data-lucide="share-2" class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></span>
       <a href="/red-book.html" class="sb-link"><i data-lucide="leaf" class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom"     class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/lab.html b/frontend/lab.html
index baea92c..d48c851 100644
--- a/frontend/lab.html
+++ b/frontend/lab.html
@@ -136,11 +136,12 @@
 
     .sim-zoom-btns { display: flex; gap: 4px; }
     .zoom-btn {
-      width: 32px; height: 32px; border-radius: 10px;
+      min-width: 32px; width: auto; height: 32px; border-radius: 10px;
       border: 1.5px solid var(--border-h);
       background: transparent; color: var(--text-2);
-      cursor: pointer; font-size: 1.1rem; font-weight: 700;
-      display: flex; align-items: center; justify-content: center;
+      cursor: pointer; font-size: .8rem; font-weight: 700;
+      padding: 0 9px; white-space: nowrap;
+      display: flex; align-items: center; justify-content: center; gap: 4px;
       transition: all .15s;
     }
     .zoom-btn:hover { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,.07); }
@@ -668,6 +669,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"    class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html"           class="sb-link"><i data-lucide="leaf"     class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom" class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
@@ -933,6 +935,54 @@
           </button>
         </div>
 
+        <!-- hydrostatics controls -->
+        <div id="ctrl-hydro" class="sim-zoom-btns" style="display:none">
+          <select id="hydro-mode-sel" onchange="hydroMode(this.value)" style="background:#1a1030;color:#f0e8ff;border:1px solid rgba(255,255,255,.15);border-radius:7px;padding:3px 8px;font-size:.72rem;cursor:pointer">
+            <option value="pressure">Давление P=ρgh</option>
+            <option value="surface">Пов. натяжение</option>
+            <option value="communicating">Сообщ. сосуды</option>
+            <option value="archimedes">Архимед</option>
+          </select>
+          <select id="hydro-liq-sel" onchange="hydroSim&&hydroSim.setLiquid(this.value)" style="background:#1a1030;color:#f0e8ff;border:1px solid rgba(255,255,255,.15);border-radius:7px;padding:3px 8px;font-size:.72rem;cursor:pointer">
+            <option value="water">Вода</option>
+            <option value="saltwater">Солёная вода</option>
+            <option value="oil">Масло</option>
+            <option value="alcohol">Спирт</option>
+            <option value="glycerin">Глицерин</option>
+            <option value="mercury">Ртуть</option>
+          </select>
+          <div id="hydro-arch-ctrl" style="display:none;gap:4px;align-items:center">
+            <select id="hydro-mat-sel" onchange="hydroSim&&hydroSim.setMaterial(this.value)" style="background:#1a1030;color:#f0e8ff;border:1px solid rgba(255,255,255,.15);border-radius:7px;padding:3px 8px;font-size:.72rem;cursor:pointer">
+              <option value="styrofoam">Пенопласт</option>
+              <option value="cork">Пробка</option>
+              <option value="wood">Дерево</option>
+              <option value="ice">Лёд</option>
+              <option value="plastic">Пластик</option>
+              <option value="glass">Стекло</option>
+              <option value="aluminum">Алюминий</option>
+              <option value="iron">Железо</option>
+              <option value="gold">Золото</option>
+            </select>
+            <button class="zoom-btn" onclick="hydroSim&&hydroSim.addBody()" title="Добавить тело">+ Тело</button>
+            <button class="zoom-btn" onclick="hydroSim&&hydroSim.clearBodies()" title="Очистить">Очистить</button>
+          </div>
+          <div id="hydro-comm-ctrl" style="display:none;gap:4px;align-items:center">
+            <label style="font-size:.72rem;color:rgba(255,255,255,.5)">Сосудов:</label>
+            <select onchange="hydroSim&&hydroSim.setNumVessels(+this.value)" style="background:#1a1030;color:#f0e8ff;border:1px solid rgba(255,255,255,.15);border-radius:7px;padding:3px 6px;font-size:.72rem;cursor:pointer">
+              <option value="2">2</option>
+              <option value="3">3</option>
+              <option value="4">4</option>
+            </select>
+            <button class="zoom-btn" id="hydro-valve-btn" onclick="hydroToggleValve()" title="Кран">Кран: откр.</button>
+          </div>
+          <div id="hydro-surf-ctrl" style="display:none;gap:4px;align-items:center">
+            <label style="font-size:.72rem;color:rgba(255,255,255,.5);white-space:nowrap">θ:</label>
+            <input type="range" min="0" max="160" value="20" step="5" style="width:72px;accent-color:#9B5DE5" oninput="hydroSim&&hydroSim.setContactAngle(+this.value);document.getElementById('hydro-theta-val').textContent=this.value+'\u00B0';document.getElementById('hydro-theta-lbl').textContent=this.value+'\u00B0';document.querySelector('#hydro-panel-theta input[type=range]').value=this.value">
+            <span id="hydro-theta-val" style="font-size:.72rem;color:#9B5DE5;min-width:28px;white-space:nowrap">20°</span>
+            <button class="zoom-btn" id="hydro-surf-toggle" onclick="hydroToggleSurface()" title="Переключить: капилляры / капля" style="white-space:nowrap">Капилляры</button>
+          </div>
+        </div>
+
         <!-- theory toggle (all sims) -->
         <button class="zoom-btn" id="theory-toggle" onclick="toggleTheory()" title="Теория и формулы" style="margin-left:auto">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
@@ -3537,6 +3587,97 @@
         <div class="pstat"><div class="pstat-label">Диагональ</div><div class="pstat-val" id="stbar-d">—</div></div>
       </div>
 
+      <!-- ── HYDROSTATICS sim body ── -->
+      <div id="sim-hydro" class="sim-proj-wrap" style="display:none">
+        <div class="sim-body-wrap">
+
+          <!-- left panel -->
+          <div class="proj-panel" style="width:230px;gap:0;overflow-y:auto">
+
+            <div class="gp-section-title" style="margin-bottom:8px">Параметры</div>
+
+            <!-- liquid -->
+            <div style="margin-bottom:10px">
+              <div style="font-size:.72rem;color:rgba(255,255,255,.4);margin-bottom:4px">Жидкость</div>
+              <select onchange="hydroSim&&hydroSim.setLiquid(this.value);document.getElementById('hydro-liq-sel').value=this.value" style="width:100%;background:#1a1030;color:#f0e8ff;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:5px 8px;font-size:.78rem">
+                <option value="water">Вода (1000 кг/м³)</option>
+                <option value="saltwater">Солёная вода (1030)</option>
+                <option value="oil">Масло (900)</option>
+                <option value="alcohol">Спирт (790)</option>
+                <option value="glycerin">Глицерин (1260)</option>
+                <option value="mercury">Ртуть (13600)</option>
+              </select>
+            </div>
+
+            <!-- material (Archimedes only) -->
+            <div id="hydro-panel-mat" style="margin-bottom:10px;display:none">
+              <div style="font-size:.72rem;color:rgba(255,255,255,.4);margin-bottom:4px">Материал тела</div>
+              <select onchange="hydroSim&&hydroSim.setMaterial(this.value)" style="width:100%;background:#1a1030;color:#f0e8ff;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:5px 8px;font-size:.78rem">
+                <option value="styrofoam">Пенопласт (30 кг/м³)</option>
+                <option value="cork">Пробка (120)</option>
+                <option value="wood">Дерево (500)</option>
+                <option value="ice">Лёд (900)</option>
+                <option value="plastic">Пластик (1100)</option>
+                <option value="glass">Стекло (2500)</option>
+                <option value="aluminum">Алюминий (2700)</option>
+                <option value="iron">Железо (7800)</option>
+                <option value="gold">Золото (19300)</option>
+              </select>
+              <div style="display:flex;gap:5px;margin-top:6px">
+                <button class="gp-btn" onclick="hydroSim&&hydroSim.addBody()" style="flex:1">+ Тело</button>
+                <button class="gp-btn" onclick="hydroSim&&hydroSim.clearBodies()" style="flex:1">Очистить</button>
+              </div>
+            </div>
+
+            <!-- contact angle (surface tension) -->
+            <div id="hydro-panel-theta" style="margin-bottom:10px;display:none">
+              <div style="display:flex;justify-content:space-between;font-size:.72rem;color:rgba(255,255,255,.4);margin-bottom:4px">
+                <span>Краевой угол θ</span>
+                <span id="hydro-theta-lbl" style="color:#9B5DE5">20°</span>
+              </div>
+              <input type="range" min="0" max="160" value="20" step="5" style="width:100%;accent-color:#9B5DE5" oninput="hydroSim&&hydroSim.setContactAngle(+this.value);document.getElementById('hydro-theta-lbl').textContent=this.value+'\u00B0';document.getElementById('hydro-theta-val').textContent=this.value+'\u00B0';document.querySelector('#hydro-surf-ctrl input[type=range]').value=this.value">
+              <div style="display:flex;justify-content:space-between;font-size:.65rem;color:rgba(255,255,255,.25);margin-top:2px">
+                <span>Смачивание</span><span>Несмачивание</span>
+              </div>
+              <div style="margin-top:6px">
+                <button class="gp-btn" id="hydro-surf-toggle-panel" onclick="hydroToggleSurface()" style="width:100%">Капилляры</button>
+              </div>
+            </div>
+
+            <!-- communicating vessels -->
+            <div id="hydro-panel-comm" style="margin-bottom:10px;display:none">
+              <div style="font-size:.72rem;color:rgba(255,255,255,.4);margin-bottom:4px">Сосудов</div>
+              <div style="display:flex;gap:5px">
+                <button class="gp-btn hydro-nv active" onclick="hydroSetVessels(2,this)" style="flex:1">2</button>
+                <button class="gp-btn hydro-nv" onclick="hydroSetVessels(3,this)" style="flex:1">3</button>
+                <button class="gp-btn hydro-nv" onclick="hydroSetVessels(4,this)" style="flex:1">4</button>
+              </div>
+              <div style="margin-top:8px">
+                <button class="gp-btn" id="hydro-valve-panel-btn" onclick="hydroToggleValve()" style="width:100%;color:#06D6A0;border-color:rgba(6,214,160,.3)">Кран: открыт</button>
+              </div>
+              <div style="margin-top:6px;display:flex;gap:5px">
+                <button class="gp-btn" onclick="hydroSim&&hydroSim.addLiquid(0)" style="flex:1">+ Жидкость</button>
+                <button class="gp-btn" onclick="hydroSim&&hydroSim.removeLiquid()" style="flex:1">- Жидкость</button>
+              </div>
+            </div>
+
+            <!-- formula display -->
+            <div class="gp-section-title" style="margin-top:4px;margin-bottom:6px">Формулы</div>
+            <div id="hydro-formulas" style="font-size:.72rem;font-family:'JetBrains Mono',monospace;color:rgba(255,255,255,.6);line-height:1.7;background:rgba(255,255,255,.03);border-radius:8px;padding:8px 10px;min-height:80px"></div>
+
+            <!-- result badge -->
+            <div id="hydro-result" style="margin-top:8px;font-size:.82rem;font-weight:700;text-align:center;padding:8px;border-radius:8px;display:none"></div>
+
+          </div><!-- /.proj-panel -->
+
+          <!-- canvas area -->
+          <div style="flex:1;min-width:0;position:relative">
+            <canvas id="hydro-canvas" style="width:100%;height:100%;display:block"></canvas>
+          </div>
+
+        </div><!-- /.sim-body-wrap -->
+      </div><!-- /#sim-hydro -->
+
       <!-- ── Theory panel (overlay right) ── -->
       <div class="theory-panel" id="theory-panel">
         <div class="theory-panel-inner" id="theory-content"></div>
@@ -4152,6 +4293,10 @@
       title: 'Закон Кулона',
       desc: 'Силовые линии и эквипотенциальные поверхности для системы точечных зарядов.',
       preview: P_FIELD },
+    { id: 'hydrostatics', cat: 'phys',
+      title: 'Гидростатика',
+      desc: 'Давление жидкости P=ρgh, закон Архимеда, сообщающиеся сосуды, поверхностное натяжение и капиллярность.',
+      preview: P_SANDBOX },
     { id: 'dynamics', cat: 'phys',
       title: 'Динамика',
       desc: 'Законы Ньютона, песочница сил, наклонная плоскость — всё в одном интерактивном модуле.',
@@ -4269,11 +4414,11 @@
                           'sim-quadratic','sim-normaldist','sim-graphtransform',
                           'sim-pendulum','sim-equilibrium','sim-thinlens','sim-titration',
                           'sim-refraction','sim-mirrors','sim-isoprocess','sim-probability','sim-bohratom','sim-electrolysis',
-                          'sim-waves'];
+                          'sim-waves','sim-hydro'];
   const ALL_CTRL_BARS  = ['ctrl-graph','ctrl-proj','ctrl-coll','ctrl-tri','ctrl-trigcircle','ctrl-mag',
                           'ctrl-molphys',
                           'ctrl-coulomb','ctrl-circuit','ctrl-chemistry','ctrl-dynamics','ctrl-chemsandbox',
-                          'ctrl-celldivision','ctrl-photosynthesis','ctrl-angrybirds','ctrl-waves'];
+                          'ctrl-celldivision','ctrl-photosynthesis','ctrl-angrybirds','ctrl-waves','ctrl-hydro'];
 
   /* ── sim routing ── */
 
@@ -4324,6 +4469,8 @@
     if (id === 'bohratom')       _openBohrAtom();
     if (id === 'electrolysis')   _openElectrolysis();
     if (id === 'waves')          _openWaves();
+    if (id === 'hydrostatics')   _openHydro();
+    if (id.startsWith('hydrostatics:')) _openHydro(id.split(':')[1]);
   }
 
   function _simShow(elId) {
@@ -4423,6 +4570,21 @@
     _simShow('sim-graph');
     _simShow('ctrl-graph');
 
+    _registerSimState('graph',
+      () => ({
+        fns: [0,1,2].map(i => ({ expr: document.getElementById(`fn${i}`)?.value || '', color: FN_COLORS[i] }))
+      }),
+      (st) => {
+        if (!Array.isArray(st.fns)) return;
+        st.fns.forEach((fn, i) => {
+          const el = document.getElementById(`fn${i}`);
+          if (el) { el.value = fn.expr; }
+          if (gSim) gSim.setFn(i, fn.expr, FN_COLORS[i]);
+        });
+      }
+    );
+    if (_embedMode) _startStateEmit('graph');
+
     requestAnimationFrame(() => requestAnimationFrame(() => {
       if (!gSim) {
         gSim = new GraphSim(document.getElementById('graph-canvas'));
@@ -4446,6 +4608,8 @@
     document.getElementById('sim-topbar-title').textContent = 'Бросок тела';
     _simShow('sim-proj');
     _simShow('ctrl-proj');
+    _registerSimState('projectile', () => pSim?.getParams(), st => pSim?.setParams(st));
+    if (_embedMode) _startStateEmit('projectile');
 
     requestAnimationFrame(() => requestAnimationFrame(() => {
       if (!pSim) {
@@ -4629,6 +4793,8 @@
     document.getElementById('sim-topbar-title').textContent = 'Столкновение шаров';
     _simShow('sim-coll');
     _simShow('ctrl-coll');
+    _registerSimState('collision', () => cSim?.getParams(), st => cSim?.setParams(st));
+    if (_embedMode) _startStateEmit('collision');
 
     requestAnimationFrame(() => requestAnimationFrame(() => {
       if (!cSim) {
@@ -6535,6 +6701,8 @@
   function _openQuadratic() {
     document.getElementById('sim-topbar-title').textContent = 'Корни квадратного уравнения';
     _simShow('sim-quadratic');
+    _registerSimState('quadratic', () => quadSim?.getParams(), st => quadSim?.setParams(st));
+    if (_embedMode) _startStateEmit('quadratic');
     requestAnimationFrame(() => requestAnimationFrame(() => {
       if (!quadSim) {
         quadSim = new QuadraticSim(document.getElementById('quadratic-canvas'));
@@ -6573,6 +6741,8 @@
   function _openNormalDist() {
     document.getElementById('sim-topbar-title').textContent = 'Нормальное распределение';
     _simShow('sim-normaldist');
+    _registerSimState('normaldist', () => ndSim?.getParams(), st => ndSim?.setParams(st));
+    if (_embedMode) _startStateEmit('normaldist');
     requestAnimationFrame(() => requestAnimationFrame(() => {
       if (!ndSim) {
         ndSim = new NormalDistSim(document.getElementById('normaldist-canvas'));
@@ -6617,6 +6787,8 @@
   function _openGraphTransform() {
     document.getElementById('sim-topbar-title').textContent = 'Трансформации графиков';
     _simShow('sim-graphtransform');
+    _registerSimState('graphtransform', () => gtSim?.getParams(), st => gtSim?.setParams(st));
+    if (_embedMode) _startStateEmit('graphtransform');
     requestAnimationFrame(() => requestAnimationFrame(() => {
       if (!gtSim) {
         gtSim = new GraphTransformSim(document.getElementById('graphtransform-canvas'));
@@ -6663,6 +6835,8 @@
   function _openPendulum() {
     document.getElementById('sim-topbar-title').textContent = 'Маятник';
     _simShow('sim-pendulum');
+    _registerSimState('pendulum', () => pendSim?.getParams(), st => pendSim?.setParams(st));
+    if (_embedMode) _startStateEmit('pendulum');
     requestAnimationFrame(() => requestAnimationFrame(() => {
       if (!pendSim) {
         pendSim = new PendulumSim(document.getElementById('pendulum-canvas'));
@@ -6705,6 +6879,8 @@
   function _openEquilibrium() {
     document.getElementById('sim-topbar-title').textContent = 'Химическое равновесие';
     _simShow('sim-equilibrium');
+    _registerSimState('equilibrium', () => eqSim?.getParams(), st => eqSim?.setParams(st));
+    if (_embedMode) _startStateEmit('equilibrium');
     requestAnimationFrame(() => requestAnimationFrame(() => {
       if (!eqSim) {
         eqSim = new EquilibriumSim(document.getElementById('equilibrium-canvas'));
@@ -6746,6 +6922,8 @@
   function _openThinLens() {
     document.getElementById('sim-topbar-title').textContent = 'Тонкая линза';
     _simShow('sim-thinlens');
+    _registerSimState('thinlens', () => lensSim?.getParams(), st => lensSim?.setParams(st));
+    if (_embedMode) _startStateEmit('thinlens');
     requestAnimationFrame(() => requestAnimationFrame(() => {
       if (!lensSim) {
         lensSim = new ThinLensSim(document.getElementById('thinlens-canvas'));
@@ -6787,6 +6965,8 @@
   function _openMirror() {
     document.getElementById('sim-topbar-title').textContent = 'Зеркала';
     _simShow('sim-mirrors');
+    _registerSimState('mirrors', () => mirrorSim?.getParams(), st => mirrorSim?.setParams(st));
+    if (_embedMode) _startStateEmit('mirrors');
     requestAnimationFrame(() => requestAnimationFrame(() => {
       if (!mirrorSim) {
         mirrorSim = new MirrorSim(document.getElementById('mirror-canvas'));
@@ -6877,6 +7057,9 @@
   function _openIsoprocess() {
     document.getElementById('sim-topbar-title').textContent = 'Изопроцессы';
     _simShow('sim-isoprocess');
+    _registerSimState('isoprocess', () => isoSim?.getParams(),
+      st => { if (isoSim) { isoSim.setParams(st); if (st.process) isoSim.setProcess(st.process); } });
+    if (_embedMode) _startStateEmit('isoprocess');
     requestAnimationFrame(() => requestAnimationFrame(() => {
       if (!isoSim) {
         isoSim = new IsoprocessSim(document.getElementById('isoprocess-canvas'));
@@ -6941,6 +7124,8 @@
   function _openTitration() {
     document.getElementById('sim-topbar-title').textContent = 'pH и кривая титрования';
     _simShow('sim-titration');
+    _registerSimState('titration', () => titrSim?.getParams(), st => titrSim?.setParams(st));
+    if (_embedMode) _startStateEmit('titration');
     requestAnimationFrame(() => requestAnimationFrame(() => {
       if (!titrSim) {
         titrSim = new TitrationSim(document.getElementById('titration-canvas'));
@@ -6989,6 +7174,8 @@
   function _openRefraction() {
     document.getElementById('sim-topbar-title').textContent = 'Преломление света';
     _simShow('sim-refraction');
+    _registerSimState('refraction', () => refrSim?.getParams(), st => refrSim?.setParams(st));
+    if (_embedMode) _startStateEmit('refraction');
     requestAnimationFrame(() => requestAnimationFrame(() => {
       if (!refrSim) {
         refrSim = new RefractionSim(document.getElementById('refraction-canvas'));
@@ -7028,6 +7215,8 @@
   function _openProbability() {
     document.getElementById('sim-topbar-title').textContent = 'Теория вероятностей';
     _simShow('sim-probability');
+    _registerSimState('probability', () => probSim?.getParams(), st => probSim?.setParams(st));
+    if (_embedMode) _startStateEmit('probability');
     requestAnimationFrame(() => requestAnimationFrame(() => {
       if (!probSim) {
         probSim = new ProbabilitySim(document.getElementById('probability-canvas'));
@@ -7066,6 +7255,8 @@
   function _openBohrAtom() {
     document.getElementById('sim-topbar-title').textContent = 'Атом Бора';
     _simShow('sim-bohratom');
+    _registerSimState('bohratom', () => bohrSim?.getParams(), st => bohrSim?.setParams(st));
+    if (_embedMode) _startStateEmit('bohratom');
     requestAnimationFrame(() => requestAnimationFrame(() => {
       if (!bohrSim) {
         bohrSim = new BohrAtomSim(document.getElementById('bohratom-canvas'));
@@ -7102,6 +7293,8 @@
   function _openElectrolysis() {
     document.getElementById('sim-topbar-title').textContent = 'Электролиз';
     _simShow('sim-electrolysis');
+    _registerSimState('electrolysis', () => elecSim?.getParams(), st => elecSim?.setParams(st));
+    if (_embedMode) _startStateEmit('electrolysis');
     requestAnimationFrame(() => requestAnimationFrame(() => {
       if (!elecSim) {
         elecSim = new ElectrolysisSim(document.getElementById('electrolysis-canvas'));
@@ -7141,6 +7334,9 @@
     document.getElementById('sim-topbar-title').textContent = 'Волны и звук';
     document.getElementById('ctrl-waves').style.display = '';
     _simShow('sim-waves');
+    _registerSimState('waves', () => wavesSim?.getParams(),
+      st => { if (wavesSim) { if (st.mode) wavesSim.setMode(st.mode); wavesSim.setParams(st); } });
+    if (_embedMode) _startStateEmit('waves');
     requestAnimationFrame(() => requestAnimationFrame(() => {
       if (!wavesSim) {
         wavesSim = new WavesSim(document.getElementById('waves-canvas'));
@@ -7887,6 +8083,123 @@
     },
   };
 
+  /* ══════════════════════════════════════════════
+     HYDROSTATICS
+  ══════════════════════════════════════════════ */
+  let hydroSim = null;
+  let _hydroValveOpen = true;
+
+  function _openHydro(preset) {
+    document.getElementById('sim-topbar-title').textContent = 'Гидростатика';
+    _simShow('sim-hydro');
+    document.getElementById('ctrl-hydro').style.display = '';
+    _registerSimState('hydrostatics',
+      () => ({ mode: hydroSim?.mode, liq: hydroSim?.liquidKey }),
+      st => { if (st?.mode && hydroSim) hydroMode(st.mode); });
+    if (_embedMode) _startStateEmit('hydrostatics');
+    window.addEventListener('load', () => {}, { once: true });
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      const canvas = document.getElementById('hydro-canvas');
+      const mode   = preset || 'pressure';
+      if (!hydroSim) {
+        hydroSim = new HydroSim(canvas, mode);
+        hydroSim.onUpdate = _hydroUpdateUI;
+      } else {
+        hydroSim.fit();
+        hydroSim.play();
+      }
+      hydroMode(mode);
+    }));
+  }
+
+  function hydroMode(mode) {
+    if (!hydroSim) return;
+    hydroSim.setMode(mode);
+    const sel = document.getElementById('hydro-mode-sel');
+    if (sel) sel.value = mode;
+    // show/hide sub-controls
+    ['arch','comm','surf','mat'].forEach(k => {
+      const el = document.getElementById('hydro-panel-' + k);
+      const el2 = document.getElementById('hydro-' + k + '-ctrl');
+      if (el)  el.style.display  = 'none';
+      if (el2) el2.style.display = 'none';
+    });
+    if (mode === 'archimedes') {
+      const a = document.getElementById('hydro-panel-mat');
+      const b = document.getElementById('hydro-arch-ctrl');
+      if (a) a.style.display = '';
+      if (b) b.style.display = 'flex';
+    }
+    if (mode === 'surface') {
+      const a = document.getElementById('hydro-panel-theta');
+      const b = document.getElementById('hydro-surf-ctrl');
+      if (a) a.style.display = '';
+      if (b) b.style.display = 'flex';
+    }
+    if (mode === 'communicating') {
+      const a = document.getElementById('hydro-panel-comm');
+      const b = document.getElementById('hydro-comm-ctrl');
+      if (a) a.style.display = '';
+      if (b) b.style.display = 'flex';
+    }
+  }
+
+  function hydroToggleSurface() {
+    if (!hydroSim) return;
+    const next = hydroSim._stMode === 'capillary' ? 'drop' : 'capillary';
+    hydroSim._stMode = next;
+    const label = next === 'capillary' ? '\u041A\u0430\u043F\u0438\u043B\u043B\u044F\u0440\u044B' : '\u041A\u0430\u043F\u043B\u044F';
+    ['hydro-surf-toggle','hydro-surf-toggle-panel'].forEach(id => {
+      const el = document.getElementById(id);
+      if (el) el.textContent = label;
+    });
+  }
+
+  function hydroToggleValve() {
+    if (!hydroSim) return;
+    _hydroValveOpen = !_hydroValveOpen;
+    hydroSim.setValve(_hydroValveOpen);
+    const label = _hydroValveOpen ? 'Кран: открыт' : 'Кран: закрыт';
+    const color = _hydroValveOpen ? '#06D6A0' : '#F15BB5';
+    ['hydro-valve-btn','hydro-valve-panel-btn'].forEach(id => {
+      const el = document.getElementById(id);
+      if (el) { el.textContent = label; el.style.color = color; el.style.borderColor = _hydroValveOpen ? 'rgba(6,214,160,.3)' : 'rgba(241,91,181,.3)'; }
+    });
+  }
+
+  function hydroSetVessels(n, btn) {
+    if (hydroSim) hydroSim.setNumVessels(n);
+    document.querySelectorAll('.hydro-nv').forEach(b => b.classList.remove('active'));
+    if (btn) btn.classList.add('active');
+  }
+
+  function _hydroUpdateUI(info) {
+    if (!info) return;
+    const el = document.getElementById('hydro-formulas');
+    if (!el) return;
+    const lines = [];
+    if (info.formula) lines.push(`<span style="color:#FFD166">${info.formula}</span>`);
+    if (info.liqName) lines.push(`Жидкость: ${info.liqName}${info.rho ? ' (ρ=' + info.rho + ')' : ''}`);
+    if (info.matName) lines.push(`Материал: ${info.matName}`);
+    if (info.FA)      lines.push(`<span style="color:#06D6E0">F_A = ${info.FA} Н</span>`);
+    if (info.mg)      lines.push(`<span style="color:#F15BB5">mg  = ${info.mg} Н</span>`);
+    if (info.sigma)   lines.push(`σ = ${info.sigma} Н/м,  θ = ${info.theta}°`);
+    if (info.h && !info.FA) lines.push(`h_подъём = ${info.h} мм`);
+    el.innerHTML = lines.join('<br>');
+    // result badge
+    const rb = document.getElementById('hydro-result');
+    if (rb && info.state) {
+      const colors = { 'ВСПЛЫВАЕТ': '#06D6A0', 'ТОНЕТ': '#F15BB5', 'ВЗВЕШЕНО': '#FFD166' };
+      rb.style.display = '';
+      rb.style.color = colors[info.state] || '#fff';
+      rb.style.background = (colors[info.state] || '#9B5DE5') + '18';
+      rb.style.border = '1px solid ' + (colors[info.state] || '#9B5DE5') + '44';
+      rb.textContent = info.state;
+    } else if (rb) {
+      rb.style.display = 'none';
+    }
+  }
+
   let _theoryOpen = false;
   function toggleTheory() {
     _theoryOpen = !_theoryOpen;
@@ -7923,6 +8236,51 @@
   const _embedMode = _qp.get('embed') === '1';
   const _autoSim   = _qp.get('sim');
 
+  /* ── Sim state relay (embed mode only) ──────────────────────────────── */
+  // Map simId → { getState, applyState } registered by openSim handlers
+  const _simStateRegistry = {};
+
+  function _registerSimState(simId, getState, applyState) {
+    _simStateRegistry[simId] = { getState, applyState };
+  }
+
+  let _lastEmittedState = null;
+  let _stateEmitInterval = null;
+
+  function _startStateEmit(simId) {
+    if (_stateEmitInterval) clearInterval(_stateEmitInterval);
+    _lastEmittedState = null;
+    _stateEmitInterval = setInterval(() => {
+      const reg = _simStateRegistry[simId];
+      if (!reg) return;
+      try {
+        const state = reg.getState();
+        const json  = JSON.stringify(state);
+        if (json === _lastEmittedState) return;
+        _lastEmittedState = json;
+        window.parent.postMessage({ type: 'sim_state', simId, state }, '*');
+      } catch {}
+    }, 400);
+  }
+
+  function _stopStateEmit() {
+    if (_stateEmitInterval) { clearInterval(_stateEmitInterval); _stateEmitInterval = null; }
+    _lastEmittedState = null;
+  }
+
+  // Receive apply_sim_state from parent (students)
+  window.addEventListener('message', e => {
+    if (!_embedMode) return;
+    const d = e.data;
+    if (!d || d.type !== 'apply_sim_state') return;
+    const reg = _simStateRegistry[_autoSim];
+    if (!reg) return;
+    try {
+      reg.applyState(d.state);
+      _lastEmittedState = JSON.stringify(d.state); // suppress echo
+    } catch {}
+  });
+
   if (_embedMode) {
     document.querySelector('.sidebar').style.display = 'none';
     document.querySelector('.sb-content').style.marginLeft = '0';
@@ -7932,7 +8290,8 @@
     if (_autoSim) {
       document.getElementById('lab-sim').classList.add('open');
       document.querySelector('.sim-topbar').style.display = 'none';
-      openSim(_autoSim);
+      // defer until all external scripts are loaded
+      window.addEventListener('load', () => openSim(_autoSim));
     }
   } else {
     /* init — fetch sim settings + permissions in parallel, then render */
@@ -8006,5 +8365,6 @@
 <script src="/js/labs/probability.js"></script>
 <script src="/js/labs/bohratom.js"></script>
 <script src="/js/labs/electrolysis.js"></script>
+<script src="/js/labs/hydrostatics.js"></script>
 </body>
 </html>
diff --git a/frontend/lesson-history.html b/frontend/lesson-history.html
new file mode 100644
index 0000000..91d380c
--- /dev/null
+++ b/frontend/lesson-history.html
@@ -0,0 +1,1894 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Архив уроков — LearnSpace</title>
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml"/>
+  <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="/css/ls.css"/>
+  <script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <style>
+    /* ── Local token overrides — LIGHT THEME ── */
+    .lh-wrap {
+      --r: 12px;
+      --lh-bg: #f5f4fb;
+      --lh-surface: #ffffff;
+      --lh-surface-2: #f0eefb;
+      --lh-border: rgba(155,93,229,0.18);
+      --lh-border-h: rgba(155,93,229,0.4);
+      --lh-text: #1a1433;
+      --lh-text-2: #4a3f6b;
+      --lh-text-3: #8f86a8;
+      --lh-glow-v: rgba(155,93,229,0.15);
+      --lh-glow-c: rgba(6,214,224,0.1);
+    }
+
+    /* ── Root height fix: sb-content has no explicit height → give it one ── */
+    .app-layout { height: 100vh; overflow: hidden; }
+    .sb-content  { height: 100%; overflow: hidden; }
+
+    /* ── Layout ── */
+    .lh-wrap {
+      display: flex; flex-direction: column; gap: 0;
+      height: 100%; overflow: hidden;
+      background: var(--lh-bg);
+      color: var(--lh-text);
+    }
+
+    /* ── Header ── */
+    .lh-header {
+      padding: 16px 32px 14px;
+      border-bottom: 1px solid var(--lh-border);
+      background: var(--lh-surface);
+      flex-shrink: 0;
+    }
+    .lh-header-top {
+      display: flex; align-items: center; justify-content: space-between; gap: 16px;
+      flex-wrap: wrap;
+    }
+    .lh-title {
+      font-family: 'Unbounded', sans-serif; font-size: 1.2rem;
+      font-weight: 800; margin: 0;
+      display: flex; align-items: center; gap: 12px;
+      background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .lh-title svg {
+      color: var(--violet);
+      -webkit-text-fill-color: initial;
+      filter: drop-shadow(0 0 8px rgba(155,93,229,0.4));
+    }
+    .lh-filters {
+      display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
+    }
+    .lh-filter-select {
+      padding: 8px 14px; border-radius: 10px; border: 1.5px solid var(--lh-border);
+      background: var(--lh-surface); color: var(--lh-text); font-family: 'Manrope', sans-serif;
+      font-size: 0.82rem; font-weight: 600; cursor: pointer;
+      transition: border-color .18s, box-shadow .18s;
+      backdrop-filter: blur(8px);
+    }
+    .lh-filter-select:focus {
+      border-color: var(--violet); outline: none;
+      box-shadow: 0 0 0 3px rgba(155,93,229,0.15);
+    }
+    .lh-filter-select option { background: #ffffff; color: #1a1433; }
+    /* date inputs inherit filter-select style */
+    input[type="date"].lh-filter-select { min-width: 130px; color: var(--lh-text); }
+    input[type="date"].lh-filter-select::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }
+    .lh-filter-label {
+      font-size: 0.75rem; font-weight: 700; color: var(--lh-text-3);
+      white-space: nowrap; align-self: center;
+    }
+    /* Admin banner */
+    .lh-admin-banner {
+      display: inline-flex; align-items: center; gap: 7px;
+      background: linear-gradient(135deg, rgba(155,93,229,0.1), rgba(6,214,224,0.06));
+      border: 1px solid rgba(155,93,229,0.25); border-radius: 99px;
+      padding: 4px 14px; font-size: 0.72rem; font-weight: 700; color: #9B5DE5;
+    }
+    /* Teacher badge in card */
+    .lh-card-teacher {
+      font-size: 0.72rem; font-weight: 700; color: #9B5DE5;
+      background: rgba(155,93,229,0.1); padding: 3px 10px; border-radius: 99px;
+      display: flex; align-items: center; gap: 4px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    }
+    /* 5th KPI card (admin-only) */
+    .lh-kpi-card.admin-extra { display: none; }
+    .lh-admin .lh-kpi-card.admin-extra { display: flex; }
+    .lh-search {
+      display: flex; align-items: center; gap: 8px;
+      border: 1.5px solid var(--lh-border); border-radius: 10px;
+      padding: 8px 14px; background: var(--lh-surface);
+      transition: border-color .18s, box-shadow .18s;
+      backdrop-filter: blur(8px);
+    }
+    .lh-search:focus-within {
+      border-color: var(--violet);
+      box-shadow: 0 0 0 3px rgba(155,93,229,0.15);
+    }
+    .lh-search svg { color: var(--lh-text-3); flex-shrink: 0; }
+    .lh-search input {
+      border: none; outline: none; background: none;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; color: var(--lh-text);
+      width: 190px;
+    }
+    .lh-search input::placeholder { color: var(--lh-text-3); }
+
+    /* ── KPI cards ── */
+    .lh-kpi {
+      display: flex; gap: 8px; padding: 10px 32px 12px; flex-shrink: 0; flex-wrap: wrap;
+    }
+    .lh-kpi-card {
+      flex: 1; min-width: 140px;
+      background: var(--lh-surface);
+      border: 1px solid var(--lh-border);
+      border-radius: 12px; padding: 10px 14px;
+      display: flex; align-items: center; gap: 12px;
+      transition: border-color .2s, box-shadow .2s;
+      position: relative; overflow: hidden;
+    }
+    .lh-kpi-card::before {
+      content: ''; position: absolute; inset: 0;
+      background: linear-gradient(135deg, rgba(155,93,229,0.03), rgba(6,214,224,0.01));
+      pointer-events: none;
+    }
+    .lh-kpi-card:hover {
+      border-color: rgba(155,93,229,0.25);
+      box-shadow: 0 2px 12px rgba(155,93,229,0.1);
+    }
+    .lh-kpi-icon {
+      width: 36px; height: 36px; border-radius: 10px;
+      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+    }
+    .lh-kpi-icon svg { width: 16px; height: 16px; }
+    .lh-kpi-icon.violet { background: rgba(155,93,229,0.12); color: #9B5DE5; }
+    .lh-kpi-icon.cyan   { background: rgba(6,214,224,0.1);  color: #06D6E0; }
+    .lh-kpi-icon.pink   { background: rgba(241,91,181,0.1); color: #F15BB5; }
+    .lh-kpi-icon.yellow { background: rgba(255,224,102,0.1); color: #FFE066; }
+    .lh-kpi-val {
+      font-family: 'Unbounded', sans-serif; font-size: 1.05rem; font-weight: 800;
+      color: var(--lh-text);
+    }
+    @keyframes lh-count-in {
+      from { opacity: 0; transform: translateY(6px) scale(0.92); }
+      to   { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    .lh-kpi-lbl { font-size: 0.68rem; color: var(--lh-text-3); margin-top: 1px; font-weight: 500; }
+
+    /* ── Body (list + detail) ── */
+    .lh-body {
+      display: flex; flex: 1; overflow: hidden; gap: 0;
+    }
+
+    /* ── Session list panel ── */
+    .lh-list-panel {
+      width: 350px; flex-shrink: 0;
+      border-right: 1px solid var(--lh-border);
+      display: flex; flex-direction: column;
+      overflow: hidden;
+      background: var(--lh-surface-2);
+    }
+    @media (max-width: 768px) {
+      .lh-list-panel { width: 100%; border-right: none; }
+      .lh-list-panel.hidden-mobile { display: none; }
+      .lh-detail-panel.hidden-mobile { display: none; }
+    }
+    .lh-list-scroll {
+      flex: 1; overflow-y: auto; padding: 12px;
+      scrollbar-width: thin; scrollbar-color: rgba(155,93,229,0.2) transparent;
+    }
+
+    /* ── Session card ── */
+    .lh-session-card {
+      position: relative;
+      background: var(--lh-surface); border: 1px solid var(--lh-border);
+      border-left: 3px solid rgba(155,93,229,0.4);
+      border-radius: var(--r); padding: 14px 16px; cursor: pointer;
+      transition: all .18s ease; margin-bottom: 8px;
+      backdrop-filter: blur(8px);
+    }
+    .lh-session-card:hover {
+      border-color: var(--lh-border-h);
+      border-left-color: #9B5DE5;
+      box-shadow: 0 8px 32px rgba(155,93,229,0.2);
+      transform: translateY(-2px);
+    }
+    .lh-session-card.active {
+      border-color: rgba(155,93,229,0.35);
+      border-left-color: #9B5DE5;
+      background: linear-gradient(135deg, rgba(155,93,229,0.1), rgba(6,214,224,0.04));
+      box-shadow: 0 0 24px rgba(155,93,229,0.12);
+    }
+    .lh-card-row1 {
+      display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
+      margin-bottom: 8px;
+      padding-right: 30px; /* clearance for .lh-card-del */
+    }
+    .lh-card-title {
+      font-weight: 700; font-size: 0.85rem; color: var(--lh-text);
+      line-height: 1.35; flex: 1;
+      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+    }
+    .lh-card-date {
+      font-size: 0.72rem; color: var(--lh-text-3); white-space: nowrap; flex-shrink: 0; margin-top: 2px;
+    }
+    .lh-card-row2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+    .lh-card-class {
+      font-size: 0.72rem; font-weight: 700; color: #9B5DE5;
+      background: rgba(155,93,229,0.12); padding: 3px 10px; border-radius: 99px;
+    }
+    .lh-card-stat {
+      display: flex; align-items: center; gap: 4px;
+      font-size: 0.72rem; color: var(--lh-text-2); font-weight: 500;
+    }
+    .lh-card-stat svg { color: var(--lh-text-3); }
+
+    /* ── Card delete button ── */
+    .lh-card-del {
+      position: absolute; top: 10px; right: 10px;
+      width: 28px; height: 28px; border-radius: 8px;
+      background: rgba(255,80,80,0.08); border: 1px solid rgba(255,80,80,0.15);
+      color: #ff6b6b; cursor: pointer;
+      display: none; align-items: center; justify-content: center;
+      transition: all .18s; z-index: 2; padding: 0;
+      backdrop-filter: blur(4px);
+    }
+    .lh-session-card:hover .lh-card-del {
+      display: flex;
+      animation: lh-fade-in 0.15s ease;
+    }
+    @keyframes lh-fade-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
+    .lh-card-del:hover {
+      background: rgba(255,80,80,0.2); border-color: rgba(255,80,80,0.4);
+      box-shadow: 0 0 16px rgba(255,80,80,0.2);
+    }
+
+    /* ── Date group separator ── */
+    .lh-date-sep {
+      font-size: 0.68rem; font-weight: 700; color: var(--lh-text-3);
+      text-transform: uppercase; letter-spacing: 0.08em;
+      padding: 10px 8px 6px; margin-top: 6px;
+      display: flex; align-items: center; gap: 8px;
+    }
+    .lh-date-sep::before {
+      content: '';
+      width: 16px; height: 16px; border-radius: 6px;
+      background: rgba(155,93,229,0.1);
+      flex-shrink: 0;
+      display: inline-flex; align-items: center; justify-content: center;
+      /* calendar icon via background */
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239B5DE5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
+      background-repeat: no-repeat; background-position: center; background-size: 10px;
+    }
+
+    /* ── Empty states ── */
+    .lh-empty {
+      text-align: center; padding: 56px 24px; color: var(--lh-text-3);
+      display: flex; flex-direction: column; align-items: center; gap: 12px;
+    }
+    .lh-empty svg {
+      display: block; opacity: 0.2;
+      filter: drop-shadow(0 0 20px rgba(155,93,229,0.3));
+    }
+    .lh-empty p { font-size: 0.85rem; margin: 0; }
+
+    /* ── Pagination ── */
+    .lh-pagination {
+      display: flex; align-items: center; justify-content: center; gap: 8px;
+      padding: 12px; border-top: 1px solid var(--lh-border); flex-shrink: 0;
+    }
+    .lh-page-btn {
+      padding: 6px 14px; border-radius: 10px; border: 1px solid var(--lh-border);
+      background: var(--lh-surface); color: var(--lh-text-2); font-size: 0.78rem; font-weight: 600;
+      cursor: pointer; transition: all .15s;
+      backdrop-filter: blur(4px);
+    }
+    .lh-page-btn:hover:not(:disabled) {
+      border-color: var(--violet); color: #9B5DE5;
+      box-shadow: 0 0 12px rgba(155,93,229,0.15);
+    }
+    .lh-page-btn:disabled { opacity: 0.35; cursor: default; }
+    .lh-page-info { font-size: 0.78rem; color: var(--lh-text-3); }
+
+    /* ── Sort row ── */
+    .lh-list-header { padding: 10px 12px 0; flex-shrink: 0; }
+    .lh-sort-row {
+      display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 8px;
+    }
+    .lh-count-badge { font-size: 0.75rem; color: var(--lh-text-3); font-weight: 600; }
+    .lh-sort-select {
+      padding: 5px 10px; border-radius: 8px; border: 1px solid var(--lh-border);
+      background: var(--lh-surface); color: var(--lh-text-2); font-family: 'Manrope', sans-serif;
+      font-size: 0.75rem; font-weight: 600; cursor: pointer; outline: none;
+      transition: border-color .15s;
+    }
+    .lh-sort-select:focus { border-color: var(--violet); }
+    .lh-sort-select option { background: #ffffff; color: #1a1433; }
+
+    /* ── Detail panel ── */
+    .lh-detail-panel {
+      flex: 1; display: flex; flex-direction: column; overflow: hidden;
+      background: var(--lh-bg);
+    }
+    .lh-detail-empty {
+      flex: 1; display: flex; flex-direction: column;
+      align-items: center; justify-content: center; gap: 18px;
+      color: var(--lh-text-3); padding: 40px;
+    }
+    .lh-detail-empty svg {
+      opacity: 0.15;
+      filter: drop-shadow(0 0 30px rgba(155,93,229,0.3));
+    }
+    .lh-detail-empty p { font-size: 0.9rem; margin: 0; }
+    .lh-detail-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+
+    /* ── Detail header ── */
+    .lh-detail-hdr {
+      padding: 10px 22px 8px;
+      border-bottom: 1px solid var(--lh-border);
+      background: var(--lh-surface);
+      flex-shrink: 0;
+    }
+    .lh-detail-back {
+      display: none; align-items: center; gap: 6px;
+      font-size: 0.78rem; font-weight: 600; color: var(--lh-text-3);
+      cursor: pointer; margin-bottom: 12px;
+      background: none; border: none; padding: 0;
+      transition: color .15s;
+    }
+    .lh-detail-back:hover { color: #9B5DE5; }
+    @media (max-width: 768px) { .lh-detail-back { display: flex; } }
+
+    .lh-detail-hdr-row {
+      display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px;
+    }
+    .lh-detail-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.95rem;
+      font-weight: 800; color: var(--lh-text); margin: 0;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
+    }
+    .lh-detail-meta {
+      display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
+    }
+    .lh-meta-item {
+      display: inline-flex; align-items: center; gap: 5px;
+      font-size: 0.7rem; font-weight: 600;
+      color: var(--lh-text-2);
+      background: rgba(155,93,229,0.06);
+      padding: 3px 9px; border-radius: 99px;
+      border: 1px solid rgba(155,93,229,0.1);
+    }
+    .lh-meta-item svg { color: var(--lh-text-3); }
+
+    /* ── Detail stats chips ── */
+    .lh-detail-stats {
+      display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px;
+    }
+    .lh-stat-chip {
+      display: flex; align-items: center; gap: 5px;
+      background: var(--lh-surface);
+      border: 1px solid var(--lh-border);
+      border-radius: 99px;
+      padding: 3px 10px; font-size: 0.7rem; font-weight: 700; color: var(--lh-text-2);
+      transition: border-color .15s;
+    }
+    .lh-stat-chip:hover { border-color: rgba(155,93,229,0.25); }
+    .lh-stat-chip svg { color: var(--lh-text-3); }
+
+    /* ── Detail delete button ── */
+    .lh-det-del-btn {
+      display: none; flex-shrink: 0; align-items: center; gap: 5px;
+      padding: 5px 11px; border-radius: 8px;
+      background: rgba(255,80,80,0.06); border: 1px solid rgba(255,80,80,0.18);
+      color: #ff6b6b; font-size: 0.74rem; font-weight: 700; font-family: 'Manrope', sans-serif;
+      cursor: pointer; transition: all .18s; white-space: nowrap;
+    }
+    .lh-det-del-btn.visible { display: flex; }
+    .lh-det-del-btn:hover {
+      background: rgba(255,80,80,0.14);
+      border-color: rgba(255,80,80,0.35);
+      box-shadow: 0 0 20px rgba(255,80,80,0.15);
+    }
+
+    /* ── Tabs (pill style) ── */
+    .lh-tabs {
+      display: flex; gap: 4px; padding: 8px 22px;
+      border-bottom: 1px solid var(--lh-border);
+      background: var(--lh-surface);
+      flex-shrink: 0;
+    }
+    .lh-tab {
+      padding: 6px 14px; border-radius: 8px;
+      border: 1px solid transparent;
+      font-size: 0.79rem; font-weight: 600; color: var(--lh-text-3);
+      cursor: pointer; background: none; transition: all .18s;
+      display: flex; align-items: center; gap: 6px;
+    }
+    .lh-tab:hover {
+      color: var(--lh-text-2);
+      background: rgba(155,93,229,0.07);
+    }
+    .lh-tab.active {
+      color: #9B5DE5;
+      background: rgba(155,93,229,0.1);
+      border-color: rgba(155,93,229,0.25);
+      box-shadow: 0 0 16px rgba(155,93,229,0.08);
+    }
+    .lh-tab svg { width: 13px; height: 13px; }
+    .lh-tab-content { flex: 1; overflow: hidden; min-height: 0; }
+
+    /* ── Board tab ── */
+    .lh-board-wrap {
+      height: 100%; display: flex; flex-direction: column; overflow: hidden;
+      padding: 0 20px 40px 0;
+    }
+    .lh-board-main {
+      flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0;
+      position: relative;
+    }
+
+    /* Topbar */
+    .lh-board-topbar {
+      height: 48px; flex-shrink: 0; position: relative;
+      background: #0e0b1e;
+      border-bottom: 1px solid rgba(155,93,229,0.18);
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 0 16px; gap: 8px;
+    }
+    .lh-board-nav-btn {
+      width: 32px; height: 32px; border-radius: 9px;
+      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
+      color: rgba(255,255,255,0.55); cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      transition: all .15s; flex-shrink: 0;
+    }
+    .lh-board-nav-btn:hover:not(:disabled) {
+      background: rgba(155,93,229,0.25);
+      border-color: rgba(155,93,229,0.4);
+      color: #c4a0f7;
+    }
+    .lh-board-nav-btn:disabled { opacity: 0.18; cursor: default; }
+
+    /* Page indicator button */
+    .lh-page-indicator {
+      display: flex; align-items: center; gap: 8px;
+      padding: 6px 14px; border-radius: 10px;
+      background: rgba(155,93,229,0.06);
+      border: 1.5px solid rgba(155,93,229,0.18);
+      color: rgba(255,255,255,0.85); cursor: pointer;
+      font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700;
+      transition: all .15s;
+      white-space: nowrap;
+      position: relative;
+    }
+    .lh-page-indicator::before {
+      content: ''; position: absolute; inset: -1px; border-radius: 11px;
+      background: linear-gradient(135deg, rgba(155,93,229,0.2), rgba(6,214,224,0.1));
+      z-index: -1; opacity: 0;
+      transition: opacity .15s;
+    }
+    .lh-page-indicator:hover {
+      background: rgba(155,93,229,0.12);
+      border-color: rgba(155,93,229,0.35);
+    }
+    .lh-page-indicator:hover::before { opacity: 1; }
+    .lh-page-indicator.open {
+      background: rgba(155,93,229,0.15);
+      border-color: #9B5DE5;
+      box-shadow: 0 0 16px rgba(155,93,229,0.2);
+    }
+    .lh-page-ind-title { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
+    .lh-page-ind-counter { color: rgba(155,93,229,0.75); font-size: 11px; }
+    .lh-page-ind-chevron { color: rgba(255,255,255,0.35); transition: transform .18s; }
+    .lh-page-indicator.open .lh-page-ind-chevron { transform: rotate(180deg); }
+
+    /* Pages popup */
+    .lh-pages-popup {
+      position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
+      z-index: 200;
+      background: rgba(18,14,32,0.92); border: 1px solid rgba(155,93,229,0.25);
+      border-radius: 16px; padding: 14px;
+      box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 40px rgba(155,93,229,0.08);
+      backdrop-filter: blur(20px);
+      display: grid; grid-template-columns: repeat(4, 120px); gap: 10px;
+      max-height: 70vh; overflow-y: auto;
+      scrollbar-width: thin; scrollbar-color: rgba(155,93,229,0.3) transparent;
+    }
+    .lh-pages-popup.hidden { display: none; }
+    @media (max-width: 700px) { .lh-pages-popup { grid-template-columns: repeat(2, 140px); } }
+
+    /* Thumbnail card */
+    .lh-thumb-item {
+      cursor: pointer; border-radius: 10px;
+      border: 2px solid rgba(255,255,255,0.06);
+      background: rgba(28,22,48,0.8); overflow: hidden;
+      transition: all .18s;
+    }
+    .lh-thumb-item:hover {
+      border-color: rgba(155,93,229,0.45);
+      box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 16px rgba(155,93,229,0.12);
+      transform: translateY(-2px);
+    }
+    .lh-thumb-item.active {
+      border-color: #9B5DE5;
+      box-shadow: 0 0 0 3px rgba(155,93,229,0.2), 0 4px 20px rgba(0,0,0,0.3);
+    }
+    .lh-thumb-canvas-wrap { width: 100%; aspect-ratio: 16/9; background: #2d5a2d; overflow: hidden; }
+    .lh-thumb-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
+    .lh-thumb-footer {
+      padding: 6px 8px;
+      display: flex; align-items: center; justify-content: space-between; gap: 4px;
+    }
+    .lh-thumb-lbl {
+      font-size: 10px; color: rgba(255,255,255,0.55); font-family: 'Manrope', sans-serif;
+      font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
+    }
+    .lh-thumb-num {
+      font-size: 10px; color: rgba(155,93,229,0.65); font-family: 'Manrope', sans-serif; font-weight: 800;
+    }
+
+    /* Canvas */
+    .lh-board-canvas-wrap {
+      flex: 1; position: relative; overflow: hidden;
+      background: #2d5a2d; min-height: 0;
+    }
+    .lh-board-canvas-wrap::after {
+      content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
+      background:
+        linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, transparent 60px),
+        linear-gradient(to top,    rgba(0,0,0,0.12) 0%, transparent 80px);
+    }
+    .lh-board-canvas { position: absolute; top: 0; left: 0; display: block; }
+
+    /* Zoom bar */
+    .lh-board-zoom {
+      position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
+      display: flex; align-items: center; gap: 1px; z-index: 20;
+      background: rgba(10,7,24,0.88);
+      border: 1px solid rgba(155,93,229,0.22);
+      border-radius: 14px; padding: 5px 6px;
+      backdrop-filter: blur(16px);
+      box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
+    }
+    .lh-zoom-btn {
+      width: 34px; height: 34px; border-radius: 9px; background: transparent; border: none;
+      color: rgba(255,255,255,0.55); cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      transition: background .15s, color .15s;
+    }
+    .lh-zoom-btn:hover {
+      background: rgba(155,93,229,0.25);
+      color: #c4a0f7;
+    }
+    .lh-zoom-lbl {
+      font-size: 12px; color: rgba(255,255,255,0.7); font-family: 'Manrope', sans-serif;
+      font-weight: 700; min-width: 44px; text-align: center;
+    }
+    .lh-zoom-divider { width: 1px; height: 18px; background: rgba(255,255,255,0.08); margin: 0 4px; }
+
+    /* Export */
+    .lh-board-export { position: absolute; top: 14px; right: 16px; z-index: 20; }
+    .lh-export-btn {
+      display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px;
+      background: rgba(10,7,24,0.75);
+      border: 1px solid rgba(155,93,229,0.22);
+      color: rgba(255,255,255,0.8); font-size: 11px; font-family: 'Manrope', sans-serif;
+      font-weight: 700; cursor: pointer; transition: all .18s;
+      backdrop-filter: blur(12px);
+      box-shadow: 0 2px 12px rgba(0,0,0,0.35);
+    }
+    .lh-export-btn:hover {
+      background: rgba(155,93,229,0.3);
+      color: #fff; border-color: rgba(155,93,229,0.45);
+      box-shadow: 0 4px 20px rgba(155,93,229,0.2);
+    }
+
+    /* Loading */
+    .lh-board-loading {
+      position: absolute; inset: 0; display: flex; flex-direction: column;
+      align-items: center; justify-content: center; gap: 14px;
+      background: #2d5a2d; color: rgba(255,255,255,0.45);
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; z-index: 30;
+    }
+    .lh-board-spinner {
+      width: 36px; height: 36px; border-radius: 50%;
+      border: 3px solid rgba(155,93,229,0.12); border-top-color: #9B5DE5;
+      animation: lh-spin 0.75s linear infinite;
+    }
+    @keyframes lh-spin { to { transform: rotate(360deg); } }
+
+    /* ── Chat tab ── */
+    .lh-chat-wrap {
+      height: 100%; overflow-y: auto; padding: 18px 22px;
+      display: flex; flex-direction: column; gap: 6px;
+      scrollbar-width: thin; scrollbar-color: rgba(155,93,229,0.2) transparent;
+    }
+    .lh-chat-toolbar {
+      display: flex; justify-content: flex-end; padding: 12px 22px 0;
+      flex-shrink: 0;
+    }
+    .lh-chat-export-btn {
+      display: flex; align-items: center; gap: 7px;
+      padding: 7px 16px; border-radius: 10px;
+      background: rgba(155,93,229,0.08); border: 1px solid rgba(155,93,229,0.2);
+      color: #9B5DE5; font-size: 0.78rem; font-weight: 700; cursor: pointer;
+      text-decoration: none; transition: all .15s;
+    }
+    .lh-chat-export-btn:hover {
+      background: rgba(155,93,229,0.15);
+      box-shadow: 0 0 12px rgba(155,93,229,0.1);
+    }
+
+    /* Message bubble */
+    .lh-msg {
+      display: flex; align-items: flex-start; gap: 12px;
+      padding: 10px 14px; border-radius: 12px;
+      transition: background .15s;
+    }
+    .lh-msg:hover { background: rgba(155,93,229,0.04); }
+    .lh-msg-avatar {
+      width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 13px; font-weight: 700; color: #fff;
+      box-shadow: 0 0 0 2px rgba(155,93,229,0.2), 0 0 0 4px rgba(155,93,229,0.05);
+    }
+    .lh-msg-body { flex: 1; min-width: 0; }
+    .lh-msg-head {
+      display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
+    }
+    .lh-msg-name { font-size: 0.8rem; font-weight: 700; color: var(--lh-text); }
+    .lh-msg-time { font-size: 0.72rem; color: var(--lh-text-3); }
+    .lh-msg-text {
+      font-size: 0.83rem; color: var(--lh-text-2); line-height: 1.55;
+      word-break: break-word; white-space: pre-wrap;
+      background: rgba(155,93,229,0.04);
+      padding: 8px 14px; border-radius: 0 12px 12px 12px;
+      border: 1px solid rgba(155,93,229,0.06);
+    }
+    .lh-msg-img { max-width: 220px; border-radius: 10px; margin-top: 6px; display: block; }
+
+    /* Pinned message */
+    .lh-msg.pinned {
+      background: rgba(255,224,102,0.04);
+      border: 1px solid rgba(255,224,102,0.12);
+      border-radius: 12px; padding: 10px 14px;
+    }
+    .lh-msg.pinned .lh-msg-name {
+      color: #FFE066;
+    }
+    .lh-msg.pinned .lh-msg-name::after {
+      content: '';
+      display: inline-block; width: 12px; height: 12px; margin-left: 6px;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFE066' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='17' x2='12' y2='22'/%3E%3Cpath d='M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z'/%3E%3C/svg%3E");
+      background-repeat: no-repeat; background-size: contain;
+      vertical-align: middle;
+    }
+
+    /* ── Attendance tab ── */
+    .lh-attend-wrap {
+      height: 100%; overflow-y: auto; padding: 18px 22px;
+      scrollbar-width: thin; scrollbar-color: rgba(155,93,229,0.2) transparent;
+    }
+    .lh-attend-summary {
+      display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
+    }
+    .lh-attend-kpi {
+      background: var(--lh-surface);
+      border: 1px solid var(--lh-border);
+      border-radius: var(--r); padding: 12px 18px;
+      text-align: center; min-width: 110px;
+      backdrop-filter: blur(8px);
+    }
+    .lh-attend-kpi-val {
+      font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--lh-text);
+    }
+    .lh-attend-kpi-lbl { font-size: 0.72rem; color: var(--lh-text-3); margin-top: 3px; }
+
+    /* Attendance table */
+    .lh-attend-table { width: 100%; border-collapse: collapse; }
+    .lh-attend-table th, .lh-attend-table td {
+      text-align: left; padding: 11px 14px;
+      border-bottom: 1px solid var(--lh-border);
+      font-size: 0.82rem;
+    }
+    .lh-attend-table th {
+      font-weight: 700; color: var(--lh-text-3); font-size: 0.73rem;
+      text-transform: uppercase; letter-spacing: 0.05em;
+      background: rgba(155,93,229,0.04);
+      position: sticky; top: 0; z-index: 2;
+      backdrop-filter: blur(6px);
+    }
+    .lh-attend-table td { color: var(--lh-text-2); }
+    .lh-attend-table tbody tr:nth-child(even) { background: rgba(155,93,229,0.02); }
+    .lh-attend-table tbody tr:hover { background: rgba(155,93,229,0.06); }
+    .lh-attend-table td strong { color: var(--lh-text); }
+    .lh-attend-dur {
+      display: inline-flex; align-items: center; gap: 4px;
+      background: linear-gradient(135deg, rgba(155,93,229,0.1), rgba(6,214,224,0.06));
+      border: 1px solid rgba(155,93,229,0.15);
+      border-radius: 99px;
+      padding: 3px 11px; font-size: 0.75rem; font-weight: 700; color: #9B5DE5;
+    }
+
+    /* ── Notes tab ── */
+    .lh-notes-wrap {
+      height: 100%; overflow-y: auto; padding: 18px 22px;
+      scrollbar-width: thin; scrollbar-color: rgba(155,93,229,0.2) transparent;
+    }
+    .lh-note-card {
+      background: var(--lh-surface); border: 1px solid var(--lh-border);
+      border-radius: var(--r); padding: 16px 18px; margin-bottom: 12px;
+      backdrop-filter: blur(8px);
+      transition: border-color .15s, box-shadow .15s;
+    }
+    .lh-note-card:hover {
+      border-color: rgba(155,93,229,0.2);
+      box-shadow: 0 4px 16px rgba(155,93,229,0.08);
+    }
+    .lh-note-head {
+      display: flex; align-items: center; justify-content: space-between;
+      margin-bottom: 10px;
+    }
+    .lh-note-author {
+      font-weight: 700; font-size: 0.82rem; color: var(--lh-text);
+      display: flex; align-items: center; gap: 7px;
+    }
+    .lh-note-author svg { color: var(--lh-text-3); }
+    .lh-note-time { font-size: 0.72rem; color: var(--lh-text-3); }
+    .lh-note-text {
+      font-size: 0.83rem; color: var(--lh-text-2); line-height: 1.65;
+      white-space: pre-wrap; word-break: break-word;
+    }
+    .lh-own-note-box {
+      background: rgba(155,93,229,0.04); border: 1px solid rgba(155,93,229,0.15);
+      border-radius: var(--r); padding: 18px; margin-bottom: 12px;
+    }
+    .lh-own-note-lbl {
+      font-size: 0.78rem; font-weight: 700; color: #9B5DE5; margin-bottom: 10px;
+    }
+
+    /* ── Skeleton ── */
+    .lh-skeleton {
+      background: linear-gradient(90deg, rgba(155,93,229,0.06) 25%, rgba(155,93,229,0.12) 50%, rgba(155,93,229,0.06) 75%);
+      background-size: 200% 100%;
+      border-radius: 8px;
+      animation: lh-shimmer 1.6s ease-in-out infinite;
+    }
+    @keyframes lh-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+    .lh-sk-card { height: 80px; border-radius: var(--r); margin-bottom: 8px; }
+
+    /* ── Confirmation modal ── */
+    .lh-confirm-overlay {
+      position: fixed; inset: 0; background: rgba(6,4,14,0.8);
+      display: flex; align-items: center; justify-content: center;
+      z-index: 2000; backdrop-filter: blur(8px);
+    }
+    .lh-confirm-overlay.hidden { display: none; }
+    .lh-confirm-dialog {
+      background: #ffffff;
+      border: 1.5px solid rgba(255,80,80,0.2);
+      border-radius: 20px; padding: 32px 32px 26px; max-width: 420px; width: 92%;
+      box-shadow: 0 24px 80px rgba(0,0,0,0.25), 0 0 40px rgba(255,80,80,0.04);
+      position: relative; overflow: hidden;
+    }
+    .lh-confirm-dialog::before {
+      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
+      background: linear-gradient(90deg, transparent, rgba(255,80,80,0.5), transparent);
+    }
+    .lh-confirm-icon {
+      width: 52px; height: 52px; border-radius: 16px;
+      background: rgba(255,80,80,0.08); border: 1.5px solid rgba(255,80,80,0.2);
+      display: flex; align-items: center; justify-content: center;
+      color: #ff6b6b; margin-bottom: 18px;
+      animation: lh-pulse-icon 2s ease-in-out infinite;
+    }
+    @keyframes lh-pulse-icon {
+      0%, 100% { box-shadow: 0 0 0 0 rgba(255,80,80,0.2); }
+      50%      { box-shadow: 0 0 0 8px rgba(255,80,80,0); }
+    }
+    .lh-confirm-cancel {
+      padding: 9px 20px; border-radius: 10px; border: 1px solid rgba(155,93,229,0.18);
+      background: transparent; color: #4a3f6b; font-family: 'Manrope', sans-serif;
+      font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: all .15s;
+    }
+    .lh-confirm-cancel:hover { border-color: #8f86a8; color: #1a1433; }
+    .lh-confirm-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.95rem; font-weight: 800;
+      color: #1a1433; margin: 0 0 10px;
+    }
+    .lh-confirm-desc {
+      font-size: 0.83rem; color: #4a3f6b; line-height: 1.6; margin: 0 0 24px;
+    }
+    .lh-confirm-sname { font-weight: 700; color: #1a1433; }
+    .lh-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
+    .lh-confirm-delete {
+      padding: 9px 20px; border-radius: 10px; border: 1.5px solid rgba(255,80,80,0.3);
+      background: rgba(255,80,80,0.08); color: #ff6b6b;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
+      cursor: pointer; transition: all .15s;
+    }
+    .lh-confirm-delete:hover {
+      background: rgba(255,80,80,0.18);
+      box-shadow: 0 0 20px rgba(255,80,80,0.15);
+    }
+    .lh-confirm-delete:disabled { opacity: 0.4; cursor: default; }
+  </style>
+</head>
+<body>
+<div class="app-layout">
+  <aside class="sidebar">
+    <div class="sb-brand">
+      <a href="/dashboard" class="sb-logo"><span class="sb-lbl">Learn<span>Space</span></span></a>
+      <button class="sb-toggle" title="Свернуть меню"><i data-lucide="chevron-left" class="sb-icon"></i></button>
+    </div>
+    <nav class="sb-nav">
+      <button class="sb-link" onclick="lsSearchOpen()" title="Ctrl+K"><i data-lucide="search" class="sb-icon"></i><span class="sb-lbl">Поиск</span></button>
+      <a href="/dashboard"  class="sb-link"><i data-lucide="home" class="sb-icon"></i><span class="sb-lbl">Дашборд</span></a>
+      <a href="/board"      class="sb-link" id="btn-board"   style="display:none"><i data-lucide="layout-dashboard" class="sb-icon"></i><span class="sb-lbl">Доска</span></a>
+      <a href="/classes"    class="sb-link" id="btn-classes" style="display:none"><i data-lucide="graduation-cap" class="sb-icon"></i><span class="sb-lbl">Классы</span></a>
+      <a href="/library"    class="sb-link"><i data-lucide="book-open" class="sb-icon"></i><span class="sb-lbl">Библиотека</span></a>
+      <a href="/theory"     class="sb-link"><i data-lucide="brain" class="sb-icon"></i><span class="sb-lbl">Теория</span></a>
+      <a href="/lab"           class="sb-link"><i data-lucide="atom"          class="sb-icon"></i><span class="sb-lbl">Лаборатория</span></a>
+      <a href="/biochem"       class="sb-link"><i data-lucide="flask-conical" class="sb-icon"></i><span class="sb-lbl">Биохимия</span></a>
+      <a href="/hangman"       class="sb-link"><i data-lucide="gamepad-2"     class="sb-icon"></i><span class="sb-lbl">Виселица</span></a>
+      <a href="/crossword"     class="sb-link"><i data-lucide="grid-3x3"      class="sb-icon"></i><span class="sb-lbl">Кроссворд</span></a>
+      <a href="/pet"           class="sb-link"><i data-lucide="heart"         class="sb-icon"></i><span class="sb-lbl">Питомец</span></a>
+      <a href="/collection"    class="sb-link"><i data-lucide="layers"        class="sb-icon"></i><span class="sb-lbl">Коллекция</span></a>
+      <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"       class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
+      <a href="/red-book.html" class="sb-link"><i data-lucide="leaf"          class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
+      <a href="/classroom"     class="sb-link"><i data-lucide="presentation"  class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <span class="sb-link active"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></span>
+      <div class="sb-divider"></div>
+      <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2" class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
+      <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database" class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
+      <a href="/live-quiz"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="radio" class="sb-icon"></i><span class="sb-lbl">Live-квиз</span></a>
+      <a href="/gradebook"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="table" class="sb-icon"></i><span class="sb-lbl">Журнал</span></a>
+      <a href="/admin"         class="sb-link" id="btn-admin" style="display:none"><i data-lucide="settings" class="sb-icon"></i><span class="sb-lbl">Управление</span></a>
+    </nav>
+    <div style="padding:4px 2px">
+      <div id="notif-wrap">
+        <button class="sb-link" id="notif-btn" onclick="LS.notif.toggle()">
+          <i data-lucide="bell" class="sb-icon"></i><span class="sb-lbl">Уведомления</span>
+          <span class="sb-badge" id="notif-badge" style="display:none"></span>
+        </button>
+      </div>
+      <button class="sb-link" id="btn-join" style="display:none" onclick="openJoinModal()"><i data-lucide="user-plus" class="sb-icon"></i><span class="sb-lbl">Вступить в класс</span></button>
+    </div>
+    <div class="sb-foot">
+      <a href="/profile" class="sb-user-row" style="text-decoration:none">
+        <div class="sb-avatar" id="nav-avatar">?</div>
+        <div class="sb-user-info"><div class="sb-user-name" id="nav-user">...</div><div class="sb-user-role" id="nav-role"></div></div>
+      </a>
+    </div>
+  </aside>
+
+  <main class="sb-content">
+    <div class="lh-wrap">
+
+      <!-- Header + filters -->
+      <div class="lh-header">
+        <div class="lh-header-top">
+          <h1 class="lh-title">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>
+            Архив уроков
+          </h1>
+        </div>
+        <div class="lh-filters">
+          <!-- Teacher filter: admin only -->
+          <select class="lh-filter-select" id="lh-teacher-filter" onchange="onTeacherFilter()" style="display:none">
+            <option value="">Все учителя</option>
+          </select>
+          <!-- Class filter: teacher only (admin uses search) -->
+          <select class="lh-filter-select" id="lh-class-filter" onchange="onClassFilter()">
+            <option value="">Все классы</option>
+          </select>
+          <!-- Date range: admin only -->
+          <span class="lh-filter-label" id="lh-date-label" style="display:none">с</span>
+          <input type="date" class="lh-filter-select" id="lh-date-from" onchange="onDateFilter()" style="display:none" title="С даты"/>
+          <span class="lh-filter-label" id="lh-date-label2" style="display:none">по</span>
+          <input type="date" class="lh-filter-select" id="lh-date-to" onchange="onDateFilter()" style="display:none" title="По дату"/>
+          <div class="lh-search">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+            <input type="text" id="lh-search" placeholder="Поиск по названию..." oninput="onSearch()"/>
+          </div>
+        </div>
+      </div>
+
+      <!-- KPI row -->
+      <div class="lh-kpi" id="lh-kpi">
+        <div class="lh-kpi-card">
+          <div class="lh-kpi-icon violet"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg></div>
+          <div><div class="lh-kpi-val" id="kpi-total">&mdash;</div><div class="lh-kpi-lbl" id="kpi-total-lbl">Уроков проведено</div></div>
+        </div>
+        <div class="lh-kpi-card">
+          <div class="lh-kpi-icon cyan"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
+          <div><div class="lh-kpi-val" id="kpi-time">&mdash;</div><div class="lh-kpi-lbl">Общее время</div></div>
+        </div>
+        <!-- Admin-only: teachers count -->
+        <div class="lh-kpi-card admin-extra">
+          <div class="lh-kpi-icon violet" style="background:rgba(255,159,67,0.1);color:#FF9F43"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div>
+          <div><div class="lh-kpi-val" id="kpi-teachers">&mdash;</div><div class="lh-kpi-lbl">Учителей</div></div>
+        </div>
+        <div class="lh-kpi-card">
+          <div class="lh-kpi-icon pink"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
+          <div><div class="lh-kpi-val" id="kpi-students">&mdash;</div><div class="lh-kpi-lbl">Учеников охвачено</div></div>
+        </div>
+        <div class="lh-kpi-card">
+          <div class="lh-kpi-icon yellow"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
+          <div><div class="lh-kpi-val" id="kpi-msgs">&mdash;</div><div class="lh-kpi-lbl">Сообщений в чатах</div></div>
+        </div>
+      </div>
+
+      <!-- Body: list + detail -->
+      <div class="lh-body">
+
+        <!-- Session list -->
+        <div class="lh-list-panel" id="lh-list-panel">
+          <div class="lh-list-header">
+            <div class="lh-sort-row">
+              <span class="lh-count-badge" id="lh-count-badge"></span>
+              <select class="lh-sort-select" id="lh-sort" onchange="onSort()">
+                <option value="newest">Сначала новые</option>
+                <option value="oldest">Сначала старые</option>
+                <option value="longest">По длительности</option>
+                <option value="most_students" class="admin-opt" style="display:none">По числу учеников</option>
+              </select>
+            </div>
+          </div>
+          <div class="lh-list-scroll" id="lh-list">
+            <div class="lh-sk-card lh-skeleton"></div>
+            <div class="lh-sk-card lh-skeleton"></div>
+            <div class="lh-sk-card lh-skeleton"></div>
+          </div>
+          <div class="lh-pagination" id="lh-pagination" style="display:none">
+            <button class="lh-page-btn" id="lh-prev" onclick="changePage(-1)">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+            </button>
+            <span class="lh-page-info" id="lh-page-info">1 / 1</span>
+            <button class="lh-page-btn" id="lh-next" onclick="changePage(1)">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+            </button>
+          </div>
+        </div>
+
+        <!-- Detail view -->
+        <div class="lh-detail-panel" id="lh-detail-panel">
+          <div class="lh-detail-empty" id="lh-detail-empty">
+            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>
+            <p>Выберите урок из списка слева</p>
+          </div>
+          <div class="lh-detail-content" id="lh-detail-content" style="display:none">
+            <div class="lh-detail-hdr">
+              <button class="lh-detail-back" onclick="backToList()">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+                Назад к списку
+              </button>
+              <div class="lh-detail-hdr-row">
+                <h2 class="lh-detail-title" id="det-title">&mdash;</h2>
+                <button class="lh-det-del-btn" id="det-del-btn" onclick="confirmDelete(null)">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg>
+                  Удалить
+                </button>
+              </div>
+              <div class="lh-detail-meta">
+                <span class="lh-meta-item" id="det-date">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+                </span>
+                <span class="lh-meta-item" id="det-teacher">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+                </span>
+                <span class="lh-meta-item" id="det-class" style="display:none">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg>
+                </span>
+              </div>
+              <div class="lh-detail-stats" id="det-stats"></div>
+            </div>
+
+            <!-- Tabs -->
+            <div class="lh-tabs">
+              <button class="lh-tab active" id="tab-board" onclick="switchTab('board')">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
+                Доска
+              </button>
+              <button class="lh-tab" id="tab-chat" onclick="switchTab('chat')">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+                Чат
+                <span id="tab-chat-count" style="display:none;background:rgba(155,93,229,.15);color:#9B5DE5;font-size:10px;padding:2px 7px;border-radius:99px;font-weight:700"></span>
+              </button>
+              <button class="lh-tab" id="tab-attend" onclick="switchTab('attend')">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+                Посещаемость
+              </button>
+              <button class="lh-tab" id="tab-notes" onclick="switchTab('notes')">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                Заметки
+              </button>
+            </div>
+
+            <!-- Tab contents -->
+            <div class="lh-tab-content">
+              <!-- Board -->
+              <div id="tc-board" class="lh-board-wrap">
+                <div class="lh-board-main">
+                  <!-- Topbar: prev / [page indicator] / next -->
+                  <div class="lh-board-topbar">
+                    <button class="lh-board-nav-btn" id="lh-page-prev" onclick="lhPageNav(-1)" title="Предыдущая (←)">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+                    </button>
+
+                    <!-- Page indicator -->
+                    <button class="lh-page-indicator" id="lh-page-indicator" onclick="lhTogglePages()">
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
+                      <span class="lh-page-ind-title" id="lh-page-title">Страница 1</span>
+                      <span class="lh-page-ind-counter" id="lh-page-total"></span>
+                      <svg class="lh-page-ind-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+                    </button>
+
+                    <!-- Pages popup (thumbnails grid) -->
+                    <div class="lh-pages-popup hidden" id="lh-pages-popup">
+                      <div id="lh-thumbs"></div>
+                    </div>
+
+                    <button class="lh-board-nav-btn" id="lh-page-next" onclick="lhPageNav(1)" title="Следующая (→)">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+                    </button>
+                  </div>
+
+                  <!-- Canvas -->
+                  <div class="lh-board-canvas-wrap">
+                    <canvas id="lh-canvas" class="lh-board-canvas"></canvas>
+                    <div class="lh-board-loading" id="lh-board-loading">
+                      <div class="lh-board-spinner"></div>
+                      <span>Загрузка доски...</span>
+                    </div>
+                    <div class="lh-board-export">
+                      <button class="lh-export-btn" onclick="exportBoardPage()">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                        PNG
+                      </button>
+                    </div>
+                    <div class="lh-board-zoom">
+                      <button class="lh-zoom-btn" onclick="lhZoom(-0.25)" title="-">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                      </button>
+                      <span class="lh-zoom-lbl" id="lh-zoom-lbl">100%</span>
+                      <button class="lh-zoom-btn" onclick="lhZoom(0.25)" title="+">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                      </button>
+                      <div class="lh-zoom-divider"></div>
+                      <button class="lh-zoom-btn" onclick="lhZoomFit()" title="Вписать (0)">
+                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Chat -->
+              <div id="tc-chat" style="display:none;height:100%;flex-direction:column;overflow:hidden">
+                <div class="lh-chat-toolbar" id="lh-chat-toolbar"></div>
+                <div class="lh-chat-wrap" id="lh-chat-list"></div>
+              </div>
+
+              <!-- Attendance -->
+              <div id="tc-attend" style="display:none">
+                <div class="lh-attend-wrap">
+                  <div class="lh-attend-summary" id="lh-attend-summary"></div>
+                  <table class="lh-attend-table">
+                    <thead><tr>
+                      <th>Участник</th><th>Вошёл</th><th>Вышел</th><th>Время</th>
+                    </tr></thead>
+                    <tbody id="lh-attend-body"></tbody>
+                  </table>
+                </div>
+              </div>
+
+              <!-- Notes -->
+              <div id="tc-notes" style="display:none">
+                <div class="lh-notes-wrap" id="lh-notes-list"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</div>
+
+<!-- Confirmation modal -->
+<div class="lh-confirm-overlay hidden" id="lh-confirm-overlay">
+  <div class="lh-confirm-dialog">
+    <div class="lh-confirm-icon">
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg>
+    </div>
+    <h3 class="lh-confirm-title">Удалить запись урока?</h3>
+    <p class="lh-confirm-desc">Урок <span class="lh-confirm-sname" id="confirm-sname"></span> будет безвозвратно удалён вместе с доской, чатом, заметками и данными посещаемости. Это действие нельзя отменить.</p>
+    <div class="lh-confirm-actions">
+      <button class="lh-confirm-cancel" onclick="hideConfirmDelete()">Отмена</button>
+      <button class="lh-confirm-delete" id="confirm-del-btn" onclick="doDelete()">Удалить навсегда</button>
+    </div>
+  </div>
+</div>
+
+<script src="/js/api.js"></script>
+<script src="/js/mobile.js"></script>
+<script src="/js/whiteboard.js"></script>
+<script>
+/* ══════════════════════════════════════════════════════
+   Lesson History — main script
+══════════════════════════════════════════════════════ */
+let _me = null;
+let _isTeacher = false;
+let _isAdmin   = false;
+let _classes   = [];
+let _sessions  = [];
+let _totalPages = 1;
+let _curPage   = 1;
+let _classFilter   = '';
+let _teacherFilter = '';
+let _dateFrom      = '';
+let _dateTo        = '';
+let _searchTimer   = null;
+let _sortMode      = 'newest';
+let _deleteId      = null;
+let _activeSession = null;
+let _wb = null;
+let _wbPages = [];
+let _wbCurrentPage = 1;
+
+/* ─── Init ─── */
+(function() {
+  const { user } = LS.initPage();
+  if (!user) return;
+  _me = user;
+  _isTeacher = user.role === 'teacher' || user.role === 'admin';
+  _isAdmin   = user.role === 'admin';
+  if (!_isTeacher) { location.replace('/my-lessons'); return; }
+  if (window.lucide) lucide.createIcons();
+
+  if (_isAdmin) {
+    // Show admin-specific UI
+    document.querySelector('.lh-wrap')?.classList.add('lh-admin');
+    document.getElementById('lh-teacher-filter').style.display = '';
+    document.getElementById('lh-class-filter').style.display   = 'none'; // admin uses search instead
+    document.getElementById('lh-date-label').style.display     = '';
+    document.getElementById('lh-date-label2').style.display    = '';
+    document.getElementById('lh-date-from').style.display      = '';
+    document.getElementById('lh-date-to').style.display        = '';
+    document.getElementById('lh-search').placeholder           = 'Поиск по названию, учителю, классу...';
+    document.getElementById('kpi-total-lbl').textContent       = 'Всего уроков';
+    // Show "most_students" sort option
+    document.querySelector('.admin-opt')?.removeAttribute('style');
+    loadTeachersList();
+  } else {
+    loadClasses();
+  }
+  loadSessions();
+  checkUrlSession();
+})();
+
+function checkUrlSession() {
+  const sp = new URLSearchParams(location.search);
+  const sid = sp.get('session');
+  if (sid) setTimeout(() => openSession(Number(sid)), 600);
+}
+
+/* ─── Admin: teachers list ─── */
+async function loadTeachersList() {
+  try {
+    const data = await LS.crAdminGetTeachersList();
+    const sel  = document.getElementById('lh-teacher-filter');
+    (data.teachers || []).forEach(t => {
+      const opt = document.createElement('option');
+      opt.value = t.id; opt.textContent = t.name;
+      sel.appendChild(opt);
+    });
+  } catch {}
+}
+
+/* ─── Teacher: classes filter ─── */
+async function loadClasses() {
+  try {
+    const data = await LS.getClasses();
+    _classes = data.classes || data || [];
+    const sel = document.getElementById('lh-class-filter');
+    _classes.forEach(c => {
+      const opt = document.createElement('option');
+      opt.value = c.id; opt.textContent = c.name;
+      sel.appendChild(opt);
+    });
+  } catch {}
+}
+
+function onClassFilter() {
+  _classFilter = document.getElementById('lh-class-filter').value;
+  _curPage = 1;
+  loadSessions();
+}
+
+function onTeacherFilter() {
+  _teacherFilter = document.getElementById('lh-teacher-filter').value;
+  _curPage = 1;
+  loadSessions();
+}
+
+function onDateFilter() {
+  _dateFrom = document.getElementById('lh-date-from').value;
+  _dateTo   = document.getElementById('lh-date-to').value;
+  _curPage  = 1;
+  loadSessions();
+}
+
+function onSearch() {
+  clearTimeout(_searchTimer);
+  _searchTimer = setTimeout(() => { _curPage = 1; loadSessions(); }, 350);
+}
+
+function onSort() {
+  _sortMode = document.getElementById('lh-sort').value;
+  if (_isAdmin) {
+    _curPage = 1;
+    loadSessions(); // server-side sort for admin
+  } else {
+    renderList(_sessions); // client-side sort for teacher
+  }
+}
+
+/* ─── Sessions list ─── */
+async function loadSessions() {
+  const search = document.getElementById('lh-search').value.trim();
+  const list   = document.getElementById('lh-list');
+  list.innerHTML = '<div class="lh-sk-card lh-skeleton"></div><div class="lh-sk-card lh-skeleton"></div><div class="lh-sk-card lh-skeleton"></div>';
+
+  try {
+    let data;
+    if (_isAdmin) {
+      data = await LS.crAdminGetAllHistory({
+        page: _curPage, search,
+        teacher:   _teacherFilter,
+        class_id:  '',   // admin class filter via teacher filter + search
+        date_from: _dateFrom,
+        date_to:   _dateTo,
+        sort:      _sortMode,
+      });
+      updateKPIFromAgg(data.agg, data.total);
+    } else {
+      if (_classFilter) {
+        data = await LS.crGetClassHistory(Number(_classFilter), _curPage, search);
+      } else {
+        data = await LS.crGetMyHistory(_curPage);
+      }
+      updateKPI(data.sessions || []);
+    }
+    _sessions   = data.sessions || [];
+    _totalPages = data.pages || 1;
+    renderList(_sessions);
+    renderPagination(_curPage, _totalPages, data.total || 0);
+  } catch (e) {
+    list.innerHTML = `<div class="lh-empty"><p>Ошибка загрузки: ${LS.escapeHtml(e.message || 'неизвестная ошибка')}</p></div>`;
+  }
+}
+
+function renderList(sessions) {
+  const list  = document.getElementById('lh-list');
+  const badge = document.getElementById('lh-count-badge');
+  if (badge) badge.textContent = sessions.length ? plural(sessions.length, 'урок','урока','уроков') : '';
+
+  if (!sessions.length) {
+    list.innerHTML = `<div class="lh-empty">
+      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>
+      <p>Завершённых уроков пока нет</p></div>`;
+    return;
+  }
+
+  // Sort
+  const sorted = [...sessions].sort((a, b) => {
+    if (_sortMode === 'oldest') return new Date(a.ended_at||0) - new Date(b.ended_at||0);
+    if (_sortMode === 'longest') {
+      const da = a.ended_at && a.created_at ? new Date(a.ended_at)-new Date(a.created_at) : 0;
+      const db_ = b.ended_at && b.created_at ? new Date(b.ended_at)-new Date(b.created_at) : 0;
+      return db_ - da;
+    }
+    return new Date(b.ended_at||0) - new Date(a.ended_at||0); // newest
+  });
+
+  // Group by month
+  const groups = [];
+  let lastKey = null;
+  sorted.forEach(s => {
+    const d   = s.ended_at ? new Date(s.ended_at) : null;
+    const key = d ? d.toLocaleDateString('ru-RU', { month: 'long', year: 'numeric' }) : 'Неизвестно';
+    if (key !== lastKey) { groups.push({ key, items: [] }); lastKey = key; }
+    groups[groups.length-1].items.push(s);
+  });
+
+  list.innerHTML = groups.map(g =>
+    `<div class="lh-date-sep">${g.key}</div>` + g.items.map(s => renderCard(s)).join('')
+  ).join('');
+}
+
+function renderCard(s) {
+  const dateStr = s.ended_at ? new Date(s.ended_at).toLocaleDateString('ru-RU', { day:'numeric', month:'short' }) : '—';
+  const dur     = s.ended_at && s.created_at ? fmtDuration(Math.round((new Date(s.ended_at) - new Date(s.created_at)) / 1000)) : null;
+  const active  = _activeSession?.session?.id === s.id ? ' active' : '';
+  const cls     = s.class_name ? `<span class="lh-card-class">${LS.escapeHtml(s.class_name)}</span>` : '';
+  const teacher = _isAdmin && s.teacher_name
+    ? `<span class="lh-card-teacher"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>${LS.escapeHtml(s.teacher_name)}</span>` : '';
+  const delBtn  = _isTeacher
+    ? `<button class="lh-card-del" onclick="event.stopPropagation();confirmDelete(${s.id})" title="Удалить урок">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg>
+       </button>` : '';
+  return `<div class="lh-session-card${active}" data-id="${s.id}" onclick="openSession(${s.id})">
+    ${delBtn}
+    <div class="lh-card-row1">
+      <div class="lh-card-title">${LS.escapeHtml(s.title || 'Без названия')}</div>
+      <div class="lh-card-date">${dateStr}</div>
+    </div>
+    <div class="lh-card-row2">
+      ${teacher}${cls}
+      ${dur ? `<span class="lh-card-stat"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>${dur}</span>` : ''}
+      <span class="lh-card-stat"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>${s.participant_count || 0}</span>
+      ${(s.message_count||0) > 0 ? `<span class="lh-card-stat"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>${s.message_count}</span>` : ''}
+      ${(s.page_count||1) > 1 ? `<span class="lh-card-stat"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>${s.page_count} стр.</span>` : ''}
+      ${_isAdmin && (s.stroke_count||0) > 0 ? `<span class="lh-card-stat"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>${s.stroke_count}</span>` : ''}
+    </div>
+  </div>`;
+}
+
+function renderPagination(page, total, count) {
+  const pg   = document.getElementById('lh-pagination');
+  const prev = document.getElementById('lh-prev');
+  const next = document.getElementById('lh-next');
+  const info = document.getElementById('lh-page-info');
+  pg.style.display   = total > 1 ? 'flex' : 'none';
+  prev.disabled      = page <= 1;
+  next.disabled      = page >= total;
+  info.textContent   = `${page} / ${total}`;
+}
+
+function changePage(dir) {
+  _curPage = Math.max(1, Math.min(_totalPages, _curPage + dir));
+  loadSessions();
+}
+
+function updateKPI(sessions) {
+  const durSec   = sessions.reduce((a, s) => {
+    if (!s.ended_at || !s.created_at) return a;
+    return a + Math.round((new Date(s.ended_at) - new Date(s.created_at)) / 1000);
+  }, 0);
+  const students = sessions.reduce((a, s) => a + (s.participant_count || 0), 0);
+  const msgs     = sessions.reduce((a, s) => a + (s.message_count || 0), 0);
+
+  document.getElementById('kpi-total').textContent    = sessions.length;
+  document.getElementById('kpi-time').textContent     = fmtDuration(durSec);
+  document.getElementById('kpi-students').textContent = students;
+  document.getElementById('kpi-msgs').textContent     = msgs;
+}
+
+function updateKPIFromAgg(agg, total) {
+  if (!agg) return;
+  document.getElementById('kpi-total').textContent    = total ?? agg.total_sessions ?? '—';
+  document.getElementById('kpi-time').textContent     = fmtDuration(agg.total_duration_sec || 0);
+  document.getElementById('kpi-teachers').textContent = agg.total_teachers ?? '—';
+  document.getElementById('kpi-students').textContent = agg.total_participants ?? '—';
+  document.getElementById('kpi-msgs').textContent     = agg.total_messages ?? '—';
+}
+
+/* ─── Session detail ─── */
+async function openSession(id) {
+  // Highlight card
+  document.querySelectorAll('.lh-session-card').forEach(el => {
+    el.classList.toggle('active', Number(el.dataset.id) === id);
+  });
+  // Show detail area
+  document.getElementById('lh-detail-empty').style.display   = 'none';
+  document.getElementById('lh-detail-content').style.display = 'flex';
+  document.getElementById('lh-detail-content').style.flexDirection = 'column';
+
+  // Mobile: hide list
+  if (window.innerWidth <= 768) {
+    document.getElementById('lh-list-panel').classList.add('hidden-mobile');
+  }
+
+  // Update URL
+  const url = new URL(location.href);
+  url.searchParams.set('session', id);
+  history.replaceState({}, '', url);
+
+  // Reset lazy-load flags for new session
+  _chatLoaded = false; _attendLoaded = false; _notesLoaded = false;
+
+  // Load summary
+  try {
+    const data = await LS.crGetSessionSummary(id);
+    _activeSession = data;
+    renderDetailHeader(data);
+    _wbPages = data.pages || [];
+    _wbCurrentPage = 1;
+    // Default to board tab
+    switchTab('board');
+    renderThumbs();
+    loadBoardPage(1);
+  } catch (e) {
+    LS.toast('Ошибка загрузки урока: ' + (e.message || ''), 'error');
+  }
+}
+
+function renderDetailHeader(data) {
+  const s   = data.session;
+  const st  = data.stats;
+  document.getElementById('det-title').textContent = s.title || 'Без названия';
+
+  // Delete button — teacher sees it for own sessions; admin always
+  const delBtn = document.getElementById('det-del-btn');
+  if (delBtn) {
+    const canDel = _isTeacher && (_me?.role === 'admin' || s.teacher_id === _me?.id);
+    delBtn.classList.toggle('visible', canDel);
+    if (canDel) delBtn.onclick = () => confirmDelete(s.id);
+  }
+
+  const d = s.ended_at ? new Date(s.ended_at) : null;
+  const dateEl = document.getElementById('det-date');
+  dateEl.querySelector('.det-meta-txt')?.remove();
+  const dateTxt = document.createElement('span');
+  dateTxt.className = 'det-meta-txt';
+  dateTxt.textContent = d ? d.toLocaleDateString('ru-RU', { day:'numeric', month:'long', year:'numeric' }) : '—';
+  dateEl.appendChild(dateTxt);
+
+  const techEl = document.getElementById('det-teacher');
+  techEl.querySelector('.det-meta-txt')?.remove();
+  const techTxt = document.createElement('span');
+  techTxt.className = 'det-meta-txt';
+  techTxt.textContent = s.teacher_name || '';
+  techEl.appendChild(techTxt);
+
+  const clsEl = document.getElementById('det-class');
+  if (s.class_name) {
+    clsEl.style.display = 'flex';
+    clsEl.querySelector('.det-meta-txt')?.remove();
+    const clsTxt = document.createElement('span');
+    clsTxt.className = 'det-meta-txt';
+    clsTxt.textContent = s.class_name;
+    clsEl.appendChild(clsTxt);
+  } else {
+    clsEl.style.display = 'none';
+  }
+
+  // Stats chips
+  const chips = [];
+  if (st.duration_sec) chips.push(`<span class="lh-stat-chip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>${fmtDuration(st.duration_sec)}</span>`);
+  if (st.participant_count) chips.push(`<span class="lh-stat-chip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>${st.participant_count} уч.</span>`);
+  if (st.page_count) chips.push(`<span class="lh-stat-chip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>${st.page_count} стр.</span>`);
+  if (st.stroke_count) chips.push(`<span class="lh-stat-chip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>${st.stroke_count} штрихов</span>`);
+  if (st.message_count) chips.push(`<span class="lh-stat-chip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>${st.message_count} сообщ.</span>`);
+  document.getElementById('det-stats').innerHTML = chips.join('');
+}
+
+function backToList() {
+  document.getElementById('lh-list-panel').classList.remove('hidden-mobile');
+  document.getElementById('lh-detail-content').style.display = 'none';
+  document.getElementById('lh-detail-empty').style.display   = 'flex';
+  const url = new URL(location.href);
+  url.searchParams.delete('session');
+  history.replaceState({}, '', url);
+}
+
+/* ─── Tabs ─── */
+function switchTab(name) {
+  ['board','chat','attend','notes'].forEach(t => {
+    document.getElementById(`tab-${t}`)?.classList.toggle('active', t === name);
+    const tc = document.getElementById(`tc-${t}`);
+    if (tc) tc.style.display = t === name ? (t === 'board' || t === 'chat' ? 'flex' : 'block') : 'none';
+  });
+  if (name === 'chat'   && _activeSession && !_chatLoaded) loadChat();
+  if (name === 'attend' && _activeSession && !_attendLoaded) loadAttendance();
+  if (name === 'notes'  && _activeSession && !_notesLoaded) loadNotes();
+}
+let _chatLoaded = false, _attendLoaded = false, _notesLoaded = false;
+
+/* ─── Board ─── */
+function renderThumbs() {
+  const container = document.getElementById('lh-thumbs');
+  if (!container) return;
+  container.innerHTML = '';
+  // Popup uses CSS grid — wrap all items directly
+  container.style.cssText = 'display:contents';
+
+  _wbPages.forEach(p => {
+    const item = document.createElement('div');
+    item.className = 'lh-thumb-item' + (p.page_num === _wbCurrentPage ? ' active' : '');
+    item.dataset.page = p.page_num;
+    item.onclick = () => { loadBoardPage(p.page_num); lhClosePages(); };
+
+    const wrap = document.createElement('div');
+    wrap.className = 'lh-thumb-canvas-wrap';
+    const cvs = document.createElement('canvas');
+    cvs.width = 192; cvs.height = 108;
+    wrap.appendChild(cvs);
+
+    const footer = document.createElement('div');
+    footer.className = 'lh-thumb-footer';
+    const lbl = document.createElement('span');
+    lbl.className = 'lh-thumb-lbl';
+    lbl.textContent = p.name || `Стр. ${p.page_num}`;
+    const num = document.createElement('span');
+    num.className = 'lh-thumb-num';
+    num.textContent = p.page_num;
+    footer.append(lbl, num);
+
+    item.append(wrap, footer);
+    container.appendChild(item);
+  });
+
+  updateBoardTopbar();
+}
+
+let _pagesPopupOpen = false;
+function lhTogglePages() {
+  _pagesPopupOpen ? lhClosePages() : lhOpenPages();
+}
+function lhOpenPages() {
+  _pagesPopupOpen = true;
+  document.getElementById('lh-pages-popup').classList.remove('hidden');
+  document.getElementById('lh-page-indicator').classList.add('open');
+  // Render all thumbnails in background now that popup is visible
+  if (_activeSession) _renderAllThumbs(_activeSession.session.id);
+}
+function lhClosePages() {
+  _pagesPopupOpen = false;
+  document.getElementById('lh-pages-popup')?.classList.add('hidden');
+  document.getElementById('lh-page-indicator')?.classList.remove('open');
+}
+
+async function loadBoardPage(pageNum) {
+  if (!_activeSession) return;
+  const sessionId = _activeSession.session.id;
+  _wbCurrentPage = pageNum;
+
+  // Highlight thumb + scroll into view
+  document.querySelectorAll('.lh-thumb-item').forEach(el => {
+    const active = Number(el.dataset.page) === pageNum;
+    el.classList.toggle('active', active);
+    if (active) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  });
+
+  updateBoardTopbar();
+
+  const loading = document.getElementById('lh-board-loading');
+  const canvas  = document.getElementById('lh-canvas');
+  loading.style.display = 'flex';
+
+  try {
+    const res = await LS.get(`/api/classroom/${sessionId}/strokes?page_num=${pageNum}`);
+    const strokes  = res.strokes || [];
+    const template = res.template || 'blank';
+
+    // Init or reinit whiteboard (readOnly)
+    if (_wb) { _wb.destroy(); _wb = null; }
+    // Wait one frame so aspect-ratio layout is calculated before fit()
+    await new Promise(r => requestAnimationFrame(r));
+    _wb = new Whiteboard(canvas, {
+      readOnly: true,
+      onZoomChange: z => {
+        const el = document.getElementById('lh-zoom-lbl');
+        if (el) el.textContent = Math.round(z * 100) + '%';
+      },
+    });
+    _wb.setTemplate(template);
+    _wb.loadStrokes(strokes);
+
+    // Fit view to the actual stroke content (not the full 1920×1080 empty canvas)
+    _wb.zoomFitStrokes();
+
+    // Render thumbnail for this page
+    const thumbEl = document.querySelector(`.lh-thumb-item[data-page="${pageNum}"] canvas`);
+    if (thumbEl) _wb.renderThumbnail(thumbEl);
+
+    loading.style.display = 'none';
+
+    // Lazily render all other thumbnails in background
+    _renderAllThumbs(sessionId);
+  } catch (e) {
+    loading.innerHTML = '<span style="color:rgba(255,100,100,.7)">Ошибка загрузки страницы</span>';
+  }
+}
+
+function updateBoardTopbar() {
+  const cur   = _wbCurrentPage;
+  const total = _wbPages.length;
+  const page  = _wbPages.find(p => p.page_num === cur);
+  const idx   = _wbPages.findIndex(p => p.page_num === cur) + 1;
+  const titleEl = document.getElementById('lh-page-title');
+  const totalEl = document.getElementById('lh-page-total');
+  const prevBtn = document.getElementById('lh-page-prev');
+  const nextBtn = document.getElementById('lh-page-next');
+  if (titleEl) titleEl.textContent = page?.name ? `${page.name}` : `Страница ${cur}`;
+  if (totalEl) totalEl.textContent = total > 1 ? `${idx} / ${total}` : '';
+  if (prevBtn) prevBtn.disabled = idx <= 1;
+  if (nextBtn) nextBtn.disabled = idx >= total;
+}
+
+function lhPageNav(dir) {
+  const idx  = _wbPages.findIndex(p => p.page_num === _wbCurrentPage);
+  const next = _wbPages[idx + dir];
+  if (next) loadBoardPage(next.page_num);
+}
+
+let _thumbRenderJob = null;
+async function _renderAllThumbs(sessionId) {
+  // Cancel previous job
+  const jobId = Date.now();
+  _thumbRenderJob = jobId;
+
+  for (const p of _wbPages) {
+    if (_thumbRenderJob !== jobId) return; // cancelled
+    if (p.page_num === _wbCurrentPage) continue; // already rendered
+    const thumbEl = document.querySelector(`.lh-thumb-item[data-page="${p.page_num}"] canvas`);
+    if (!thumbEl || thumbEl._rendered) continue;
+    try {
+      const res = await LS.get(`/api/classroom/${sessionId}/strokes?page_num=${p.page_num}`);
+      if (_thumbRenderJob !== jobId) return;
+      const tmpCvs = document.createElement('canvas');
+      tmpCvs.width = 192; tmpCvs.height = 108;
+      const tmpWb = new Whiteboard(tmpCvs, { readOnly: true });
+      tmpWb.setTemplate(res.template || 'blank');
+      tmpWb.loadStrokes(res.strokes || []);
+      tmpWb.renderThumbnail(thumbEl);
+      tmpWb.destroy();
+      thumbEl._rendered = true;
+    } catch {}
+    // Small yield between requests
+    await new Promise(r => setTimeout(r, 80));
+  }
+}
+
+function lhZoom(delta) {
+  if (!_wb) return;
+  _wb.zoomTo(Math.max(0.25, Math.min(4, (_wb._zoom || 1) + delta)));
+  document.getElementById('lh-zoom-lbl').textContent = Math.round(_wb._zoom * 100) + '%';
+}
+
+function lhZoomFit() {
+  if (!_wb) return;
+  _wb.zoomFitStrokes();
+}
+
+function exportBoardPage() {
+  if (!_wb) return;
+  _wb.exportPNG();
+}
+
+/* ─── Chat ─── */
+async function loadChat() {
+  _chatLoaded = true;
+  const sessionId = _activeSession.session.id;
+  const container = document.getElementById('lh-chat-list');
+  const toolbar   = document.getElementById('lh-chat-toolbar');
+  container.innerHTML = '<div style="padding:20px;text-align:center;color:var(--lh-text-3)">Загрузка...</div>';
+
+  // Export button (teacher only)
+  if (_isTeacher) {
+    toolbar.innerHTML = `<a class="lh-chat-export-btn" href="/api/classroom/${sessionId}/chat/export" download>
+      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+      Экспортировать чат
+    </a>`;
+  }
+
+  try {
+    const data = await LS.crGetChat(sessionId);
+    const msgs = data.messages || [];
+    // Update tab count
+    const cnt = document.getElementById('tab-chat-count');
+    if (msgs.length) { cnt.textContent = msgs.length; cnt.style.display = 'inline'; }
+
+    if (!msgs.length) {
+      container.innerHTML = `<div class="lh-empty"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg><p>В этом уроке сообщений нет</p></div>`;
+      return;
+    }
+    container.innerHTML = msgs.map(m => renderMsg(m)).join('');
+  } catch (e) {
+    container.innerHTML = `<div class="lh-empty"><p>Ошибка загрузки чата</p></div>`;
+  }
+}
+
+function renderMsg(m) {
+  const color = strToColor(m.user_name || '');
+  const time  = m.created_at ? new Date(m.created_at).toLocaleTimeString('ru-RU', { hour:'2-digit', minute:'2-digit' }) : '';
+  const pinned = m.pinned ? ' pinned' : '';
+  const avatarLetter = (m.user_name || '?')[0].toUpperCase();
+  let body = m.message ? `<div class="lh-msg-text">${LS.escapeHtml(m.message)}</div>` : '';
+  if (m.attachment_url) {
+    const isImg = /\.(jpe?g|png|gif|webp)(\?|$)/i.test(m.attachment_url);
+    if (isImg) body += `<img class="lh-msg-img" src="${LS.escapeHtml(m.attachment_url)}" alt="вложение" loading="lazy"/>`;
+    else body += `<a href="${LS.escapeHtml(m.attachment_url)}" target="_blank" style="font-size:.78rem;color:#9B5DE5"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:3px"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg> Вложение</a>`;
+  }
+  return `<div class="lh-msg${pinned}">
+    <div class="lh-msg-avatar" style="background:${color}">${avatarLetter}</div>
+    <div class="lh-msg-body">
+      <div class="lh-msg-head">
+        <span class="lh-msg-name">${LS.escapeHtml(m.user_name || '?')}</span>
+        <span class="lh-msg-time">${time}</span>
+      </div>
+      ${body}
+    </div>
+  </div>`;
+}
+
+/* ─── Attendance ─── */
+async function loadAttendance() {
+  _attendLoaded = true;
+  const sessionId = _activeSession.session.id;
+  const tbody = document.getElementById('lh-attend-body');
+  const sumEl = document.getElementById('lh-attend-summary');
+  tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;color:var(--lh-text-3);padding:24px">Загрузка...</td></tr>';
+
+  const attendance = _activeSession.attendance || [];
+  if (!attendance.length) {
+    sumEl.innerHTML = '';
+    tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;color:var(--lh-text-3);padding:24px">Нет данных о посещаемости</td></tr>';
+    return;
+  }
+
+  const avgDur = attendance.filter(a => a.duration_sec).reduce((s,a) => s + a.duration_sec, 0) / (attendance.filter(a => a.duration_sec).length || 1);
+  sumEl.innerHTML = `
+    <div class="lh-attend-kpi"><div class="lh-attend-kpi-val">${attendance.length}</div><div class="lh-attend-kpi-lbl">Участников</div></div>
+    <div class="lh-attend-kpi"><div class="lh-attend-kpi-val">${fmtDuration(Math.round(avgDur))}</div><div class="lh-attend-kpi-lbl">Среднее время</div></div>
+  `;
+
+  tbody.innerHTML = attendance.map(a => {
+    const joined = a.joined_at ? new Date(a.joined_at).toLocaleTimeString('ru-RU', { hour:'2-digit', minute:'2-digit' }) : '—';
+    const left   = a.left_at   ? new Date(a.left_at).toLocaleTimeString('ru-RU',   { hour:'2-digit', minute:'2-digit' }) : '—';
+    const dur    = a.duration_sec ? `<span class="lh-attend-dur">${fmtDuration(a.duration_sec)}</span>` : '—';
+    return `<tr>
+      <td><strong>${LS.escapeHtml(a.user_name || '?')}</strong></td>
+      <td>${joined}</td><td>${left}</td><td>${dur}</td>
+    </tr>`;
+  }).join('');
+}
+
+/* ─── Notes ─── */
+async function loadNotes() {
+  _notesLoaded = true;
+  const sessionId = _activeSession.session.id;
+  const container = document.getElementById('lh-notes-list');
+  container.innerHTML = '<div style="padding:20px;text-align:center;color:var(--lh-text-3)">Загрузка...</div>';
+
+  try {
+    if (_isTeacher) {
+      const data = await LS.crGetAllNotes(sessionId);
+      const notes = data.notes || [];
+      if (!notes.length) {
+        container.innerHTML = `<div class="lh-empty"><p>Ученики не оставили заметок</p></div>`;
+        return;
+      }
+      container.innerHTML = notes.map(n => `
+        <div class="lh-note-card">
+          <div class="lh-note-head">
+            <div class="lh-note-author">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+              ${LS.escapeHtml(n.user_name || '?')}
+            </div>
+            <div class="lh-note-time">${n.updated_at ? new Date(n.updated_at).toLocaleDateString('ru-RU') : ''}</div>
+          </div>
+          <div class="lh-note-text">${LS.escapeHtml(n.content)}</div>
+        </div>`).join('');
+    } else {
+      // Student: own notes
+      const data = await LS.get(`/api/classroom/${sessionId}/notes`);
+      const content = data.content || '';
+      if (!content.trim()) {
+        container.innerHTML = `<div class="lh-empty"><p>Вы не оставили заметок к этому уроку</p></div>`;
+        return;
+      }
+      container.innerHTML = `<div class="lh-own-note-box">
+        <div class="lh-own-note-lbl">Мои заметки</div>
+        <div class="lh-note-text">${LS.escapeHtml(content)}</div>
+      </div>`;
+    }
+  } catch {
+    container.innerHTML = `<div class="lh-empty"><p>Ошибка загрузки заметок</p></div>`;
+  }
+}
+
+/* ─── Delete history ─── */
+function confirmDelete(id) {
+  const sid = id ?? _activeSession?.session?.id;
+  if (!sid) return;
+  _deleteId = sid;
+  const session = _sessions.find(s => s.id === sid) || _activeSession?.session;
+  const name    = session?.title || 'Без названия';
+  document.getElementById('confirm-sname').textContent = `"${name}"`;
+  document.getElementById('confirm-del-btn').disabled = false;
+  document.getElementById('lh-confirm-overlay').classList.remove('hidden');
+}
+
+function hideConfirmDelete() {
+  _deleteId = null;
+  document.getElementById('lh-confirm-overlay').classList.add('hidden');
+}
+
+async function doDelete() {
+  if (!_deleteId) return;
+  const btn = document.getElementById('confirm-del-btn');
+  btn.disabled = true;
+  btn.textContent = 'Удаление...';
+  try {
+    await LS.crDeleteHistory(_deleteId);
+    // Remove from local list
+    _sessions = _sessions.filter(s => s.id !== _deleteId);
+    renderList(_sessions);
+    updateKPI(_sessions);
+    // If deleted session was open, close detail
+    if (_activeSession?.session?.id === _deleteId) {
+      _activeSession = null;
+      _chatLoaded = false; _attendLoaded = false; _notesLoaded = false;
+      document.getElementById('lh-detail-empty').style.display   = 'flex';
+      document.getElementById('lh-detail-content').style.display = 'none';
+      const url = new URL(location.href);
+      url.searchParams.delete('session');
+      history.replaceState({}, '', url);
+    }
+    hideConfirmDelete();
+    LS.toast('Урок удалён', 'success');
+  } catch (e) {
+    btn.disabled = false;
+    btn.textContent = 'Удалить навсегда';
+    LS.toast('Ошибка удаления: ' + (e.message || ''), 'error');
+  }
+}
+
+/* ─── Helpers ─── */
+function fmtDuration(sec) {
+  if (!sec || sec < 0) return '0 мин';
+  const h = Math.floor(sec / 3600);
+  const m = Math.floor((sec % 3600) / 60);
+  if (h > 0) return `${h}ч ${m}м`;
+  if (m > 0) return `${m} мин`;
+  return `${sec} сек`;
+}
+
+function plural(n, one, few, many) {
+  const mod10 = n % 10, mod100 = n % 100;
+  if (mod10 === 1 && mod100 !== 11) return `${n} ${one}`;
+  if (mod10 >= 2 && mod10 <= 4 && (mod100 < 10 || mod100 >= 20)) return `${n} ${few}`;
+  return `${n} ${many}`;
+}
+
+function strToColor(str) {
+  const colors = ['#9B5DE5','#06D6E0','#FF6B6B','#4361EE','#A8E063','#F15BB5','#FF9F43','#06D6A0'];
+  let h = 0;
+  for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) & 0xffff;
+  return colors[h % colors.length];
+}
+
+window.addEventListener('resize', () => {
+  if (window.innerWidth > 768) {
+    document.getElementById('lh-list-panel').classList.remove('hidden-mobile');
+  }
+});
+
+// Close pages popup when clicking outside
+document.addEventListener('click', e => {
+  if (!_pagesPopupOpen) return;
+  const popup = document.getElementById('lh-pages-popup');
+  const btn   = document.getElementById('lh-page-indicator');
+  if (popup && !popup.contains(e.target) && btn && !btn.contains(e.target)) {
+    lhClosePages();
+  }
+});
+
+// Keyboard navigation for board pages
+document.addEventListener('keydown', e => {
+  if (!_activeSession || e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+  const boardVisible = document.getElementById('tc-board')?.style.display !== 'none';
+  if (!boardVisible) return;
+  if (e.key === 'ArrowLeft'  || e.key === 'ArrowUp')   { e.preventDefault(); lhPageNav(-1); }
+  if (e.key === 'ArrowRight' || e.key === 'ArrowDown')  { e.preventDefault(); lhPageNav(1); }
+  if (e.key === '0') lhZoomFit();
+});
+</script>
+</body>
+</html>
diff --git a/frontend/lesson.html b/frontend/lesson.html
index 164e51b..51fa462 100644
--- a/frontend/lesson.html
+++ b/frontend/lesson.html
@@ -787,6 +787,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"    class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html"           class="sb-link"><i data-lucide="leaf"     class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom"     class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/library.html b/frontend/library.html
index 10d89d0..47b40f5 100644
--- a/frontend/library.html
+++ b/frontend/library.html
@@ -211,6 +211,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"    class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html"           class="sb-link"><i data-lucide="leaf"     class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom" class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/live-quiz.html b/frontend/live-quiz.html
index 331b170..0afcef9 100644
--- a/frontend/live-quiz.html
+++ b/frontend/live-quiz.html
@@ -8,6 +8,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="/css/ls.css" />
   <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" />
   <style>
     .sb-content { background: #f4f5f8; overflow: hidden; display: flex; flex-direction: column; }
 
@@ -135,10 +136,52 @@
 
     /* question pick cards */
     .lq-q-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
+    /* question filters */
+    .lq-filter-row { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
+    .lq-filter-select {
+      flex: 1; padding: 8px 10px;
+      border: 1.5px solid rgba(15,23,42,0.12); border-radius: 10px;
+      font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 500;
+      color: #0F172A; background: #fff; outline: none; cursor: pointer;
+      transition: border-color 0.15s; appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238898AA' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+      background-repeat: no-repeat; background-position: right 8px center; padding-right: 24px;
+    }
+    .lq-filter-select:focus { border-color: var(--violet); }
+    .lq-q-count { font-size: 0.7rem; color: #8898AA; font-weight: 600; white-space: nowrap; margin-bottom: 12px; }
+
+    /* load more */
+    .btn-load-more {
+      width: 100%; padding: 10px; border: 1.5px dashed rgba(155,93,229,0.3);
+      border-radius: 12px; background: transparent; margin-bottom: 24px;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
+      color: var(--violet); cursor: pointer; transition: all 0.15s;
+    }
+    .btn-load-more:hover { background: rgba(155,93,229,0.05); border-color: var(--violet); }
+    .btn-load-more:disabled { opacity: 0.5; cursor: default; }
+
+    /* result stat cards */
+    .lq-result-stats { display: flex; gap: 8px; margin-bottom: 14px; }
+    .lq-result-stat { flex: 1; padding: 10px 12px; border-radius: 12px; background: rgba(15,23,42,0.04); text-align: center; }
+    .lq-result-stat-val { font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 900; color: #0F172A; }
+    .lq-result-stat-lbl { font-size: 0.64rem; color: #8898AA; margin-top: 2px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
+    .lq-result-stat.rs-correct { background: rgba(6,214,160,0.08); }
+    .lq-result-stat.rs-correct .lq-result-stat-val { color: #059652; }
+    .lq-result-stat.rs-wrong { background: rgba(239,71,111,0.07); }
+    .lq-result-stat.rs-wrong .lq-result-stat-val { color: #EF476F; }
+
+    /* explanation box */
+    .lq-explanation {
+      margin-top: 14px; padding: 13px 15px;
+      background: rgba(6,214,224,0.06); border: 1.5px solid rgba(6,214,224,0.2);
+      border-radius: 12px; font-size: 0.82rem; color: #0F172A; line-height: 1.6;
+    }
+    .lq-explanation-label { font-size: 0.64rem; font-weight: 700; color: #0891B2; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
+
     .lq-q-card {
       background: #fff; border: 1.5px solid rgba(15,23,42,0.07);
       border-radius: 14px; padding: 14px 16px;
-      display: flex; align-items: center; gap: 12px;
+      display: flex; align-items: flex-start; gap: 12px;
       box-shadow: 0 1px 4px rgba(15,23,42,0.04); transition: all 0.15s;
     }
     .lq-q-card:hover { border-color: rgba(155,93,229,0.25); }
@@ -146,9 +189,10 @@
     .lq-q-body { flex: 1; min-width: 0; }
     .lq-q-text {
       font-size: 0.84rem; font-weight: 600; color: #0F172A;
-      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+      overflow: hidden; line-height: 1.5; min-height: 1.5em;
     }
-    .lq-q-meta { font-size: 0.7rem; color: #8898AA; margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
+    .lq-q-meta { font-size: 0.7rem; color: #8898AA; margin-top: 5px; display: flex; gap: 8px; flex-wrap: wrap; }
     .btn-launch {
       padding: 7px 16px; border: none; border-radius: 999px;
       background: var(--grad-1); color: #fff;
@@ -228,7 +272,7 @@
     }
     .lq-results-title {
       font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800;
-      color: #0F172A; margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
+      color: #0F172A; margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
     }
     .result-bars { display: flex; flex-direction: column; gap: 10px; }
     .result-bar-row { display: flex; align-items: center; gap: 10px; }
@@ -313,6 +357,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"          class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html" class="sb-link"><i data-lucide="leaf"             class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom"     class="sb-link"><i data-lucide="presentation"     class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
@@ -421,12 +466,27 @@
             <i data-lucide="search" class="lq-search-icon"></i>
             <input class="lq-search" id="q-search" type="text" placeholder="Поиск вопросов…" />
           </div>
+          <div class="lq-filter-row">
+            <select class="lq-filter-select" id="topic-filter" onchange="onTopicFilter()">
+              <option value="">Все темы</option>
+            </select>
+            <select class="lq-filter-select" id="diff-filter" onchange="onDiffFilter()" style="max-width:130px">
+              <option value="">Любой уровень</option>
+              <option value="1">Лёгкий</option>
+              <option value="2">Средний</option>
+              <option value="3">Сложный</option>
+            </select>
+          </div>
+          <div class="lq-q-count" id="q-count" style="display:none"></div>
           <div class="lq-q-list" id="q-list">
             <div style="padding:30px;text-align:center;color:#8898AA;font-size:0.82rem">
               <div class="spinner" style="margin:0 auto 10px"></div>
               Загрузка вопросов…
             </div>
           </div>
+          <button class="btn-load-more" id="btn-load-more" style="display:none" onclick="loadMoreQuestions()">
+            Загрузить ещё
+          </button>
 
         </div>
       </div>
@@ -435,6 +495,8 @@
 </div>
 
 <script src="/js/api.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
 <script>
   if (!LS.requireAuth()) throw new Error();
 
@@ -461,6 +523,22 @@
     'fill-blank': 'Заполни пробел', ordering: 'Порядок',
   };
 
+  /* ── math rendering ── */
+  const MATH_DELIMS = [
+    { left: '\\(', right: '\\)', display: false },
+    { left: '\\[', right: '\\]', display: true  },
+    { left: '$',   right: '$',   display: false },
+  ];
+  function mathHtml(text) {
+    if (!text) return '';
+    const tmp = document.createElement('span');
+    tmp.textContent = text;
+    if (window.renderMathInElement) {
+      try { renderMathInElement(tmp, { delimiters: MATH_DELIMS, throwOnError: false }); } catch {}
+    }
+    return tmp.innerHTML;
+  }
+
   /* ── sidebar ── */
   function toggleSidebar() {
     const layout = document.querySelector('.app-layout');
@@ -513,8 +591,12 @@
   let answerCount = 0;
   let sseSource = null;
   let allQuestions = [];
-  let filteredQuestions = [];
   let searchTimeout = null;
+  let _topicFilter = '';
+  let _diffFilter = '';
+  let _qPage = 0;
+  let _totalQ = 0;
+  const Q_LIMIT = 30;
 
   /* ── load classes ── */
   async function loadClasses() {
@@ -593,9 +675,24 @@
     document.getElementById('session-header-label').innerHTML =
       '<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="currentColor" stroke="none"/></svg> Активна · ' + selectedClass.name;
     updateStudentCounter(0);
+    loadTopics();
     lucide.createIcons();
   }
 
+  async function loadTopics() {
+    try {
+      const topics = await LS.api('/api/topics');
+      const sel = document.getElementById('topic-filter');
+      sel.innerHTML = '<option value="">Все темы</option>';
+      (topics || []).forEach(t => {
+        const opt = document.createElement('option');
+        opt.value = t.id;
+        opt.textContent = t.name;
+        sel.appendChild(opt);
+      });
+    } catch {}
+  }
+
   function updateStudentCounter(count) {
     answerCount = count;
     document.getElementById('as-students-text').textContent =
@@ -658,34 +755,56 @@
   }
 
   /* ── load questions ── */
-  async function loadQuestions() {
-    document.getElementById('q-list').innerHTML = '<div style="padding:20px;text-align:center;color:#8898AA"><div class="spinner" style="margin:0 auto 10px"></div> Загрузка…</div>';
+  async function loadQuestions(reset = true) {
+    if (reset) { _qPage = 0; allQuestions = []; }
+    if (reset) document.getElementById('q-list').innerHTML = '<div style="padding:20px;text-align:center;color:#8898AA"><div class="spinner" style="margin:0 auto 10px"></div> Загрузка…</div>';
+    const params = new URLSearchParams({ limit: Q_LIMIT, offset: _qPage * Q_LIMIT });
+    if (_topicFilter) params.set('topic_id', _topicFilter);
+    if (_diffFilter)  params.set('difficulty', _diffFilter);
+    const sq = document.getElementById('q-search')?.value.trim();
+    if (sq) params.set('search', sq);
     try {
-      const data = await LS.api('/api/questions?limit=50');
-      allQuestions = data.rows || [];
-      filteredQuestions = allQuestions;
+      const data = await LS.api('/api/questions?' + params.toString());
+      const rows = data.rows || [];
+      _totalQ = data.total ?? (reset ? rows.length : allQuestions.length + rows.length);
+      allQuestions = reset ? rows : [...allQuestions, ...rows];
       renderQuestionList();
+      const btnMore = document.getElementById('btn-load-more');
+      const countEl = document.getElementById('q-count');
+      if (btnMore) btnMore.style.display = allQuestions.length < _totalQ ? '' : 'none';
+      if (countEl) { countEl.textContent = `Показано ${allQuestions.length} из ${_totalQ}`; countEl.style.display = ''; }
     } catch {
-      document.getElementById('q-list').innerHTML = '<div style="padding:20px;text-align:center;color:#8898AA;font-size:0.82rem">Ошибка загрузки вопросов</div>';
+      if (reset) document.getElementById('q-list').innerHTML = '<div style="padding:20px;text-align:center;color:#8898AA;font-size:0.82rem">Ошибка загрузки вопросов</div>';
     }
   }
 
+  async function loadMoreQuestions() {
+    const btn = document.getElementById('btn-load-more');
+    if (btn) { btn.disabled = true; btn.textContent = 'Загрузка…'; }
+    _qPage++;
+    await loadQuestions(false);
+    if (btn) { btn.disabled = false; btn.textContent = 'Загрузить ещё'; }
+  }
+
+  function onTopicFilter() { _topicFilter = document.getElementById('topic-filter').value; loadQuestions(true); }
+  function onDiffFilter()  { _diffFilter  = document.getElementById('diff-filter').value;  loadQuestions(true); }
+
   function renderQuestionList() {
     const list = document.getElementById('q-list');
-    if (!filteredQuestions.length) {
+    if (!allQuestions.length) {
       list.innerHTML = '<div style="padding:30px;text-align:center;color:#8898AA;font-size:0.82rem">Вопросов не найдено</div>';
       lucide.createIcons();
       return;
     }
     let html = '';
-    filteredQuestions.forEach(q => {
+    allQuestions.forEach(q => {
       const diffCls = 'badge-diff-' + (q.difficulty || 1);
       const diffLabel = q.difficulty === 1 ? 'Лёгкий' : q.difficulty === 2 ? 'Средний' : 'Сложный';
       const typeLabel = TYPE_LABELS[q.type] || q.type || '';
       const isLaunched = currentQuestion && currentQuestion.id === q.id;
       html += `<div class="lq-q-card${isLaunched ? ' launched' : ''}">
         <div class="lq-q-body">
-          <div class="lq-q-text">${esc(q.text)}</div>
+          <div class="lq-q-text" data-text="${esc(q.text)}"></div>
           <div class="lq-q-meta">
             <span class="badge ${diffCls}">${diffLabel}</span>
             ${typeLabel ? `<span class="badge badge-type">${esc(typeLabel)}</span>` : ''}
@@ -698,35 +817,28 @@
       </div>`;
     });
     list.innerHTML = html;
+    list.querySelectorAll('.lq-q-text[data-text]').forEach(el => { el.innerHTML = mathHtml(el.dataset.text); });
     lucide.createIcons();
   }
 
-  /* search questions */
+  /* search questions — server-side */
   document.getElementById('q-search').addEventListener('input', () => {
     clearTimeout(searchTimeout);
-    searchTimeout = setTimeout(() => {
-      const q = document.getElementById('q-search').value.trim().toLowerCase();
-      filteredQuestions = q
-        ? allQuestions.filter(item => item.text.toLowerCase().includes(q) || (item.topic || '').toLowerCase().includes(q))
-        : allQuestions;
-      renderQuestionList();
-    }, 280);
+    searchTimeout = setTimeout(() => loadQuestions(true), 350);
   });
 
   /* ── launch question ── */
   async function launchQuestion(questionId) {
     if (!activeSession) return;
-    const q = allQuestions.find(x => x.id === questionId);
-    if (!q) return;
     try {
-      await LS.api('/api/live/' + activeSession.id + '/question', {
+      const resp = await LS.api('/api/live/' + activeSession.id + '/question', {
         method: 'PUT',
         body: JSON.stringify({ question_id: questionId }),
       });
-      currentQuestion = q;
+      currentQuestion = resp.question || allQuestions.find(x => x.id === questionId) || { id: questionId };
       answerCount = 0;
       updateStudentCounter(0);
-      renderActiveQuestion(q);
+      renderActiveQuestion(currentQuestion);
       renderQuestionList();
     } catch (e) {
       LS.toast(e.message || 'Ошибка запуска вопроса', 'error');
@@ -750,7 +862,7 @@
         const letter = String.fromCharCode(65 + idx);
         optionsHtml += `<div class="lq-active-opt${opt.is_correct ? ' correct' : ''}">
           <div class="lq-opt-letter">${opt.is_correct ? '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>' : letter}</div>
-          <span>${esc(opt.text)}</span>
+          <span data-text="${esc(opt.text)}"></span>
         </div>`;
       });
       optionsHtml += '</div>';
@@ -762,7 +874,7 @@
         В эфире · <span class="badge ${diffCls}">${diffLabel}</span>
         ${typeLabel ? `<span class="badge badge-type">${esc(typeLabel)}</span>` : ''}
       </div>
-      <div class="lq-active-text">${esc(q.text)}</div>
+      <div class="lq-active-text" data-text="${esc(q.text)}"></div>
       ${optionsHtml}
       <div class="lq-counter">
         <div>
@@ -779,6 +891,7 @@
       </button>
       <div id="results-area"></div>
     `;
+    card.querySelectorAll('[data-text]').forEach(el => { el.innerHTML = mathHtml(el.dataset.text); });
     lucide.createIcons();
     wrap.scrollIntoView({ behavior: 'smooth', block: 'start' });
   }
@@ -798,38 +911,48 @@
   }
 
   function renderResults(data, container) {
-    const { answers = [], options = [] } = data;
-    // count answers per option
-    const countMap = {};
-    answers.forEach(a => {
-      const key = a.option_id ?? a.answer ?? 'other';
-      countMap[key] = (countMap[key] || 0) + 1;
-    });
-    const totalAnswers = answers.length;
-    const maxCount = Math.max(...Object.values(countMap), 1);
-
-    // use options from current question if not in results
-    const opts = options.length ? options : (currentQuestion?.options || []);
+    const opts   = data.options || [];
+    const q      = data.question || {};
+    const stats  = data.stats   || {};
+    const total  = stats.total  || 0;
+    const correct= stats.correct|| 0;
+    const maxCount = Math.max(...opts.map(o => o.chosen_count || 0), 1);
 
     if (!opts.length) {
       container.innerHTML = '<div style="padding:16px;text-align:center;color:#8898AA;font-size:0.84rem">Нет данных о вариантах ответа</div>';
       return;
     }
 
+    const pctCorrect = total > 0 ? Math.round(correct / total * 100) : 0;
+    const pctWrong   = total > 0 ? 100 - pctCorrect : 0;
+
     let html = `<div class="lq-results-wrap">
-      <div class="lq-results-title"><i data-lucide="bar-chart-horizontal" style="width:14px;height:14px;opacity:0.5"></i> Результаты · ${totalAnswers} ответов</div>
+      <div class="lq-results-title"><i data-lucide="bar-chart-horizontal" style="width:14px;height:14px;opacity:0.5"></i> Результаты</div>
+      <div class="lq-result-stats">
+        <div class="lq-result-stat">
+          <div class="lq-result-stat-val">${total}</div>
+          <div class="lq-result-stat-lbl">Ответов</div>
+        </div>
+        <div class="lq-result-stat rs-correct">
+          <div class="lq-result-stat-val">${pctCorrect}%</div>
+          <div class="lq-result-stat-lbl">Верно</div>
+        </div>
+        <div class="lq-result-stat rs-wrong">
+          <div class="lq-result-stat-val">${pctWrong}%</div>
+          <div class="lq-result-stat-lbl">Неверно</div>
+        </div>
+      </div>
       <div class="result-bars">`;
 
     opts.forEach((opt, idx) => {
       const letter = String.fromCharCode(65 + idx);
-      const key = opt.id ?? idx;
-      const count = countMap[key] || 0;
-      const pct = Math.round((count / Math.max(maxCount, 1)) * 100);
+      const count  = opt.chosen_count || 0;
+      const pct    = Math.round(count / maxCount * 100);
       const isCorrect = opt.is_correct;
       html += `<div class="result-bar-row">
         <div class="result-bar-label${isCorrect ? ' correct-lbl' : ''}">
           ${isCorrect ? '<span class="rb-correct-marker"><svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>' : letter + '.'}
-          <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px">${esc(opt.text)}</span>
+          <span class="rb-opt-text" data-text="${esc(opt.text)}" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px"></span>
         </div>
         <div class="result-bar-track">
           <div class="result-bar-fill${isCorrect ? ' correct-fill' : ''}" style="width:${pct}%"></div>
@@ -838,8 +961,16 @@
       </div>`;
     });
 
-    html += '</div></div>';
+    html += '</div>';
+    if (q.explanation) {
+      html += `<div class="lq-explanation">
+        <div class="lq-explanation-label">Объяснение</div>
+        <div class="lq-exp-text" data-text="${esc(q.explanation)}"></div>
+      </div>`;
+    }
+    html += '</div>';
     container.innerHTML = html;
+    container.querySelectorAll('[data-text]').forEach(el => { el.innerHTML = mathHtml(el.dataset.text); });
     lucide.createIcons();
   }
 
diff --git a/frontend/my-lessons.html b/frontend/my-lessons.html
new file mode 100644
index 0000000..d920bb7
--- /dev/null
+++ b/frontend/my-lessons.html
@@ -0,0 +1,1176 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Мои уроки — LearnSpace</title>
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml"/>
+  <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="/css/ls.css"/>
+  <script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <style>
+    .ml-wrap {
+      --r: 12px;
+      --ml-bg: #f5f4fb;
+      --ml-surface: #ffffff;
+      --ml-surface-2: #f0eefb;
+      --ml-border: rgba(155,93,229,0.18);
+      --ml-border-h: rgba(155,93,229,0.4);
+      --ml-text: #1a1433;
+      --ml-text-2: #4a3f6b;
+      --ml-text-3: #8f86a8;
+    }
+
+    .app-layout { height: 100vh; overflow: hidden; }
+    .sb-content  { height: 100%; overflow: hidden; }
+
+    .ml-wrap {
+      display: flex; flex-direction: column; gap: 0;
+      height: 100%; overflow: hidden;
+      background: var(--ml-bg); color: var(--ml-text);
+    }
+
+    /* ── Header ── */
+    .ml-header {
+      padding: 16px 32px 14px;
+      border-bottom: 1px solid var(--ml-border);
+      background: var(--ml-surface);
+      flex-shrink: 0;
+    }
+    .ml-header-top {
+      display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
+    }
+    .ml-title {
+      font-family: 'Unbounded', sans-serif; font-size: 1.2rem;
+      font-weight: 800; margin: 0;
+      display: flex; align-items: center; gap: 12px;
+      background: linear-gradient(135deg, #9B5DE5, #06D6E0);
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+    }
+    .ml-title svg { color: #9B5DE5; -webkit-text-fill-color: initial; filter: drop-shadow(0 0 8px rgba(155,93,229,0.4)); }
+    .ml-filters {
+      display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
+    }
+    .ml-search {
+      display: flex; align-items: center; gap: 8px;
+      border: 1.5px solid var(--ml-border); border-radius: 10px;
+      padding: 8px 14px; background: var(--ml-surface);
+      transition: border-color .18s, box-shadow .18s;
+    }
+    .ml-search:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(155,93,229,0.15); }
+    .ml-search svg { color: var(--ml-text-3); flex-shrink: 0; }
+    .ml-search input {
+      border: none; outline: none; background: none;
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; color: var(--ml-text);
+      width: 190px;
+    }
+    .ml-search input::placeholder { color: var(--ml-text-3); }
+
+    /* ── KPI ── */
+    .ml-kpi {
+      display: flex; gap: 8px; padding: 10px 32px 12px; flex-shrink: 0; flex-wrap: wrap;
+    }
+    .ml-kpi-card {
+      flex: 1; min-width: 140px;
+      background: var(--ml-surface); border: 1px solid var(--ml-border);
+      border-radius: 12px; padding: 10px 14px;
+      display: flex; align-items: center; gap: 12px;
+      transition: border-color .2s, box-shadow .2s; position: relative; overflow: hidden;
+    }
+    .ml-kpi-card::before {
+      content: ''; position: absolute; inset: 0;
+      background: linear-gradient(135deg, rgba(155,93,229,0.03), rgba(6,214,224,0.01));
+      pointer-events: none;
+    }
+    .ml-kpi-card:hover { border-color: rgba(155,93,229,0.25); box-shadow: 0 2px 12px rgba(155,93,229,0.1); }
+    .ml-kpi-icon {
+      width: 36px; height: 36px; border-radius: 10px;
+      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+    }
+    .ml-kpi-icon svg { width: 16px; height: 16px; }
+    .ml-kpi-icon.violet { background: rgba(155,93,229,0.12); color: #9B5DE5; }
+    .ml-kpi-icon.cyan   { background: rgba(6,214,224,0.1);  color: #06D6E0; }
+    .ml-kpi-icon.pink   { background: rgba(241,91,181,0.1); color: #F15BB5; }
+    .ml-kpi-icon.yellow { background: rgba(255,224,102,0.1); color: #FFE066; }
+    .ml-kpi-val { font-family: 'Unbounded', sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--ml-text); }
+    .ml-kpi-lbl { font-size: 0.68rem; color: var(--ml-text-3); margin-top: 1px; font-weight: 500; }
+
+    /* ── Body ── */
+    .ml-body { display: flex; flex: 1; overflow: hidden; gap: 0; }
+
+    /* ── List panel ── */
+    .ml-list-panel {
+      width: 340px; flex-shrink: 0;
+      border-right: 1px solid var(--ml-border);
+      display: flex; flex-direction: column; overflow: hidden;
+      background: var(--ml-surface-2);
+    }
+    @media (max-width: 768px) {
+      .ml-list-panel { width: 100%; border-right: none; }
+      .ml-list-panel.hidden-mobile { display: none; }
+      .ml-detail-panel.hidden-mobile { display: none; }
+    }
+    .ml-list-scroll {
+      flex: 1; overflow-y: auto; padding: 12px;
+      scrollbar-width: thin; scrollbar-color: rgba(155,93,229,0.2) transparent;
+    }
+    .ml-list-header { padding: 10px 12px 0; flex-shrink: 0; }
+    .ml-sort-row {
+      display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 8px;
+    }
+    .ml-count-badge { font-size: 0.75rem; color: var(--ml-text-3); font-weight: 600; }
+    .ml-sort-select {
+      padding: 5px 10px; border-radius: 8px; border: 1px solid var(--ml-border);
+      background: var(--ml-surface); color: var(--ml-text-2); font-family: 'Manrope', sans-serif;
+      font-size: 0.75rem; font-weight: 600; cursor: pointer; outline: none;
+      transition: border-color .15s;
+    }
+    .ml-sort-select:focus { border-color: var(--violet); }
+    .ml-sort-select option { background: #ffffff; color: #1a1433; }
+
+    /* ── Session card ── */
+    .ml-session-card {
+      position: relative;
+      background: var(--ml-surface); border: 1px solid var(--ml-border);
+      border-left: 3px solid rgba(6,214,224,0.45);
+      border-radius: var(--r); padding: 14px 16px; cursor: pointer;
+      transition: all .18s ease; margin-bottom: 8px;
+    }
+    .ml-session-card:hover {
+      border-color: var(--ml-border-h);
+      border-left-color: #06D6E0;
+      box-shadow: 0 8px 32px rgba(6,214,224,0.15);
+      transform: translateY(-2px);
+    }
+    .ml-session-card.active {
+      border-color: rgba(6,214,224,0.35); border-left-color: #06D6E0;
+      background: linear-gradient(135deg, rgba(6,214,224,0.07), rgba(155,93,229,0.04));
+      box-shadow: 0 0 24px rgba(6,214,224,0.1);
+    }
+    .ml-card-row1 {
+      display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px;
+    }
+    .ml-card-title {
+      font-weight: 700; font-size: 0.85rem; color: var(--ml-text);
+      line-height: 1.35; flex: 1;
+      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+    }
+    .ml-card-date { font-size: 0.72rem; color: var(--ml-text-3); white-space: nowrap; flex-shrink: 0; margin-top: 2px; }
+    .ml-card-row2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+    .ml-card-teacher {
+      font-size: 0.72rem; font-weight: 700; color: #06D6E0;
+      background: rgba(6,214,224,0.1); padding: 3px 10px; border-radius: 99px;
+      display: flex; align-items: center; gap: 5px;
+    }
+    .ml-card-class {
+      font-size: 0.72rem; font-weight: 700; color: #9B5DE5;
+      background: rgba(155,93,229,0.1); padding: 3px 10px; border-radius: 99px;
+    }
+    .ml-card-stat {
+      display: flex; align-items: center; gap: 4px;
+      font-size: 0.72rem; color: var(--ml-text-2); font-weight: 500;
+    }
+    .ml-card-stat svg { color: var(--ml-text-3); }
+
+    /* My time badge */
+    .ml-card-mytime {
+      display: inline-flex; align-items: center; gap: 5px;
+      background: linear-gradient(135deg, rgba(6,214,224,0.1), rgba(155,93,229,0.07));
+      border: 1px solid rgba(6,214,224,0.2);
+      border-radius: 99px; padding: 3px 10px;
+      font-size: 0.72rem; font-weight: 700; color: #06D6E0;
+    }
+
+    /* ── Date separator ── */
+    .ml-date-sep {
+      font-size: 0.68rem; font-weight: 700; color: var(--ml-text-3);
+      text-transform: uppercase; letter-spacing: 0.08em;
+      padding: 10px 8px 6px; margin-top: 6px;
+      display: flex; align-items: center; gap: 8px;
+    }
+    .ml-date-sep::before {
+      content: '';
+      width: 16px; height: 16px; border-radius: 6px;
+      background: rgba(6,214,224,0.1);
+      flex-shrink: 0;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2306D6E0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
+      background-repeat: no-repeat; background-position: center; background-size: 10px;
+    }
+
+    /* ── Empty ── */
+    .ml-empty {
+      text-align: center; padding: 56px 24px; color: var(--ml-text-3);
+      display: flex; flex-direction: column; align-items: center; gap: 12px;
+    }
+    .ml-empty svg { display: block; opacity: 0.2; filter: drop-shadow(0 0 20px rgba(6,214,224,0.3)); }
+    .ml-empty p { font-size: 0.85rem; margin: 0; }
+
+    /* ── Pagination ── */
+    .ml-pagination {
+      display: flex; align-items: center; justify-content: center; gap: 8px;
+      padding: 12px; border-top: 1px solid var(--ml-border); flex-shrink: 0;
+    }
+    .ml-page-btn {
+      padding: 6px 14px; border-radius: 10px; border: 1px solid var(--ml-border);
+      background: var(--ml-surface); color: var(--ml-text-2); font-size: 0.78rem; font-weight: 600;
+      cursor: pointer; transition: all .15s;
+    }
+    .ml-page-btn:hover:not(:disabled) { border-color: var(--violet); color: #9B5DE5; box-shadow: 0 0 12px rgba(155,93,229,0.15); }
+    .ml-page-btn:disabled { opacity: 0.35; cursor: default; }
+    .ml-page-info { font-size: 0.78rem; color: var(--ml-text-3); }
+
+    /* ── Skeleton ── */
+    .ml-skeleton {
+      background: linear-gradient(90deg, rgba(6,214,224,0.06) 25%, rgba(6,214,224,0.12) 50%, rgba(6,214,224,0.06) 75%);
+      background-size: 200% 100%; border-radius: 8px;
+      animation: ml-shimmer 1.6s ease-in-out infinite;
+    }
+    @keyframes ml-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+    .ml-sk-card { height: 84px; border-radius: var(--r); margin-bottom: 8px; }
+
+    /* ── Detail panel ── */
+    .ml-detail-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--ml-bg); }
+    .ml-detail-empty {
+      flex: 1; display: flex; flex-direction: column;
+      align-items: center; justify-content: center; gap: 18px;
+      color: var(--ml-text-3); padding: 40px;
+    }
+    .ml-detail-empty svg { opacity: 0.15; filter: drop-shadow(0 0 30px rgba(6,214,224,0.3)); }
+    .ml-detail-empty p { font-size: 0.9rem; margin: 0; }
+    .ml-detail-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+
+    /* ── Detail header ── */
+    .ml-detail-hdr {
+      padding: 10px 22px 8px; border-bottom: 1px solid var(--ml-border);
+      background: var(--ml-surface); flex-shrink: 0;
+    }
+    .ml-detail-back {
+      display: none; align-items: center; gap: 6px;
+      font-size: 0.78rem; font-weight: 600; color: var(--ml-text-3);
+      cursor: pointer; margin-bottom: 12px; background: none; border: none; padding: 0; transition: color .15s;
+    }
+    .ml-detail-back:hover { color: #06D6E0; }
+    @media (max-width: 768px) { .ml-detail-back { display: flex; } }
+    .ml-detail-title {
+      font-family: 'Unbounded', sans-serif; font-size: 0.95rem; font-weight: 800;
+      color: var(--ml-text); margin: 0 0 6px;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .ml-detail-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
+    .ml-meta-item {
+      display: inline-flex; align-items: center; gap: 5px;
+      font-size: 0.7rem; font-weight: 600; color: var(--ml-text-2);
+      background: rgba(6,214,224,0.06); padding: 3px 9px;
+      border-radius: 99px; border: 1px solid rgba(6,214,224,0.12);
+    }
+    .ml-meta-item svg { color: var(--ml-text-3); }
+    .ml-detail-stats { display: flex; gap: 6px; flex-wrap: wrap; }
+    .ml-stat-chip {
+      display: flex; align-items: center; gap: 5px;
+      background: var(--ml-surface); border: 1px solid var(--ml-border);
+      border-radius: 99px; padding: 3px 10px;
+      font-size: 0.7rem; font-weight: 700; color: var(--ml-text-2);
+    }
+    .ml-stat-chip svg { color: var(--ml-text-3); }
+    /* My time chip — highlighted */
+    .ml-stat-chip.mytime {
+      background: linear-gradient(135deg, rgba(6,214,224,0.08), rgba(155,93,229,0.06));
+      border-color: rgba(6,214,224,0.25); color: #06D6E0;
+    }
+
+    /* ── Tabs ── */
+    .ml-tabs {
+      display: flex; gap: 4px; padding: 8px 22px;
+      border-bottom: 1px solid var(--ml-border); background: var(--ml-surface); flex-shrink: 0;
+    }
+    .ml-tab {
+      padding: 6px 14px; border-radius: 8px; border: 1px solid transparent;
+      font-size: 0.79rem; font-weight: 600; color: var(--ml-text-3);
+      cursor: pointer; background: none; transition: all .18s;
+      display: flex; align-items: center; gap: 6px;
+    }
+    .ml-tab:hover { color: var(--ml-text-2); background: rgba(6,214,224,0.07); }
+    .ml-tab.active {
+      color: #06D6E0; background: rgba(6,214,224,0.1);
+      border-color: rgba(6,214,224,0.25); box-shadow: 0 0 16px rgba(6,214,224,0.08);
+    }
+    .ml-tab svg { width: 13px; height: 13px; }
+    .ml-tab-content { flex: 1; overflow: hidden; min-height: 0; }
+
+    /* ── Board tab (identical to lesson-history) ── */
+    .lh-board-wrap { height: 100%; display: flex; flex-direction: column; overflow: hidden; padding: 0 20px 40px 0; }
+    .lh-board-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; position: relative; }
+    .lh-board-topbar {
+      height: 48px; flex-shrink: 0; position: relative;
+      background: #0e0b1e; border-bottom: 1px solid rgba(155,93,229,0.18);
+      display: flex; align-items: center; justify-content: space-between; padding: 0 16px; gap: 8px;
+    }
+    .lh-board-nav-btn {
+      width: 32px; height: 32px; border-radius: 9px;
+      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
+      color: rgba(255,255,255,0.55); cursor: pointer;
+      display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0;
+    }
+    .lh-board-nav-btn:hover:not(:disabled) { background: rgba(6,214,224,0.2); border-color: rgba(6,214,224,0.4); color: #06D6E0; }
+    .lh-board-nav-btn:disabled { opacity: 0.18; cursor: default; }
+    .lh-page-indicator {
+      display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 10px;
+      background: rgba(6,214,224,0.06); border: 1.5px solid rgba(6,214,224,0.18);
+      color: rgba(255,255,255,0.85); cursor: pointer;
+      font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700; transition: all .15s;
+    }
+    .lh-page-indicator:hover { background: rgba(6,214,224,0.12); border-color: rgba(6,214,224,0.35); }
+    .lh-page-indicator.open { background: rgba(6,214,224,0.15); border-color: #06D6E0; box-shadow: 0 0 16px rgba(6,214,224,0.2); }
+    .lh-page-ind-title { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
+    .lh-page-ind-counter { color: rgba(6,214,224,0.75); font-size: 11px; }
+    .lh-page-ind-chevron { color: rgba(255,255,255,0.35); transition: transform .18s; }
+    .lh-page-indicator.open .lh-page-ind-chevron { transform: rotate(180deg); }
+    .lh-pages-popup {
+      position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
+      z-index: 200; background: rgba(18,14,32,0.92); border: 1px solid rgba(6,214,224,0.25);
+      border-radius: 16px; padding: 14px;
+      box-shadow: 0 20px 60px rgba(0,0,0,0.7); backdrop-filter: blur(20px);
+      display: grid; grid-template-columns: repeat(4, 120px); gap: 10px;
+      max-height: 70vh; overflow-y: auto; scrollbar-width: thin;
+    }
+    .lh-pages-popup.hidden { display: none; }
+    @media (max-width: 700px) { .lh-pages-popup { grid-template-columns: repeat(2, 140px); } }
+    .lh-thumb-item {
+      cursor: pointer; border-radius: 10px; border: 2px solid rgba(255,255,255,0.06);
+      background: rgba(28,22,48,0.8); overflow: hidden; transition: all .18s;
+    }
+    .lh-thumb-item:hover { border-color: rgba(6,214,224,0.45); transform: translateY(-2px); }
+    .lh-thumb-item.active { border-color: #06D6E0; box-shadow: 0 0 0 3px rgba(6,214,224,0.2); }
+    .lh-thumb-canvas-wrap { width: 100%; aspect-ratio: 16/9; background: #2d5a2d; overflow: hidden; }
+    .lh-thumb-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
+    .lh-thumb-footer { padding: 6px 8px; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
+    .lh-thumb-lbl { font-size: 10px; color: rgba(255,255,255,0.55); font-family: 'Manrope', sans-serif; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
+    .lh-thumb-num { font-size: 10px; color: rgba(6,214,224,0.65); font-family: 'Manrope', sans-serif; font-weight: 800; }
+    .lh-board-canvas-wrap {
+      flex: 1; position: relative; overflow: hidden; background: #2d5a2d; min-height: 0;
+    }
+    .lh-board-canvas-wrap::after {
+      content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
+      background: linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, transparent 60px), linear-gradient(to top, rgba(0,0,0,0.12) 0%, transparent 80px);
+    }
+    .lh-board-canvas { position: absolute; top: 0; left: 0; display: block; }
+    .lh-board-zoom {
+      position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
+      display: flex; align-items: center; gap: 1px; z-index: 20;
+      background: rgba(10,7,24,0.88); border: 1px solid rgba(6,214,224,0.22);
+      border-radius: 14px; padding: 5px 6px; backdrop-filter: blur(16px);
+      box-shadow: 0 4px 24px rgba(0,0,0,0.5);
+    }
+    .lh-zoom-btn {
+      width: 34px; height: 34px; border-radius: 9px; background: transparent; border: none;
+      color: rgba(255,255,255,0.55); cursor: pointer;
+      display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
+    }
+    .lh-zoom-btn:hover { background: rgba(6,214,224,0.2); color: #06D6E0; }
+    .lh-zoom-lbl { font-size: 12px; color: rgba(255,255,255,0.7); font-family: 'Manrope', sans-serif; font-weight: 700; min-width: 44px; text-align: center; }
+    .lh-zoom-divider { width: 1px; height: 18px; background: rgba(255,255,255,0.08); margin: 0 4px; }
+    .lh-board-export { position: absolute; top: 14px; right: 16px; z-index: 20; }
+    .lh-export-btn {
+      display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px;
+      background: rgba(10,7,24,0.75); border: 1px solid rgba(6,214,224,0.22);
+      color: rgba(255,255,255,0.8); font-size: 11px; font-family: 'Manrope', sans-serif;
+      font-weight: 700; cursor: pointer; transition: all .18s; backdrop-filter: blur(12px);
+    }
+    .lh-export-btn:hover { background: rgba(6,214,224,0.25); color: #fff; border-color: rgba(6,214,224,0.45); }
+    .lh-board-loading {
+      position: absolute; inset: 0; display: flex; flex-direction: column;
+      align-items: center; justify-content: center; gap: 14px;
+      background: #2d5a2d; color: rgba(255,255,255,0.45);
+      font-family: 'Manrope', sans-serif; font-size: 0.82rem; z-index: 30;
+    }
+    .lh-board-spinner {
+      width: 36px; height: 36px; border-radius: 50%;
+      border: 3px solid rgba(6,214,224,0.12); border-top-color: #06D6E0;
+      animation: ml-spin 0.75s linear infinite;
+    }
+    @keyframes ml-spin { to { transform: rotate(360deg); } }
+
+    /* ── Chat tab ── */
+    .lh-chat-wrap {
+      height: 100%; overflow-y: auto; padding: 18px 22px;
+      display: flex; flex-direction: column; gap: 6px;
+      scrollbar-width: thin; scrollbar-color: rgba(6,214,224,0.2) transparent;
+    }
+    .lh-chat-toolbar { display: flex; justify-content: flex-end; padding: 12px 22px 0; flex-shrink: 0; }
+    .lh-msg {
+      display: flex; align-items: flex-start; gap: 12px;
+      padding: 10px 14px; border-radius: 12px; transition: background .15s;
+    }
+    .lh-msg:hover { background: rgba(6,214,224,0.04); }
+    .lh-msg-avatar {
+      width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 13px; font-weight: 700; color: #fff;
+    }
+    .lh-msg-body { flex: 1; min-width: 0; }
+    .lh-msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
+    .lh-msg-name { font-size: 0.8rem; font-weight: 700; color: var(--ml-text); }
+    .lh-msg-time { font-size: 0.72rem; color: var(--ml-text-3); }
+    .lh-msg-text {
+      font-size: 0.83rem; color: var(--ml-text-2); line-height: 1.55;
+      word-break: break-word; white-space: pre-wrap;
+      background: rgba(6,214,224,0.04); padding: 8px 14px; border-radius: 0 12px 12px 12px;
+      border: 1px solid rgba(6,214,224,0.08);
+    }
+    .lh-msg-img { max-width: 220px; border-radius: 10px; margin-top: 6px; display: block; }
+    .lh-msg.pinned {
+      background: rgba(255,224,102,0.04); border: 1px solid rgba(255,224,102,0.12); border-radius: 12px; padding: 10px 14px;
+    }
+    .lh-msg.pinned .lh-msg-name { color: #FFE066; }
+    .lh-msg.mine .lh-msg-text {
+      background: rgba(6,214,224,0.1); border-color: rgba(6,214,224,0.2); color: var(--ml-text);
+    }
+
+    /* ── Notes tab ── */
+    .lh-notes-wrap {
+      height: 100%; overflow-y: auto; padding: 18px 22px;
+      scrollbar-width: thin; scrollbar-color: rgba(6,214,224,0.2) transparent;
+    }
+    .lh-own-note-box {
+      background: rgba(6,214,224,0.04); border: 1px solid rgba(6,214,224,0.15);
+      border-radius: var(--r); padding: 18px; margin-bottom: 12px;
+    }
+    .lh-own-note-lbl { font-size: 0.78rem; font-weight: 700; color: #06D6E0; margin-bottom: 10px; }
+    .lh-note-text { font-size: 0.83rem; color: var(--ml-text-2); line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
+  </style>
+</head>
+<body>
+<div class="app-layout">
+  <aside class="sidebar">
+    <div class="sb-brand">
+      <a href="/dashboard" class="sb-logo"><span class="sb-lbl">Learn<span>Space</span></span></a>
+      <button class="sb-toggle" title="Свернуть меню"><i data-lucide="chevron-left" class="sb-icon"></i></button>
+    </div>
+    <nav class="sb-nav">
+      <button class="sb-link" onclick="lsSearchOpen()" title="Ctrl+K"><i data-lucide="search" class="sb-icon"></i><span class="sb-lbl">Поиск</span></button>
+      <a href="/dashboard"  class="sb-link"><i data-lucide="home" class="sb-icon"></i><span class="sb-lbl">Дашборд</span></a>
+      <a href="/board"      class="sb-link" id="btn-board"   style="display:none"><i data-lucide="layout-dashboard" class="sb-icon"></i><span class="sb-lbl">Доска</span></a>
+      <a href="/classes"    class="sb-link" id="btn-classes" style="display:none"><i data-lucide="graduation-cap" class="sb-icon"></i><span class="sb-lbl">Классы</span></a>
+      <a href="/library"    class="sb-link"><i data-lucide="book-open" class="sb-icon"></i><span class="sb-lbl">Библиотека</span></a>
+      <a href="/theory"     class="sb-link"><i data-lucide="brain" class="sb-icon"></i><span class="sb-lbl">Теория</span></a>
+      <a href="/lab"           class="sb-link"><i data-lucide="atom"          class="sb-icon"></i><span class="sb-lbl">Лаборатория</span></a>
+      <a href="/biochem"       class="sb-link"><i data-lucide="flask-conical" class="sb-icon"></i><span class="sb-lbl">Биохимия</span></a>
+      <a href="/hangman"       class="sb-link"><i data-lucide="gamepad-2"     class="sb-icon"></i><span class="sb-lbl">Виселица</span></a>
+      <a href="/crossword"     class="sb-link"><i data-lucide="grid-3x3"      class="sb-icon"></i><span class="sb-lbl">Кроссворд</span></a>
+      <a href="/pet"           class="sb-link"><i data-lucide="heart"         class="sb-icon"></i><span class="sb-lbl">Питомец</span></a>
+      <a href="/collection"    class="sb-link"><i data-lucide="layers"        class="sb-icon"></i><span class="sb-lbl">Коллекция</span></a>
+      <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"       class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
+      <a href="/red-book.html" class="sb-link"><i data-lucide="leaf"          class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
+      <a href="/classroom"     class="sb-link"><i data-lucide="presentation"  class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <span class="sb-link active"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Мои уроки</span></span>
+      <div class="sb-divider"></div>
+      <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2" class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
+      <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database" class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
+      <a href="/live-quiz"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="radio" class="sb-icon"></i><span class="sb-lbl">Live-квиз</span></a>
+      <a href="/gradebook"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="table" class="sb-icon"></i><span class="sb-lbl">Журнал</span></a>
+      <a href="/admin"         class="sb-link" id="btn-admin" style="display:none"><i data-lucide="settings" class="sb-icon"></i><span class="sb-lbl">Управление</span></a>
+    </nav>
+    <div style="padding:4px 2px">
+      <div id="notif-wrap">
+        <button class="sb-link" id="notif-btn" onclick="LS.notif.toggle()">
+          <i data-lucide="bell" class="sb-icon"></i><span class="sb-lbl">Уведомления</span>
+          <span class="sb-badge" id="notif-badge" style="display:none"></span>
+        </button>
+      </div>
+      <button class="sb-link" id="btn-join" style="display:none" onclick="openJoinModal()"><i data-lucide="user-plus" class="sb-icon"></i><span class="sb-lbl">Вступить в класс</span></button>
+    </div>
+    <div class="sb-foot">
+      <a href="/profile" class="sb-user-row" style="text-decoration:none">
+        <div class="sb-avatar" id="nav-avatar">?</div>
+        <div class="sb-user-info"><div class="sb-user-name" id="nav-user">...</div><div class="sb-user-role" id="nav-role"></div></div>
+      </a>
+    </div>
+  </aside>
+
+  <main class="sb-content">
+    <div class="ml-wrap">
+
+      <!-- Header -->
+      <div class="ml-header">
+        <div class="ml-header-top">
+          <h1 class="ml-title">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg>
+            Мои уроки
+          </h1>
+        </div>
+        <div class="ml-filters">
+          <div class="ml-search">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+            <input type="text" id="ml-search" placeholder="Поиск по названию, учителю..." oninput="onSearch()"/>
+          </div>
+        </div>
+      </div>
+
+      <!-- KPI -->
+      <div class="ml-kpi" id="ml-kpi">
+        <div class="ml-kpi-card">
+          <div class="ml-kpi-icon cyan"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg></div>
+          <div><div class="ml-kpi-val" id="kpi-total">&mdash;</div><div class="ml-kpi-lbl">Уроков посещено</div></div>
+        </div>
+        <div class="ml-kpi-card">
+          <div class="ml-kpi-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
+          <div><div class="ml-kpi-val" id="kpi-time">&mdash;</div><div class="ml-kpi-lbl">Общее время</div></div>
+        </div>
+        <div class="ml-kpi-card">
+          <div class="ml-kpi-icon pink"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div>
+          <div><div class="ml-kpi-val" id="kpi-teachers">&mdash;</div><div class="ml-kpi-lbl">Учителей</div></div>
+        </div>
+        <div class="ml-kpi-card">
+          <div class="ml-kpi-icon yellow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
+          <div><div class="ml-kpi-val" id="kpi-msgs">&mdash;</div><div class="ml-kpi-lbl">Сообщений в чатах</div></div>
+        </div>
+      </div>
+
+      <!-- Body -->
+      <div class="ml-body">
+
+        <!-- Session list -->
+        <div class="ml-list-panel" id="ml-list-panel">
+          <div class="ml-list-header">
+            <div class="ml-sort-row">
+              <span class="ml-count-badge" id="ml-count-badge"></span>
+              <select class="ml-sort-select" id="ml-sort" onchange="onSort()">
+                <option value="newest">Сначала новые</option>
+                <option value="oldest">Сначала старые</option>
+                <option value="longest">По длительности</option>
+              </select>
+            </div>
+          </div>
+          <div class="ml-list-scroll" id="ml-list">
+            <div class="ml-sk-card ml-skeleton"></div>
+            <div class="ml-sk-card ml-skeleton"></div>
+            <div class="ml-sk-card ml-skeleton"></div>
+          </div>
+          <div class="ml-pagination" id="ml-pagination" style="display:none">
+            <button class="ml-page-btn" id="ml-prev" onclick="changePage(-1)">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+            </button>
+            <span class="ml-page-info" id="ml-page-info">1 / 1</span>
+            <button class="ml-page-btn" id="ml-next" onclick="changePage(1)">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+            </button>
+          </div>
+        </div>
+
+        <!-- Detail -->
+        <div class="ml-detail-panel" id="ml-detail-panel">
+          <div class="ml-detail-empty" id="ml-detail-empty">
+            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg>
+            <p>Выберите урок из списка слева</p>
+          </div>
+
+          <div class="ml-detail-content" id="ml-detail-content" style="display:none">
+            <div class="ml-detail-hdr">
+              <button class="ml-detail-back" onclick="backToList()">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+                Назад к списку
+              </button>
+              <h2 class="ml-detail-title" id="det-title">&mdash;</h2>
+              <div class="ml-detail-meta">
+                <span class="ml-meta-item" id="det-date">
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+                </span>
+                <span class="ml-meta-item" id="det-teacher">
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+                </span>
+                <span class="ml-meta-item" id="det-class" style="display:none">
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg>
+                </span>
+              </div>
+              <div class="ml-detail-stats" id="det-stats"></div>
+            </div>
+
+            <!-- Tabs -->
+            <div class="ml-tabs">
+              <button class="ml-tab active" id="tab-board" onclick="switchTab('board')">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
+                Доска
+              </button>
+              <button class="ml-tab" id="tab-chat" onclick="switchTab('chat')">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+                Чат
+                <span id="tab-chat-count" style="display:none;background:rgba(6,214,224,.15);color:#06D6E0;font-size:10px;padding:2px 7px;border-radius:99px;font-weight:700"></span>
+              </button>
+              <button class="ml-tab" id="tab-notes" onclick="switchTab('notes')">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                Мои заметки
+              </button>
+            </div>
+
+            <!-- Tab contents -->
+            <div class="ml-tab-content">
+              <!-- Board -->
+              <div id="tc-board" class="lh-board-wrap">
+                <div class="lh-board-main">
+                  <div class="lh-board-topbar">
+                    <button class="lh-board-nav-btn" id="lh-page-prev" onclick="lhPageNav(-1)" title="Предыдущая">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+                    </button>
+                    <button class="lh-page-indicator" id="lh-page-indicator" onclick="lhTogglePages()">
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
+                      <span class="lh-page-ind-title" id="lh-page-title">Страница 1</span>
+                      <span class="lh-page-ind-counter" id="lh-page-total"></span>
+                      <svg class="lh-page-ind-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+                    </button>
+                    <div class="lh-pages-popup hidden" id="lh-pages-popup"><div id="lh-thumbs"></div></div>
+                    <button class="lh-board-nav-btn" id="lh-page-next" onclick="lhPageNav(1)" title="Следующая">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+                    </button>
+                  </div>
+                  <div class="lh-board-canvas-wrap">
+                    <canvas id="lh-canvas" class="lh-board-canvas"></canvas>
+                    <div class="lh-board-loading" id="lh-board-loading">
+                      <div class="lh-board-spinner"></div>
+                      <span>Загрузка доски...</span>
+                    </div>
+                    <div class="lh-board-export">
+                      <button class="lh-export-btn" onclick="exportBoardPage()">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                        PNG
+                      </button>
+                    </div>
+                    <div class="lh-board-zoom">
+                      <button class="lh-zoom-btn" onclick="lhZoom(-0.25)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
+                      <span class="lh-zoom-lbl" id="lh-zoom-lbl">100%</span>
+                      <button class="lh-zoom-btn" onclick="lhZoom(0.25)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
+                      <div class="lh-zoom-divider"></div>
+                      <button class="lh-zoom-btn" onclick="lhZoomFit()"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg></button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Chat -->
+              <div id="tc-chat" style="display:none;height:100%;flex-direction:column;overflow:hidden">
+                <div class="lh-chat-toolbar" id="lh-chat-toolbar"></div>
+                <div class="lh-chat-wrap" id="lh-chat-list"></div>
+              </div>
+
+              <!-- Notes -->
+              <div id="tc-notes" style="display:none">
+                <div class="lh-notes-wrap" id="lh-notes-list"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</div>
+
+<script src="/js/api.js"></script>
+<script src="/js/mobile.js"></script>
+<script src="/js/whiteboard.js"></script>
+<script>
+let _me = null;
+let _sessions   = [];
+let _allSessions = []; // unfiltered for search
+let _totalPages  = 1;
+let _curPage     = 1;
+let _searchTimer = null;
+let _sortMode    = 'newest';
+let _activeSession = null;
+let _wb = null;
+let _wbPages = [];
+let _wbCurrentPage = 1;
+
+/* ─── Init ─── */
+(function() {
+  const { user } = LS.initPage();
+  if (!user) return;
+  // Teachers and admins belong on lesson-history
+  if (user.role === 'teacher' || user.role === 'admin') {
+    location.replace('/lesson-history');
+    return;
+  }
+  _me = user;
+  if (window.lucide) lucide.createIcons();
+  loadSessions();
+  checkUrlSession();
+})();
+
+function checkUrlSession() {
+  const sp = new URLSearchParams(location.search);
+  const sid = sp.get('session');
+  if (sid) setTimeout(() => openSession(Number(sid)), 600);
+}
+
+/* ─── Sessions list ─── */
+async function loadSessions() {
+  const list = document.getElementById('ml-list');
+  list.innerHTML = '<div class="ml-sk-card ml-skeleton"></div><div class="ml-sk-card ml-skeleton"></div><div class="ml-sk-card ml-skeleton"></div>';
+
+  try {
+    const data = await LS.crGetMyHistory(_curPage);
+    _allSessions = data.sessions || [];
+    _sessions    = _allSessions;
+    _totalPages  = data.pages || 1;
+    applySearch();
+    renderPagination(_curPage, _totalPages, data.total || 0);
+    updateKPI(_allSessions);
+  } catch (e) {
+    list.innerHTML = `<div class="ml-empty"><p>Ошибка загрузки: ${LS.escapeHtml(e.message || 'неизвестная ошибка')}</p></div>`;
+  }
+}
+
+function onSearch() {
+  clearTimeout(_searchTimer);
+  _searchTimer = setTimeout(applySearch, 250);
+}
+
+function applySearch() {
+  const q = (document.getElementById('ml-search')?.value || '').trim().toLowerCase();
+  _sessions = q
+    ? _allSessions.filter(s =>
+        (s.title || '').toLowerCase().includes(q) ||
+        (s.teacher_name || '').toLowerCase().includes(q) ||
+        (s.class_name || '').toLowerCase().includes(q))
+    : _allSessions;
+  renderList(_sessions);
+}
+
+function onSort() {
+  _sortMode = document.getElementById('ml-sort').value;
+  renderList(_sessions);
+}
+
+function renderList(sessions) {
+  const list  = document.getElementById('ml-list');
+  const badge = document.getElementById('ml-count-badge');
+  if (badge) badge.textContent = sessions.length ? plural(sessions.length, 'урок','урока','уроков') : '';
+
+  if (!sessions.length) {
+    list.innerHTML = `<div class="ml-empty">
+      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg>
+      <p>Нет посещённых уроков</p></div>`;
+    return;
+  }
+
+  const sorted = [...sessions].sort((a, b) => {
+    if (_sortMode === 'oldest') return new Date(a.ended_at||0) - new Date(b.ended_at||0);
+    if (_sortMode === 'longest') {
+      const da = a.ended_at && a.created_at ? new Date(a.ended_at)-new Date(a.created_at) : 0;
+      const db_ = b.ended_at && b.created_at ? new Date(b.ended_at)-new Date(b.created_at) : 0;
+      return db_ - da;
+    }
+    return new Date(b.ended_at||0) - new Date(a.ended_at||0);
+  });
+
+  // Group by month
+  const groups = [];
+  let lastKey = null;
+  sorted.forEach(s => {
+    const d   = s.ended_at ? new Date(s.ended_at) : null;
+    const key = d ? d.toLocaleDateString('ru-RU', { month: 'long', year: 'numeric' }) : 'Неизвестно';
+    if (key !== lastKey) { groups.push({ key, items: [] }); lastKey = key; }
+    groups[groups.length-1].items.push(s);
+  });
+
+  list.innerHTML = groups.map(g =>
+    `<div class="ml-date-sep">${g.key}</div>` + g.items.map(s => renderCard(s)).join('')
+  ).join('');
+}
+
+function renderCard(s) {
+  const dateStr = s.ended_at
+    ? new Date(s.ended_at).toLocaleDateString('ru-RU', { day:'numeric', month:'short' })
+    : '—';
+  const dur = s.ended_at && s.created_at
+    ? fmtDuration(Math.round((new Date(s.ended_at) - new Date(s.created_at)) / 1000))
+    : null;
+  const active = _activeSession?.session?.id === s.id ? ' active' : '';
+  const teacher = s.teacher_name
+    ? `<span class="ml-card-teacher">
+        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+        ${LS.escapeHtml(s.teacher_name)}
+       </span>` : '';
+  const cls = s.class_name
+    ? `<span class="ml-card-class">${LS.escapeHtml(s.class_name)}</span>` : '';
+  const durChip = dur
+    ? `<span class="ml-card-mytime">
+        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+        ${dur}
+       </span>` : '';
+  const msgs = (s.message_count||0) > 0
+    ? `<span class="ml-card-stat">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+        ${s.message_count}
+       </span>` : '';
+
+  return `<div class="ml-session-card${active}" data-id="${s.id}" onclick="openSession(${s.id})">
+    <div class="ml-card-row1">
+      <div class="ml-card-title">${LS.escapeHtml(s.title || 'Без названия')}</div>
+      <div class="ml-card-date">${dateStr}</div>
+    </div>
+    <div class="ml-card-row2">${teacher}${cls}${durChip}${msgs}</div>
+  </div>`;
+}
+
+function renderPagination(page, total, count) {
+  const pg   = document.getElementById('ml-pagination');
+  const prev = document.getElementById('ml-prev');
+  const next = document.getElementById('ml-next');
+  const info = document.getElementById('ml-page-info');
+  pg.style.display = total > 1 ? 'flex' : 'none';
+  prev.disabled    = page <= 1;
+  next.disabled    = page >= total;
+  info.textContent = `${page} / ${total}`;
+}
+
+function changePage(dir) {
+  _curPage = Math.max(1, Math.min(_totalPages, _curPage + dir));
+  loadSessions();
+}
+
+function updateKPI(sessions) {
+  const durSec = sessions.reduce((a, s) => {
+    if (!s.ended_at || !s.created_at) return a;
+    return a + Math.round((new Date(s.ended_at) - new Date(s.created_at)) / 1000);
+  }, 0);
+  const teachers = new Set(sessions.map(s => s.teacher_name).filter(Boolean)).size;
+  const msgs     = sessions.reduce((a, s) => a + (s.message_count || 0), 0);
+
+  document.getElementById('kpi-total').textContent    = sessions.length;
+  document.getElementById('kpi-time').textContent     = fmtDuration(durSec);
+  document.getElementById('kpi-teachers').textContent = teachers;
+  document.getElementById('kpi-msgs').textContent     = msgs;
+}
+
+/* ─── Session detail ─── */
+async function openSession(id) {
+  document.querySelectorAll('.ml-session-card').forEach(el => {
+    el.classList.toggle('active', Number(el.dataset.id) === id);
+  });
+  document.getElementById('ml-detail-empty').style.display   = 'none';
+  document.getElementById('ml-detail-content').style.display = 'flex';
+  document.getElementById('ml-detail-content').style.flexDirection = 'column';
+
+  if (window.innerWidth <= 768) {
+    document.getElementById('ml-list-panel').classList.add('hidden-mobile');
+  }
+
+  const url = new URL(location.href);
+  url.searchParams.set('session', id);
+  history.replaceState({}, '', url);
+
+  _chatLoaded = false; _notesLoaded = false;
+
+  try {
+    const data = await LS.crGetSessionSummary(id);
+    _activeSession = data;
+    renderDetailHeader(data);
+    _wbPages = data.pages || [];
+    _wbCurrentPage = 1;
+    switchTab('board');
+    renderThumbs();
+    loadBoardPage(1);
+  } catch (e) {
+    LS.toast('Ошибка загрузки урока: ' + (e.message || ''), 'error');
+  }
+}
+
+function renderDetailHeader(data) {
+  const s  = data.session;
+  const st = data.stats;
+  const me = data.attendance?.find(a => a.user_id === _me?.id);
+
+  document.getElementById('det-title').textContent = s.title || 'Без названия';
+
+  const d = s.ended_at ? new Date(s.ended_at) : null;
+  const dateEl = document.getElementById('det-date');
+  dateEl.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+    ${d ? d.toLocaleDateString('ru-RU', { day:'numeric', month:'long', year:'numeric' }) : '—'}`;
+
+  const teachEl = document.getElementById('det-teacher');
+  teachEl.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+    ${LS.escapeHtml(s.teacher_name || '')}`;
+
+  const clsEl = document.getElementById('det-class');
+  if (s.class_name) {
+    clsEl.style.display = 'flex';
+    clsEl.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg>
+      ${LS.escapeHtml(s.class_name)}`;
+  } else {
+    clsEl.style.display = 'none';
+  }
+
+  // Stats chips
+  const chips = [];
+  if (st.duration_sec) chips.push(`<span class="ml-stat-chip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Длительность: ${fmtDuration(st.duration_sec)}</span>`);
+  if (me?.duration_sec) chips.push(`<span class="ml-stat-chip mytime"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Я провёл: ${fmtDuration(me.duration_sec)}</span>`);
+  if (st.page_count > 1) chips.push(`<span class="ml-stat-chip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>${st.page_count} стр.</span>`);
+  if (st.message_count) chips.push(`<span class="ml-stat-chip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>${st.message_count} сообщ.</span>`);
+  document.getElementById('det-stats').innerHTML = chips.join('');
+
+  // Chat count badge
+  const cc = document.getElementById('tab-chat-count');
+  if (cc && st.message_count) {
+    cc.style.display = 'inline';
+    cc.textContent = st.message_count;
+  } else if (cc) {
+    cc.style.display = 'none';
+  }
+}
+
+function backToList() {
+  document.getElementById('ml-list-panel').classList.remove('hidden-mobile');
+  document.getElementById('ml-detail-content').style.display = 'none';
+  document.getElementById('ml-detail-empty').style.display   = 'flex';
+  const url = new URL(location.href);
+  url.searchParams.delete('session');
+  history.replaceState({}, '', url);
+}
+
+/* ─── Tabs ─── */
+let _chatLoaded = false, _notesLoaded = false;
+
+function switchTab(name) {
+  ['board','chat','notes'].forEach(t => {
+    document.getElementById(`tab-${t}`)?.classList.toggle('active', t === name);
+    const tc = document.getElementById(`tc-${t}`);
+    if (tc) tc.style.display = t === name ? (t === 'chat' || t === 'board' ? 'flex' : 'block') : 'none';
+  });
+  if (name === 'chat'  && _activeSession && !_chatLoaded)  loadChat();
+  if (name === 'notes' && _activeSession && !_notesLoaded) loadNotes();
+}
+
+/* ─── Board ─── */
+function renderThumbs() {
+  const container = document.getElementById('lh-thumbs');
+  if (!container) return;
+  container.innerHTML = '';
+  container.style.cssText = 'display:contents';
+  _wbPages.forEach(p => {
+    const item = document.createElement('div');
+    item.className = 'lh-thumb-item' + (p.page_num === _wbCurrentPage ? ' active' : '');
+    item.dataset.page = p.page_num;
+    item.onclick = () => { loadBoardPage(p.page_num); lhClosePages(); };
+    const wrap = document.createElement('div'); wrap.className = 'lh-thumb-canvas-wrap';
+    const cvs  = document.createElement('canvas'); cvs.width = 192; cvs.height = 108;
+    wrap.appendChild(cvs);
+    const footer = document.createElement('div'); footer.className = 'lh-thumb-footer';
+    const lbl = document.createElement('span'); lbl.className = 'lh-thumb-lbl'; lbl.textContent = p.name || `Стр. ${p.page_num}`;
+    const num = document.createElement('span'); num.className = 'lh-thumb-num'; num.textContent = p.page_num;
+    footer.append(lbl, num);
+    item.append(wrap, footer);
+    container.appendChild(item);
+  });
+  updateBoardTopbar();
+}
+
+let _pagesPopupOpen = false;
+function lhTogglePages() { _pagesPopupOpen ? lhClosePages() : lhOpenPages(); }
+function lhOpenPages() {
+  _pagesPopupOpen = true;
+  document.getElementById('lh-pages-popup').classList.remove('hidden');
+  document.getElementById('lh-page-indicator').classList.add('open');
+  if (_activeSession) _renderAllThumbs(_activeSession.session.id);
+}
+function lhClosePages() {
+  _pagesPopupOpen = false;
+  document.getElementById('lh-pages-popup')?.classList.add('hidden');
+  document.getElementById('lh-page-indicator')?.classList.remove('open');
+}
+
+async function loadBoardPage(pageNum) {
+  if (!_activeSession) return;
+  const sessionId = _activeSession.session.id;
+  _wbCurrentPage = pageNum;
+  document.querySelectorAll('.lh-thumb-item').forEach(el => {
+    const active = Number(el.dataset.page) === pageNum;
+    el.classList.toggle('active', active);
+    if (active) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  });
+  updateBoardTopbar();
+
+  const loading = document.getElementById('lh-board-loading');
+  loading.style.display = 'flex';
+  try {
+    const res = await LS.get(`/api/classroom/${sessionId}/strokes?page_num=${pageNum}`);
+    if (_wb) { _wb.destroy(); _wb = null; }
+    await new Promise(r => requestAnimationFrame(r));
+    _wb = new Whiteboard(document.getElementById('lh-canvas'), {
+      readOnly: true,
+      onZoomChange: z => {
+        const el = document.getElementById('lh-zoom-lbl');
+        if (el) el.textContent = Math.round(z * 100) + '%';
+      },
+    });
+    _wb.setTemplate(res.template || 'blank');
+    _wb.loadStrokes(res.strokes || []);
+    _wb.zoomFitStrokes();
+    const thumbEl = document.querySelector(`.lh-thumb-item[data-page="${pageNum}"] canvas`);
+    if (thumbEl) _wb.renderThumbnail(thumbEl);
+    loading.style.display = 'none';
+    _renderAllThumbs(sessionId);
+  } catch {
+    loading.innerHTML = '<span style="color:rgba(255,100,100,.7)">Ошибка загрузки страницы</span>';
+  }
+}
+
+function updateBoardTopbar() {
+  const cur = _wbCurrentPage, total = _wbPages.length;
+  const page = _wbPages.find(p => p.page_num === cur);
+  const idx  = _wbPages.findIndex(p => p.page_num === cur) + 1;
+  const titleEl = document.getElementById('lh-page-title');
+  const totalEl = document.getElementById('lh-page-total');
+  const prevBtn = document.getElementById('lh-page-prev');
+  const nextBtn = document.getElementById('lh-page-next');
+  if (titleEl) titleEl.textContent = page?.name || `Страница ${cur}`;
+  if (totalEl) totalEl.textContent = total > 1 ? `${idx} / ${total}` : '';
+  if (prevBtn) prevBtn.disabled = idx <= 1;
+  if (nextBtn) nextBtn.disabled = idx >= total;
+}
+
+function lhPageNav(dir) {
+  const idx  = _wbPages.findIndex(p => p.page_num === _wbCurrentPage);
+  const next = _wbPages[idx + dir];
+  if (next) loadBoardPage(next.page_num);
+}
+
+let _thumbRenderJob = null;
+async function _renderAllThumbs(sessionId) {
+  const jobId = Date.now();
+  _thumbRenderJob = jobId;
+  for (const p of _wbPages) {
+    if (_thumbRenderJob !== jobId) return;
+    if (p.page_num === _wbCurrentPage) continue;
+    const thumbEl = document.querySelector(`.lh-thumb-item[data-page="${p.page_num}"] canvas`);
+    if (!thumbEl || thumbEl._rendered) continue;
+    try {
+      const res = await LS.get(`/api/classroom/${sessionId}/strokes?page_num=${p.page_num}`);
+      if (_thumbRenderJob !== jobId) return;
+      const tmpCvs = document.createElement('canvas'); tmpCvs.width = 192; tmpCvs.height = 108;
+      const tmpWb  = new Whiteboard(tmpCvs, { readOnly: true });
+      tmpWb.setTemplate(res.template || 'blank');
+      tmpWb.loadStrokes(res.strokes || []);
+      tmpWb.renderThumbnail(thumbEl);
+      tmpWb.destroy();
+      thumbEl._rendered = true;
+    } catch {}
+    await new Promise(r => setTimeout(r, 80));
+  }
+}
+
+function lhZoom(delta) {
+  if (!_wb) return;
+  _wb.zoomTo(Math.max(0.25, Math.min(4, (_wb._zoom || 1) + delta)));
+  document.getElementById('lh-zoom-lbl').textContent = Math.round(_wb._zoom * 100) + '%';
+}
+function lhZoomFit() { if (_wb) _wb.zoomFitStrokes(); }
+function exportBoardPage() { if (_wb) _wb.exportPNG(); }
+
+/* ─── Chat ─── */
+async function loadChat() {
+  _chatLoaded = true;
+  const sessionId = _activeSession.session.id;
+  const container = document.getElementById('lh-chat-list');
+  container.innerHTML = '<div style="padding:20px;text-align:center;color:var(--ml-text-3)">Загрузка...</div>';
+
+  try {
+    const data = await LS.crGetChat(sessionId);
+    const messages = data.messages || [];
+    if (!messages.length) {
+      container.innerHTML = '<div class="ml-empty"><p>Чат был пуст</p></div>';
+      return;
+    }
+    container.innerHTML = messages.map(m => renderMsg(m)).join('');
+    container.scrollTop = container.scrollHeight;
+  } catch {
+    container.innerHTML = '<div class="ml-empty"><p>Ошибка загрузки чата</p></div>';
+  }
+}
+
+function renderMsg(m) {
+  const time  = m.created_at ? new Date(m.created_at).toLocaleTimeString('ru-RU', { hour:'2-digit', minute:'2-digit' }) : '';
+  const color = strToColor(m.user_name || '');
+  const ini   = (m.user_name || '?')[0].toUpperCase();
+  const isMine = m.user_id === _me?.id;
+  let body = '';
+  if (m.message) body += `<div class="lh-msg-text">${LS.escapeHtml(m.message)}</div>`;
+  if (m.attachment_url) body += `<img class="lh-msg-img" src="${LS.escapeHtml(m.attachment_url)}" alt="вложение" loading="lazy"/>`;
+  return `<div class="lh-msg${m.is_pinned ? ' pinned' : ''}${isMine ? ' mine' : ''}">
+    <div class="lh-msg-avatar" style="background:${color}">${ini}</div>
+    <div class="lh-msg-body">
+      <div class="lh-msg-head">
+        <span class="lh-msg-name">${LS.escapeHtml(m.user_name || '?')}${isMine ? ' <span style="font-size:10px;color:var(--ml-text-3);font-weight:500">(вы)</span>' : ''}</span>
+        <span class="lh-msg-time">${time}</span>
+      </div>
+      ${body}
+    </div>
+  </div>`;
+}
+
+/* ─── Notes ─── */
+async function loadNotes() {
+  _notesLoaded = true;
+  const sessionId = _activeSession.session.id;
+  const container = document.getElementById('lh-notes-list');
+  container.innerHTML = '<div style="padding:20px;text-align:center;color:var(--ml-text-3)">Загрузка...</div>';
+  try {
+    const data    = await LS.get(`/api/classroom/${sessionId}/notes`);
+    const content = data.content || '';
+    if (!content.trim()) {
+      container.innerHTML = `<div class="ml-empty"><p>Вы не оставили заметок к этому уроку</p></div>`;
+      return;
+    }
+    container.innerHTML = `<div class="lh-own-note-box">
+      <div class="lh-own-note-lbl">Мои заметки</div>
+      <div class="lh-note-text">${LS.escapeHtml(content)}</div>
+    </div>`;
+  } catch {
+    container.innerHTML = `<div class="ml-empty"><p>Ошибка загрузки заметок</p></div>`;
+  }
+}
+
+/* ─── Helpers ─── */
+function fmtDuration(sec) {
+  if (!sec || sec < 0) return '0 мин';
+  const h = Math.floor(sec / 3600);
+  const m = Math.floor((sec % 3600) / 60);
+  if (h > 0) return `${h}ч ${m}м`;
+  if (m > 0) return `${m} мин`;
+  return `${sec} сек`;
+}
+
+function plural(n, one, few, many) {
+  const mod10 = n % 10, mod100 = n % 100;
+  if (mod10 === 1 && mod100 !== 11) return `${n} ${one}`;
+  if (mod10 >= 2 && mod10 <= 4 && (mod100 < 10 || mod100 >= 20)) return `${n} ${few}`;
+  return `${n} ${many}`;
+}
+
+function strToColor(str) {
+  const colors = ['#9B5DE5','#06D6E0','#FF6B6B','#4361EE','#A8E063','#F15BB5','#FF9F43','#06D6A0'];
+  let h = 0;
+  for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) & 0xffff;
+  return colors[h % colors.length];
+}
+
+window.addEventListener('resize', () => {
+  if (window.innerWidth > 768) document.getElementById('ml-list-panel').classList.remove('hidden-mobile');
+});
+
+document.addEventListener('click', e => {
+  if (!_pagesPopupOpen) return;
+  const popup = document.getElementById('lh-pages-popup');
+  const btn   = document.getElementById('lh-page-indicator');
+  if (popup && !popup.contains(e.target) && btn && !btn.contains(e.target)) lhClosePages();
+});
+
+document.addEventListener('keydown', e => {
+  if (!_activeSession || e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+  const boardVisible = document.getElementById('tc-board')?.style.display !== 'none';
+  if (!boardVisible) return;
+  if (e.key === 'ArrowLeft'  || e.key === 'ArrowUp')   { e.preventDefault(); lhPageNav(-1); }
+  if (e.key === 'ArrowRight' || e.key === 'ArrowDown')  { e.preventDefault(); lhPageNav(1); }
+  if (e.key === '0') lhZoomFit();
+});
+</script>
+</body>
+</html>
diff --git a/frontend/pet.html b/frontend/pet.html
index e595588..0a0ad9b 100644
--- a/frontend/pet.html
+++ b/frontend/pet.html
@@ -351,6 +351,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2" class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html"           class="sb-link"><i data-lucide="leaf"     class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom"     class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/profile.html b/frontend/profile.html
index 67b5c1a..c1a2829 100644
--- a/frontend/profile.html
+++ b/frontend/profile.html
@@ -550,6 +550,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"    class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html"           class="sb-link"><i data-lucide="leaf"     class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom" class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/frontend/question-bank.html b/frontend/question-bank.html
index 9c4e69c..03e0961 100644
--- a/frontend/question-bank.html
+++ b/frontend/question-bank.html
@@ -8,6 +8,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="/css/ls.css" />
   <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" />
   <style>
     .sb-content { background: #f4f5f8; overflow: hidden; display: flex; flex-direction: column; }
 
@@ -243,6 +244,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"          class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html" class="sb-link"><i data-lucide="leaf"             class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom"     class="sb-link"><i data-lucide="presentation"     class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link nav-active"><i data-lucide="database" class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
@@ -382,6 +384,8 @@
 </div>
 
 <script src="/js/api.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
 <script>
   if (!LS.requireAuth()) throw new Error();
 
@@ -409,6 +413,22 @@
   };
   const SUBJECT_NAMES = { bio: 'Биология', chem: 'Химия', math: 'Математика', phys: 'Физика', other: 'Другое' };
 
+  /* ── math rendering ── */
+  const _MATH_DELIMS = [
+    { left: '\\(', right: '\\)', display: false },
+    { left: '\\[', right: '\\]', display: true  },
+    { left: '$',   right: '$',   display: false  },
+  ];
+  function mathHtml(text) {
+    if (!text) return '';
+    const tmp = document.createElement('span');
+    tmp.textContent = text;
+    if (window.renderMathInElement) {
+      try { renderMathInElement(tmp, { delimiters: _MATH_DELIMS, throwOnError: false }); } catch {}
+    }
+    return tmp.innerHTML;
+  }
+
   /* ── sidebar ── */
   function toggleSidebar() {
     const layout = document.querySelector('.app-layout');
@@ -570,7 +590,7 @@
           <span class="badge ${diffCls}">${diffLabel}</span>
           <span class="badge badge-type">${esc(typeLabel)}</span>
         </div>
-        <div class="qc-text">${esc(q.text)}</div>
+        <div class="qc-text">${mathHtml(q.text)}</div>
         <div class="qc-footer">
           <span class="qc-topic"><i data-lucide="tag" style="width:11px;height:11px"></i> ${esc(q.topic || SUBJECT_NAMES[q.subject_slug] || '—')}</span>
           ${optsCount ? `<span class="qc-opts-count"><i data-lucide="list" style="width:11px;height:11px"></i> ${optsCount} вар.</span>` : ''}
@@ -578,20 +598,20 @@
 
       if (isExpanded) {
         html += `<div class="qc-preview">
-          <div class="qc-preview-text">${esc(q.text)}</div>`;
+          <div class="qc-preview-text">${mathHtml(q.text)}</div>`;
         if ((q.options || []).length) {
           html += '<div class="qc-options">';
           q.options.forEach((opt, idx) => {
             const letter = String.fromCharCode(65 + idx);
             html += `<div class="qc-option${opt.is_correct ? ' correct' : ''}">
               <div class="qc-option-marker">${opt.is_correct ? '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>' : letter}</div>
-              <span>${esc(opt.text)}</span>
+              <span>${mathHtml(opt.text)}</span>
             </div>`;
           });
           html += '</div>';
         }
         if (q.explanation) {
-          html += `<div class="qc-explanation"><strong>Пояснение:</strong> ${esc(q.explanation)}</div>`;
+          html += `<div class="qc-explanation"><strong>Пояснение:</strong> ${mathHtml(q.explanation)}</div>`;
         }
         html += '</div>';
       }
diff --git a/frontend/red-book-biomes.html b/frontend/red-book-biomes.html
index fe2ed79..6fb1ef3 100644
--- a/frontend/red-book-biomes.html
+++ b/frontend/red-book-biomes.html
@@ -167,6 +167,7 @@
       <div class="bio-topbar">
         <a href="/red-book.html" style="color:var(--rb-muted);text-decoration:none;font-size:12px;border:1px solid var(--rb-border);padding:6px 12px;border-radius:8px;"><svg class="ic" viewBox="0 0 24 24"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg> Красная книга</a>
       <a href="/classroom" class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
         <h1><svg class="ic" viewBox="0 0 24 24"><path d="M17 14 12 3 7 14"/><path d="M4 20 8 11h8l4 9"/><line x1="12" y1="20" x2="12" y2="22"/></svg> Биомы Беларуси</h1>
         <div class="biome-tabs" id="biome-tabs"></div>
         <button id="sound-btn" onclick="toggleSound()" title="Звуки биома" style="display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--rb-border);color:var(--rb-muted);font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer;flex-shrink:0;transition:all .2s;"><svg class="ic" viewBox="0 0 24 24"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg> Звук</button>
diff --git a/frontend/red-book-ecosystem.html b/frontend/red-book-ecosystem.html
index 28eaf92..eab5c63 100644
--- a/frontend/red-book-ecosystem.html
+++ b/frontend/red-book-ecosystem.html
@@ -170,6 +170,7 @@
       <div class="eco-topbar">
         <a href="/red-book.html" class="eco-back"><svg class="ic" viewBox="0 0 24 24"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg> Красная книга</a>
       <a href="/classroom" class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
         <h1><svg class="ic" viewBox="0 0 24 24"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg> Пищевые сети · Симулятор экосистем</h1>
         <span style="margin-left:auto;font-size:12px;color:var(--rb-muted)" id="node-count"></span>
         <button onclick="toggleEnergyFlow()" id="btn-energy" title="Анимация потока энергии" style="background:transparent;border:1px solid var(--rb-border);color:var(--rb-muted);font-size:12px;padding:6px 12px;border-radius:8px;cursor:pointer;transition:all .2s"><svg class="ic" viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> Поток</button>
diff --git a/frontend/red-book-games.html b/frontend/red-book-games.html
index f1703bf..6c9c21b 100644
--- a/frontend/red-book-games.html
+++ b/frontend/red-book-games.html
@@ -197,6 +197,7 @@
       <p class="rb-sb-section">РАЗДЕЛЫ</p>
       <a href="/red-book.html"            class="sb-link"><i data-lucide="leaf"         class="sb-icon"></i><span class="sb-lbl">Каталог видов</span></a>
       <a href="/classroom" class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <a href="/collection-rb.html"       class="sb-link"><i data-lucide="star"         class="sb-icon"></i><span class="sb-lbl">Моя коллекция</span></a>
       <a href="/red-book-ecosystem.html"  class="sb-link"><i data-lucide="git-fork"     class="sb-icon"></i><span class="sb-lbl">Пищевые сети</span></a>
       <a href="/red-book-biomes.html"     class="sb-link"><i data-lucide="trees"        class="sb-icon"></i><span class="sb-lbl">Биомы</span></a>
diff --git a/frontend/red-book.html b/frontend/red-book.html
index be4e785..a6841d3 100644
--- a/frontend/red-book.html
+++ b/frontend/red-book.html
@@ -517,6 +517,7 @@
       <p class="rb-sb-section">РАЗДЕЛЫ</p>
       <a href="/red-book.html"           class="sb-link active"><i data-lucide="leaf"     class="sb-icon"></i><span class="sb-lbl">Каталог видов</span></a>
       <a href="/classroom" class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <a href="/collection-rb.html"      class="sb-link"><i data-lucide="star"            class="sb-icon"></i><span class="sb-lbl">Моя коллекция</span></a>
       <a href="/red-book-ecosystem.html" class="sb-link"><i data-lucide="git-fork"        class="sb-icon"></i><span class="sb-lbl">Пищевые сети</span></a>
       <a href="/red-book-biomes.html"    class="sb-link"><i data-lucide="trees"           class="sb-icon"></i><span class="sb-lbl">Биомы</span></a>
diff --git a/frontend/theory.html b/frontend/theory.html
index 1cd0072..157052f 100644
--- a/frontend/theory.html
+++ b/frontend/theory.html
@@ -305,6 +305,7 @@
       <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"    class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
       <a href="/red-book.html"           class="sb-link"><i data-lucide="leaf"     class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
       <a href="/classroom" class="sb-link"><i data-lucide="presentation" class="sb-icon"></i><span class="sb-lbl">Онлайн-урок</span></a>
+      <a href="/lesson-history" class="sb-link"><i data-lucide="archive" class="sb-icon"></i><span class="sb-lbl">Архив уроков</span></a>
       <div class="sb-divider"></div>
       <a href="/analytics"     class="sb-link sb-teacher-only" style="display:none"><i data-lucide="bar-chart-2"      class="sb-icon"></i><span class="sb-lbl">Аналитика</span></a>
       <a href="/question-bank" class="sb-link sb-teacher-only" style="display:none"><i data-lucide="database"         class="sb-icon"></i><span class="sb-lbl">Банк вопросов</span></a>
diff --git a/js/api.js b/js/api.js
index 9eb7851..4302d8d 100644
--- a/js/api.js
+++ b/js/api.js
@@ -672,6 +672,8 @@ window.LS = {
   parentGetLinks, parentCreateLink, parentUpdateLink, parentDeleteLink,
   crCreateSession, crGetSession, crEndSession, crGetActiveByClass, crGetMyActive,
   crJoin, crLeave, crSendChat, crGetChat, crGetAttendance, crSignal, crGetOnlineStudents, crGetMySession,
+  crGetMyHistory, crGetClassHistory, crGetSessionSummary, crExportChatUrl, crGetAllNotes, crDeleteHistory,
+  crAdminGetAllHistory, crAdminGetTeachersList,
   escapeHtml, esc,
   parseDate, fmtRelTime, safeHref,
   initPage,
@@ -985,6 +987,28 @@ async function crGetChat(id)                 { return req('GET',    `/classroom/
 async function crGetAttendance(id)           { return req('GET',    `/classroom/${id}/attendance`); }
 async function crSignal(id, targetUserId, payload) { return req('POST', `/classroom/${id}/signal`, { target_user_id: targetUserId, payload }); }
 async function crGetOnlineStudents()                { return req('GET',  '/classroom/online-students'); }
+async function crGetMyHistory(page = 1)             { return req('GET',  `/classroom/my/history?page=${page}`); }
+async function crGetClassHistory(classId, page = 1, search = '') {
+  const q = search ? `&search=${encodeURIComponent(search)}` : '';
+  return req('GET', `/classroom/class/${classId}/history?page=${page}${q}`);
+}
+async function crGetSessionSummary(id)              { return req('GET',  `/classroom/${id}/summary`); }
+async function crExportChatUrl(id)                  { return `/api/classroom/${id}/chat/export`; }
+async function crGetAllNotes(id)                    { return req('GET',  `/classroom/${id}/notes/all`); }
+async function crDeleteHistory(id)                  { return req('DELETE', `/classroom/${id}/history`); }
+async function crAdminGetAllHistory(p = {}) {
+  const q = new URLSearchParams();
+  if (p.page)      q.set('page',      p.page);
+  if (p.limit)     q.set('limit',     p.limit);
+  if (p.search)    q.set('search',    p.search);
+  if (p.teacher)   q.set('teacher',   p.teacher);
+  if (p.class_id)  q.set('class_id',  p.class_id);
+  if (p.date_from) q.set('date_from', p.date_from);
+  if (p.date_to)   q.set('date_to',   p.date_to);
+  if (p.sort)      q.set('sort',      p.sort);
+  return req('GET', `/classroom/admin/sessions?${q}`);
+}
+async function crAdminGetTeachersList() { return req('GET', '/classroom/admin/teachers-list'); }
 
 /* ── gamification admin ────────────────────────────────────────────────── */
 async function adminGamAward(data)               { return req('POST',   '/gamification/admin/award', data); }
@@ -1046,6 +1070,7 @@ async function adminGamGetUser(id)               { return req('GET',    `/gamifi
   styleEl.textContent = STYLE;
 
   document.addEventListener('DOMContentLoaded', () => {
+    if (window._lsLiveOverriddenByClassroom) return;
     document.head.appendChild(styleEl);
     document.body.appendChild(el);
   });
@@ -1053,15 +1078,38 @@ async function adminGamGetUser(id)               { return req('GET',    `/gamifi
   let currentLiveId = null;
   let answered      = false;
 
+  /* render text that may contain \(...\) or \[...\] LaTeX using window.katex */
+  function _mathHtml(text) {
+    if (!text) return '';
+    const kat = window.katex;
+    if (!kat) { const d = document.createElement('span'); d.textContent = text; return d.innerHTML; }
+    let out = '', i = 0;
+    while (i < text.length) {
+      const ii = text.indexOf('\\(', i), bi = text.indexOf('\\[', i);
+      let next = -1, close = '', disp = false;
+      if (ii >= 0 && (bi < 0 || ii <= bi)) { next = ii; close = '\\)'; disp = false; }
+      else if (bi >= 0)                      { next = bi; close = '\\]'; disp = true;  }
+      const plain = document.createElement('span');
+      if (next < 0) { plain.textContent = text.slice(i); out += plain.innerHTML; break; }
+      plain.textContent = text.slice(i, next); out += plain.innerHTML;
+      const ci = text.indexOf(close, next + 2);
+      if (ci < 0) { const p2 = document.createElement('span'); p2.textContent = text.slice(next); out += p2.innerHTML; break; }
+      try { out += kat.renderToString(text.slice(next + 2, ci), { displayMode: disp, throwOnError: false }); }
+      catch { const p2 = document.createElement('span'); p2.textContent = text.slice(next, ci + close.length); out += p2.innerHTML; }
+      i = ci + close.length;
+    }
+    return out;
+  }
+
   function openOverlay(liveId, question, options) {
     currentLiveId = liveId;
     answered      = false;
-    document.getElementById('lslq-text').textContent = question.text;
+    document.getElementById('lslq-text').innerHTML = _mathHtml(question.text);
     const keys = 'АБВГДЕ';
     document.getElementById('lslq-opts').innerHTML = (options || []).map((o, i) => `
       <div class="ls-live-opt" data-id="${o.id}" onclick="window._lsLiveAnswer(${liveId},${o.id},this)">
         <span class="ls-live-opt-key">${keys[i] || i+1}</span>
-        <span>${esc(o.text)}</span>
+        <span>${_mathHtml(o.text)}</span>
       </div>`).join('');
     document.getElementById('lslq-status').textContent = 'Выберите ответ';
     document.getElementById('ls-live-overlay').classList.add('open');
@@ -1079,7 +1127,7 @@ async function adminGamGetUser(id)               { return req('GET',    `/gamifi
       return `<div class="ls-live-opt ${cls}" style="flex-direction:column;align-items:flex-start;gap:4px">
         <div style="display:flex;align-items:center;gap:10px;width:100%">
           <span class="ls-live-opt-key">${keys[i]||i+1}</span>
-          <span style="flex:1">${esc(o.text)}</span>
+          <span style="flex:1">${_mathHtml(o.text)}</span>
           <span class="ls-live-result-pct">${pct}%</span>
         </div>
         <div class="ls-live-result-bar" style="width:100%">
@@ -1103,6 +1151,7 @@ async function adminGamGetUser(id)               { return req('GET',    `/gamifi
   };
 
   document.addEventListener('DOMContentLoaded', () => {
+    if (window._lsLiveOverriddenByClassroom) return;
     connectSSE(d => {
       if (d.type === 'live_question') {
         openOverlay(d.liveId, d.question, d.question?.options);